Bootstrap スペーシング完全入門｜LP・ブログで読みやすい余白設計の基本

セクション上下の余白設計：LP・ブログでの「読みやすい」間隔基準

先生と生徒の会話形式で理解しよう

生徒

「Bootstrapでページを作るとき、上下の余白ってどれくらい空ければいいんですか？」

先生

「余白は読みやすさに直結します。Bootstrapのmarginとpaddingを使うと、簡単に整えられますよ。」

生徒

「数字がいっぱいあって、どれを選べばいいのかわからなくて…」

先生

「では、LPやブログで使いやすい基準を、順番に見ていきましょう。」

1. Bootstrapのスペーシングとは何か

Bootstrapのスペーシングとは、要素と要素の間にある「すき間」を調整する仕組みです。このすき間には、marginとpaddingという二つの考え方があります。 marginは外側の余白、paddingは内側の余白を表します。本やノートでたとえると、文字の外にある余白がmargin、枠の内側の余白がpaddingです。この余白が適切だと、LPやブログはとても読みやすくなります。

2. marginとpaddingの違いをやさしく理解する

marginとpaddingは名前が似ているため、初心者が混乱しやすいポイントです。 marginは要素同士の距離を広げる役割があります。 paddingは要素の中にある文字や画像と枠線との距離を広げます。料理のお皿で考えると、お皿同士の間隔がmargin、お皿のフチと料理の間のすき間がpaddingです。


<div class="border m-3 p-3">
    余白のあるボックス
</div>

ブラウザ表示

3. Bootstrapの余白サイズの基本ルール

Bootstrapでは、余白の大きさを数字で指定します。数字は0から5まで用意されていて、数字が大きいほど余白も大きくなります。 LPやブログでは、見出しの上下に3や4、セクションの区切りには4や5を使うことが多いです。まずは「小さめ」「普通」「広め」という感覚で覚えると安心です。


<section class="mb-4">
    <h2>見出し</h2>
    <p>本文テキスト</p>
</section>

ブラウザ表示

4. セクション上下の余白はどれくらいが読みやすいか

セクション上下の余白は、読みやすさを左右する重要な要素です。余白が狭すぎると、文章が詰まって見えて疲れます。逆に広すぎると、スクロール量が増えてしまいます。ブログ記事ではmb-5程度、 LPでは強調したい区切りにmb-5やmt-5を使うと、ちょうどよいリズムになります。


<section class="mt-5 mb-5">
    <h2>サービス紹介</h2>
    <p>サービスの説明文が入ります。</p>
</section>

ブラウザ表示

5. LPでよく使われる余白設計の考え方

LPでは、情報のかたまりごとに余白をしっかり取ることが大切です。キャッチコピー、画像、説明文の間に余白があると、視線の流れが自然になります。特にファーストビューの下は、余白を広めに取ることで次のセクションが目立ちます。 Bootstrapのスペーシングは、デザインの知識がなくても整った見た目を作れます。