6日でできる 新HTML&CSS入門｜Bootstrapのスペーシング
余白を整えるだけで、Webページはぐっと読みやすくなる。
Bootstrapのスペーシングclassを使って、margin、padding、gapをすばやく調整しよう。
Webページの見やすさは、文字の大きさや色だけで決まるわけではありません。見出しと本文の間、ボックスとボックスの間、ボタン同士の間隔、画面の端とコンテンツの距離など、余白の取り方によってページ全体の印象は大きく変わります。
余白が少なすぎると、要素が詰まって見えて読みにくくなります。反対に、余白が多すぎると、情報同士のつながりが分かりにくくなることがあります。Webデザインでは、必要な場所に適切な余白を作ることがとても大切です。
Bootstrapでは、この余白調整を簡単に行うために、スペーシングユーティリティというclassが用意されています。m-3、p-3、mt-5、mb-4、px-5、py-2、gap-2のようなclassをHTMLに追加するだけで、margin、padding、要素間のgapを調整できます。
通常のCSSでは、margin-topやpadding-leftなどを自分で書いて余白を調整します。Bootstrapでは、あらかじめ決められたclassを使うことで、CSSを追加しなくても統一感のある余白を指定できます。特に、Bootstrapでボタン、カード、フォーム、グリッドを作るときは、スペーシングclassを使いこなすことで、見た目を整えやすくなります。
この記事では、Bootstrapのスペーシングの基本として、marginとpaddingの違い、mとpの読み方、t、b、s、e、x、yの方向指定、0から5までのサイズ指定、mx-autoによる中央寄せ、gapによる要素間隔の調整を、サンプルHTMLを使いながら分かりやすく解説します。
スペーシングとは何か
スペーシングとは、要素のまわりや内側に作る余白のことです。Webページでは、余白を適切に使うことで、情報のまとまりが分かりやすくなり、読みやすいレイアウトになります。
Bootstrapのスペーシングでは、主にmarginとpaddingを調整します。
| 種類 | 意味 | 使う場面 |
|---|---|---|
| margin | 要素の外側の余白 | 要素と要素の間隔を空けたいとき |
| padding | 要素の内側の余白 | ボックス内の文字と枠の間隔を空けたいとき |
| gap | 子要素同士の間隔 | グリッドやflexの中で要素間を空けたいとき |
たとえば、見出しの下に本文との間隔を作りたい場合はmarginを使います。ボックスの中の文字が端に寄りすぎている場合はpaddingを使います。ボタンを縦に並べて、その間を空けたい場合はgapを使うと便利です。
Bootstrapでは、これらの余白をclassだけで指定できます。CSSファイルを直接編集しなくても、HTMLのclassを変えるだけで余白を調整できる点が大きな特徴です。
図1：margin、padding、gapで余白の場所が変わる
この図から分かること
marginは要素の外側に作る余白、paddingは要素の内側に作る余白です。gapは、グリッドやflexの子要素同士の間隔を調整するときに使います。どの余白を調整したいのかを見分けることで、Bootstrapのスペーシングclassを正しく使いやすくなります。
Bootstrapのスペーシングユーティリティ
Bootstrapのスペーシングユーティリティとは、余白を簡単に指定するためのclassです。mやpなどの短いclass名を使って、marginやpaddingを調整します。
| classの先頭 | 意味 | 対応するCSS |
|---|---|---|
| m | margin | 外側の余白 |
| p | padding | 内側の余白 |
たとえば、m-3は全方向にmarginを付けるclassです。p-3は全方向にpaddingを付けるclassです。
<div class="m-3">外側に余白があります</div>
<div class="p-3">内側に余白があります</div>mはmargin、pはpaddingと覚えると分かりやすいです。Bootstrapでは、このmやpに方向とサイズを組み合わせて余白を指定します。
方向を指定するサフィックス
Bootstrapでは、余白をどの方向に付けるかをclass名の中で指定できます。方向を表す部分をサフィックスとして考えると分かりやすくなります。
| サフィックス | 意味 | 方向 |
|---|---|---|
| t | top | 上 |
| b | bottom | 下 |
| s | start | 左。日本語や英語のような左から右へ読む言語では左側 |
| e | end | 右。日本語や英語のような左から右へ読む言語では右側 |
| x | startとend | 左右 |
| y | topとbottom | 上下 |
| なし | 全方向 | 上下左右すべて |
たとえば、mt-5は上方向のmargin、mb-3は下方向のmargin、px-5は左右方向のpadding、py-2は上下方向のpaddingです。
<div class="mt-5">上に大きめの余白があります</div>
<div class="px-4">左右の内側に余白があります</div>sとeは、startとendの意味です。左から右へ読む言語では、sが左、eが右になります。Bootstrapでは、国際化を考慮してleftやrightではなくstartやendという考え方を使います。
サイズ指定の考え方
Bootstrapのスペーシングclassでは、余白の大きさを0から5の数字で指定します。数字が大きいほど余白も大きくなります。
| サイズ指定 | 内容 |
|---|---|
| 0 | 余白なし |
| 1 | 0.25rem |
| 2 | 0.5rem |
| 3 | 1rem |
| 4 | 1.5rem |
| 5 | 3rem |
| auto | marginで自動指定。中央寄せなどに使う |
よく使うのは、2、3、4あたりです。少しだけ余白を付けたい場合は2、標準的な余白なら3、広めに空けたい場合は4や5を使うと考えると分かりやすいです。
| class | 意味 |
|---|---|
| m-3 | 全方向にmargin 1rem |
| p-3 | 全方向にpadding 1rem |
| mt-5 | 上方向にmargin 3rem |
| mb-4 | 下方向にmargin 1.5rem |
| px-5 | 左右にpadding 3rem |
| py-2 | 上下にpadding 0.5rem |
Bootstrapのスペーシングclassは、細かな数値を直接書かなくても、統一された余白を使える点が便利です。ページ全体で余白の大きさがそろいやすくなります。
図2：スペーシングclassはプロパティ、方向、サイズで読む
この図から分かること
Bootstrapのスペーシングclassは、mやp、方向、サイズの組み合わせでできています。mt-5なら、mはmargin、tはtop、5は大きめの余白を表します。px-3なら、pはpadding、xは左右、3は標準的な余白です。class名を分解して読むと、どの場所にどれくらいの余白が付くのか理解しやすくなります。
marginとpaddingの使い分け
marginとpaddingはどちらも余白ですが、使う場所が違います。Webページを整えるときは、この違いを意識することが大切です。
| 調整したいこと | 使うもの | 例 |
|---|---|---|
| 要素と要素の間を空けたい | margin | 見出しと本文の間、ボックス同士の間 |
| ボックス内の文字を端から離したい | padding | 色付きボックス内の文字、カード内の文章 |
| ボタン同士の間隔を空けたい | gap、margin | 縦並びのボタン、横並びのボタン |
| 中央寄せしたい | margin auto | mx-auto |
たとえば、見出しの下に余白を作る場合はmb-4を使えます。色付きのボックス内で文字が端に寄りすぎている場合はp-3を使います。
<h2 class="mb-4">お知らせ</h2>
<div class="bg-light p-3">内側に余白があるボックスです</div>marginは外側、paddingは内側と覚えると、余白の調整がしやすくなります。
BootstrapスペーシングのサンプルHTML
ここでは、CDN経由でBootstrapを読み込み、いろいろなスペーシングclassを使ったボックスとボタンを表示します。
ファイル名： lesson56_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Bootstrap スペーシング サンプル</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
<h2 class="mb-4">スペーシングの例</h2>
<div class="bg-primary text-white p-3 mb-3">
青いボックス：p-3で全方向の内側余白、mb-3で下方向の外側余白
</div>
<div class="bg-success text-white px-5 py-2 mb-4">
緑のボックス：px-5で左右の内側余白、py-2で上下の内側余白、mb-4で下方向の外側余白
</div>
<div class="bg-warning text-dark mt-5 mb-2 ps-4">
黄色のボックス：mt-5で上方向の外側余白、mb-2で下方向の外側余白、ps-4で左側の内側余白
</div>
<div class="d-grid gap-2 mt-5">
<button class="btn btn-info">ボタンA gapで間隔あり</button>
<button class="btn btn-info">ボタンB gapで間隔あり</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>ブラウザの表示例
ブラウザで表示すると、containerの中に見出しと3つの色付きボックスが表示されます。
青いボックスは、p-3によって上下左右の内側に余白ができます。さらにmb-3によって、次のボックスとの間に下方向の余白ができます。
緑のボックスは、px-5によって左右の内側余白が広くなり、py-2によって上下の内側余白が少し付いています。mb-4によって、下方向にやや広めの余白が作られます。
黄色のボックスは、mt-5によって上方向に大きな余白が付き、ps-4によって左側の内側に余白ができます。最後に、d-gridとgap-2を使ったボタンが縦に並び、ボタン同士の間に適度な間隔ができます。
サンプルHTMLで使ったclassの意味
サンプルHTMLでは、スペーシング以外にも背景色や文字色のclassを組み合わせています。
| class | 意味 |
|---|---|
| container | コンテンツを中央寄せの読みやすい幅にする |
| py-4 | 上下にpadding 1.5remを付ける |
| mb-4 | 下にmargin 1.5remを付ける |
| bg-primary | 青系の背景色にする |
| bg-success | 緑系の背景色にする |
| bg-warning | 黄色系の背景色にする |
| text-white | 文字色を白にする |
| text-dark | 文字色を濃い色にする |
| p-3 | 全方向にpadding 1remを付ける |
| mb-3 | 下にmargin 1remを付ける |
| px-5 | 左右にpadding 3remを付ける |
| py-2 | 上下にpadding 0.5remを付ける |
| mt-5 | 上にmargin 3remを付ける |
| mb-2 | 下にmargin 0.5remを付ける |
| ps-4 | 左側にpadding 1.5remを付ける |
| d-grid | グリッド表示にする |
| gap-2 | 子要素同士の間隔を0.5remにする |
このように、Bootstrapでは複数のclassを組み合わせて見た目を整えます。背景色、文字色、余白、配置などをclassで指定できるため、CSSを少なくしてレイアウトを作れます。
p-3とmb-3の違い
サンプルの青いボックスには、p-3とmb-3が指定されています。
<div class="bg-primary text-white p-3 mb-3">p-3はpaddingです。ボックスの内側に余白を作るため、文字がボックスの端にくっつかず、読みやすくなります。
mb-3はmargin-bottomです。ボックスの外側、下方向に余白を作るため、次の要素との間隔が空きます。
| class | 種類 | 余白が付く場所 |
|---|---|---|
| p-3 | padding | ボックスの内側全方向 |
| mb-3 | margin | ボックスの外側下方向 |
同じ余白でも、内側なのか外側なのかで見た目が変わります。ボックスの中を広げたいならpadding、要素同士を離したいならmarginを使います。
pxとpyで左右・上下をまとめて指定する
px-5やpy-2は、左右または上下のpaddingをまとめて指定するclassです。
<div class="bg-success text-white px-5 py-2 mb-4">px-5は、左と右の内側余白を広く取ります。py-2は、上と下の内側余白を少し取ります。左右を広めに、上下を控えめにしたいときに便利です。
| class | 意味 |
|---|---|
| px-5 | 左右にpadding 3rem |
| py-2 | 上下にpadding 0.5rem |
| mx-3 | 左右にmargin 1rem |
| my-4 | 上下にmargin 1.5rem |
xは左右、yは上下と覚えると分かりやすいです。ボタン、カード、見出し、セクションなど、左右や上下だけをまとめて調整したい場面でよく使います。
図3：p、m、x、y、gapを組み合わせて余白を整える
この図から分かること
Bootstrapのスペーシングclassを使うと、内側余白、外側余白、上下左右の余白、要素同士の間隔を簡単に調整できます。p-3は全方向の内側余白、mb-3は下方向の外側余白、px-5は左右の内側余白、gap-2は子要素同士の間隔を表します。class名を読むことで、どの余白が設定されているのか分かります。
mtとmbで上下の余白を調整する
mtはmargin-top、mbはmargin-bottomを表します。上下方向の余白は、見出しやボックスの間隔を整えるときによく使います。
<div class="mt-5 mb-2">
上に大きめ、下に小さめの余白があります
</div>| class | 意味 |
|---|---|
| mt-1 | 上に小さなmargin |
| mt-3 | 上に標準的なmargin |
| mt-5 | 上に大きなmargin |
| mb-2 | 下に小さめのmargin |
| mb-4 | 下にやや大きめのmargin |
たとえば、セクションの開始位置を少し下げたいときはmt-5を使えます。見出しの下に本文との間隔を作りたいときはmb-3やmb-4を使うと自然です。
psとpeで左右の内側余白を調整する
psはpadding-start、peはpadding-endを表します。左から右へ読む言語では、psは左側、peは右側になります。
<div class="ps-4">
左側に内側余白があります
</div>| class | 意味 |
|---|---|
| ps-4 | start側にpadding 1.5rem |
| pe-4 | end側にpadding 1.5rem |
| ms-3 | start側にmargin 1rem |
| me-3 | end側にmargin 1rem |
従来のCSSではleftやrightを使うことが多いですが、Bootstrapではstartやendという考え方を使います。これにより、言語の表示方向に対応しやすくなります。
日本語や英語のように左から右へ読むページでは、startは左、endは右と考えると理解しやすいです。
mx-autoで中央寄せする
mx-autoは、左右のmarginをautoにするclassです。要素を中央寄せしたいときに使います。
<div class="mx-auto" style="width: 300px;">
中央寄せのボックス
</div>mxは左右、autoは自動です。左右のmarginをautoにすることで、幅が指定された要素を中央に配置できます。
| class | 意味 |
|---|---|
| mx-auto | 左右marginをautoにする |
| ms-auto | start側のmarginをautoにする |
| me-auto | end側のmarginをautoにする |
mx-autoを使う場合は、中央寄せしたい要素に幅が必要になることがあります。幅が画面いっぱいの要素では、中央寄せしても見た目が変わらない場合があります。
gapで子要素同士の間隔を調整する
gapは、グリッドやflexの子要素同士の間隔を調整するclassです。サンプルでは、d-gridとgap-2を組み合わせて、2つのボタンの間隔を空けています。
<div class="d-grid gap-2">
<button class="btn btn-info">ボタンA</button>
<button class="btn btn-info">ボタンB</button>
</div>| class | 役割 |
|---|---|
| d-grid | 親要素をグリッド表示にする |
| gap-2 | 子要素同士に0.5remの間隔を作る |
| gap-3 | 子要素同士に1remの間隔を作る |
| gap-4 | 子要素同士に1.5remの間隔を作る |
ボタン同士の間隔を空けるために、それぞれのボタンにmb-2を付ける方法もあります。しかし、親要素にgapを指定すると、子要素同士の間隔をまとめて管理できるため、コードが分かりやすくなります。
よく使うスペーシングclass
Bootstrapでよく使うスペーシングclassを整理しておきます。
| class | 効果 |
|---|---|
| m-3 | 全方向にmargin 1rem |
| p-3 | 全方向にpadding 1rem |
| mt-5 | 上にmargin 3rem |
| mb-3 | 下にmargin 1rem |
| mb-4 | 下にmargin 1.5rem |
| pt-2 | 上にpadding 0.5rem |
| pb-2 | 下にpadding 0.5rem |
| px-5 | 左右にpadding 3rem |
| py-2 | 上下にpadding 0.5rem |
| ps-4 | start側にpadding 1.5rem |
| mx-auto | 左右marginをautoにする |
| gap-4 | 子要素同士の間隔を1.5remにする |
最初はすべてを暗記する必要はありません。mは外側、pは内側、tは上、bは下、xは左右、yは上下、数字は余白の大きさ、というルールを理解しておけば、class名を見ただけで意味を予想できるようになります。
スペーシングclassでよくある失敗
Bootstrapのスペーシングclassは便利ですが、使い方を間違えると意図した余白にならないことがあります。
| よくある失敗 | 原因 | 対策 |
|---|---|---|
| 余白が外側に付いてほしいのに内側に付く | marginではなくpaddingを使っている | mとpの違いを確認する |
| ボックス内の文字が端に寄る | paddingを指定していない | p-3やpx-4を使う |
| 要素同士がくっついて見える | marginやgapが不足している | mb-3やgap-2を使う |
| 中央寄せされない | mx-autoだけで幅を指定していない | widthやBootstrapの幅classを確認する |
| 余白が大きすぎる | サイズ5などを使いすぎている | 2や3に下げて調整する |
| スマホで余白が広すぎる | 画面幅に対して余白が大きい | レスポンシブ用classや小さめの余白を検討する |
余白は多ければよいわけではありません。読みやすさとまとまりを意識して、必要な場所に必要な分だけ設定することが大切です。
Bootstrapスペーシングを使うときの考え方
Bootstrapのスペーシングを使うときは、まず「どこに余白を作りたいのか」を考えます。要素の外側を空けたいならmargin、要素の内側を広げたいならpadding、子要素同士の間を空けたいならgapです。
次に、方向を決めます。上だけならt、下だけならb、左右ならx、上下ならy、全方向なら方向指定なしです。最後に、余白の大きさを0から5の数字で決めます。
| 考える順番 | 例 |
|---|---|
| 何の余白か | marginかpaddingか |
| どの方向か | 上、下、左右、上下、全方向 |
| どれくらいか | 0から5、またはauto |
| classにする | mt-5、p-3、px-4、gap-2など |
たとえば、見出しの下に標準的な余白を作りたいならmb-3、ボックスの内側全体に余白を作りたいならp-3、ボタン同士の間隔を空けたいならgap-2というように考えます。
スペーシングで読みやすいレイアウトを作る
Bootstrapのスペーシングユーティリティを使うと、margin、padding、gapをclassで簡単に調整できます。mは外側の余白、pは内側の余白を表し、t、b、s、e、x、yで方向を指定します。数字は余白の大きさを表し、0から5までを使って調整できます。
余白は、Webページの読みやすさに大きく関わります。見出しと本文の間、ボックス内の文字と枠の間、ボタン同士の間隔などを整えることで、ページ全体がすっきり見えます。
Bootstrapでは、p-3、mb-3、px-5、py-2、mt-5、gap-2などのclassを組み合わせるだけで、余白をすばやく調整できます。CSSを直接書く前に、まずはBootstrapのスペーシングclassでどこまで整えられるか試してみましょう。余白のルールを理解すると、Bootstrapを使ったレイアウト制作がさらにスムーズになります。