スペーシング

この章では、Tailwind CSS のスペーシングシステム (margin、padding、gap) を学びます。

スペーシングスケール

Tailwind CSS は 4px ベースのスケールを使用します。

クラス	サイズ
`0`	0px
`px`	1px
`0.5`	2px (0.125rem)
`1`	4px (0.25rem)
`2`	8px (0.5rem)
`3`	12px (0.75rem)
`4`	16px (1rem)
`5`	20px (1.25rem)
`6`	24px (1.5rem)
`8`	32px (2rem)
`10`	40px (2.5rem)
`12`	48px (3rem)
`16`	64px (4rem)
`20`	80px (5rem)
`24`	96px (6rem)

パディング (padding)

全方向

<div class="p-4">16px の余白</div>
<div class="p-8">32px の余白</div>

水平・垂直

<div class="px-4">左右 16px</div>
<div class="py-4">上下 16px</div>

個別方向

クラス	方向
`pt-*`	上 (top)
`pr-*`	右 (right)
`pb-*`	下 (bottom)
`pl-*`	左 (left)

<div class="pt-4 pr-6 pb-4 pl-6">
  上下 16px、左右 24px
</div>

論理プロパティ

RTL (右から左) 言語にも対応する論理プロパティ。

クラス	意味
`ps-*`	開始側 (LTR: left, RTL: right)
`pe-*`	終了側 (LTR: right, RTL: left)

<div class="ps-4 pe-6">論理プロパティ</div>

マージン (margin)

基本的な使い方

<div class="m-4">全方向 16px</div>
<div class="mx-4">左右 16px</div>
<div class="my-4">上下 16px</div>
<div class="mt-4">上 16px</div>

負のマージン

負の値も指定できます。

<div class="-mt-4">上に -16px</div>
<div class="-mx-2">左右に -8px</div>

負のマージンは、コンテナの外側にはみ出す「フルブリード」レイアウトに便利です。

<!-- コンテナ内の画像をコンテナ幅いっぱいに広げる -->
<div class="px-4">
  <p>通常のコンテンツ</p>
  <img src="..." class="-mx-4 w-[calc(100%+2rem)]" alt="フルブリード画像" />
  <p>通常のコンテンツ</p>
</div>

自動マージン

<!-- 水平中央揃え -->
<div class="mx-auto w-64">中央揃え</div>

<!-- 右寄せ -->
<div class="ml-auto w-64">右寄せ</div>

<!-- Flex で使用 -->
<div class="flex">
  <div>左</div>
  <div class="ml-auto">右端に配置</div>
</div>

スペースユーティリティ

子要素間に均等なスペースを追加します。

space-x (水平方向)

<div class="flex space-x-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

space-y (垂直方向)

<div class="space-y-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

逆順

<div class="flex flex-row-reverse space-x-4 space-x-reverse">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

space-* と gap の使い分け

space-* と gap の使い分け:

gap (推奨): Flexbox/Grid コンテナに指定。要素の折り返しや並び替えに対応し、最初/最後の要素に余分なマージンが付かない
space-*: > :not(:last-child) セレクタでマージンを追加 (v4。space-y は margin-bottom、space-x は margin-inline-end。v3 は隣接セレクタ + margin-top/left 方式だった)。Flex/Grid 以外のブロック要素に便利だが、flex-wrap や order との併用に注意

基本的には Flex/Grid レイアウト内では gap を使いましょう。

Gap

Flexbox/Grid での間隔指定に最適です。

<!-- Flexbox -->
<div class="flex gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- Grid -->
<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- 横と縦で異なる -->
<div class="grid grid-cols-3 gap-x-4 gap-y-8">
  ...
</div>

任意の値

v4 ではスケール表にない数値も角括弧なしで指定できます (値は --spacing × 数値)。

<!-- v4 -->
<div class="p-17">68px (17 × 0.25rem) のパディング</div>
<div class="m-100">400px (25rem) のマージン</div>

<!-- 角括弧も使用可能 -->
<div class="p-[17px]">17px</div>
<div class="p-[2.5rem]">2.5rem</div>

実践例

カードコンポーネント

<div class="p-6 bg-white rounded-lg shadow-sm">
  <h2 class="mb-4 text-xl font-bold">タイトル</h2>
  <p class="mb-4 text-gray-600">
    説明文がここに入ります...
  </p>
  <button class="px-4 py-2 bg-blue-500 text-white rounded-sm">
    詳細を見る
  </button>
</div>

セクション

<section class="py-16 px-4">
  <div class="max-w-4xl mx-auto">
    <h2 class="mb-8 text-3xl font-bold text-center">
      セクションタイトル
    </h2>
    <div class="space-y-6">
      <p>段落 1...</p>
      <p>段落 2...</p>
      <p>段落 3...</p>
    </div>
  </div>
</section>

フォーム

<form class="space-y-4 p-6 bg-white rounded-lg shadow-sm">
  <div>
    <label class="block mb-1 text-sm font-medium">名前</label>
    <input class="w-full px-3 py-2 border border-gray-300 rounded-sm" />
  </div>
  <div>
    <label class="block mb-1 text-sm font-medium">メール</label>
    <input class="w-full px-3 py-2 border border-gray-300 rounded-sm" />
  </div>
  <button class="w-full py-2 mt-4 bg-blue-500 text-white rounded-sm">
    送信
  </button>
</form>

ボタングループ

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

スペーシングの設計原則

1. 一貫したスケールを使用

<!-- 良い例: スケールに沿った値 -->
<div class="p-4 mb-6">...</div>

<!-- 避けるべき例: 任意の値を多用 -->
<div class="p-[17px] mb-[23px]">...</div>

2. 論理的な階層

<!-- セクション > カード > 要素 -->
<section class="py-16">
  <div class="p-6">
    <h2 class="mb-4">タイトル</h2>
    <p class="mb-2">本文</p>
  </div>
</section>

3. レスポンシブ対応

<div class="p-4 md:p-6 lg:p-8">
  レスポンシブなパディング
</div>

まとめ

4px ベースのスケール (p-4 = 16px)
p-* でパディング、m-* でマージン
px-* / py-* で水平・垂直
space-* で子要素間のスペース
gap は Flex/Grid で推奨
mx-auto で水平中央揃え

次に読む

タイポグラフィ — テキストの見た目を整える
レスポンシブ — 画面幅別のスペーシング設計
Tailwind CSS ガイド目次 — 全 18 章の構成に戻る

スペーシングスケール​

パディング (padding)​

全方向​

水平・垂直​

個別方向​

論理プロパティ​

マージン (margin)​

基本的な使い方​

負のマージン​

自動マージン​

スペースユーティリティ​

space-x (水平方向)​

space-y (垂直方向)​

逆順​

Gap​

任意の値​

実践例​

カードコンポーネント​

セクション​

フォーム​

ボタングループ​

スペーシングの設計原則​

1. 一貫したスケールを使用​

2. 論理的な階層​

3. レスポンシブ対応​

まとめ​

次に読む​