はじめに
cssで長さを指定するとき、10px
みたいに絶対的な値を指定することもできますが、em
やlh
などで相対的な値を指定することもできます。
相対的な長さを指定するための単位について整理してみます。
情報元はMDNのこのページです。
em
とrem
結論から言うとem
は「親要素のフォントサイズに対する相対値」で、rem
は「ルート要素(通常は<html>
)のフォントサイズに対する相対値」です。rem
はroot em
の意味。
具体的に言うと、1.3em
は「親要素のフォントサイズの1.3倍」であり、0.9rem
は「ルート要素のフォントサイズの0.9倍」になります。
先程リンクを貼った情報元ページの『em と rem』にあるサンプルが分かりやすいので引用しますが、em
でサイズを設定した要素が入れ子になっていると、ネストが深くなるたびに文字サイズが変わります。1.3em
であれば、子は親の1.3倍、孫は子のさらに1.3倍、という具合です。
使い分け
em
は親要素に対する相対値、つまり構造の影響を受けるので、あとあとHTMLの構造が変わったり入れ子が深くなったりした際に、当初の想定とは違うフォントサイズになってしまう可能性があります。
ページ全体のフォントサイズは決まっていて、特定の箇所では大きさを変えたい、みたいなシンプルな要件であればrem
の方が扱いやすいと思います。
余談: em
の由来
em
はもともと活字組版において使われていた長さの単位で、名前の由来は大文字の'M'のようです。昔はM
が縦横いっぱい使っていたので、長さの単位になっていたのだとか。
lh
とrlh
lh
とrlh
は行の高さを相対的に指定するための単位。lh
は「要素そのものの行の高さに対する相対値」で、rlh
は「ルート要素(通常は<html>
)の行の高さに対する相対値」。'r'がついていればルート要素に対する相対値になるのはrem
と同じです。
つまり、1.5lh
は「その要素の行の高さの1.5倍」であり、0.5rlh
は「ルート要素の行の高さの0.5倍」ということです。
これもMDNのページの『行の高さの単位』にあるサンプルですが、こういうテキストの高さに関連する装飾で使えそうです。
余談: lh
の由来
lh
はシンプルにline-height
の略ですね。