0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

CSSで扱う長さの単位(em, rem, lh, rlh)

Posted at

はじめに

cssで長さを指定するとき、10pxみたいに絶対的な値を指定することもできますが、emlhなどで相対的な値を指定することもできます。

相対的な長さを指定するための単位について整理してみます。

情報元はMDNのこのページです。

emrem

結論から言うとemは「親要素のフォントサイズに対する相対値」で、remは「ルート要素(通常は<html>)のフォントサイズに対する相対値」です。remroot emの意味。

具体的に言うと、1.3emは「親要素のフォントサイズの1.3倍」であり、0.9remは「ルート要素のフォントサイズの0.9倍」になります。

先程リンクを貼った情報元ページの『em と rem』にあるサンプルが分かりやすいので引用しますが、emでサイズを設定した要素が入れ子になっていると、ネストが深くなるたびに文字サイズが変わります。1.3emであれば、子は親の1.3倍、孫は子のさらに1.3倍、という具合です。

スクリーンショット 2024-10-08 13.08.28.png

使い分け

emは親要素に対する相対値、つまり構造の影響を受けるので、あとあとHTMLの構造が変わったり入れ子が深くなったりした際に、当初の想定とは違うフォントサイズになってしまう可能性があります。

ページ全体のフォントサイズは決まっていて、特定の箇所では大きさを変えたい、みたいなシンプルな要件であればremの方が扱いやすいと思います。

余談: emの由来

emはもともと活字組版において使われていた長さの単位で、名前の由来は大文字の'M'のようです。昔はMが縦横いっぱい使っていたので、長さの単位になっていたのだとか。

lhrlh

lhrlhは行の高さを相対的に指定するための単位。lhは「要素そのものの行の高さに対する相対値」で、rlhは「ルート要素(通常は<html>)の行の高さに対する相対値」。'r'がついていればルート要素に対する相対値になるのはremと同じです。

つまり、1.5lhは「その要素の行の高さの1.5倍」であり、0.5rlhは「ルート要素の行の高さの0.5倍」ということです。

これもMDNのページの『行の高さの単位』にあるサンプルですが、こういうテキストの高さに関連する装飾で使えそうです。

スクリーンショット 2024-10-08 14.12.22.png

余談: lhの由来

lhはシンプルにline-heightの略ですね。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?