HTML模写はWeb制作の基礎を身につける最も効果的な練習方法です。
この003では、ナビ付きのLP（ランディングページ） を題材に、HTML構造とCSSレイアウトを同時に学びます。
ナビゲーション・セクション分割・画像付きのコンテンツ・レスポンシブ対応など、実務レベルで必要な基礎を固める課題です。
差分チェックツールで効率UPお手本コードと自分のコードを比較して、違いを一目で確認できます。練習前にブックマークしておくと便利です。
Diff Checkerを開く →このHTML模写で学べること
次のスキルを一気に習得できます。
- LP構成（ヘッダー・各セクション・フッター）のHTML設計
- ナビゲーションのリンクと内部遷移の構造
- 画像とテキストのセクション構成
- レスポンシブ対応とビュー別の調整
- セマンティックなHTMLマークアップ
模写の完成条件（合格ライン）
以下の条件を満たせば、このLP模写は完成です。
- ナビゲーションがあり、各セクションにアンカーリンクがある
- About / Services / Portfolio / Contact の全セクションがある
- PCでもスマホでもレイアウトが破綻していない
- 見出し・コンテンツの意味分けが正しくされている
- class名が意味ベースで整理されている
模写の進め方（手順）
- HTMLだけで構造を完成させる
最初に CSS を書かずに骨格だけ作ります。意味のあるタグを優先します。 - ナビゲーションのリンクを実装する
各セクションに id を付け、nav からリンクできるようにします。 - レイアウトの大枠を整える
各セクションの余白や幅を整え、レスポンシブの基準を決めます。 - 画像の配置とテキストバランスを整える
画像とテキストの見栄え、カードの並びなどを微調整します。
よくあるつまずき
- ナビリンクが動かない
→ id と href の一致を確認しましょう。 - 画像の縦横比が崩れる
→max-width: 100%とheight: autoをまず入れます。 - スマホでレイアウトが崩れる
→ media query を切って、小さい幅から順に調整します。
模写対象サイト
こちらのLPデザインを模写してください：
模写サンプルサイト beginner003
見た目を完全一致させる必要はありません。
HTML構造とレイアウトの再現が目的です。
模写後のチェックリスト
- 見出しタグ（h1〜h3）の階層は整っているか
- section タグが正しく使われているか
- nav のリンクがスムーズに動くか
- どのデバイスでも崩れないか
ここまでクリアできれば、非常に良い基礎課題になります。
次のステップ
この003ができたら、次は
- レイアウトアニメーション付き模写
- フォーム強化版
- CSSフレームワークなしで複雑レイアウト
など、応用課題に進むと成長が早いです。
よくある質問（FAQ）
Q. LP（ランディングページ）の模写はなぜ初心者におすすめですか？
LPは1ページ完結のレイアウトで、ヘッダー・ヒーロー・コンテンツ・CTAボタン・フッターなどWebサイトの基本構造を一通り学べるためです。複数ページの管理が不要で、HTML・CSSの基礎スキルだけで完成させられます。模写完了後はポートフォリオの実績としても活用できます。
Q. 模写コーディングの効果的な進め方は？
まず完成デザインを全体的に観察し、セクション単位で分割します。HTMLで大まかな構造を先に組み立て、その後CSSでスタイリングを行います。一つのセクションが完成したら次に進む形で、上から順に実装するのが効率的です。デベロッパーツールで参考サイトのCSSを確認しながら進めると理解が深まります。
