Bootstrap: スペーシング

Q: 一つの要素に複数のスペーシングクラスを使用できますか？順番は結果に影響しますか？

はい、使用できます。いいえ、影響しません。 class="mt-3 mb-4 p-2" は、上マージン16px、下マージン24px、全方向のパディング8pxを同時に設定します。CSSのカスケードでは、値が異なる場合、後に定義されたクラスがそれ以前のクラスを上書きしますが、Bootstrapのスペーシングクラスは競合しないため、順番は問題になりません。

Q: p-5 は48pxで、大きすぎると感じます。どうすればいいですか？

3つの選択肢があります：(1) p-4 （24px）または p-3 （16px）を使用する。(2) CSS変数 --bs-gutter-x をカスタマイズしてグリッドのスペーシングを調整する。(3) セクション5のSassカスタマイズの説明で、 $spacer 変数を変更してスケール全体を再定義できます。

Q: なぜ mx-auto はブロックレベル要素にしか機能しないのですか？

CSS仕様では、 margin: auto は要素が定義された幅（auto以外）を持ち、ブロックレベル（ display: block ）である必要があります。インライン要素には幅の概念がないため、 mx-auto は機能しません。

Q: Bootstrapはネガティブマージンをサポートしていますか？

Bootstrapは限定的なネガティブマージンをサポートしています。 m{n|s|e|t|b|x|y}-n{1|2|3|4|5} のようなクラスを提供しています。例えば、 mt-n3 は上マージン-1remを意味します。ネガティブマージンは、コンテナのパディングを相殺したり、オーバーラップ効果を作成したりするためによく使用されます。ネガティブな値はパディングとgapには適用されず、レスポンシブサフィックス（ mt-md-n3 など）もサポートされています。

Q: ネストされた要素でスペーシングクラスはどのように機能しますか？

スペーシングクラスは現在の要素にのみ影響し、継承されません。子要素は親の p-* や m-* を自動的に継承しません。ネストされたシナリオでは、一般的な方法は：親コンテナに p-* を設定してパディングとし、子要素に mb-* を設定してスペーシングとします。レスポンシブブレークポイントサフィックスもネストで機能します— class="px-3 px-md-5" は異なる画面サイズで一貫した動作をします。

最終更新：2026-08-26

1. このレッスンの概要

(1) 前提条件

Bootstrapのタイポグラフィシステム（h1〜h6、ディスプレイ見出し）をマスターしていること
テキストカラー.text-*や整列ユーティリティクラスに精通していること

(2) 🎯 学習目標

スペーシングスケールシステム（0〜5）と対応するrem値を理解する
マージンとパディングの方向の略語ルールをマスターする
レスポンシブスペーシング（例：p-md-5）の使用方法を学ぶ
gap-*とmx-autoユーティリティクラスを熟练に使用できるようになる
ページ要素間のスペーシングを独立して正確に制御できるようになる

(3) ペインポイント

前回のレッスンで、アリスは個人のホームページを構築しましたが、カードが詰まりすぎており、タイトルがテキストに近すぎることに気づきました。従来の方法では、各要素にmargin-bottom: 1.5remと記述する必要がありました。

(4) 解決策

Bootstrapのスペーシングユーティリティクラスは、这一切をシンプルにします。マージンとパディングのすべての方向の組み合わせをカバーする、remベースのスペーシングユーティリティクラスセットを提供し、CSSを一行も書かずに要素間のスペーシングを正確に制御できます。Bootstrapを使用すれば、mb-4一つで十分です。

(5) メリット

Bootstrapのスペーシングユーティリティクラスを使用した後、アリスはmb-4やp-3といったクラスだけで要素間のスペーシングを正確に制御でき、手書きのCSSの面倒さから解放され、よりクリーンで効率的なページレイアウトを実現できます。

2. スペーシングスケール

スペーシングスケールは0から5の範囲で、各数字はrem値に対応します：

スケール	rem	px (16px基準)	例え
`0`	0	0px	スペーシングなし
`1`	0.25	4px	とても小さなスペーシング
`2`	0.5	8px	コンパクトなスペーシング
`3`	1	16px	標準的なスペーシング
`4`	1.5	24px	大きなスペーシング
`5`	3	48px	とても大きなスペーシング

さらに、autoも存在します。

3. プロパティと方向

クラス命名ルール：{p|m}{t|b|s|e|x|y|blank}{0|1|2|3|4|5|auto}

TEXT 📖 参照専用

  m         t          3
  ^         ^          ^
  プロパティ  方向       値
           (オプション)

部分	オプション	意味
プロパティ	`m`	マージン（外側の余白）
	`p`	パディング（内側の余白）
方向	`t`	上（トップ）
	`b`	下（ボトム）
	`s`	始点（左、論理プロパティ）
	`e`	終点（右、論理プロパティ）
	`x`	左+右（水平）
	`y`	上+下（垂直）
	空白	4方向すべて

