📝ちゃんと使い分けてる？CSSのpx, em, rem, %, vw単位の違い

たかもそ／Web Creator.

2020年2月8日 13:09

HTMLやCSSを学びたての頃はとりあえずpx単位で指定することが多いと思います。その後、emやremなどいろんな単位が出てきて混乱することもあるかもしれません。

それぞれの単位にはメリットとデメリットがあり、なぜその単位を使うのかをしっかりと理解して使い分ける必要があります。

単位の定義

CSSには多くの単位が存在します。ここでは、実際に使うことの多い単位について詳しくみていきます。

px単位

デバイスの1ドットを表す絶対的な値です。ただし、プリンターやスマホなどの高解像度デバイスでは1px内に複数のドットを含む場合があります。

現在、ほぼすべてのブラウザで小数点pxを表すことができますが、borderなど一部プロパティでは小数点pxを許容しない仕様もあります。

em単位

その要素自身のfont-size値を基準として相対的な値となります。たとえば、paddingプロパティに指定した場合を考えてみましょう。

<html>
<body>

<div class="parent">
  <div class="child">...</div>
</div>

</body>
</html>

.parent {
  padding: 2em;
}
.child {
  padding: .5em;
}

まず、.parent要素のfont-size値を求めますが、.parent要素にはfont-sizeプロパティが指定されていないので、さらに上位のbody要素を見てみます。しかし、body要素にもfont-sizeプロパティが指定されていないため、結果的にhtml要素のfont-size値が基準となります。

つまり、em単位はその要素自身と親要素をさかのぼってfont-size値を継承するということですね。

html要素のfont-size値はデフォルトでは16pxです。ちなみに、ユーザーはブラウザの設定から文字サイズをいつでも変更できます。デフォルトの状態の場合、.parent要素は16pxを基準としているので、

16 × 2 = 32px

がpadding値となります。

同じように.child要素もさかのぼっていくと、html要素までfont-sizeプロパティが指定されていないので、html要素の16pxが基準値となります。よって、

16 × 0.5 = 8px

が.child要素のpadding値になります。

ここまでは、比較的わかりやすいですが、その要素自身にfont-sizeプロパティが指定されていると複雑になってきます。

body {
  font-size: 1.125em;
}
.parent {
  padding: 2em;
  font-size: 1.5em;
}
.child {
  padding: .5em;
}

同じように.parent要素から考えてみましょう。今回は.parent要素自身にfont-sizeプロパティとして1.5emが指定されています。1.5em自体も相対的な値のため、より上位の要素から継承されている可能性があります。

そこで、上位のbody要素をみてみると、font-sizeプロパティに1.125emが指定されています。これより上位の要素はhtml要素なのでブラウザのデフォルト文字サイズである16pxが基準となります。

よって、.parent要素のfont-sizeは、

16 × 1.125 × 1.5 = 27px

となります。なので、

27 × 2 = 54px

がpaddingプロパティの2emの計算値となります。

そして、.child要素自身にはfont-sizeプロパティが指定されていないので、親の.parent要素のfont-size値が基準となります。.parent要素のfont-size値は先ほど求めた27pxです。

27 × 0.5 = 13.5px

よって、13.5pxが.child要素のpadding値となります。

はじめは戸惑うかもしれませんが、慣れてしまえばこの性質が逆にありがたいものとなっていきます。

rem単位

ルート要素（通常はhtml要素）のfont-size値を基準として相対的な値となります。

body {
  font-size: 1.125em;
}
.parent {
  padding: 2rem;
  font-size: 1.5em;
}
.child {
  padding: .5rem;
}

ブラウザのデフォルト文字サイズは16pxなので.parent要素のpadding値は、

16 × 2 = 32px

で、.child要素のpadding値は、

16 × 0.5 = 8px

となります。font-sizeプロパティが指定されているかどうかはまったく影響しません。つまり、rem単位は常にhtml要素のfont-size値を基準とするため、em単位のように要素が入れ子になっていても関係ありません。

%単位

相対的な値となりますが、プロパティによって何が基準になるかが変わってきます。

たとえば、widthやmargin、paddingプロパティなら親要素の横幅に対する割合、heightプロパティなら親要素の高さに対する割合、font-sizeプロパティなら親要素の文字サイズに対する割合となります。

font-sizeプロパティに関してはem単位と同じですね。

なので、%単位を使う場合は何を基準としているかをプロパティごとに確認しておくと安心です。

vw単位

ブラウザの横幅に対する相対的な値となり、1vwはブラウザの横幅の1%に相当します。

たとえば、ブラウザ幅が1200pxのとき1vwは12px、ブラウザ幅が768pxのとき1vwは7.68pxを表すことになります。

ただ、全体的なレイアウトなどにvw単位を使うと意図しない余白が生まれることがあります。vw単位はスクロールバーの幅を含む仕様のため、width: 100vw;を指定するとスクロールバーの幅分、横スクロールが発生します。

なので、全体的なレイアウトには%単位のほうが適しているといえます。

しかし、%単位は常に親要素に依存するため、ブラウザ幅を基準としたい場合には使えないので、その点便利ですね。

つまり、vw単位と%単位は、rem単位とem単位の関係性とほぼ同じです。

単位の使い分け

