CSSの長さの単位

““<length>”値”とは？

“width”プロパティ、“height”プロパティ、“font-size”プロパティなどの多くのプロパティの値として使用される“<length>”値は距離の長さを表します。

“<length>”値は“<dimension>”値の一つで、実数(“<number>”値)とそれに続く単位で表されます。負の値も有効ですが、プロパティによっては許容する“<length>”値の範囲に制約がある場合があり、範囲外の値は無効な値として扱われて無視されます。

長さの単位には別の長さに依存する“相対長”と一つの基準の依存した“絶対長”があります。

“<length>”値が使用できる場所では“calc()”関数などを用いた数学的表現が使用できます。

長さが“0”の場合は単位が省略できますが、“<length>”値と“<number>”値の両方が認められるプロパティでは“0”は“<number>”値とみなされます。

相対長

“相対長(Relative Lengths)”は別の長さに依存する相対的な長さです。

CSSの相対長は文字の大きさに依存する“フォント相対長”とビューポートの寸法に依存する“ビューポート相対長”の2種類があります。

相対長はそれぞれの単位がそれぞれ異なる別の長さに依存するため単位間の大きさの関係性は一定ではありません。例えば、“1em”は“1rem”が等しい場合もありますし、等しくない場合もあります。大小関係も場合によって異なります。

相対長で指定されたプロパティの値が子要素へ継承される時、継承されるのはそのままの相対長ではなく相対長から算出された絶対長である計算値です。

フォント相対長

“フォント相対長(Font-relative Lengths)”は文字の大きさを基準にして長さを計算します。“ローカル・フォント相対長(Local Font-relative Lengths)”と“ルート・フォント相対長(Root Font-relative Lengths)”の2種類があり、ローカル・フォント相対長は単位を使用する要素自身に設定された文字の大きさ、ルート・フォント相対長はルート要素の文字の大きさを基準にして長さを計算します。

“em”や“ex”などの文字の大きさをもとに計算されるローカル・フォント相対長を文字の大きさを指定する“font-size”プロパティの値として使用する場合には長さは親要素の文字の大きさをもとに計算されます。同様に、行の高さをもとに計算する“lh”を行の高さを指定する“line-height”プロパティの値として使用する場合には長さは親要素の行の高さをもとに計算されます。親要素がない場合には“font-size”プロパティや“line-height”プロパティの初期値をもとに長さを計算します。

フォント相対長をメディア・クエリなどの特定の要素に関係しない場面で使用する場合や、ルート・フォント相対長をルート要素のない文書で使用する場合には“font-size”プロパティや“line-height”プロパティの初期値をもとに長さを計算します。

“em”、“ex”などの単位は同じ文書の中で同じ単位を使用していても、長さの計算の基準となる長さが異なるので使用される要素によって長さが変わります。一方で、“rem”と“rlh”は常にルート要素の文字の大きさを基準とするため、同じ文書の中ではどの要素に使用しても長さは一定です。

ブラウザによっては可読性を確保するために表示できる文字の大きさに制限がある場合がありますが、このような制限は使用値にだけ適用され、相対長を計算する基準となる計算値には影響しません。

ビューポート相対長

“ビューポート相対長(Viewport-percentage Lengths)”はパソコンやスマートフォンのブラウザなどの連続メディアではビューポート、プリンタ・デバイスやブラウザの印刷プレビューのようなページ化メディアではページ・ボックスの大きさに依存します。ブラウザのウィンドウの大きさが変更された場合などにはビューポート相対長は再計算されます。

特にスマートフォンのブラウザなど、ユーザー・エージェントによってはナビゲーションのためのインターフェースがスクロールした際に格納されたり展開されたりすることによってビューポートの寸法が変動します。このような長さの変動は文書のレイアウトなどに悪影響を与える場合があるため、ビューポート相対長の計算の基準となるビューポートの大きさには以下の4種類があります。

大きいビューポート(“Large viewport”)

ビューポートの大きさはインターフェースが格納されている状態を基準にします。

小さいビューポート(“Small viewport”)

ビューポートの大きさはインターフェースが展開されている状態を基準にします。

動的ビューポート(“Dynamic viewport”)

ビューポートの大きさはインターフェースの展開と格納に合わせて変動します。

既定のビューポート(“UA-default viewport”)

ユーザー・エージェントが決めた既定の大きさを基準にします。“大きいビューポート”もしくは“小さいビューポート”の大きさと同じ場合もありますし、その中間的な大きさである場合もあります。

