4 カラム コーポレートフッター
会社情報・サービス・会社・SNS の4ブロックを横並びにしたコーポレートフッターです。 display:grid の grid-template-columns:1.5fr 1fr 1fr 1fr で、住所などを置く左端の列だけ広く取り、残り3列を等幅にしています。
このパーツの使いどころと実装ポイント
会社情報・サービス・会社・SNS の4ブロックを横並びにしたコーポレートフッターです。display:grid の grid-template-columns:1.5fr 1fr 1fr 1fr で、住所などを置く左端の列だけ広く取り、残り3列を等幅にしています。濃紺背景（#1a1a2e）に白文字とグレーのリンクで、落ち着いた企業らしい締まりを出しています。最下部にはコピーライト行を独立して配置しています。
向いている場面
ページ数が多めのコーポレートサイト、サービスサイト、採用も扱う事業会社など、サイトマップ的に主要リンクをまとめたい場面に向きます。情報量が多いサイトの回遊性を底上げする役割を担います。
カスタマイズと注意点
差し替えどころは社名・住所・各列の見出し（<h5>）とリンク文言です。列の数や内容は事業に合わせて自由に組み替えてください。SNS列は現状テキストですが、実運用ではブランドのSVGアイコンに置き換えると見栄えが整います。注意点として、4列のままだとスマホで窮屈になるため、狭い画面では2列または1列に積む指定を足してください。リンクには href を必ず設定し、住所のメール・電話は mailto: や tel: リンクにするとスマホから直接アクションできます。
よくある質問
列の構成は変えられますか？
できます。各 ft-4__col ブロックを増減し、grid-template-columns の値を合わせてください。情報の多い列を広く取りたい場合は、左端のように 1.5fr など大きめの値を割り当てます。
SNSリンクはアイコンにできますか？
可能です。現状はテキストですが、各SNSのブランドSVGアイコンに置き換えると統一感が出ます。リンクには aria-label でサービス名を補い、target=_blank の場合は rel=noopener も付けてください。