HTML模写は、Web制作の基礎を「実際のレイアウトを作りながら」身につける練習方法です。
この004では、**ブログ一覧ページ（記事カード）**を題材に、HTML構造とCSSレイアウトの基礎を固めます。
模写対象は、ヘッダーにナビがあり、記事が一覧で並ぶシンプルなページです。
実務でも頻出の「一覧レイアウト」を、崩れない形で作れるようになるのが目的です。
このHTML模写で身につくこと
この課題で練習できるポイントは次の通りです。
- header / nav を使った基本構造（ロゴ＋ナビ）
- 一覧ページの設計（見出し＋リスト構造）
- 記事カード（タイトル＋日付など）のまとまりを作る
- 余白設計（padding / gap の使い方）
- レスポンシブで崩れない一覧レイアウトの考え方
模写の完成条件（合格ライン）
最低限、ここまでできたら完成です。
- ヘッダーにサイト名（またはロゴ）とナビがある
- 「blog ブログ」の見出しがあり、記事が一覧で表示されている
- 記事はカードとしてまとまり、タイトルと日付が入っている
- PC幅でもスマホ幅でもレイアウトが破綻しない（横スクロールが出ない）
加点（おすすめ）
- カード間の余白が一定（gapで揃う）
- hoverでリンクと分かる（下線・薄い影・色変化など）
- 文字サイズと行間が読みやすい
HTML模写の進め方
1. まずHTMLだけで骨組みを作る
CSSを触る前に、構造だけを作ります。
- header（サイト名＋nav）
- main
- 見出し（h1またはh2）
- 一覧（ul / li または article の繰り返し）
この段階では「見た目」は崩れていてOKです。構造を優先します。
2. 一覧（カード）のレイアウトを作る
この課題の核は「繰り返し要素を整列させる」ことです。
- まずは縦並びでカードの見た目を完成
- 余白、枠線、角丸などでカード感を作る
- 必要ならPCだけ複数列（gridが相性良い）にする
3. 最後にヘッダーと余白を整える
ヘッダーは崩れやすいので最後に仕上げます。
- ロゴとナビの横並び
- 上下中央揃え
- ナビ項目の間隔（gap）
この3点が揃うと「それっぽさ」が一気に出ます。
よくあるつまずき
- ナビの上下位置が揃わない
→ 子要素をいじり過ぎず、親の整列（中央揃え）で揃える - 余白がバラバラになる
→ margin連打より、カードはpadding、並びはgapで揃える - スマホで横スクロールが出る
→ 固定幅指定が残っていないか、画像がはみ出していないか確認
模写対象サイト
このページを模写してください。
模写サンプルサイト beginner004
見た目を完全一致させる必要はありません。
目的は 「ヘッダー＋一覧カード」の構造とレイアウトを再現することです。
模写後のチェックリスト
- header / nav の構造は自然か
- 一覧が繰り返し構造になっているか（コピペしやすい形か）
- カードの余白が揃っているか
- PC / スマホで崩れていないか
よくある質問（FAQ）
Q. ブログ一覧ページのレイアウトはどう組みますか？
CSS GridまたはFlexboxで記事カードを格子状に配置します。各カードはarticle要素で囲み、サムネイル画像・タイトル・日付・概要文・「続きを読む」リンクで構成します。PC表示では3列、タブレットで2列、モバイルで1列になるよう、メディアクエリまたはCSS Gridのauto-fill/minmax()でレスポンシブ対応します。
Q. ブログカードのサムネイル画像をきれいに表示するには？
img要素にobject-fit: coverを設定し、親要素に固定のアスペクト比（aspect-ratio: 16/9等）を指定します。これによりサムネイル画像のサイズがバラバラでも、統一されたカードレイアウトが維持されます。画像の読み込み遅延にはloading=”lazy”属性を設定してパフォーマンスを最適化してください。
