We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

CSS<length> データ型は、長さの値を表します。長さは width, height, margin, padding, border-width, font-size, text-shadow など数多くの CSS プロパティで使用されています。

メモ: <percentage> 値も CSS の長さに使用され、 <length> 値を受け付ける同じプロパティの一部でも使用することができますが、 <length> 値と同じものではありません。

構文

<length> データ型は一つの <number> とそれに続く以下に挙げる単位の一つから成ります。単位と数値の間に空白は置きません。数値 0 の後の単位は省略可能です。

メモ: 負の <length> を許容するプロパティとそうでないプロパティがあります。

単位

相対的な長さの単位

相対的な長さとは、他の長さに従って長さを指定することです。単位によって、これは特定の文字の寸法であったり、行の高さであったり、 viewport の寸法であったりします。

フォント関連の長さ

フォント関連の長さは、 <length> 値を特定の文字の寸法や、現在要素またはその親に影響しているフォントを表す用語で定義されます。

Note: これらの単位、特に emrem は、ユーザーがフォントの大きさを変更しても ページの vertical rhythm を維持するような、拡縮可能なレイアウトを作成するためによく使われます。

cap
その要素の font における "cap height" (ふつうの大文字の高さ)を表します。
ch
その要素の font における "0" (ゼロ、Unicode 文字 U+0030)の幅、より正確に言えば advance measure です。
em
その要素の font-size の計算値を表します。font-size プロパティ自身に使われた場合は、要素に継承されたフォントの大きさを表します。
ex
その要素の font における x-height です。 'x' の文字を持つフォントでは一般的に、フォントにおける小文字の高さに相当します。多くのフォントでは 1ex ≈ 0.5em です。
ic
描画に使用されるフォントにおける「水」(U+6C34)の文字の advance measure と同じです。
lh
使用されている要素の line-height プロパティの計算値と同じで、絶対的な長さに変換されます。
rem
ルート要素(ふつうは <html>)の font-size を表します。ルート要素の font-size で使うと初期値を表します(多くのブラウザーでは既定値は 16px ですが、ユーザー設定によって変わる可能性があります)。
rlh
ルート要素(ふつうは <html>)の line-height プロパティの計算値と同じで、絶対的な長さに変換されます。ルート要素の font-size または line-height プロパティに使われた場合は、プロパティの初期値になります。
ビューポートのパーセント値による長さ

ビューポートのパーセント値による長さは、ビューポート、つまり文書の見える範囲の寸法に対する相対的な <length> 値を定義します。ビューポートの長さは @page で宣言されたブロックでは無効です。

メモ: <html> および <body> 要素は overflow:auto に設定されており、スクロールバーの領域はビューポートから差し引かれません。 overflow:scroll と設定すると差し引かれるようになります。
vh
ビューポートの初期値の内包ブロックにおける高さの1%と同じです。
vw
ビューポートの初期値の内包ブロックにおける幅の1%と同じです。
vi
初期値の内包ブロックにおける、ルート要素のインライン軸の寸法の1%と同じです。
vb
初期値の内包ブロックにおける、ルート要素のブロック軸の寸法の1%と同じです。
vmin
vwvh の小さい方です。
vmax
vwvh の大きい方です。

絶対的な長さの単位

絶対的な長さの単位は、出力メディアの物理的な特性が分かっている場合(印刷レイアウトなど)に物理的な長さを表します。これはある単位を物理的な単位に固定してから、これを基準に他の単位を定義します。固定する単位は画面のような低解像度の機器か、あるいはプリンターのような高解像度の機器かによって異なります。

低解像度の機器では、px の単位が物理的な参照ピクセルを表し、その他の単位はこれを基準に定義されます。例えば 1in96px と定義され、これは 72pt と等しくなります。このような機器では結果的に、インチ (in)、センチメートル (cm)、ミリメートル (mm) といった単位で表される長さは、同名の物理的な単位と同じ長さになるとは限りません。

