Bootstrapのスペーシング（margin・padding）を完全理解！m-*/p-*の基本ルールを初心者向けに解説
生徒
「Bootstrapでm-4とかp-3って書いてあるのを見たんですが、何を意味しているのか全然わかりません…」
先生
「Bootstrapのスペーシングは、余白をとても簡単に指定できる便利な仕組みなんです。」
生徒
「余白って、要素と要素の間のスキマのことですよね？」
先生
「その通りです。これからm-*/p-*のルールを、方向と大きさに分けて一つずつ説明します。」
1. Bootstrapのスペーシングとは何か
Bootstrapのスペーシングとは、画面の中にある部品同士の間隔を調整するための仕組みです。文字や画像、箱と箱の間がギュウギュウだと、とても読みにくくなります。そのため、適度なスキマを作ることが大切です。
Bootstrapでは、難しい設定をしなくても、決まったクラス名を書くだけで余白を付けられます。これがスペーシングユーティリティと呼ばれる機能です。
ここでいう余白には、外側の余白と内側の余白があります。外側は他の要素との距離、内側は箱の中の文字と枠線の距離だと考えると理解しやすいです。
2. mとpの違いを理解しよう
Bootstrapのスペーシングで最初に覚えるのが、mとpの違いです。mは外側の余白、pは内側の余白を意味します。
段ボール箱を想像してください。箱と箱の間を空けるのがm、箱の中で物と壁の間を空けるのがpです。このイメージを持つと混乱しにくくなります。
m-4やp-3のように書くことで、数字の分だけ余白の大きさが変わります。数字が大きいほど、スキマも大きくなります。
<div class="m-3 bg-light border">
外側に余白があります
</div>
<div class="p-3 bg-light border">
内側に余白があります
</div>
3. 方向を表す記号 t b s e x y
mやpの後ろには、どの方向に余白を付けるかを指定できます。これを方向指定と呼びます。方向を指定しない場合は、上下左右すべてに余白が付きます。
tは上、bは下、sは左、eは右を意味します。横方向まとめて指定したいときはx、縦方向まとめて指定したいときはyを使います。
たとえばmt-3は上だけ、px-4は左右だけに余白を付ける指定です。必要な方向だけ調整できるので、細かいデザインがしやすくなります。
<div class="mt-4 bg-light border">
上にだけ余白
</div>
<div class="px-4 bg-light border">
左右にだけ余白
</div>
4. スケール数値 0から5の意味
Bootstrapのスペーシングでは、余白の大きさを数字で指定します。基本は0から5までの6段階です。0は余白なし、数字が大きくなるほど広くなります。
この数字は、Bootstrap内部で決められた基準サイズに基づいています。自分で細かい数値を考えなくても、バランスの良い余白が簡単に作れます。
初心者のうちは、2や3をよく使うと見た目が整いやすくなります。まずは数字を変えて、見た目がどう変わるかを試してみることが大切です。
<div class="p-1 bg-light border">p-1</div>
<div class="p-3 bg-light border mt-2">p-3</div>
<div class="p-5 bg-light border mt-2">p-5</div>
5. 組み合わせルールを完全整理
Bootstrapのスペーシングは、mまたはp、方向、数値をこの順番で組み合わせます。順番が決まっているので、パズルのように考えると覚えやすいです。
たとえばmb-2は下に少し余白、ps-4は左側に大きめの内側余白という意味になります。すべて同じルールなので、覚えることは多くありません。
方向を省略した場合は、上下左右すべてに適用されます。最初は省略形を使い、慣れてきたら方向指定を使うのがおすすめです。
6. 実際の画面でよく使う例
実際のWebページでは、見出しと本文の間、カード同士の間など、さまざまな場所でスペーシングを使います。特にmとpは毎日のように使う基本機能です。
余白が少なすぎると読みにくく、多すぎると間延びした印象になります。Bootstrapの決められた数値を使うことで、自然な見た目になりやすいです。
<div class="card p-3 mb-4">
<h3>カードのタイトル</h3>
<p>カードの中の文章です。</p>
</div>
<div class="card p-3">
<h3>次のカード</h3>
<p>余白で区切られています。</p>
</div>
7. 初心者がつまずきやすいポイント
初心者がよく混乱するのは、mとpを逆に覚えてしまうことです。外か内かを、箱のイメージで何度も思い出すと間違えにくくなります。
また、方向指定のアルファベットも最初は覚えにくいですが、上や下を英語の頭文字として見ると自然に覚えられます。
スペーシングは見た目で結果がすぐわかるので、実際に書いて、表示を見て確認することが一番の近道です。