“動的ビューポート”に依存したビューポート相対長はビューポートの大きさが変更されなくても、文書をスクロールしてインターフェースが展開されたり格納されたりするとビューポート相対長が変動する可能性があります。

どのようなインターフェースの展開と格納がビューポート相対長の大きさに影響するのかについてはユーザー・エージェントによって異なります。

絶対長

“絶対長(Absolute Lengths)”は一つの基準の依存し、単位間の長さの比率は常に一定となる絶対的な長さです。

CSSの絶対長の単位には以下の2種類があります。

“物理単位(Physical Units)”

“cm”、“mm”、“Q”、“pt”、“pc”、“in”

“視角単位(Visual Angle Unit)”

“px”

これらの単位はいずれも“互換単位(Compatible Units)”であり、常に“2.54cm=25.4mm≒1in=72pt=6pc=96px”の関係が成り立ちます。規準単位は“px”であり、シリアル化の際にはすべての絶対長は“px”に変換されます。

CSSの絶対長は以下のどちらかの基準に依存します。

• 物理単位(“in”など)を物理的な長さの単位と同じとする。
• “参照ピクセル”を“px”とする。

物理的な長さの単位と一致する場合は実際に定規を当てれば対応する長さの単位と同じ長さになるということになります。例えば、CSSで指定した“1in”は定規を当てれば1インチの長さです。

参照ピクセルに依存する場合は物理的な長さの単位とは必ずしも一致しません。

絶対長の単位の基準を物理的な長さの単位と参照ピクセルのどちらとするかはデバイスによって異なります。仕様書ではプリンタ・デバイスなどは物理的な長さの単位を、パソコン、スマートフォンなどのスクリーン・デバイス、極端な距離から見ることを想定したデバイスは参照ピクセルを基準とするべきとしています。

参照ピクセル

従来のデバイスでは“1px(ピクセル)”はその名前の通りディスプレイの画素(ピクセル)の1個分の長さを使って表現されていました。

Windowsをはじめとする従来の多くのソフトウェアやコンテンツが96dpiの画素密度で表示されることを想定して作られています。“1px”をディスプレイの画素1個で表現すれば“96px=1in”なので96dpiのディスプレイでは“1in”は物理的な1インチの長さと一致します。

しかし、画素の数が多いほど精細な画像を表現できるのでスマートフォンなどの最新のデバイスに搭載されたディスプレイは画素の一つ一つを小さくして、大きさが同じでも解像度を高めたものになっています。96dpiの2倍以上の200dpiや300dpiを超えるデバイスも珍しくありません。

ここで問題になるのが、これまで通り“1px”をディスプレイの画素1個で表現すると実際にディスプレイに表示される長さが、画素密度が2倍のディスプレイでは半分、画素密度が3倍のディスプレイでは3分の1の長さになってしまいます。そこで画素密度が大きく異なっても表示される大きさがある程度同じになるように“参照ピクセル”が定義されています。

“参照ピクセル(reference pixel)”は96dpiのディスプレイをユーザーの腕の長さ(28インチ)の距離から見た時の画素1個の視角と定義されています。この定義に基づいた視角は約0.0213度です。96dpiでは1インチの長さに96個の画素があるのでこの時の“1px”は1/96インチとなります。

96dpiではないディスプレイでは“1px”はディスプレイの画素の数とは一致しないことになりますが、これにより画素密度が高さにかかわらずディスプレイに表示される大きさは同じようになります。

また、ディスプレイからの距離によって参照ピクセルの長さは変わってきます。これは大きなディスプレイでは小さなディスプレイに比べて離れた位置から見ることを想定しているからです。

視角をもとにした参照ピクセルとすることで同じ長さでも近くで見ることを想定した小さいディスプレイでは小さく、遠くから見ることを想定した大きなディスプレイは大きく表示され、実際のユーザーの視点からは同じような大きさで見えるようになります。

単位の一覧

相対長

絶対長

以下は物理的な長さの単位に依存する場合です。

以下は参照ピクセルに依存する場合です。

仕様書

定義されている仕様書

em
rem
ex
rex
cap
rcap
ch
rch
ic
ric
lh
rlh

vw
svw
lvw
dvw
vh
svh
lvh
dvh
vi
svi
lvi
dvi
vb
svb
lvb
dvb
vmin
svmin
lvmin
dvmin
vmax
svmax
lvmax
dvmax

cm
mm
Q
in
pt
pc
px