サイトマップ付き4列フッター

このパーツの使いどころと実装ポイント

このパーツは、会社情報・サービス・コンテンツ・問い合わせを4列で整理したサイトマップ型フッターです。footer 要素の中をCSS Gridの grid-template-columns: 1.5fr 1fr 1fr 1fr で区切り、ブランド列を少し広めに取って残り3列にリンクを並べます。各リンク群は ul・li でまとめられ、見出しは h4 で構造化されているため、検索エンジンにもサイト内のリンク関係が伝わりやすい作りです。最下部にはコピーライト行を配置しています。

向いている場面

• ページ数が多く、フッターからの回遊を促したいコーポレートサイト
• サービス・ブログ・会社概要など導線を整理したいメディア
• SNSと問い合わせ窓口をまとめて置きたい事業サイト

フッターは全ページ共通で表示されるため、主要ページへの内部リンクを集約する場所として役立ちます。

カスタマイズと注意

列の数やリンク項目は、列ブロックを足し引きして調整できます。ブランド列のSNSリンクは現在テキスト表記なので、実装ではブランドごとの svg アイコンに置き換えると見栄えが整います。実装上の注意として、href="#" のままだと空リンクになるため、必ず実在のページURLへ差し替えてください。レスポンシブでは @media(max-width:640px) で2列に折り返しますが、項目数が偏ると列の高さがそろわないことがあるので、各列の項目数のバランスを意識すると整います。リンクは十分なタップ間隔を確保するとスマホで押しやすくなります。