HTML模写は、実際のレイアウトを再現しながら「構造」と「CSS設計」を同時に学ぶ練習方法です。
この003では、CSS Gridを使ったセクションレイアウトを題材に、実務で通用する配置設計を身につけます。
模写対象は、見出し・テキスト・画像（またはカード）をGridで配置した、シンプルなセクション構成のページです。
このHTML模写で身につくこと
この課題では、次の力が身につきます。
- セクション構造の作り方（どこで区切るか）
- Gridで「列」を設計する考え方
- 余白を均一に整える力（gapの意識）
- 画面幅によって配置を切り替える発想（レスポンシブ）
- 要素数が増減しても崩れないレイアウト設計
Flexではなく、Gridでレイアウトを組み切る感覚を体に入れる課題です。
模写の完成条件（Grid前提）
最低限、ここまでできたら完成です。
- セクション内の要素がGridで配置されている
- PCでは複数列、スマホでは縦積みになる
- 要素同士の余白が一定で、読みやすい
- 画面幅を変えても横スクロールが出ない
- 見出しと本文の階層が自然に整理されている
加点（おすすめ）
- セクションごとに余白のリズムが揃っている
- 情報の優先順位が見た目に反映されている（主役が分かる）
模写の進め方（迷わない手順）
1. まずは「構造」を作る
最初は見た目よりも、どこからどこまでが1つのセクションかを決めて、構造を整理します。
ここが曖昧だと、後からレイアウトが崩れやすくなります。
2. 次に「Gridの列設計」を決める
この課題の核です。
「このセクションは何列にするか」「どの要素を同じ行に置くか」を決めて、Gridで配置します。
3. 最後に「余白」と「レスポンシブ」で仕上げる
見た目の完成度は、余白と切り替えで決まります。
PCでは詰まりすぎない、スマホでは読みやすい、という状態に調整します。
よくあるつまずき（Grid模写あるある）
- 余白がバラバラになる
→ 余白は個別調整より「全体のルール」で揃える - 要素に無理な幅を持たせて崩れる
→ Gridで配置する前提なら、要素側に強い制約をかけすぎない - スマホで横スクロールが出る
→ どこかに固定幅が残っていないか確認する - 列設計が曖昧で、配置が安定しない
→ 「主役」「補助」「装飾」を分けて配置する
模写サンプル（デモ）
模写サンプルサイト elementary003
見た目を完全一致させる必要はありません。
目的は Gridで崩れないセクション配置を再現することです。
こちらの記事が役に立ちますのでぜひ使ってみてください。
CSSグリッドジェネレーター｜コード自動生成でレイアウト設計を効率化
模写後チェックリスト
- セクションの区切りが分かりやすいか
- Grid配置が整理されていて読み取れるか
- 余白のルールが統一されているか
- PCとスマホで読みやすいか
- 横スクロールが出ていないか
まとめ
この003は、Gridでレイアウトを設計する感覚を身につけるための課題です。
Gridが安定して使えるようになると、カード一覧やギャラリーなど、実務のレイアウトが一気に楽になります。