HTML模写は、Web制作の基礎を最短で固める練習方法です。
このページでは、フォーム付きのLP（Landing Page） を題材に、HTML構造とCSSレイアウトをまとめて身につけます。
「レイアウトは作れるけど、フォームになると急に崩れる」
「入力欄やボタンの見た目を整えるのが苦手」
そんな方が、まず越えるべき壁がこの002です。
このHTML模写で身につくこと
この模写課題では、次のスキルをまとめて習得できます。
- ナビゲーションを含む1ページ構成のHTML設計
- セクション分割（About / Services / Portfolio / Contact）
- 画像＋テキストの並び（カード・見出し・説明文）
- フォームの基本構造（label / input / textarea / button）
- 入力UIの整え方（余白・角丸・枠線・フォーカス）
- レスポンシブ対応（PCとスマホで崩れない作り）
サンプルは「1枚LP＋Contactフォーム」構成です。
模写の完成条件（ここまでできたら合格）
最低限、次を満たせば完成です。
- 1ページLPの見出し・ナビ・各セクションがある（About / Services / Portfolio / Contact）
- Contactにフォームがあり、入力欄が3つ（名前 / メール / メッセージ）＋送信ボタンがある
- PCでレイアウトが破綻せず、スマホ幅で縦積みになっている
- 余白・文字サイズ・ボタンが「それっぽく」整っている
加点（おすすめ）
- フォームにlabelを付けて、入力項目が分かりやすい
- focus時に見やすいスタイル（枠線色や影など）がある
- 画像が無い場合でも崩れない（ダミーでもOK）
HTML模写の進め方
1. HTMLだけで「骨組み」を完成させる
最初はCSSを触らず、構造だけ作ります。
おすすめの骨組み：
- header（ロゴ＋ナビ）
- main（各section）
- section（About / Services / Portfolio / Contact）
- Contact内にform（入力群＋送信ボタン）
この段階で「見た目」は気にしません。崩れていてOKです。
2. レイアウトは「大枠 → 中身」の順で作る
おすすめ手順は次です。
- ページ全体の横幅（max-width）と中央寄せ
- セクションの上下余白
- 画像＋文章の並び（必要ならflex / grid）
- カード群の並び
- フォームUIの整形
この順番だと迷子になりにくいです。
3. 最後にフォームUIを整える
フォームは「余白」と「揃え方」で見た目が決まります。
- 入力欄の高さ・padding
- 枠線・角丸
- フォーカス時の見やすさ
- ボタンの大きさ・ホバー
を整えると一気に完成度が上がります。
よくあるミス
- inputやtextareaに幅指定がなく、ガタガタになる
- labelが無くて、何を入力するフォームか分かりづらい
- フォーム要素のデフォルトスタイル差で見た目が崩れる
- 余白をmargin連打で揃えてしまい、後で崩れる
「整列」「余白」「入力UI」の3点だけ意識すると安定します。
模写対象サイト
このページのレイアウトを模写してください。
模写サンプル：beginner002（LP＋Contactフォーム）
模写サンプルサイト beginner002
見た目を完全一致させる必要はありません。
目的は HTML構造とフォーム付きレイアウトを再現すること です。
模写が終わったら確認すること（チェックリスト）
- 見出し階層は自然か（h1→h2→h3）
- セクションの区切りが分かりやすいか
- フォームはlabel付きで意味が通るか
- PC / スマホで崩れていないか
- class名が役割ベースになっているか（見た目命名だけになっていないか）
まとめ
HTML模写は「書けるようになる」より、構造を考えられるようになる練習です。
この002では特に、実務で避けて通れない フォーム付きLP を題材に、基礎の精度を上げます。
できたら次は、ナビ固定・2カラム・ヒーロー強めなど、少しずつ難易度を上げていきましょう。