Bootstrap スペーシング完全ガイド｜margin・padding・レスポンシブ余白を初心者向けに解説
生徒
「Bootstrapのmt-md-3って、何を意味しているんですか？英語と数字が並んでいて混乱します…」
先生
「見た目は難しそうですが、実は“余白の大きさを画面サイズごとに決める合図”なんですよ。」
生徒
「パソコンも触ったことがない私でも使えますか？」
先生
「大丈夫です。紙に文字を書くときの“行間”を調整する感覚で考えれば理解できます。」
1. Bootstrapのスペーシングとは何か
Bootstrapのスペーシングとは、画面の中の部品と部品のあいだにある「すき間」を調整する仕組みです。 このすき間には、外側の余白であるmarginと、内側の余白であるpaddingがあります。 これは、ノートに文字を書くとき、紙のふちから少し離して書く感覚や、箱の中に物を入れるときにクッションを入れる感覚と同じです。 プログラミング未経験の人でも、見た目を整えるための便利な道具だと考えると分かりやすくなります。 Bootstrap5では、クラス名を指定するだけで余白を簡単に設定でき、CSSを一から書く必要がありません。 そのため、HTMLだけでデザインを整えたい初心者にとても向いています。
2. marginとpaddingの基本的な違い
marginは「外のすき間」、paddingは「中のすき間」です。 たとえば、ダンボール箱を想像してください。 箱と箱の距離をあけるのがmarginで、箱の中に新聞紙を詰めて中身を守るのがpaddingです。 Bootstrapでは、mがmargin、pがpaddingを意味しています。 それぞれに数字を付けることで、余白の大きさを指定できます。 数字は0から5まであり、数字が大きいほど余白も大きくなります。 このシンプルなルールを覚えるだけで、ページの見た目が一気に整います。
<div class="m-3 p-3 border">
箱の中の文字
</div>
3. レスポンシブ余白という考え方
レスポンシブとは、画面の大きさに合わせて見た目を変える考え方です。 パソコン、タブレット、スマートフォンでは画面の広さが違います。 広い画面では余白を広めに取り、狭い画面では余白を小さくすると読みやすくなります。 Bootstrapでは、この調整をクラス名だけで行えます。 これは、服のサイズを季節や体型に合わせて選ぶのと似ています。 ひとつのデザインを、どの端末でも見やすくするための工夫がレスポンシブ余白です。
4. mt-md-3の意味を分解して理解する
mt-md-3は、三つの情報が合体した名前です。 mtは上方向のmargin、mdは中くらいの画面サイズ以上、3は余白の大きさを表します。 つまり「画面が中くらい以上のときだけ、上にほどよい余白をつける」という意味です。 スマートフォンでは余白なし、パソコンでは余白あり、という指定が簡単にできます。 英語が苦手でも、記号として覚えれば問題ありません。 分解して考えることで、どんなクラス名でも落ち着いて読めるようになります。
<h2 class="mt-md-3">見出しタイトル</h2>
<p>本文テキスト</p>
5. 設計するときの考え方のコツ
レスポンシブ余白を設計するときは、まずスマートフォンを基準に考えます。 小さい画面では情報を詰めすぎないことが大切です。 そのうえで、画面が広くなったら少しずつ余白を足します。 いきなりすべてのサイズを考えようとすると混乱します。 「最小サイズから考える」という順番を守ると、初心者でも失敗しにくくなります。 これは料理で、まず基本の味を作ってから調味料を足す感覚に近いです。
<div class="p-2 p-md-4 bg-light">
画面サイズで余白が変わる箱
</div>
6. 命名のコツとよくある失敗
Bootstrapのクラス名は、短くても意味があります。 自分で名前を付ける必要はなく、決められたルールをそのまま使います。 よくある失敗は、すべてに同じ余白を付けてしまうことです。 見出し、文章、画像では、必要な余白が違います。 ノートに線を引くとき、すべて同じ幅だと読みにくくなるのと同じです。 必要な場所に、必要な分だけ余白を付ける意識を持ちましょう。
7. 初心者が覚えるべき最小ルール
最初は、上下の余白だけを意識すれば十分です。 mとp、tとb、数字の組み合わせを覚えるだけで、基本的な調整はできます。 完璧を目指す必要はありません。 少しずつ触りながら、「この余白は広い」「これは狭い」と感覚をつかむことが大切です。 Bootstrapのスペーシングは、失敗してもすぐ直せる安心な仕組みです。 まずは気軽に試して、画面の変化を楽しんでみてください。
<img src="/img/sample150-100.jpg" class="mt-3 mb-3" alt="サンプル画像">