高解像度の機器では、インチ (in)、センチメートル (cm)、ミリメートル (mm) は対応する物理的な単位と同じになります。従って、 px の単位は、それ(1インチの1/96)を基準に定義されます。

Note: ユーザーがアクセシビリティの目的でフォントの大きさを拡大することがあります。フォントの大きさにかかわらず使用できるレイアウトにするには、ビットマップ画像のように出力媒体の物理的な特性が分かっている場合には、絶対的な単位のみを使用してください。 font-size に関連する長さを設定する場合には、 emrem のような相対的な単位が適しています。

px
1ピクセルです。画面表示では、伝統的に機器の1ピクセル(ドット)を表します。しかし、プリンター高解像度の画面では、 CSS の1ピクセルが機器の複数ピクセルになることがります。 1px = 1in の1/96です。
cm
1センチメートルです。 1cm = 96px/2.54 です。
mm
1ミリメートルです。 1mm = 1cm の1/10です。
q
1/4ミリメートルです。 1q = 1cm の1/40です。
in
1インチです。 1in = 2.54cm = 96px です。
pc
1パイカです。 1pc = 12pt = 1in の1/6です。
pt
1ポイントです。 1pt = 1in の1/72です。
mozmm , Firefox 59 で削除
実験的な単位で、表示する大きさや解像度に依存せず、正確に1ミリメートルで描画します。必要とされるのはまれですが、特にモバイル機器では有用かもしれません。

補間

アニメーションを行うとき、 <length> データ型の値は浮動小数点の実数として補間されます。補間は計算値に対して行われます。補間の速度は、アニメーションに関連付けられたタイミング関数によって定められます。

仕様書

仕様書 策定状況 コメント
CSS Values and Units Module Level 4
<length> の定義
編集者草案 vivbiclhrlh の単位を追加。
CSS Values and Units Module Level 3
<length> の定義
勧告候補 chremvwvhvminvmaxq の単位を追加。
CSS Level 2 (Revision 1)
<length> の定義
勧告 ptpcpx の単位の明示的な定義。
CSS Level 1
<length> の定義
勧告 初回定義。 ptpcpx の単位の暗黙的な定義。

Browser compatibility

 

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1 あり133.51
cap unit なし なし なし なし なし なし
ch unit271211 29207
ex unit あり あり あり あり あり あり
ic unit なし なし なし なし なし なし
lh unit なし なし なし なし なし なし
mozmm unit なし なし4 — 59 なし なし なし
Q unit なし なし49 なし なし なし
rem unit4123.6911.64.1
rlh unit なし あり なし なし なし なし
vb unit なし なし なし なし なし なし
vh unit2012199206
vi unit なし なし なし なし なし なし
vmax unit26 ?19 なし20 あり
vmin unit20 ?19

10

93

20 あり
vw unit2012199206
Viewport-percentage lengths invalid in @page ? ?21 ? ? ?
1in is always equal to 96px あり ?4 なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり4 あり あり あり
cap unit なし なし なし なし なし なし なし
ch unit あり あり124 あり7.1 あり
ex unit あり あり あり あり あり あり あり
ic unit なし なし なし なし なし なし なし
lh unit なし なし なし なし なし なし なし
mozmm unit なし なし なし ? なし なし なし
Q unit なし なし なし49 なし なし なし
rem unit2.1 あり124124 あり
rlh unit なし なし あり なし なし なし なし
vb unit なし なし なし なし なし なし なし
vh unit あり あり1219 あり6 あり
vi unit なし なし なし なし なし なし なし
vmax unit1.5 あり ?19 なし4 あり
vmin unit あり あり ?19 なし6 あり
vw unit あり あり1219 あり6 あり
Viewport-percentage lengths invalid in @page ? ? ?21 ? ? ?
1in is always equal to 96px ? ? ? ? ? ? ?

1. From Firefox 1 to Firefox 3, ch was the width of the M character.

2. From Firefox 1 to Firefox 3, ch did not work with border-width and outline-width CSS properties.

3. Supported as vm.

 

ドキュメントのタグと貢献者

最終更新者: mfuji09,