CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － gapプロパティ

Web APP CSS
スポンサーリンク

gap を理解すると「要素間の余白管理」が一気にシンプルになる

gap は、Flexbox や Grid で 「要素同士の間隔」だけをまとめて管理できるプロパティです。
今まで margin-right や margin-bottom を1個ずつ付けていたのを、
「親に1行書くだけ」で済ませられるようになります。

CSS と Tailwind CSS の両方で、実務でよく使うパターンを中心に解説します。

gap の基本と考え方

gap は「要素同士のすき間」専用のプロパティ

Flexbox / Grid のコンテナに対して使います。

.container {
  display: flex;      /* または display: grid; */
  gap: 16px;
}
CSS

これだけで、子要素同士の間に 16px の余白が入ります。
子要素側に margin を書く必要がありません。

Tailwind での基本

<div class="flex gap-4">
  <div>要素1</div>
  <div>要素2</div>
  <div>要素3</div>
</div>
HTML

gap-4 は 1rem（デフォルト 16px）です。

Flexbox × gap のよくある使い方

横並びのボタン間の余白

CSS 版

.actions {
  display: flex;
  gap: 8px;
}
CSS
<div class="actions">
  <button>キャンセル</button>
  <button>保存</button>
</div>
HTML

Tailwind 版

<div class="flex gap-2">
  <button class="px-3 py-2 bg-gray-200 rounded">キャンセル</button>
  <button class="px-3 py-2 bg-blue-600 text-white rounded">保存</button>
</div>
HTML

ここでのポイントは、
「ボタン同士の間隔だけを gap で管理している」こと。
左右どちらのボタンにも margin を書かなくてよくなります。

縦並びのフォーム項目の余白

CSS 版

.form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
CSS
<div class="form">
  <div>項目1</div>
  <div>項目2</div>
  <div>項目3</div>
</div>
HTML

Tailwind 版

<div class="flex flex-col gap-3">
  <div class="border p-2 rounded">項目1</div>
  <div class="border p-2 rounded">項目2</div>
  <div class="border p-2 rounded">項目3</div>
</div>
HTML

margin-bottom を1個ずつ付けるより、
gap でまとめて管理した方が「増減・順番入れ替え」に強くなります。

row-gap / column-gap で縦横を分けて指定する

縦と横で違う余白を付けたい場合

.container {
  display: flex;
  flex-wrap: wrap;
  row-gap: 16px;     /* 上下のすき間 */
  column-gap: 8px;   /* 左右のすき間 */
}
CSS

Tailwind 版

<div class="flex flex-wrap gap-x-2 gap-y-4">
  <div class="w-32 h-16 bg-gray-100 rounded">1</div>
  <div class="w-32 h-16 bg-gray-100 rounded">2</div>
  <div class="w-32 h-16 bg-gray-100 rounded">3</div>
  <div class="w-32 h-16 bg-gray-100 rounded">4</div>
</div>
HTML

gap-x-* が左右、gap-y-* が上下です。

Grid × gap の使い方（カードレイアウトに最適）

CSS 版

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
CSS
<div class="grid">
  <div class="card">カード1</div>
  <div class="card">カード2</div>
  <div class="card">カード3</div>
</div>
HTML

Tailwind 版

<div class="grid grid-cols-3 gap-4">
  <div class="bg-white p-4 rounded shadow">カード1</div>
  <div class="bg-white p-4 rounded shadow">カード2</div>
  <div class="bg-white p-4 rounded shadow">カード3</div>
</div>
HTML

Grid と gap の組み合わせは、
「カード同士の余白をきれいに揃えたい」ときの鉄板です。

gap を使うメリットを深掘り

1. 子要素に margin を書かなくてよくなる

今までよくやっていた書き方：

.button + .button {
  margin-left: 8px;
}
CSS

これは

  • 最初の要素には余白が付かないように調整
  • 要素の順番を変えるときに気を使う

など、地味に面倒です。

gap を使うと、親に一行書くだけで済みます。

.container {
  display: flex;
  gap: 8px;
}
CSS

2. 「要素間の余白」と「外側の余白」を分けて考えられる

例えば、カードリストの上下の余白は margin、
カード同士の間隔は gap、
というように役割を分けると、レイアウトが整理されます。

<section class="mt-8">
  <div class="flex flex-col gap-4">
    <div class="p-4 bg-white rounded shadow">カード1</div>
    <div class="p-4 bg-white rounded shadow">カード2</div>
  </div>
</section>
HTML

セクションの外側の余白（mt-8）と、
カード同士の余白（gap-4）が分離されていて、
後から調整しやすくなります。

3. 要素の増減・順番入れ替えに強い

margin で「最後の要素だけ余白を消す」ような書き方をしていると、
要素の数や順番が変わるたびに CSS を気にする必要があります。

gap は「要素同士の間」にだけ効くので、
要素の増減・並び替えをしても破綻しにくいです。

実践テンプレート：よく使う gap レイアウト

フォームの縦並び

<form class="flex flex-col gap-4">
  <div class="flex flex-col gap-1">
    <label class="text-sm text-gray-700">メールアドレス</label>
    <input class="border border-gray-300 rounded px-3 py-2 text-sm">
  </div>
  <div class="flex flex-col gap-1">
    <label class="text-sm text-gray-700">パスワード</label>
    <input type="password" class="border border-gray-300 rounded px-3 py-2 text-sm">
  </div>
  <div class="flex justify-end gap-2">
    <button class="px-3 py-2 text-sm rounded bg-gray-200">キャンセル</button>
    <button class="px-3 py-2 text-sm rounded bg-blue-600 text-white">ログイン</button>
  </div>
</form>
HTML

フォーム全体の行間も、ボタン同士の間隔も、
すべて gap で管理しています。

タグの横並び（折り返しあり）

<div class="flex flex-wrap gap-2">
  <span class="px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded">HTML</span>
  <span class="px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded">CSS</span>
  <span class="px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded">JavaScript</span>
  <span class="px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded">Tailwind CSS</span>
</div>
HTML

flex-wrap と gap の組み合わせで、
折り返してもきれいな間隔を保てます。

まとめ

gap は、Flexbox / Grid における 「要素同士のすき間専用プロパティ」 です。

CSS では

gap: 16px;
row-gap: 16px;
column-gap: 8px;
CSS

Tailwind では

gap-*
gap-x-*
gap-y-*
HTML

を使います。

「要素同士の間隔は gap」「外側の余白は margin」
と役割を分けて考えると、レイアウトが一気に整理されていきます。

もし「今 margin で組んでいるこのレイアウト、gap に置き換えたい」という具体的なコードがあれば、それをベースに一緒にリファクタしてみよう。

スポンサーリンク
タイトルとURLをコピーしました