CSSのマージンとパディングで作る！初心者でもわかるレスポンシブ対応の余白設計の考え方

レスポンシブ対応のための余白設計の考え方

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

生徒

「先生、スマホで見ると余白が広すぎたり、逆に詰まりすぎたりして困ります。どうしたらいいんですか？」

先生

「とても良い気づきですね。Webサイトをどんな端末でも見やすくするためには、“レスポンシブ対応”の余白設計が大切です。」

生徒

「レスポンシブ対応ってなんですか？」

先生

「簡単に言うと、スマホ・タブレット・パソコンなど、画面の大きさに合わせてデザインが自動で変わる仕組みのことです。マージンやパディングの使い方を工夫すれば、どんな画面でもバランスよく表示できるようになりますよ。」

1. レスポンシブデザインでの余白設計とは？

Webサイトにおける「余白」とは、単なる空きスペースではありません。コンテンツ同士の境界を明確にし、ユーザーの視線をスムーズに誘導するための重要なデザイン要素です。CSSでは、この余白をマージン（margin）とパディング（padding）という2つのプロパティで制御します。

2026年現在のWeb閲覧はスマホが主流ですが、タブレットやPCなど画面サイズは多様化しています。レスポンシブデザインでの余白設計とは、どのデバイスで見ても「文字が読みやすく」「クリック（タップ）しやすい」最適な空間を自動で維持することを指します。例えば、画面が狭いスマホでは余白を最小限にして情報を凝縮し、広いPC画面ではゆったりと余白を取って高級感を出すといった調整が欠かせません。

まずは、プログラミングが初めての方でも分かりやすいように、マージン（外側）とパディング（内側）の違いを視覚的に確認してみましょう。


<style>
    .box-sample {
        background-color: #e3f2fd;
        border: 2px solid #007bff;
        /* パディング：枠線と文字の間の距離（内側） */
        padding: 20px;
        /* マージン：枠線の外側の空間（外側） */
        margin: 20px;
        display: inline-block;
    }
</style>

<div class="box-sample">
    これが「箱（要素）」です。
</div>
<div class="box-sample">
    隣の箱との間にあるのがマージンです。
</div>

ブラウザ表示

このように、要素の内側の広さを決めるのがパディング、要素と要素の距離を離すのがマージンです。この2つを画面の横幅に合わせて適切に変化させることが、見やすいレスポンシブサイトを作る第一歩となります。

2. 単位を工夫して余白を自動調整する

固定値のpx（ピクセル）で余白を指定してしまうと、画面の大きさが変わっても余白は変わらず、スマホで窮屈に見えることがあります。そこで使えるのが、%（パーセント）やvw（ビューポート幅）などの単位です。

これらを使うと、画面サイズに応じて余白が自動で調整されます。


<style>
    .responsive-box {
        width: 80%;
        margin: 5vw auto;
        padding: 3vw;
        border: 2px solid #007bff;
    }
</style>

<div class="responsive-box">画面の幅に合わせて余白が変わります</div>

ブラウザ表示

上の例では、marginとpaddingにvwを使っています。これは画面の幅を基準にして余白が自動的に変わるため、スマホでもパソコンでも自然なレイアウトになります。

3. メディアクエリを使ってデバイスごとに余白を変える

さらに細かく調整したい場合は、メディアクエリ（@media）を使います。これは「もし画面が〇〇ピクセル以下なら、このスタイルを適用する」といった条件を設定できる仕組みです。

例えば、パソコンでは余白を広めに、スマホでは狭めにするコードは以下のようになります。


<style>
    .content {
        border: 2px solid #555;
        padding: 40px;
        margin: 40px auto;
        width: 70%;
    }

    @media (max-width: 768px) {
        .content {
            padding: 20px;
            margin: 20px auto;
            width: 90%;
        }
    }
</style>

<div class="content">画面サイズで余白が変わります</div>

ブラウザ表示

このように設定すると、画面幅が768px以下のときに余白が小さくなり、スマホでもバランスよく表示されます。これがレスポンシブ対応の基本的な考え方です。

4. マージンとパディングの使い分けのコツ

初心者の方が混乱しやすいのが、マージンとパディングの違いです。

マージン：ボックスの外側の余白。隣の要素との間隔を作る。
パディング：ボックスの内側の余白。文字や画像を内側に押し込むように広げる。

レスポンシブ対応では、テキストの読みやすさを保つために、パディングを画面幅に応じて調整することが多いです。


<style>
    .text-box {
        background-color: #f8f9fa;
        border: 2px solid #aaa;
        padding: 4vw;
        margin: 3vw;
    }
</style>

<div class="text-box">このボックスはパディングが可変です。</div>

ブラウザ表示

このように設定すれば、スマホでは詰まりすぎず、パソコンでは広がりすぎないちょうど良い余白を保てます。

5. コンテンツ幅と余白のバランスを考える

レスポンシブ対応では、「余白」だけでなく「コンテンツ幅」も一緒に考えることが重要です。例えば、画面幅が広くても、中央に配置するボックスが小さすぎると寂しい印象になります。

一般的には、max-width（最大幅）を設定して、左右のマージンを自動（auto）にする方法が使われます。


<style>
    .container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 5vw;
        border: 2px solid #333;
    }
</style>

<div class="container">中央に配置されたボックス（レスポンシブ対応）</div>

ブラウザ表示

このように設定すると、画面が広いときは最大幅1000pxを維持し、狭い画面では自動的に縮むため、どの端末でもちょうど良いレイアウトになります。