MLC2

レスポンシブのfont-sizeは「vw」と「rem」を組み合わせて使おう

web

はじめに

レスポンシブのデザインのサイトを作る際に「px」「em」「rem」「%」「vw」などいろいろな単位があり、どれを使って実装すれば良いか悩むことがあると思います。

今回は「vw」と「rem」という単位を組み合わせることで両方の長所を生かしたレスポンシブ対応ができるので使い方を紹介します。

vw, remの特徴

vw

ビューポートの横幅の 1/100 が基準となっている単位で、画面のリサイズに応じて継続的に変化する指定方法です。

例えば画面幅が 384px の場合、1wv = 3.84px, 100vw = 384px(画面いっぱい) となります。

vw の長所は画面幅が変わっても全く同じデザイン(等倍)で表示できるため、意図せぬ段落ちやデザイン崩れを防ぐことができます。

もちろん vw には短所もあります。

皆さんはソースコードに
font-size: 4.16666vw;
と指定されていてどの程度の大きさか直感的に理解することができますか?

vw の短所は上記のように px から vw へ単位を変換する際にコードの可読性が落ちてしまうことです。

例えばデザインデータの横幅が 384px で文章の font-size に 16px が指定されていたとします。

これを vw で指定するには 16px を画面幅(384px)で割って 100 を掛けることで計算できます。

実際に計算すると 16 / 384 * 100 = 4.16666… と割り切れない数値になることが多いのです。

rem

html 要素に指定されている font-size が基準となっている単位で、html 要素の font-size を変えることで独自の基準を作ることができます。

例えば
html {
font-size: 10px;
}

と指定した場合、1rem = 10px, 2.5rem = 25px となります。

rem の長所は em と違い親要素の影響を受けないため、font-size の計算ががシンプルになります。

rem は vw と違い、1rem = 10px と覚えやすいのでコードの可読性の面でも良い単位だということが言えます。

その他の単位の特徴は下記のサイトを参考にしてみてください。

【CSS】結局レスポンシブでのフォントサイズはどう書くべき?

「vw」と「rem」の組み合わせ

vw の長所であるデザイン崩れを防げるという点と、rem の長所であるシンプルな計算によるコードの可読性の両方を生かした指定方法を考えたので紹介します。

単位の指定方法

単位を指定する際にデザインデータの横幅の px 情報が必要になります。

指定方法は単純で、デザインデータの横幅が 384px の場合
html {
font-size: calc(100vw / 3.84);
}

と指定するだけです。
※3.84 の部分はデザインデータの横幅を 100 で割った数値になります。

各要素の指定方法はデザインデータ上で文字サイズが 16px となっている場合は
font-size: 0.16rem;
もしくは先頭の 0 を省略して
font-size: .16rem;
とすることでレスポンシブ対応になります。

もちろん font-size 以外の width, height, margin, padding などにも指定することが可能です。

この指定方法であれば 0.16rem = 16px と理解しやすいのでコードの可読性も下がりません。

注意事項

実際に使うとわかりますが、この指定方法はブラウザのデフォルトスタイルが暴走します。

それを防ぐために追加で
body {
font-size: 0.16rem;
}

と指定することをおすすめします。

また、上記の例では画面幅が最小 38.4px までの画面幅で対応することができます。

まとめ

vw はデザインを画面幅に応じて等倍で計算してくれるため便利な単位なのですが
font-size: 4.16666vw;
がどれくらいの大きさなのかわかりづらいですし、px から vw に計算する手間もかかります。

rem と組み合わせることでコードの可読性を下げずに vw の良さを生かすことができました。

参考サイト

【CSS】結局レスポンシブでのフォントサイズはどう書くべき?
なぜ「rem」でfont-size指定をするのが良いのか。調べてみた。