【CSS】「px」、「%」、「vw」、「em」、「rem」の使い分け

単位の種類

px

デバイスの1ドットを表す絶対的な値。現在はほぼ全てのブラウザで小数点を表すことができる。ただし、borderなど一部プロパティでは小数点を許容しなかったりする。

html要素のfont-size

デフォルトで16pxになっています。

用途

• borderなどの可変させたくない要素

em

CSS3から登場しました。font-sizeを基準として相対的な値となる。もし、font-sizeが16pxだったら2emの場合は32pxになります。

その要素内で使われる標準の文字の高さを1emとしてそれに対する比率を表す単位。HTMLでは16pxが標準の文字サイズになるので1emと指定した場合はデフォルトだと16pxになる。

font-size値の検索方法

自分自身の要素にあるか調べる。もしヒットしなかった場合はさらに上位の要素をみる。それでももし見つからなかった場合は最上位のhtml要素のfont-sizeを見たりします。

用途

• letter-spacingや擬似要素との間隔

rem

CSS3から登場しました。ルート要素（出始めはhtml要素でしたが、最近は:rootというCSSで定義するのが一般的。）のfont-sizeを基準とした相対的な値になります。emと違って要素が入れ子になっていても影響を受けません。

ただ、:rootでフォントサイズを指定しない方が良い。理由としては、ユーザーが自分のブラウザに最適なフォントサイズを設定しているケースがありそれを上書きしてしまうため。

懸念としては、デザイナーがFigma上で設定しているフォントサイズよりも大きくなった場合デザイン自体が崩れてしまう可能性があります。

デザインを重視するか、ユーザーのブラウザ設定を重視するかによって変わる部分ではあります。

:rootに指定しない場合は、ユーザーによって1remの値は変動してくる。（ブラウザにフォントサイズを指定しない場合は16pxにはなるが。）

実装例

デザインではpx固定で入っているので、コーディングでremを使う場合はCSS変数やcalcを使って自動計算する実装にすると良いです。

用途

フォントサイズ

要素の大きさ・margin、paddingなど。

ブラウザのフォントサイズを変更したときに、要素の余白も相対的に変更してくれます。（要するにOSのズーム機能を使った時と同じような挙動になるのでレイアウトが崩れにくくなるのです。）

%

親要素の横幅や縦幅に対する割合になります。

用途

全体的なレイアウト

横幅いっぱいに広げたいなどです。レイアウトにpxやremなどの固定値を使ってしまうと画面から見切れたりする場合があります。

vw、vh

ブラウザの横幅（正確に言えば「viewportの横幅」）に対する相対的な値になります。1vwであればブラウザの横幅の1%になります。

注意点

vwはスクロールバーの幅を含むため、「width:100vw;」と指定してしまうとその分横スクロールが発生してしまいます。なので、あまり全体的なレイアウトには向きません。

用途

• ヒーローイメージやモーダルウィンドウなど画面を占有して表示させる要素

使い分けパターン

主に3パターンあります。

px単位を用いる派

全てのCSSをpx単位で指定します。

デメリット

ブラウザの設定から文字サイズを変更しても一切反映されない。

代替案としてはズーム機能を使うなどがある。ただ、Windowsでは若干使いづらい部分があったりするので、アクセシビリティを若干損ねることになるのがデメリットではある。

font-sizeのみemやremを用いる派

font-sizeプロパティにemやremなどの単位を指定する方法です。

メリット

ブラウザの文字サイズ設定が変更された際にちゃんと反映される。

デメリット

フォントサイズを拡大した際に、font-size以外の要素がpxで指定されているので全体的なレイアウトはそのままでフォントサイズのみが大きくなる。

emやremを用いる派

文字サイズ設定を変更した際に、全体的なレイアウトの比率を維持したまま文字サイズを変化させることができます。「ユーザーのブラウザの設定を尊重しますよ」という考え方の場合に使う。

emとremの使い分け

基本はremを使います。ただ、一部祖先要素のfont-sizeに影響を受けたくない場合はemを使うようにすると良いでしょう。