色々なWebサイトを調査した結果、大きく分けて以下の3つに分けられると考えました。ただし、%やvw単位はどの派でもレスポンシブ対応でよく使うので除外しています。

px単位を用いる派

すべてのCSSをpx単位で指定する場合です。

すべてpx単位で指定するとブラウザの設定から文字サイズを変更しても一切反映されないことになってしまいます。

僕も生まれつき目がよくはないのですが、普段macOSを使っているため、字が見づらいなと思ったら2本指でズームすれば好きな部分を拡大できます。

このおかげでブラウザの文字サイズ設定を変えることはないのですが、Windowsにはこの機能がないので、もしWindowsを普段使いしていたらブラウザの文字サイズ設定でベースの文字サイズを大きくしつつ、拡大率でWebサイトによって微調整すると思います。

ちなみにWindowsにも拡大鏡という機能があって使ってみたのですが、使いづらくて使う気になりませんでした。やはり、トラックパッドのジェスチャには敵いません。

なので、px単位をすべてに用いるとアクセシビリティを無視してしまう可能性があります。

一部emやrem単位を用いる派

主に、font-sizeプロパティにemやrem単位といった相対的な値を指定する場合です。

font-sizeプロパティに相対的な値を指定しておくと、ブラウザの文字サイズ設定が変更された際にちゃんと反映されます。

たとえば、font-sizeプロパティ以外はすべてpx単位で指定する場合を考えてみましょう。

ブラウザの文字サイズ設定で文字を大きくすると、相対的な値で指定されたfont-sizeだけ大きくなり、絶対的な値で指定されたその他の要素はそのままになります。

つまり、全体的なレイアウトはそのままで、要素内の文字サイズだけ大きくなります。

emやrem単位を用いる派

次に、border-widthプロパティなど文字サイズ設定が変わっても変化させたくないものにはpx単位を使い、それ以外はemやrem単位などの相対的な値を使う場合を考えてみましょう。

先ほどの例と違う点は、文字サイズといっしょに余白も比例して広がっているところです。

全体的なレイアウトとデザインの比率を維持しつつ、文字サイズを変化させられます。

メディアクエリの単位にも相対的な値を使っていれば、文字サイズが大きくなればなるほど、スマホのデザインに近づいていきます。これは、ブラウザの拡大率をあげる場合と同じ挙動になります。

このように、絶対的な値と相対的な値をどこに使うかで大きく挙動が変わってきます。

個人的な見解

僕の意見ですが、「px単位を用いる派」はアクセシビリティの観点からまずないと思っています。

そして、「一部emやrem単位を使う派」と「emやrem単位を使う派」については開発者の意図やユーザ層によって変わるため、どちらを推奨するかまでは言い切れません。

ただ、「emやrem単位を使う派」は拡大率を拡大縮小した場合と文字サイズ設定を変更した場合で動作がまったく同じになります。これでは、2つの機能を差別化することはできません。

一方で、文字サイズ設定は頻繁に変更するものではなく、あくまでベースとなる文字サイズを設定しておくためのものだとも考えられます。

文字サイズ設定の変更は拡大率のように手軽に変更できるようにはなっていないためです。

すると、すでに文字サイズ設定を変更している人からすれば、初めて訪問したときがそのWebサイト本来の姿となります。そういった場合は逆に、レスポンシブのスマホレイアウトに近づいていった方が文字サイズとともに余白やレイアウトが調整されて見やすいと思われます。

余白も可読性に少なからず関わっていると考えられるからです。

以上をふまえ、僕なりの考えとしては、

メディアクエリ → em
font-size → em / rem
borderなど常に見た目が変わらない → px
それ以外 → em / rem

となります。

僕も以前は「一部emやrem単位を使う派」だったのですが、レイアウトによっては見づらくなることがあって現在は「emやrem単位を使う派」です。

一例として、3分割されたレイアウトで文字サイズだけが大きくなると、1行あたりの文字数が減り、縦に長くなってしまいます。

emとrem単位の使い分けに関しては現在の要素や祖先要素のfont-size指定によって影響されたくないものにはrem単位、それ以外はem単位とすればよいです。

たとえば、ボタン周りの余白は文字サイズに応じて変化してほしいのでem単位、サイト全体の横幅を決めるコンテナではrem単位といったように使い分けます。

先日の記事は個人的意見として書いたので、pxを使うのもem/remを使うのも開発者の自由！実際、px派が多い。僕の場合はユーザーの選択肢を潰したくないという理由が大きいけど、一部のためにコストをかけられないのも現状だと思う。そこまで完璧にする必要あるかという...優先度の問題もある。
— たかもそ.css (@takamosoo) February 12, 2020

あくまで”個人的意見”なので、どのように使い分けるかは自由です。

さいごに、font-sizeプロパティにvw単位を用いるのはやめたほうがよいです。vw単位は常にブラウザの横幅を基準とし、ブラウザの文字サイズ設定を変えても反映されないためです。

font-sizeプロパティにvw単位を使う場合は、calc()関数を使ってemやrem単位などの相対的な値と組み合わせます。

これで、直感に反してしまうかもしれませんが、一応ブラウザの文字サイズ設定は反映できます。

この記事が気に入ったらサポートをしてみませんか？