HTML模写は、Web制作の基礎を「実際のレイアウトを作りながら」身につける練習方法です。
この004では、サイトの締めくくりとなるフッター（footer）レイアウトを題材に、HTML構造とレイアウト設計の考え方を学びます。
フッターは軽視されがちですが、実務では
- 情報整理
- レイアウト設計
- レスポンシブ対応
すべての基礎が詰まった重要パーツです。
このHTML模写で身につくこと
この課題では、次の力が身につきます。
- footer構造の基本設計
- 複数カラムのレイアウト整理
- 情報グループのまとめ方
- 余白と区切りの考え方
- スマホで崩れないフッター設計
「とりあえず並べるフッター」から
意味のある構造を持ったフッターへレベルアップする課題です。
模写の完成条件（合格ライン）
最低限、次を満たせば完成です。
- フッター内に複数の情報ブロックがある
- 各ブロックに役割がある（例：ナビ・説明・コピーライトなど）
- PCでは横並び、スマホでは縦並びになる
- 情報の区切りが視覚的に分かる
- 横スクロールが出ない
加点ポイント：
- 各ブロックの余白が揃っている
- 見出しと本文の階層が整理されている
- コピーライトが自然に配置されている
模写の進め方
1. 情報をグループで考える
まずフッター内の情報を
- ナビ系
- 説明系
- 補足情報
- コピーライト
のようにグループ分けします。
2. 横並び構成を作る
各グループを横並びで配置し、
スマホでは縦に並ぶ構造を想定して組みます。
3. 余白と区切りで整理する
フッターは情報が多くなりがちなので、
- 余白
- 線
- 背景色
などで視覚的に整理します。
よくあるつまずき
- 情報が詰まりすぎて読みにくい
- スマホで文字が小さすぎる
- グループの区切りが分からない
- 横スクロールが出る
フッターは「情報整理の練習」と考えると作りやすくなります。
模写サンプル（デモ）
こちらのフッターデザインを模写してください。
模写サンプルサイト elementary004
見た目を完全一致させる必要はありません。
目的は フッター構造と情報整理レイアウトの再現です。
模写後チェックリスト
- フッター内の情報が意味ごとに整理されているか
- 余白ルールが統一されているか
- PCとスマホで読みやすいか
- コピーライトが自然に配置されているか
次の学習につなげる
このフッター模写は、Flexレイアウトとの相性が非常に良い課題です。
複数カラム構成に慣れてきたら、次の記事もおすすめです。
👉 Flexレイアウトを視覚的に理解できるツール
https://codequest.work/flex-generator/
Flexの並びを理解すると、フッターのレイアウトが一気に安定します。
まとめ
フッターは、Webページの最後に配置されるからこそ、
「構造の美しさ」がそのまま制作スキルに現れるパーツです。
このHTML模写課題を通して、
- 情報整理力
- レイアウト設計力
- レスポンシブ意識
をまとめて身につけてください。
よくある質問（FAQ）
Q. フッターに必要な要素は何ですか？
コピーライト表記・サイトマップ（主要ページへのリンク）・プライバシーポリシーリンク・SNSアイコンリンクが基本要素です。企業サイトの場合は会社情報（住所・電話番号）・お問い合わせリンクも含めます。フッターはsmall要素でコピーライトを記述し、footer要素で囲むのがセマンティックなマークアップです。
Q. フッターのレイアウトをレスポンシブ対応するには？
PC表示ではCSS Gridまたはflexboxで3〜4カラムに分割し、各カラムにリンクグループを配置します。タブレット・モバイル表示ではメディアクエリでflex-direction: columnまたはgrid-template-columns: 1frに変更して縦積みにします。SNSアイコンはFlexboxで中央揃えにし、コピーライトは最下部に配置するのが一般的なパターンです。
