Bootstrap5 スペーシング完全入門｜gapとmarginの使い分けを初心者向けに徹底解説

1. Bootstrapのスペーシングとは何か

1. Bootstrapのスペーシングとは何か

Bootstrap（ブートストラップ）のスペーシングとは、画面の中で要素と要素の間に「すき間」を作る仕組みです。 パソコン画面は、たくさんの四角い箱が並んでできています。その箱同士がくっつきすぎると、とても見づらくなります。 そこで、margin（マージン）やpadding（パディング）、gap（ギャップ）を使って、読みやすく整えます。

Bootstrap5では、クラスを指定するだけで余白を調整できます。プログラミング未経験の方でも、 英単語を少し覚えるだけでレイアウトを整えられるのが大きな特徴です。

2. marginとは何かを超かんたんに説明

2. marginとは何かを超かんたんに説明

marginとは「箱の外側のすき間」です。ノートに文字を書くとき、文字と文字の間を少し空けると読みやすくなります。 その「空ける部分」がmarginです。Bootstrapでは m-3 や mt-4 のように指定します。

<div class="m-3 bg-light border">
    これはmarginがついた箱です
</div>

m は margin の略です。数字が大きいほど、すき間も大きくなります。 コンポーネント、つまり「部品」と「部品」の間を離したいときに、とてもよく使います。

3. gapとは何かをイメージで理解しよう

3. gapとは何かをイメージで理解しよう

gapは「横や縦に並んだ箱同士の間隔」をそろえて空けるためのものです。 お弁当箱の中で、おかずを等間隔に並べるイメージをしてください。 gapは、flex（フレックス）という横並びの仕組みと一緒に使います。

<div class="d-flex gap-3">
    <div class="p-2 bg-secondary text-white">箱1</div>
    <div class="p-2 bg-secondary text-white">箱2</div>
    <div class="p-2 bg-secondary text-white">箱3</div>
</div>

横に並んだ要素すべての間が、同じ幅で空きます。 一つ一つにmarginを付けなくていいので、初心者にはとても扱いやすい方法です。

4. gapとmarginの使い分けルール

4. gapとmarginの使い分けルール

ここが一番大切なポイントです。 横並びの中身同士の間隔は gap、 大きな部品と部品の間は margin を使うと、頭が混乱しません。

<div class="card m-4">
    <div class="d-flex gap-2">
        <button class="btn btn-primary">はい</button>
        <button class="btn btn-secondary">いいえ</button>
    </div>
</div>

外側のカードと周りの要素はmarginで調整し、 中のボタン同士はgapで間隔をあけています。 この考え方を覚えるだけで、レイアウトが一気に整います。

5. paddingとの違いも一緒に覚えよう

5. paddingとの違いも一緒に覚えよう

paddingは「箱の内側のすき間」です。 文字と箱のふちがくっつかないようにするために使います。 marginやgapと一緒に使うことで、見やすい画面になります。

<div class="p-4 bg-warning">
    中に余白がある箱
</div>

paddingは中、marginは外、gapは並び。 この三つを言葉で説明できるようになると、Bootstrapの基礎はしっかり身につきます。

6. 初心者がよくつまずくポイント

6. 初心者がよくつまずくポイント

初心者の方は、すべてmarginで何とかしようとしてしまいがちです。 その結果、左右だけ余白がずれたり、最後の要素だけ広く空いたりします。 横並びのときは、まずgapを思い出してください。

Bootstrap5ではgapが公式で使えるようになり、 コードも短く、読みやすくなっています。 パソコン操作が不慣れな方ほど、このルールを守ると安心です。