Bootstrap5 スペーシング完全入門｜gapとmarginの使い分けを初心者向けに徹底解説
生徒
「Bootstrapで余白をあけたいんですが、gapとmarginって何が違うんですか？」
先生
「とても大事なところですね。横に並んだ要素同士ならgap、部品と部品の間ならmarginを使うと分かりやすいですよ。」
生徒
「パソコンをほとんど触ったことがなくても理解できますか？」
先生
「大丈夫です。箱を並べるイメージで、順番に説明していきましょう。」
1. Bootstrapのスペーシングとは何か
Bootstrap（ブートストラップ）のスペーシングとは、画面の中で要素と要素の間に「すき間」を作る仕組みです。 パソコン画面は、たくさんの四角い箱が並んでできています。その箱同士がくっつきすぎると、とても見づらくなります。 そこで、margin（マージン）やpadding（パディング）、gap（ギャップ）を使って、読みやすく整えます。
Bootstrap5では、クラスを指定するだけで余白を調整できます。プログラミング未経験の方でも、 英単語を少し覚えるだけでレイアウトを整えられるのが大きな特徴です。
2. marginとは何かを超かんたんに説明
marginとは「箱の外側のすき間」です。ノートに文字を書くとき、文字と文字の間を少し空けると読みやすくなります。 その「空ける部分」がmarginです。Bootstrapでは m-3 や mt-4 のように指定します。
<div class="m-3 bg-light border">
これはmarginがついた箱です
</div>
m は margin の略です。数字が大きいほど、すき間も大きくなります。 コンポーネント、つまり「部品」と「部品」の間を離したいときに、とてもよく使います。
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の使い分けルール
ここが一番大切なポイントです。 横並びの中身同士の間隔は 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との違いも一緒に覚えよう
paddingは「箱の内側のすき間」です。 文字と箱のふちがくっつかないようにするために使います。 marginやgapと一緒に使うことで、見やすい画面になります。
<div class="p-4 bg-warning">
中に余白がある箱
</div>
paddingは中、marginは外、gapは並び。 この三つを言葉で説明できるようになると、Bootstrapの基礎はしっかり身につきます。
6. 初心者がよくつまずくポイント
初心者の方は、すべてmarginで何とかしようとしてしまいがちです。 その結果、左右だけ余白がずれたり、最後の要素だけ広く空いたりします。 横並びのときは、まずgapを思い出してください。
Bootstrap5ではgapが公式で使えるようになり、 コードも短く、読みやすくなっています。 パソコン操作が不慣れな方ほど、このルールを守ると安心です。
