CSS

🎨 CSSのgapが効かない（Flexbox）

gapを書く場所か親のdisplay設定に問題がある

😰 こんな症状

gapを指定したのにアイテムの間隔が空かない。gapはdisplay:flexまたはgridの「親要素」にしか効かないのが原因のほとんどだよ。

🔍 原因

gapはFlexコンテナまたはGridコンテナ（display:flex / grid を指定した親要素）専用のプロパティだよ。よくある原因は、(1) 親要素にdisplay:flexを書き忘れている、(2) gapを子要素（アイテム側）に書いている、(3) gapを指定した要素とdisplay:flexを指定した要素が別、の3つ。なお主要ブラウザは2021年以降Flexboxのgapに対応済みなので、最近の環境でブラウザ対応が原因になることはまれだよ。

❌ エラーが起きるコード

/* ❌ gapだけ書いてもdisplay:flexがないと効かない */
.list {
  gap: 16px;
}

/* ❌ 子要素に書いても効かない */
.item {
  gap: 16px;
}

✅ 直し方

1. gapと同じ要素にdisplay:flex（またはgrid）があるか確認する。 2. gapが子要素に書かれていたら親要素に移動する。 3. DevToolsのElementsで親要素を選び、Stylesにgapが取り消し線なしで表示されているか確認する（取り消し線があれば無効＝書く場所が違う）。 4. アイテムが1つしかないと間隔は見えない。2つ以上で確認する。

✅ 修正後のコード

/* ✅ display:flexと同じ親要素にgapを書く */
.list {
  display: flex;
  gap: 16px;
}

この解決法は役立ちましたか？

🔗 関連するエラー

Invalid property value（CSSの値が無効） — プロパティが受け付けない値を書いている
スマホで表示が小さい — viewport meta タグがない

📖 この問題を学べるレッスン

CSSレッスン5：Flexboxでレイアウトで根本から理解する →

📝 関連ブログ記事

プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
CSSとは？初心者向けにわかりやすく解説 — 文字の色・大きさの変え方
CSSでWebページにスタイルを付ける方法 — 色やフォントを付ける手順を解説

📖 関連する用語

🚀 CSSレッスン5：Flexboxでレイアウトで根本解決しよう！

このエラーの背景にある仕組みを、手を動かしながら学べるレッスンがあります。完全無料・登録不要。

CSSレッスン5：Flexboxでレイアウトへ →