レスポンシブデザインで重要なCSSの書き方（上級者向け）

今回は、上級者向けレスポンシブデザインの書き方です。

ちょっとマニアックですが、分かる人にはこの記事の重要さが分かるはず。

「メディアクエリに頼らずに、いかにスマホ・タブレット・パソコンとの差異を失くせるか？」

ここにポイントを当てています。

メインCSSだけ書き換えれば、全てのデバイスに連動するので、複雑なデザインの修正でも、メンテナンスが非常に楽になります。

1．画像サイズの単位は「vmax」を使用する

レスポンシブデザインにおいて、画像サイズを指定する単位には、「%」や「vw」を用いるのが一般的です。

ところが、パソコンでみたときに比べ、スマホで見たときには、思いのほか画像が小さく表示されてしまいます。

よって、多くの場合、画像サイズはメディアクエリを用いて、別々に画像サイズを指定し直しているはずです。

そこで、使用するのが「vmax」です。

vmaxは、高さと幅のどちらか値が大きな方を基準とする単位（1vmax ＝ 長辺の1%）

例えば、1920px × 1080px（パソコン）で「margin:10vmax」とした場合、上下左右に192pxの余白ができます（幅が基準となる）

375px × 667px（スマホ）で「margin:10vmax」とした場合は、上下左右に66.7pxの余白ができます（高さが基準となる）

パソコン画面比率（フルHD）

【横基準】1920：1080 = 1：0.5625

【縦基準】1080：1920 = 1：1.7777

スマホの画像比率（iphone8）

【横基準】375：667 = 1：1.7787

【縦基準】667：375 = 1：05622

画面比率を見て分かることは、パソコンとスマホでは縦基準と横基準で比較したときの割合がほぼ同じという事。

だから、vmaxで大きい方の値を基準にすることで、いい感じのサイズに収めることができます。

#main_logo {
    width:13vmax;
    max-width:100%;
    height:auto;
}

<img src="img/main_logo.svg" id="main_logo">

※vmaxを使用する際は、画面幅が超えてしまったときのために必ず「max-width:100%」を使用します。

２．上下の余白指定は「calc」で調整する

レスポンシブデザインにおいて、余白を設定する場合、marginやpaddingで「％」の単位を用いるのが一般的です。

ところが、パソコンでみたときに比べ、スマホで見たときには、思いのほか”縦のスペース”が狭く表示されてしまいます。

margin・paddingの基準は、横幅ですから、画面幅が小さいデバイスほど、余白は狭くなってしまうのは当然です。

そこで、使用するのが「calc」

あらかじめ、CSS変数を用いて、基準となる余白に倍率を掛けておきます。

スマホ用のcalcとCSS変数

(667 / 375) / (1080 / 1920) = 3.16

※スマホの画面でmargin-top:1%としたときにできる余白（px）とパソコンの画面でmargin-top:1%としたきにできる余白（px）の割合

#main {
    margin-top:calc(3% * var(--sp));
}

@media only screen and (max-width: 767px) {

    :root {
        --sp:3.16;
    }
}

これで、パソコンでみたときは、「margin-top:3%」が適用され、画面幅が767以下のスマホなどでは「margin-top:9.48%」が適用されます。

タブレット用のcalcとCSS変数

(768 / 1024) / (1080 / 1920) = 1.33

※タブレットの画面でmargin-top:1%としたときにできる余白（px）とパソコンの画面でmargin-top:1%としたきにできる余白（px）の割合

#main {
    margin-top:calc(3% * var(--sp));
}

@media only screen and (max-width: 1279px) {

    :root {
        --sp:1.33;
    }
}

これで、パソコンでみたときは、「margin-top:3%」が適用され、画面幅が1279以下のスマホなどでは「margin-top:3.99%」が適用されます

３．文字サイズ指定は「font-size:min()」を使う

レスポンシブデザインにおいて、文字サイズを指定する場合、font-sizeで「em」や「rem
」用いるのが一般的です。

ところが、パソコンでみたときに比べ、スマホで見たときには、思いのほか文字が大きく表示されてしまいます。

特に<h1>や<h2>などの見出しは、非常に大きく見えます。

そこで、使うのが「font-size:min()」

文字の最小値を設定することができます。

要は、「font-max-size」みたいなイメージです（※font-max-sizeなんてものは存在しません）

p {
    font-size:min(3.6vw,1.2em);
    line-height:1.8em;
}

意味は、基準となるフォントサイズは「1.2em」

画面幅が小さくなるにつれて文字サイズも小さくなりますが、「3.6vw」より小さくはなりません。

まずはパソコンの画面で「em」単位の文字サイズを決めて、それから3倍した値を「vw」単位にしておくくらいが丁度良いです。