cssなどで使う、大きさの単位

こんにちは！
MaromaroのShigeです。

今回はWebのcssなどで使う、大きさの単位について大まかにまとめてみたいと思います。

「ピクセル」（px）に代表される「絶対長」の単位

ピクセルなどは「絶対長」という、絶対的な長さの単位です。
絶対長は各単位の長さの比率が常に一定になります。
ピクセルを軸に色々な絶対長の単位の長さを定義すると

おなじみの「cm」センチメートル、「mm」ミリメートル

「1cm」は「96/2.54(≒37.80)px」
「1mm」は「96/25.4(≒3.78)px」

他にも「q」Q、級、「in」インチ、「pt」ポイント、「pc」パイカなどがあります。

「1q」は「24/25.4(≒0.94)px」
「1in」は「96px」
「1pt」は「96/72(≒1.33)px」
「1pc」は「16px」

cssでは常に「2.54cm=25.4mm≒1in=72pt=6pc=96px」が成り立ちます。
また、物理的な長さの1インチとcssの「1in」が同じになります。
ただし、色々なデバイスで1inや参照ピクセルの値は異なります。

「em」に代表される「相対長」の単位

フォントサイズなどで使用される「em」などは、「相対長」という別の長さに依存する相対的な長さのことです。
cssなどで、文字の大きさに依存するフォントの相対長とビューポートのに依存する相対なサイズなどがあります。
いくつかピックアップしてみます。

各単位の元の要素の文字の大きさを定義した数値は

「em」は「1em」と定義
元要素の大きさが「20px」の場合、「1em」は「20px」、「3em」は「60px」になります。

「ex」は「x」の文字の大きさを「1ex」と定義
元の要素の「x」の文字の大きさが「10px」の場合は「1ex」は「10px」、「3ex」は「30px」になります。

「cap」は英字の大文字の大きさ「cap-height」を「1cap」と定義
元の要素の英字の大文字の大きさが「10px」の場合は「1cap」は「10px」、「3cap」は「30px」になります。

「ch」は「0」の文字の幅を「1ch」と定義
元の要素の「0」の文字の幅が「10px」の場合は「1ch」は「10px」、「3ch」は「30px」になります。

「ic」は「水」の文字の幅を「1ic」と定義
元の要素の「水」の文字の幅が「10px」の場合は「1ic」は「10px」、「3ic」は「30px」になります。

「rem」はhtml要素の文字の大きさを「1rem」と定義
html要素の文字の大きさが「20px」の場合は「1rem」は「20px」、「3rem」は「60px」になります。

まとめ

絶対長の単位はその数値がサイズとなり、相対長は元となる値に合わせてそれぞれの単位で相対的に変化。