▶ サンプルスペーシングスケールのデモンストレーション

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Spacing Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .box { background: #e9ecef; border: 1px solid #0d6efd; }
    .highlight { background: #0d6efd; color: #fff; text-align: center; }
  </style>
</head>
<body>
  <div class="container py-4">

    <!-- Margin bottom -->
    <div class="box">
      <div class="highlight mb-0">mb-0</div>
      <div class="highlight mb-1">mb-1 (4px)</div>
      <div class="highlight mb-2">mb-2 (8px)</div>
      <div class="highlight mb-3">mb-3 (16px)</div>
      <div class="highlight mb-4">mb-4 (24px)</div>
      <div class="highlight mb-5">mb-5 (48px)</div>
    </div>

    <hr>

    <!-- Padding all sides -->
    <div class="box p-0"><span>p-0</span></div>
    <div class="box p-3 mt-2"><span>p-3 (全方向16px)</span></div>
    <div class="box p-5 mt-2"><span>p-5 (全方向48px)</span></div>

  </div>
</body>
</html>

▶ 試してみよう

4. よく使うスペーシングの組み合わせ

実際の開発で最もよく使われるスペーシングパターン：

HTML

<!-- Card list: spacing between cards -->
<div class="card mb-3">カード1</div>
<div class="card mb-3">カード2</div>
<div class="card mb-3">カード3</div>

<!-- Section: vertical padding -->
<section class="py-5">上下に48pxのパディングを持つセクション</section>

<!-- Button: margin around -->
<button class="btn btn-primary me-2">保存</button>
<button class="btn btn-secondary">キャンセル</button>

<!-- Container: horizontal padding -->
<div class="px-4">左右に快適なパディングを持つコンテンツ</div>

▶ 試してみよう

パターン	よく使われる用途	効果
カードのスペーシング	`mb-3`	カード間16pxの隙間
セクションのスペーシング	`py-5`	上下48pxのパディング
ボタンのスペーシング	`me-2`	ボタン間8pxの隙間
コンテナのパディング	`px-4`	左右24pxの安全なパディング

5. 水平中央揃え：mx-auto

要素に固定幅がある場合、mx-autoで水平中央揃えを実現します：

▶ サンプル水平中央揃え

HTML

<div style="width: 200px;" class="mx-auto bg-primary text-white text-center p-3">
  mx-autoで中央揃えされたブロック
</div>

▶ 試してみよう

6. レスポンシブスペーシング

スペーシングユーティリティクラスはすべてのブレークポイントサフィックスをサポートし、画面サイズごとに異なるスペーシングを設定できます：

HTML

<div class="p-3 p-md-5 bg-light">
  ブラウザのサイズを変更して、768pxのブレークポイントでパディングが変わることを確認してください。
</div>

▶ 試してみよう

使用例	モバイル（xs）	タブレット（md以上）
`p-3 p-md-5`	16px	48px
`mb-2 mb-lg-0`	下マージン8px	下マージン0
`pt-4 pt-xl-5`	上パディング24px	上パディング48px

7. gap スペーシング

FlexboxとGridレイアウトにおいて、gapユーティリティクラスは子要素間のスペーシングを制御します：

HTML

<div class="d-flex gap-3">
  <div class="bg-primary text-white p-3">アイテム1</div>
  <div class="bg-primary text-white p-3">アイテム2</div>
  <div class="bg-primary text-white p-3">アイテム3</div>
</div>

▶ 試してみよう

Gapクラス	値	説明
`gap-0`	0	スペーシングなし
`gap-1`	0.25rem	とても小さい
`gap-2`	0.5rem	コンパクト
`gap-3`	1rem	標準
`gap-4`	1.5rem	ゆとりがある
`gap-5`	3rem	非常に大きい

8. スペーシングとコンテナのパディング

graph TD
    A[コンテナパディング: 0 12px] --> B[Rowマージン: 0 -12px]
    B --> C[Col 1パディング: 0 12px]
    B --> D[Col 2パディング: 0 12px]
    B --> E[Col 3パディング: 0 12px]

レイヤー	スペーシング制御方法	説明
コンテナ	組み込みのパディング	コンテンツが端に触れない
Row	ネガティブマージン	コンテナのパディングを相殺
Column	組み込みのパディング	カラム間のガター
内部	`p-` / `m-`	コンテンツ要素の精密なスペーシング

(2) 完全なスペーシングスケール参照

スケール	rem	px (16px基準)	名前	適したシナリオ
`0`	0	0px	なし	デフォルトのマージンを削除
`1`	0.25	4px	とても小さい	アイコンとテキストの隙間
`2`	0.5	8px	コンパクト	ボタングループ内のスペーシング
`3`	1	16px	標準	カードのスペーシング、段落のスペーシング
`4`	1.5	24px	大きい	セクションのスペーシング
`5`	3	48px	とても大きい	ページセクション間のスペーシング
`auto`	auto	auto	自動	水平中央揃え

(3) レスポンシブスペーシングのブレークポイント

使用例	モバイル（<576px）	タブレット（>=768px）	デスクトップ（>=992px）	大型画面（>=1200px）
`p-3 p-md-4 p-lg-5`	16px	24px	48px	48px
`m-2 m-md-3 m-xl-4`	8px	16px	16px	24px
`px-2 px-lg-4`	8px（左右）	8px（左右）	24px（左右）	24px（左右）
`py-3 py-md-5`	16px（上下）	48px（上下）	48px（上下）	48px（上下）
`gap-2 gap-lg-4`	8px	8px	24px	24px

▶ サンプルレスポンシブスペーシングページ

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Spacing</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .demo-section { background: #f8f9fa; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="container">
    <!-- Hero: responsive padding -->
    <div class="bg-primary text-white text-center px-3 py-5 px-md-5 py-md-6 rounded">
      <h1 class="display-5">レスポンシブスペーシングデモ</h1>
      <p class="mb-0">ブラウザのサイズを変更してスペーシングの変化を観察してください</p>
    </div>

    <!-- Cards: responsive gap -->
    <div class="row g-2 g-md-3 g-lg-4 mt-4">
      <div class="col-12 col-md-4">
        <div class="demo-section p-3 p-md-4">
          <h5>カード1</h5>
          <p class="mb-0 small">モバイルでp-3、デスクトップでp-4</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="demo-section p-3 p-md-4">
          <h5>カード2</h5>
          <p class="mb-0 small">ブレークポイントに合わせてgapが増加</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="demo-section p-3 p-md-4">
          <h5>カード3</h5>
          <p class="mb-0 small">g-2 → g-3 → g-4</p>
        </div>
      </div>
    </div>

    <!-- Info bar -->
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-center bg-light p-3 p-md-4 mt-4 rounded">
      <span class="mb-2 mb-md-0">flex-column は flex-md-row に変わります</span>
      <button class="btn btn-primary">クリック</button>
    </div>
  </div>
</body>
</html>

▶ 試してみよう

▶ サンプルカードレイアウトのスペーシング

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Card Spacing</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h3 class="mb-4">ブログ記事リスト</h3>

    <div class="card mb-3">
      <div class="card-body">
        <h5 class="card-title">記事タイトル1</h5>
        <p class="card-text text-muted small mb-2">2026年1月15日</p>
        <p class="card-text">これは、カード間のmb-3スペーシングを示すサンプル記事です。</p>
        <a href="#" class="btn btn-sm btn-primary">続きを読む</a>
      </div>
    </div>

    <div class="card mb-3">
      <div class="card-body">
        <h5 class="card-title">記事タイトル2</h5>
        <p class="card-text text-muted small mb-2">2026年1月14日</p>
        <p class="card-text">各カードには下マージンが16pxあり、リストが明確で読みやすくなっています。</p>
        <a href="#" class="btn btn-sm btn-outline-primary">続きを読む</a>
      </div>
    </div>

    <div class="card mb-4 p-4 bg-light border-0">
      <div class="row g-3">
        <div class="col-6">
          <div class="p-3 bg-primary text-white rounded text-center">内部のpy-3</div>
        </div>
        <div class="col-6">
          <div class="p-3 bg-success text-white rounded text-center">g-3のガター</div>
        </div>
      </div>
    </div>

    <div class="d-flex gap-2 justify-content-end">
      <button class="btn btn-secondary">前へ</button>
      <button class="btn btn-primary">次へ</button>
    </div>
  </div>
</body>
</html>

▶ 試してみよう

▶ サンプルフォームのスペーシング

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Spacing</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="row justify-content-center">
      <div class="col-12 col-md-8 col-lg-6">
        <h3 class="mb-4">ユーザー登録</h3>

        <form>
          <div class="mb-3">
            <label for="name" class="form-label">名前</label>
            <input type="text" class="form-control" id="name" placeholder="名前を入力してください">
          </div>

          <div class="mb-3">
            <label for="email" class="form-label">メールアドレス</label>
            <input type="email" class="form-control" id="email" placeholder="name@example.com">
          </div>

          <div class="mb-3">
            <label for="pwd" class="form-label">パスワード</label>
            <input type="password" class="form-control" id="pwd">
            <div class="form-text text-muted mt-1">パスワードは8文字以上でなければなりません。</div>
          </div>

          <div class="mb-4 form-check">
            <input type="checkbox" class="form-check-input" id="agree">
            <label class="form-check-label" for="agree">利用規約に同意する</label>
          </div>

          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary">登録</button>
            <button type="reset" class="btn btn-outline-secondary">リセット</button>
          </div>
        </form>

        <p class="text-muted small mt-4 mb-0">ヒント：すべての入力のスペーシングはmb-3で統一して制御しています。</p>
      </div>
    </div>
  </div>
</body>
</html>

▶ 試してみよう

❓ よくある質問

Q 一つの要素に複数のスペーシングクラスを使用できますか？順番は結果に影響しますか？

A はい、使用できます。いいえ、影響しません。class="mt-3 mb-4 p-2"は、上マージン16px、下マージン24px、全方向のパディング8pxを同時に設定します。CSSのカスケードでは、値が異なる場合、後に定義されたクラスがそれ以前のクラスを上書きしますが、Bootstrapのスペーシングクラスは競合しないため、順番は問題になりません。

Q p-5は48pxで、大きすぎると感じます。どうすればいいですか？

A 3つの選択肢があります：(1) p-4（24px）またはp-3（16px）を使用する。(2) CSS変数--bs-gutter-xをカスタマイズしてグリッドのスペーシングを調整する。(3) セクション5のSassカスタマイズの説明で、$spacer変数を変更してスケール全体を再定義できます。

Q なぜmx-autoはブロックレベル要素にしか機能しないのですか？

A CSS仕様では、margin: autoは要素が定義された幅（auto以外）を持ち、ブロックレベル（display: block）である必要があります。インライン要素には幅の概念がないため、mx-autoは機能しません。

Q Bootstrapはネガティブマージンをサポートしていますか？

A Bootstrapは限定的なネガティブマージンをサポートしています。m{n|s|e|t|b|x|y}-n{1|2|3|4|5}のようなクラスを提供しています。例えば、mt-n3は上マージン-1remを意味します。ネガティブマージンは、コンテナのパディングを相殺したり、オーバーラップ効果を作成したりするためによく使用されます。ネガティブな値はパディングとgapには適用されず、レスポンシブサフィックス（mt-md-n3など）もサポートされています。

Q ネストされた要素でスペーシングクラスはどのように機能しますか？

A スペーシングクラスは現在の要素にのみ影響し、継承されません。子要素は親のp-*やm-*を自動的に継承しません。ネストされたシナリオでは、一般的な方法は：親コンテナにp-*を設定してパディングとし、子要素にmb-*を設定してスペーシングとします。レスポンシブブレークポイントサフィックスもネストで機能します—class="px-3 px-md-5"は異なる画面サイズで一貫した動作をします。

📖 まとめ

スペーシングクラスのフォーマット：{m|p}{t|b|s|e|x|y}{0|1|2|3|4|5|auto}
スケール0〜5は、$spacer変数（デフォルト1rem）に基づき、0〜3remに対応
レスポンシブサフィックス：mt-md-3、p-lg-5など、異なる画面で異なるスペーシングを実現
gap-*はflex/gridの子要素間のスペーシングを制御し、mx-autoで水平中央揃え
スペーシングシステムはグリッドのガター（基本単位0.5rem）と一貫性がある

📝 練習問題

⭐ スペーシングクラスを使用して3つのカードのレイアウトを構築します：カード間はgap-3、カード内部はp-4、外側のコンテナはpy-5とし、最初のカードにさらにmt-3を追加して効果を観察してください。
⭐⭐ レスポンシブスペーシングを持つセクションを作成します：モバイルでpx-3 py-4、デスクトップでpx-5 py-5。
⭐⭐⭐ 中央揃えのボタングループ（mx-auto + d-flex + gap-2）を作成し、3つのボタンの間に8pxのスペーシングを持たせてください。

前のレッスン： Typography · 次のレッスン： Flexbox

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

私たちについて

Bootstrap: スペーシング

1. このレッスンの概要

(1) 前提条件

(2) 🎯 学習目標

(3) ペインポイント

(4) 解決策

(5) メリット

2. スペーシングスケール

3. プロパティと方向

▶ サンプル スペーシングスケールのデモンストレーション

4. よく使うスペーシングの組み合わせ

5. 水平中央揃え：mx-auto

▶ サンプル 水平中央揃え

6. レスポンシブスペーシング

7. gap スペーシング

8. スペーシングとコンテナのパディング

(2) 完全なスペーシングスケール参照

(3) レスポンシブスペーシングのブレークポイント

▶ サンプル レスポンシブスペーシングページ

▶ サンプル カードレイアウトのスペーシング

▶ サンプル フォームのスペーシング

❓ よくある質問

📖 まとめ

📝 練習問題

▶ サンプルスペーシングスケールのデモンストレーション

▶ サンプル水平中央揃え

▶ サンプルレスポンシブスペーシングページ

▶ サンプルカードレイアウトのスペーシング

▶ サンプルフォームのスペーシング