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と見なされます。