フッターをモジュールに分割する

デザインの確認が終わったら、フッターの 2つのコンテナ

ページ下部コンテナとフッターコンテナの要素をモジュールに分割する

ページ下部コンテナのモジュール

ページ下部コンテナの中身は、バナー、SNS サイトへのリンク、ページトップへ戻るボタンの 3つのモジュールに分割する

バナーに関しては、PC 向けレイアウトの時は 2つを橫に並べ、モバイルの時には縦にする

それ以外のモジュールは、PC 向けとモバイル向けではレイアウトの変更はない

フッターコンテナの中身は 4つのモジュールに分割する

ロゴ、2つのナビゲーション、コピーライトのテキスト

ロゴとコピーライトは、5-6 で同時に作成する

2つのナビゲーションは、どちらもフッターコンテナの左右中央に配置する

複数のリンクテキストをひとまとめにして中央に配置する場合には、マージン設定をひと工夫する

CSS の中でも、マージンをうまく制御するのは難しい

思わぬところにスペースが空いてしまうのは、マージンのたたみ込みという CSS の仕様がある

5-3 でマージンのたたみ込みについて説明