HTML模写は、実際のレイアウトを再現しながら「構造」と「見た目」を同時に身につける練習方法です。
この002では、ページの第一印象を決める ヒーローセクション を題材に、HTMLとCSSの基礎を固めます。
この課題は、まず 静的なヒーローを完成させ、余力があれば カーテンアニメーションで演出を追加する構成にすると、学びがきれいに積み上がります。
このHTML模写で身につくこと
- ヒーローの基本構造（header / main / section）
- 見出し（キャッチコピー）の配置と読みやすさ
- 背景画像（またはヒーロー画像）の扱い方
- 余白設計（paddingで整える）
- スマホで崩れないレスポンシブ対応
- 余力があれば：カーテンアニメーションによる演出
模写の完成条件（合格ライン）
最低限、ここまでできたら完成です。
- ヒーローに「キャッチコピー（見出し＋補助文）」がある
- 背景画像（または画像要素）が表示され、ヒーローとして成立している
- 余白と文字サイズが整っていて読みやすい
- 画面幅を変えても破綻しない（横スクロールが出ない）
加点（おすすめ）
- PCとスマホで、文字サイズ・余白が最適化されている
- ボタン（CTA）が付いている（あれば実務感が上がる）
- カーテンアニメーションが付いている
HTML模写の進め方
1）まずHTMLだけで骨組みを作る
最初にCSSを触らず、構造だけ作ります。
- heroセクション
- 見出し（h1）
- 補助文（p）
- 画像（backgroundでもimgでもOK）
この段階は「意味のある構造」を作るのが目的です。
2）CSSでヒーローを成立させる
次に「それっぽい見た目」を作ります。
- ヒーローの高さ（min-height）
- 背景画像の表示（cover / center）
- 文字の配置（中央寄せ or 左寄せ）
- 余白（padding）
まずは 静的に完成させてください。
3）余力があればカーテンアニメーション
この教材では、ヒーローにカーテンアニメーションを入れる想定があります。
最初は「動かす」よりも、構造が崩れないことを優先し、動きは最後に足すのが最短です。
よくあるつまずき
- 画像が引き伸びる／切れ方が不自然
→ background-imageなら「cover」「center」を優先して調整 - スマホで文字が大きすぎる／はみ出す
→ フォントサイズと余白を、スマホ用に上書きする - 上下中央に揃わない
→ 子要素をいじりすぎず、親側で整列（中央寄せ）を作る
模写サンプル（デモ）
こちらのヒーローデザインを模写してください。
模写サンプルサイト elementary002
見た目を完全一致させる必要はありません。
目的は ヒーローの構造とレイアウトを再現することです。
模写後チェックリスト
- 見出しの階層が自然か（h1が主役になっているか）
- 余白がpaddingで整っているか（margin連打になっていないか）
- 画像と文字のバランスが取れているか
- スマホで崩れていないか
まとめ
ヒーローセクションは、Web制作で最初に「デザインと構造の両立」を学べる重要パーツです。
この課題でヒーローが安定して作れるようになると、LP制作の難易度が一気に下がります。