Section 004

Flexboxフッター

Flexboxを使ったレスポンシブな4カラムフッター。flex-wrapとflex-basisで、画面サイズに応じてカラム数が自動的に変化します。

学習ポイント

Flexbox基本 - display: flexで要素を横並びに
flex-wrap - 折り返しを有効にしてレスポンシブ対応
flex（ショートハンド） - grow/shrink/basisを一括指定
justify-content - 主軸方向の配置を制御
メディアクエリ - ブレークポイントごとにflex-basisを変更

HTML構造の解説

<footer>
<div class="footer-column">
<h3>会社概要</h3>
<p>...</p>
</div>
<div class="footer-column">
<h3>サービス</h3>
<ul>...</ul>
</div>
<div class="footer-column">
<h3>サポート</h3>
<ul>...</ul>
</div>
<div class="footer-column">
<h3>お問い合わせ</h3>
<p>...</p>
</div>
</footer>

footerの直下に4つの.footer-columnを配置。各カラムには見出しとコンテンツが入ります。

CSS解説：Flexbox基本

footer {
display: flex;
flex-wrap: wrap; /* 折り返しを有効に */
justify-content: space-between;
padding: 20px;
}

各プロパティの解説

display: flex - 子要素を横並びにする
flex-wrap: wrap - 幅が足りない時に折り返す
justify-content: space-between - 両端揃えで均等配置

flex-wrapがないとどうなる？
デフォルトはnowrapなので、子要素が縮小されて1行に収まろうとします。レスポンシブ対応にはwrapが必須です。

CSS解説：flexショートハンド

.footer-column {
flex: 1 1 22%; /* grow shrink basis */
padding: 10px;
box-sizing: border-box;
border-left: 1px solid #111;
}

flexプロパティの3つの値

flex-grow: 1 - 余白があれば拡大する
flex-shrink: 1 - はみ出せば縮小する
flex-basis: 22% - 基準となる幅（4カラムで約25%未満）

なぜ25%ではなく22%？
paddingやborder、gapなどを考慮して、少し小さめに設定しています。box-sizing: border-boxを使っていても、親のpadding分は考慮が必要です。

justify-contentの種類

/* よく使う値 */
justify-content: flex-start; /* 左寄せ */
justify-content: flex-end; /* 右寄せ */
justify-content: center; /* 中央寄せ */
justify-content: space-between; /* 両端揃え（間に均等余白） */
justify-content: space-around; /* 各要素の周りに均等余白 */
justify-content: space-evenly; /* 完全に均等な余白 */

今回はspace-betweenを使用し、最初と最後の要素が端に、その間に均等な余白が入ります。

レスポンシブ対応

タブレット（768px以下）

@media (max-width: 768px) {
.footer-column {
flex: 1 1 48%; /* 2カラム表示 */
}
}

モバイル（480px以下）

@media (max-width: 480px) {
.footer-column {
flex: 1 1 100%; /* 1カラム表示 */
}
}

flex-basisの変更だけで対応
flex-wrapが有効なので、basisを変えるだけでカラム数が自動的に変わります。
48% → 2カラム、100% → 1カラム

GridとFlexboxの使い分け

Flexbox - 1次元レイアウト（横並びまたは縦並び）に最適
Grid - 2次元レイアウト（行と列の両方を制御）に最適

/* Flexbox向きの例 */
- ナビゲーションメニュー
- ボタングループ
- フッターのカラムレイアウト
- カードの横並び
/* Grid向きの例 */
- 複雑なギャラリーレイアウト
- ダッシュボード
- フォームのラベルと入力欄
- 新聞のような多列レイアウト

応用・発展

SNSアイコンを追加してFlexboxで横並びに
orderプロパティでモバイル時の表示順を変更
align-itemsで縦方向の揃え位置を調整
ニュースレター登録フォームを追加