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

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;
    font-family: sans-serif;
}

.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 を調整する

Home

サイトのトップページ

HTML (HyperText Markup Language)

ウェブページの基本的な構造を作成します。見出し、段落、リンク、画像などの要素を定義します。

br 要素

改行を表現する。

class 属性

要素に CSSでスタイルを適用するためのクラス名を付ける際によく使われる。

div 要素

特定の意味（セマンティクス）を持たない汎用的なブロック要素で、ページのレイアウトやコンテンツのグループ化に利用される「区切りの箱」のような存在です。

id 属性

要素に固有の識別名（id）を指定する。同じ識別名はページ内で１回しか使えません。

input 要素

テキスト入力、パスワード入力、ラジオボタン、チェックボックス、ファイル選択などのフォームコントロールを提供します。

type="range": スライダーを表示する入力フィールドを作成する。

label 要素

フォームコントロールに対して名前や説明を関連付け、ユーザーや支援技術にその入力欄の意味を正確に伝えるために使う要素です。

span 要素

一般的なテキスト範囲。

style 要素

スタイル情報。

style 属性

要素に CSS を直接指定するための属性。

CSS (Cascading Style Sheets)

ウェブページのデザインやレイアウトを設定します。色、フォント、レイアウトなどのスタイルを指定します。

align-content: コンテナ内全体の交差軸方向（初期値では縦方向）の揃え位置を指定する。
border: ボックスの上下左右のボーダー（境界）のスタイル・太さ・色に対して同じ値をまとめて指定することができます。
clamp(): 画面が小さい時も大きい時も、値を「ちょうどいい範囲」に自動でおさえてくれる関数で、最小・理想・最大を一度に指定して文字サイズや幅を気持ちよく伸び縮みさせる。
column-gap: アイテム同士の縦方向の間隔を指定する。
display: HTML要素がページ上でどのように配置され表示されるかを決定する基本的な設定です。
Flexbox: コンテナ内のアイテムの配置、方向、順序を柔軟に管理できるレイアウトモデルです。
flex-direction: フレックスコンテナ内のアイテムの配置方向を指定する。
flex-wrap: Flexboxコンテナ内の要素の折り返し（改行）の挙動を制御します。
Grid layout: グリッドレイアウトは、Webページのコンテンツを行と列に分割して配置するための強力かつ柔軟なレイアウトシステムです。
grid-gap: グリッド内の行や列のすき間を設定するプロパティです。
grid-template-columns: グリッドトラックの横方向のサイズリストを指定する。
justify-content: 要素の水平方向（横方向）の配置を調整し、余白やスペースの使い方を制御します。
line-height: 文字サイズを含む「行の高さ」を決めて読みやすさを整えるプロパティで、まずは単位なし 1.5 前後を目安にすると本文がスッと読みやすくなります。
margin: マージンに関する指定をまとめて行う。
margin-bottom: 下マージンを指定する。
min-width: 幅の最小値を指定する。
padding: パディングに関する指定をまとめて行う。
prefers-reduced-motion: ユーザーの「動きを減らす」設定に応じて、アニメーションなどを控えめにできる仕組みです。
row-gap: アイテム同士の横方向の間隔を指定する。
width: 要素の幅を指定する。

JavaScript

ウェブページにインタラクティブな動作を追加します。フォームの検証、アニメーション、リアルタイムのデータ処理などを行います。

PHP (Hypertext Preprocessor)

サーバー上で動作してデータベースと連携し、動的なWebページを簡単に作成できるスクリプト言語です。

Simple Check List

Click item to move to bottom.