4カラムダークフッター
ロゴとキャッチコピー、会社情報・サービス・問い合わせ系リンクをまとめた 4カラム構成のダークフッター です。 grid-template-columns:1.5fr 1fr 1fr 1fr でブランド列だけを少し広く取り、残り3列を等幅にしてリンクを整理しています。
このパーツの使いどころと実装ポイント
ロゴとキャッチコピー、会社情報・サービス・問い合わせ系リンクをまとめた4カラム構成のダークフッターです。grid-template-columns:1.5fr 1fr 1fr 1fr でブランド列だけを少し広く取り、残り3列を等幅にしてリンクを整理しています。背景は濃紺系の単色で、見出しは text-transform:uppercase と letter-spacing で小さく品よく見せ、本文リンクは控えめなグレーにしてホバーで色が変わる設計です。最下部にはコピーライト行を別途配置しています。
向いている場面
- 情報量の多いコーポレートサイトやメディアの共通フッター
- ダーク基調・落ち着いたトーンで締めたいサービスサイト
- サイトマップ的にページへの導線をまとめて置きたい場合
カスタマイズと注意
列の中身は ul と li のリンクリストなので、項目の追加・削除はリスト要素を増減するだけで済みます。会社が扱うカテゴリに合わせて見出し（会社情報／サービス等）を差し替えてください。レスポンシブでは4カラムのままだと狭くなるため、grid-template-columns を画面幅で2カラム→1カラムへ切り替える指定を入れると読みやすくなります。アクセシビリティ面では、暗い背景上のグレー文字はコントラストが落ちやすいので、本文色を必要に応じて明るめに調整し、リンクであることがホバー以外でも分かるようにしておくと親切です。
よくある質問
スマホ表示ではどうレイアウトされますか？
標準では4カラムですが、狭い画面ではgrid-template-columnsを2カラムや1カラムに切り替えると読みやすくなります。ブランド列を最初に1段で見せ、リンク群を2列で並べる構成が情報量と縦の長さのバランスを取りやすいです。
リンクの数を変えたいときは？
各カラムはul/liのリストなので、li要素を増やせばリンクを追加でき、削れば減らせます。1列あたり4〜6項目を目安にすると縦の高さがそろい、見出しごとのまとまりが崩れにくくなります。