gap が効かないのはなぜですか？

親要素が grid または flex のコンテナになっていない（display: grid/flex でない）場合や、古い指定で grid-gap を誤用している場合に効きません。DevTools の Computed で gap と display を確認します。

gap と margin でのすき間指定は何が違いますか？

gap はアイテム“間”にだけすき間を作り、端には基本的に余白が付きません。margin は各アイテムに余白を付けるため、端にも余白が出たり、折り返しや相殺で調整が難しくなります。

row-gap / column-gap はどう使い分けますか？

行方向と列方向のすき間を別々にしたいときに row-gap と column-gap を使います。gap は row-gap と column-gap のショートハンドで、1つなら両方、2つなら「行列」の順で指定します。

gap の % は何を基準に計算されますか？

gap の % は基本的にコンテナ（親要素）のサイズを基準に計算されます。どちらを基準にしたいかが曖昧な設計では、rem や px で意図を固定する方が安全です。

CSS

この記事では「CSS」について、基本の意味と使い方を初心者向けにやさしく説明します。

The CSS gap property sets consistent spacing between items in grid or flex layouts without relying on item margins, making responsive spacing easier to manage.

gap

gap は、grid や flex の子要素間のすき間を「行/列」としてまとめて指定するプロパティです。

Table Of Contents

このページでできるようになること

gap が「何を広げる/何を広げない」か（余白・端・折り返し）を説明できる
row-gap / column-gap と gap（ショートハンド）の書き方を使い分けられる
grid と flex での効き方の違い（行/列の意味）を判断できる
margin 方式の事故（端の余白・折り返し・相殺）を避けて間隔設計できる
「効かない」「思った方向じゃない」を DevTools で切り分けられる
試験で問われやすいポイント（適用対象・値・ショートハンド）を整理できる

まずは直感：`gap` って何？

ざっくり言うと、gap は「並べた要素どうしの間を一括で空ける」ためのスイッチで、margin より端が汚れにくいのが強みです。

間だけ空く：基本的に端（コンテナ外周）には余白を作らない
折り返しに強い：flex-wrap で行が増えても調整が楽
方向を分けられる：row-gap/column-gap で縦横別にできる

正確な定義（仕様に沿った説明）

何のために存在するか

gap はレイアウトコンテナ（主に display: grid / display: flex）に対して、子要素どうしの間隔を 行方向（row-gap） と 列方向（column-gap） で指定するためのプロパティです。

何に適用されるか（対象）

gap は「コンテナ側」に書きます。典型は grid コンテナと flex コンテナで、子要素そのものに書いても効果はありません。

できること / できないこと（制約）

できること

子要素どうしの間隔を、端に余白を作りにくい形で統一できる
gap で縦横同時、または row-gap/column-gap で縦横別の間隔にできる
flex-wrap や grid の再配置でも、間隔指定をほぼ触らずに保てる

できないこと（重要）

コンテナの外周に余白を作ること（外周は padding / margin の仕事）
アイテムの大きさそのものを変えること（width/flex/grid-template-columns 等で決める）
すべての並び方で「行/列」の意味が同じになること（flex-direction で行/列の方向が入れ替わる）

影響範囲（レイアウト/描画/ユーザー操作/アクセシビリティ）

レイアウト: gap はレイアウトの計算に参加し、アイテムの間にすき間を確保します。限られた幅の中で gap を増やすと、アイテムが縮む・折り返す・行数が増えるなどの変化が起きます。
描画: すき間は「空白」なので、背景色は基本的にコンテナ側の背景が見えます。区切り線のように見せたい場合は、背景や border を併用します。
ユーザー操作: 要素間の距離が広がるため、誤タップの減少などに効くことがあります。ただし、クリック領域自体が増えるわけではないので、必要なら padding 等でタップ領域を確保します。
アクセシビリティ: 間隔が詰まりすぎると読みづらく、操作もしづらくなります。gap は「見た目の余白」と「操作の余白」を両方支えることがあるため、狭幅では値を落とす・行間を確保するなどを検討します。

基本の書き方（最短の型）

最小サンプル（コピペ用）

CSS

.list {
    display: grid;
    gap: 16px;
}

まずは「コンテナに display を指定 → gap を付ける」を覚えるのが最短です。

よく使う値／典型パターン

縦横どちらも同じ間隔: gap: 16px;
縦と横を分ける: gap: 8px 16px;（row-gap が 8px、column-gap が 16px）
縦だけ/横だけ: row-gap: 12px; / column-gap: 12px;
レスポンシブで伸縮させる: gap: clamp(12px, 2vw, 24px);（広い画面で少し広げる）

どこに書くか（外部CSS/ページ内style/インライン）

