3 カラム＋登録フォーム フッター
会社情報・サイト内リンク・更新通知フォームを 3 等分で並べたフッターです。 display:grid の repeat(3,1fr) で 3 カラムを均等割りし、濃紺の背景に白文字で落ち着いた印象にまとめています。
このパーツの使いどころと実装ポイント
会社情報・サイト内リンク・更新通知フォームを 3 等分で並べたフッターです。display:grid の repeat(3,1fr) で 3 カラムを均等割りし、濃紺の背景に白文字で落ち着いた印象にまとめています。最終ブロックには登録フォーム（メール入力＋ボタン）を display:flex で横並びに置き、ニュースレターやお知らせの購読を促せる構造です。
向いている場面
- 定期的に情報発信するメディアやブログ
- 会社概要とリンクをまとめたいコーポレートサイト
- メルマガ登録を増やしたいサービスサイト
各カラムは b の見出し＋本文やリンクの組み合わせで、項目数を変えても崩れにくい作りです。リンクは display:block で縦に積まれ、タップしやすい余白が確保されています。
実装上の注意
3 カラムは狭い画面で窮屈になるため、メディアクエリで 1 列縦積みに切り替えてください。登録フォームは form で囲み、入力欄に type="email" と label（または aria-label）を付けると入力支援と読み上げに対応できます。リンクテキストは中身が分かる具体的な語にし、装飾だけの空リンクにしないことが SEO とアクセシビリティの両面で重要です。
よくある質問
登録フォームのメール送信先はどう設定しますか。
formのaction属性に配信ツールやサーバーの受け口URLを指定します。MailchimpやBrevoなどの外部サービスを使う場合は、各サービスが発行する埋め込みフォームのaction先とフィールド名に合わせると連携できます。
スマートフォンで3カラムが窮屈になります。
grid-template-columnsをメディアクエリで1列に変えるのが基本です。会社情報・リンク・フォームの順に縦積みすると自然で、フォームの入力欄とボタンも縦並びにすると押しやすくなります。