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を逆に覚えてしまうことです。外か内かを、箱のイメージで何度も思い出すと間違えにくくなります。
また、方向指定のアルファベットも最初は覚えにくいですが、上や下を英語の頭文字として見ると自然に覚えられます。
スペーシングは見た目で結果がすぐわかるので、実際に書いて、表示を見て確認することが一番の近道です。
【60分集中】CSSを1行も書かない！？Bootstrap 5ユーティリティクラス活用で開発工数を50%削減
「スピード」が武器になる。Bootstrap 5で商用クオリティのWebサイトを高速構築。
本講座では、世界シェアNo.1のフレームワークBootstrap 5を使いこなし、ゼロからレスポンシブサイトを組み上げる「現場最速のワークフロー」を学びます。単なる導入に留まらず、ユーティリティクラスを活用した効率化と、実務で必須となるカスタマイズ技法を60分で完全習得します。
具体的なワークショップ内容と環境
【つくるもの】
モダンなランディングページ（LP）やダッシュボードのプロトタイプを作成します。ナビゲーション、ヒーローセクション、カードレイアウト、フッターなど、Bootstrapのコンポーネントを組み合わせて「一瞬で形にする」感動を体験してください。
【開発環境】
VS CodeにBootstrap 5専用のSnippet（補完機能）を導入し、手入力を最小限にする環境を構築。最新のCDN利用法や、表示速度（Core Web Vitals）を意識した最適な読み込み設定など、プロの初期設定を伝授します。
この60分で得られる3つの革新スキル
スマホ・タブレット・PCでレイアウトを自由自在に切り替える「ブレイクポイント」の極意を学びます。
CSSを1行も書かずに、マージン・パディング・カラーを制御。開発工数を半分以下にする実戦術を習得します。
「Bootstrap感」を消し、独自のブランドイメージに合わせるための、上書きの作法とデザインの整え方を伝授します。
※本講座は、HTML/CSSの基本を理解した方向けの「実践加速講座」です。制作会社のコーダーや副業フリーランスとして「案件の回転率」を上げ、市場価値を最大化させたい方をモクモクがバックアップします。
Bootstrap 5を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