基本：外部CSS（推奨）: 実務ではコンテナのクラス（例：.cardList）に display と gap をまとめ、部品として再利用できる形にします。
ページ内 <style>: 学習用デモや単体ページで完結させたいときに向いています（このページのデモはページ内にあります）。
インライン（例外）: style="gap: 16px" は検証には便利ですが、運用では差分が追いにくいので基本は避けます。

最小サンプル（grid + gap）

gap: 16px

HTML

<div class="demo-wrapper">
    <div class="demo-grid" id="gridDemo">
        <div>A</div>
        <div>B</div>
        <div>C</div>
        <div>D</div>
        <div>E</div>
        <div>F</div>
    </div>

    <div class="controls">
        <label>
            gap: <span id="gapValue">16</span>px
        </label>
        <br>
        <input type="range" id="gapSlider" min="0" max="60" value="16">
    </div>
</div>

CSS

.demo-wrapper {
    max-width: 600px;
    margin: 40px auto;
}

.controls {
    margin-bottom: 16px;
    text-align: center;
}

.controls label {
    font-weight: bold;
}

.demo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px; /* 初期値 */
    background: #f0f0f0; /* gap部分が見える */
    padding: 12px;
    transition: gap 0.1s linear;
}

.demo-grid div {
    background: #00008030;
    padding: 24px;
    text-align: center;
    font-weight: bold;
}

JavaScript

const slider = document.getElementById("gapSlider");
const grid = document.getElementById("gridDemo");
const valueLabel = document.getElementById("gapValue");

slider.addEventListener("input", function() {
    const value = slider.value + "px";
    grid.style.gap = value;
    valueLabel.textContent = slider.value;
});

仕様として押さえるポイント（初心者が事故りやすい所）

継承する？（inheritance）: gap は継承しません。親に書いた gap が子へ伝播するのではなく、「その親がコンテナのときに、子同士の間隔を作る」プロパティです。
初期値は？（initial）: 初期値は 0 で、指定しなければすき間は作られません。
適用対象は？（applies to）: 基本は grid / flex のコンテナ（親要素）です。子要素に書いても効果がないため、「どこに書いたか」を最初に疑います。
row-gap / column-gap とショートハンド: gap: 12px 24px; のように2つ書くと「row-gap が 12px、column-gap が 24px」です。順番を逆に覚える事故が多いので、row → column の順で固定します。
% の基準は？（percentages）: gap は長さ（px/rem/% など）で指定できます。% は基本的にコンテナサイズ基準になるため、意図がブレそうなら rem や clamp() を選ぶ方が安全です。
算出値/使用値の考え方（computed/used value）: DevTools の Computed で row-gap と column-gap の最終値を見ます。ショートハンドで書いても、Computed では分解された値で表示されることが多いです。
無効値の扱い: 無効な値（例：gap: big;）は無視され、その宣言は効きません。結果として他のルール（または初期値 0）になります。DevTools の Styles で打ち消しや無効化を確認します。
アニメーション可能？（animatable）: 長さとして指定した gap はアニメーション可能です。ただしレイアウトが毎フレーム変わるため、重い場合は prefers-reduced-motion を尊重し、必要な範囲に抑えます。

よくある勘違い・混同ポイント

gap は子要素に書く

違います。gap はコンテナ側（親要素）に書きます。子要素に書いても間隔は増えません。

gap と margin は同じ

同じ「すき間」に見えますが、扱いが違います。

gap → アイテム間だけにすき間を作る（端に余白が付きにくい）
margin → アイテムに余白を付ける（端にも余白が出たり、相殺や折り返し調整が必要）

grid-gap / grid-row-gap / grid-column-gap を今も使う

古い名前に見えるプロパティは、現場では基本的に gap/row-gap/column-gap に寄せます。混在すると「どれが勝っているか」の判断が増えます。

「間隔が足りない」ので親に padding を増やす

親の padding は外周の余白です。間隔（子同士）が足りないなら、まず gap を疑います（外周と間を混ぜると、レスポンシブで調整が増えます）。

実務でよくある使用例（制作会社の現場を想定）

カード一覧（grid）で間隔を一元化する

カード一覧は grid＋gap の相性が良く、デザイン変更（間隔だけ広げる/詰める）にも強いです。外周は padding、間は gap と分けると保守が楽です。

タグやボタンの並び（flex-wrap）で折り返しに強くする

タグ一覧や小さなボタン群を flex-wrap: wrap で折り返す場合、margin で調整すると「端の余白」や「行間」が崩れがちです。gap なら折り返し行にも自然に間隔が入ります。

フォームの縦並び（column）で行間を決める

