【6日でできるHTML＆CSS入門】Bootstrapのスペーシング

　Webページのレイアウトやデザインを美しく整えるためには、要素間の“余白”を上手くコントロールすることが重要です。Bootstrapでは、スペーシング（spacing）ユーティリティを使うことで、簡単にマージン（外側の余白）やパディング（内側の余白）、そしてグリッドの隙間（gap）を調整できます。ここではBootstrapのスペーシングについて、基礎から実践までを具体例を交えて解説します。

１．Bootstrapのスペーシングの基本

1.1. スペーシングユーティリティとは

　スペーシングとは「要素と要素の間の空間」を意味し、主にmargin（外側の余白）やpadding（内側の余白）を調整します。Bootstrapでは、クラス名で簡単にスペーシングを追加できる「ユーティリティクラス」を提供しています。

主なプロパティ

プロパティ説明
mmargin（外側の余白）
ppadding（内側の余白）

1.2. サイド（位置）の指定

サフィックス意味
ttop（上）
bbottom（下）
sstart（左、LTR言語で）
eend（右、LTR言語で）
x左右両方（start＋end）
y上下両方（top＋bottom）
（なし）全方向

２．スペーシングのサイズ指定

サイズ指定内容
00（なし）
10.25rem（要素の基本サイズ×0.25）
20.5rem
31rem
41.5rem
53rem
automarginで「自動（中央揃え）」

３．サンプル：いろいろなスペーシング指定

CDN経由でBootstrapを読み込み、異なるスペーシングを使った3つのボックスを表示します。

ファイル名： lesson56_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap スペーシング サンプル</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap 5 CDN -->
  <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">
    <h2 class="mb-4">スペーシングの例</h2>
    <div class="bg-primary text-white p-3 mb-3">パディング p-3（全方向）とマージン mb-3（下方向）</div>
    <div class="bg-success text-white px-5 py-2 mb-4">左右パディング px-5、上下パディング py-2、下マージン mb-4</div>
    <div class="bg-warning text-dark mt-5 mb-2 ps-4">上マージン mt-5、下マージン mb-2、左パディング ps-4</div>
    <div class="d-grid gap-2 mt-5">
      <button class="btn btn-info">ボタンA（ギャップあり）</button>
      <button class="btn btn-info">ボタンB（ギャップあり）</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

表示結果

  • 青いボックス（上下左右に余白・下にマージン）
  • 緑色ボックス（左右広めの余白、上下少し・下に広めのマージン）
  • 黄色ボックス（上に大きめのマージン・左にパディング）
  • その下に、2つのボタンが「ギャップ（gap）」でスペースを空けて縦並び

４．よく使うスペーシングのクラス

クラス名効果
m-3全方向にマージン3（1rem）
pt-2上だけパディング2（0.5rem）
mx-auto左右のマージンを自動（中央寄せ）
gap-4グリッドの子要素同士の間隔を1.5rem

まとめ

　Bootstrapのスペーシングユーティリティを使えば、手軽にレイアウトの調整や見た目の統一が可能です。特に「m-◯」や「p-◯」のような直感的なクラス名でコーディングできるため、CSSを直接書くよりも効率的に開発できます。

【タグ解説】（主なもの）

タグ・クラス解説
<div>汎用のブロック要素、Bootstrapの多くのレイアウトで利用
class="m-3"全方向に1remのマージンを追加
class="p-2"全方向に0.5remのパディングを追加
class="mt-5"上側に大きめ（3rem）のマージン
class="gap-3"グリッド（d-grid）やflex要素間の間隔（1rem）
class="mx-auto"左右自動マージン（中央揃え）
<div class="d-grid">グリッドレイアウト用の親要素
<button>ボタン要素。Bootstrapボタンと組み合わせると便利