【html/CSS】余白(padding,margin) をレスポンシブで可変する方法

「余白をパソコンでは大きく、スマホでは小さくしたい！」

余白(padding,margin)をレスポンシブで可変させる方法を解説します。

【結論】padding:4%

迷ったら「padding:4%」を指定しましょう。

余白の可変方法

まず、余白を指定するにはpaddingとmarginがあります。

paddingは要素の内側、marginは要素の外側の余白を指定できます。

余白を作りたいならpaddingがオススメです。

paddingの値を指定するとき、px以外にもemや%、vwなどの単位を指定できます。

レスポンシブ対応を意識して余白を指定したいのであれば%かvwがオススメです。

%は親の幅を、vwはブラウザの幅を基準とします。

%もvwもスマホ幅になると当然小さくなるため、余白を小さくするという目的にかなっています。

paddingの%指定は左右の余白はもちろん、上下の余白も親要素の横幅を基準とします。

%を使うかvwを使うかはサイトのデザインや構成によるため一概には言えませんが、%のほうが比較的使いやすいことが多いでしょう。

余白の数値

「padding:○%」と指定することまでは理解できたかと思いますが、この「○」部分、つまり数値はどうすればいいでしょう？

これも当然デザインによるため、明確な答えはありません。

よって以下は「まったく想像もつかない」というかたのためのヒントだと思ってください。

基準は最大値と最小値です。

最大値は一般的なデスクトップの横幅1920pxとしましょう。

最小値は一般的なスマホの横幅360pxとしましょう。

スマホ

まず、最小値、つまりスマホから考えます。

スマホは横幅が小さいことが特徴です。

そして文章を読む時、縦にスクロールします。

ただし、あまりにもスクロールの頻度が多いのもメンドウに感じさせ、読みづらくなってしまいます。

そこでスマホでは一行の文字数を多くして少しでもスクロール量を減らす工夫が必要です。

よって、左右の余白を減らすことが読みやすくするコツになります。

とはいえ、余白が0ではスマホを触っている指に隠れてしまったり、左右に続きがあると勘違いさせてしまい読みづらくさせてしまいます。

そこでオススメが1文字分の余白です。

この1文字分がpadding:4%前後です。

※360px × 4%＝14.4px

なお、「padding:1em」と指定するのもいいでしょう。

パソコン

パソコンでは横幅いっぱい（1920px）に文字を並べると一行が長すぎて読みづらいです。

文章であれば横幅700px程度で折り返すと読みやすいでしょう。

あとはその外側に余白を用意しましょう。

パソコンでも「padding:4%」にしてもいいですが、スマホと違い、横幅に余裕があります。

よってもっと大きめの数値を指定してもいいでしょう。

ちなみに当サイトのパソコン版の横幅のpaddingは7%です。

これは余白をたっぷり持つほかに、h2やh3の頭を少し左に置くための余白を確保する目的があります。

スマホとパソコンどちらも「padding:4%」にする必要はなく、メディアクエリを使って切り替えることも必要です。

例

@media(max-width:750px){
    main{
        padding: 4%;
    }
}
@media(min-width:751px){
    main{
        padding: 7%;
    }
}

その他必要なCSS

paddingを指定するとき、widthの指定が重要になります。

「width:auto（初期値）」が指定されている場合問題ありません。

「width:100%」を指定した場合、paddingの幅を含まないため、横幅がはみ出てしまいます。

そんなときは「box-sizing:border-box」を指定しましょう。

これを指定するとwidthにpaddingとborderが含まれるため、「width:100%」と指定してもはみ出なくなります。

【まとめ】レスポンシブで余白を指定する方法

1. 余白はpaddingで指定する
2. レスポンシブなら%かvwで指定する
3. スマホでは1文字分の余白を作る
4. スマホの1文字分はpadding:4%前後
5. パソコンでは700px程度で文章を折り返す
6. パソコンでは余白を大きめに持ってもいい
7. パソコンとスマホのCSSはメディアクエリで切り替える
8. 「box-sizing:border-box」を指定して はみ出させない

以上、レスポンシブで余白を指定する方法でした。