Labo 239: フッターはカラムや行揃えの制御がポイント
Labo 239: フッターはカラムや行揃えの制御がポイント
モジュールに分割するために、デザインを確認する
フッターはヘッダーほど複雑ではなく、比較的シンプルなモジュール構成になることが多い
ページのフッター部分は比較的シンプルなデザインになることが多く、HTML、CSS とも一般的にはそれほど複雑にはならない
バナーやボタンのようなパーツを橫に並べたり、ページの中央に配置したり、ある程度の CSS テクにックを駆使する
サンプルでは、フッター部分が 2つのコンテナに分かれている
2つのコンテナをモジュールに分解する
ページ下部のコンテナのデザインを確認する
バナーがビューポートの幅に応じて橫に並んだり縦に並んだりするのが特徴
バナー以外の、SNS ボタンや一番下のページトップに戻るボタンの配置は換わらない
どちらもビューポートの左右中央揃えになっている
フッターコンテナのデザインを確認する
主要なページのリンクやコピーライトが掲載された、シンプルで標準的なもの
フッターコンテナに含まれる主要なページへのリンクは、PC 向けレイアウトの時は横一列に並んでいる
それ以外のロゴやその他のページへのリンク、コピーライトにはレイアウト変更がない
全ての要素が中央揃えになっている
ページ下部コンテナ、フッターコンテナともに、中央揃えで配置されるコンテンツが多い
そのうちの一部は PC 向けとモバイル向けでレイアウトが変わっている
デザインからこれらのことを読み取り、どのようにモジュールに分割するかを考える
ページのコーディングが大体終わったら、出来るだけ多くのブラウザ、多くの環境で表示や動作の確認をする
開発ツールでも一応の確認はできるものの、特にモバイルの表示は実機での表示とは微妙に異なる場合が多い
モバイル端末の実機確認には、prepros という無料で使えるアプリケーションが便利
確認用の QR コードを出力するので、確認したい端末で撮影するだけ