Bootstrap 5 の余白（margin / padding）ユーティリティ完全ガイド【mb-3など】

Bootstrap 5 の余白クラスを使いこなすポイント

Bootstrap 5 に用意されている余白ユーティリティは、複雑なCSSを書くことなく、まーじんやぱでぃんぐを直感的に調整できる便利な仕組みです。とくに Web ページの構成では、見出しと段落、カードとカードの間隔、画像とテキストの距離など、細かな余白の積み重ねが読みやすさやデザイン全体の印象を大きく左右します。にんげんの目は要素同士が近すぎると圧迫感を感じ、逆に離れすぎると流れが途切れてしまうため、適度な間隔を作ることが重要です。Bootstrap 5 の余白ユーティリティは、この調整を素早く、しかも分かりやすいルールで行える点が大きな魅力だといえます。

余白の基本として、m（margin） と p（padding） は必ず覚えておくべき要素です。さらに、t（上）、b（下）、s（左）、e（右）、x（左右）、y（上下）を組み合わせることで、方向ごとに細かくコントロールできます。たとえば、mb-3 は下方向に適度な余白を与え、mx-4 を使うと左右にゆとりを持たせることができます。こうしたクラスは、見出しやセクションの区切り、フォーム入力欄、画像のまわりなど、あらゆる場所で活躍します。特に初心者は段階的に使える数値の意味を知ることで、感覚的に余白を調整できるようになり、作業速度もぐっと向上します。

数字の部分はとても重要で、Bootstrap 5 では 0 から 5 までの段階を使うことで、細やかな余白設定が可能になります。0 は余白なし、1 は少しだけ、3 は適度な標準、5 はしっかりと広い間隔というように、分かりやすい尺度として機能します。たとえば、コンポーネント同士の距離を落ち着いた見た目に整えたいときは mb-4 や mt-5 を使うと、ページ全体の呼吸が整い自然なレイアウトになります。慣れてくると、余白の大きさを視覚的に想像しやすくなり、コーディングのテンポも大幅に向上します。

また、Bootstrap 5 の大きな特徴として、画面幅に応じて余白の量を変えることができる「ブレークポイント付き余白クラス」があります。たとえば mt-md-5 のように記述すれば、768px 以上の画面幅では上方向に大きめの余白が入り、小さな画面では通常の余白のまま表示されます。スマートフォンでは情報を詰めて表示し、タブレットやパソコンではゆったりと見せたい場合などに非常に有効です。レスポンシブデザインを実現するうえで、こうした柔軟な余白調整は欠かせません。

実際の制作現場では、カードや見出し、フォームや画像コンポーネントなど多くの要素が並びますが、それらの距離を均一に整えることでページ全体に落ち着きが生まれます。Bootstrap 5 の余白ユーティリティは、コンポーネントごとに異なる余白を付けるのではなく、共通のクラスルールで統一できるため、長期的な運用でも管理しやすく、チーム開発にも向いています。サイト全体に統一感のあるデザインを維持するためにも、余白ユーティリティの使い方をしっかりと身につけておくことが大切です。

以下に示す HTML コードでは、見出しと段落、カードの組み合わせに余白ユーティリティを加えて、情報のまとまりを視覚的に分かりやすく配置する例を紹介します。実務の中でもよく使われる形のひとつであり、ブログ、商品一覧ページ、お知らせページなど幅広い場面に応用できる基本パターンです。

余白ユーティリティを適用したサンプルコード

<div class="container my-5">
  <h2 class="fw-bold fs-4 mb-4">余白ユーティリティ使用例</h2>
  <p class="mb-3">この段落は下方向に余白があり、次のカードとの距離がほどよく取られています。</p>

  <div class="card p-3 mb-4">
    <h3 class="fw-bold fs-5 mb-3">カードタイトル</h3>
    <p class="mb-2">カード内のテキスト一行目です。</p>
    <p class="mb-0">最後の行は余白なしに調整しています。</p>
  </div>

  <div class="d-md-flex">
    <div class="card p-3 me-md-3 mb-3 mb-md-0">
      <p class="mb-2">左側のカードです。</p>
      <p class="mb-0">画面幅に応じて間隔が変化します。</p>
    </div>
    <div class="card p-3">
      <p class="mb-2">右側のカードです。</p>
      <p class="mb-0">横並びでも窮屈にならないレイアウトです。</p>
    </div>
  </div>
</div>

このサンプルのように、my-5 や mb-4 といった余白クラスを適切に組み合わせることで、ページ全体の情報の流れが理解しやすくなり、閲覧者にストレスを与えない自然なデザインに仕上がります。特に、スマートフォンとパソコンで異なる見え方を意識しながら余白を調整することで、より高品質なレスポンシブレイアウトが実現できます。