フォーム項目の縦方向の間隔は row-gap（または gap）で固定すると、各項目に margin-bottom を付けるよりも最後の項目だけ例外処理をしなくて済みます。

実務で起きがちな事故と回避策

「gap が効かない」

原因候補：コンテナになっていない: display: block のままだと gap は期待どおりに効きません。親要素に display: grid または display: flex が入っているか確認します。
原因候補：書く場所を間違えている: gap は親に書きます。子に書いていたら、親へ移します。
最短の確認（DevTools）: DevTools の Computed で display と row-gap/column-gap を見て、値が 0 のままか、打ち消されていないかを確認します。

「端の余白がズレる/二重になる」

原因候補：margin 方式を混ぜている: margin で間隔を作り、さらにコンテナに padding を付けると、端が二重に広がりがちです。間隔は gap、外周は padding と責務を分けます。
原因候補：最後だけ margin-bottom が残っている: 縦並びの部品で margin-bottom を使うと「最後だけ例外（0にする）」が必要になります。gap に寄せると例外が減ります。

「狭い画面で詰まりすぎる/広すぎる」

回避：clamp() やメディアクエリで調整する: gap: clamp(12px, 2vw, 24px); のように、極端にならない範囲で伸縮させます。狭幅ではタップ間隔と可読性を優先して、詰めすぎないようにします。

アクセシビリティ／UX観点での注意（必要な範囲で）

タップ対象（ボタン/リンク）が密集するなら、gap と padding の両方で誤タップを減らす
狭幅で gap を詰めすぎると読みづらいので、文字サイズや行間（line-height）もセットで見る
間隔をアニメーションする場合は、必要最小限にし prefers-reduced-motion を尊重する
「すき間＝区切り」に見せるなら、コントラスト（背景/境界線）を確保する

試験（Webクリエイター能力認定試験）で得点できる整理

用語

ショートハンド：複数のプロパティを1行でまとめて指定する書き方（gap は row-gap/column-gap のまとめ）
コンテナ：子要素の並び方を決める親要素（display: grid/flex など）
折り返し：flex-wrap や幅不足で行が増える状態

ひっかけポイント

gap を子要素に書いている（→ 効かない）
gap: 8px 16px の順番を逆に覚える（→ 行/列が逆）
外周の余白を gap で作れると思う（→ 端は padding）

ミニ確認

Q1. gap を書くべき場所はどこ？

A. 子要素ではなく、display: grid または display: flex の「親（コンテナ）」です。

Q2. gap: 8px 16px; は何を意味する？

A. row-gap: 8px; と column-gap: 16px; です（順番は row → column）。

Q3. アイテム間は空けたいが、端は詰めたい。どれが向く？

A. gap が向きます。端の余白は padding で別に調整します。

Q4. 「効かない」ときに最初に確認するCSSは？

A. 親の display（grid/flex になっているか）と、Computed の row-gap/column-gap が 0 のままかです。

よくある質問（FAQ）

gap が効かないのはなぜ？: 親要素が display: grid / display: flex になっていない、または gap を子要素に書いている可能性が高いです。DevTools の Computed で display と row-gap/column-gap を確認します。
gap と margin、結局どっちで間隔を作る？: 「アイテム間だけを均一に」なら gap が第一候補です。margin は「特定の要素だけずらす」「一部だけ余白を足す」など、局所的な調整で使うと事故が減ります。
gap の外側（端）にも余白が欲しい: 外側は gap ではなく、コンテナに padding を付けます。間（gap）と外周（padding）を分けるとレスポンシブで調整が楽です。
flex-direction: column で縦だけ空けたい: 縦方向のすき間は row-gap として扱われることが多いですが、方向で感覚が逆転しやすいです。迷うなら gap を1つ（両方同じ）で始め、必要になったら row-gap/column-gap に分けます。

よくあるエラー／症状早見表

症状：gap が効かない: 原因候補：親が grid/flex ではない、子に書いている、上書きで gap: 0。確認：DevTools の Computed で display と row-gap/column-gap。
症状：端の余白が思ったより広い: 原因候補：margin 方式が混ざっている、親に padding と子に margin が二重。確認：DevTools の Box Model と、どの要素に余白が付いているか。
症状：狭い画面で詰まりすぎる: 原因候補：gap が固定で大きすぎる、アイテムが縮めない設定。確認：Computed の gap と、min-width/flex/grid-template-columns。

まとめ：迷ったときの判断軸（短いチェックリスト）

アイテム間の間隔を揃えたい → gap（コンテナに書く）
外周の余白も必要 → padding を別で足す
特定の要素だけズラしたい → 局所的に margin を使う
効かない → 親の display と Computed の row-gap/column-gap を先に見る
狭幅で詰まる → clamp() やメディアクエリで gap を調整する