pxと%とemとremの違い - CSSの単位を把握しよう!

Bootstrap4もついに採用したem

先日、Bootstrap4が発表され、各所で話題を呼んでいますね。

中でも注目されていたのは、「emの採用」であったように思います。

WILDWEST-SERVICEでは既にemを多用していますが、「今まではpxを中心に記述していたがemやremで記述してみようかな」という方も少なくないと思います。
今回はpxや%以外にCSSで使える単位について見ていきましょう。

百分率(%)

百分率(%)で数値を指定することで、相対的な値を指定できます。

状況に応じて相対基準となる値が変化しますが、大抵はセレクタで指定した要素の親となる要素が基準となります。

たとえば、p要素のfont-sizeが20pxであった場合、p要素の子となるspan要素に「font-size: 50%」が指定されていれば、span要素の文字サイズは10pxで表示されます。

<p>foo<span>bar</span>baz</p>
p {
  font-size: 20px;
}

span {
  font-size: 50%;
}

フォントに相対的な長さ単位

フォントに相対的な長さは、それぞれの単位に対応した要素のfont-sizeの値が相対基準となります。

詳しくは各単位ごとに説明していきます。

em

emは、emが用いられた要素のfont-sizeの値が相対基準となります。

たとえば、p要素のfont-sizeが20pxであった場合、同じp要素に「line-height: 2em」が指定されていれば、p要素の行の高さは40pxで表示されます。

<p>hoge</p>
p {
  font-size: 20px;
  line-height: 2em;
}

また、次のサンプルソースのspan要素のように、font-sizeに対してemを用いた場合は親要素から継承されたfont-sizeが相対基準となります。

この例ではp要素の内側にあるspan要素のfont-sizeが40pxで表示されます。

<p>foo<span>bar</span>baz</p>
p {
  font-size: 20px;
}

span {
  font-size: 2em;
}

rem

emの相対基準がそのセレクタ自身またはセレクタの親のfont-sizeであるのに対し、remはルート要素のfont-sizeを1remとして算出します。

ルート要素は大抵の場合html要素です。

たとえば、次のサンプルソースの場合、p要素の子となるspan要素のfont-sizeは14pxで表示されます。

<p>foo<span>bar</span>baz</p>
html {
  font-size: 14px;
}
p {
  font-size: 20px;
}

span {
  font-size: 1rem;
}

ex

exは、表示されているフォント(font-family)のx-heightに相当します。

x-heightは多くの場合で小文字のxの高さと等しくなることからそう呼ばれています。(小文字のxを含まないフォントでもexは使用可能です)

x-heightの決定が不可能な場合などには1exが0.5emと見なされるため、多くのフォントで1exは0.5emで表示されますが、いくつかのフォント計量法に基づく場合もあります。

ch

先ほどのexと似ており、こちらは表示されているフォントにおける数字の0の送り幅に等しくなります。

exと同様に、0の送り幅が計測不可能な場合などに0.5emと見なされます。