このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
<length>
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
<length> はCSS のデータ型で、長さの値を表します。長さはwidth、height、margin、padding、border-width、font-size、text-shadow など数多くの CSS プロパティで使用されています。
メモ:<percentage> 値も<length> 値を受け付ける同じプロパティの一部でも使用することができますが、<length> 値と同じものではありません。<length-percentage> を参照してください。
構文
<length> データ型は一つの<number> とそれに続く以下に挙げる単位の一つから成ります。すべての CSS サイズと同様に、数値と単位リテラルの間に空白は置きません。数値が0 の場合、長さの単位を指定することはオプションです。
メモ:負の<length> 値を許容するプロパティとそうでないプロパティがあります。
長さの指定値 (specified length) は、その量と単位で表します。長さの計算値 (computed length) は、指定した長さを絶対長に分解したもので、単位は判別されません。
<length> の単位には相対的なものと絶対的なものがあります。相対的な長さは、他の距離から見た長さを表します。単位によって、この距離は特定の文字の大きさであったり、行の高さであったり、ビューポートの大きさであったりします。相対的な長さの単位を使用するスタイルシートは、ある出力環境から別の出力環境へ、より簡単に変倍することができます。
メモ:子要素は親要素に指定した相対値を継承するのではなく、計算値を継承します。
相対的な長さの単位
CSS の相対的な長さの単位は、フォント、コンテナー、ビューポートサイズに基づきます。
フォントに基づく相対的な長さの単位
フォントの長さは、<length> の値を、要素やその親で現在使われているフォントにおける、特定の文字やフォント属性サイズで定義します。
メモ:これらの単位、特にem とrem は、ユーザーがフォントサイズを変更してもページの縦方向のリズムを維持する、変倍可能なレイアウトを作るためによく使われます。
capその要素の
fontにおける "cap height" （ふつうの大文字の高さ）を表します。chその要素の
fontにおける0(ゼロ、Unicode 文字 U+0030) の幅、より正確に言えば送り幅です。0の文字の大きさを判断することが不可能または無意味である場合、幅が0.5em、高さが1emと仮定します。emその要素の
font-sizeの計算値を表します。font-sizeプロパティ自身に使われた場合は、要素に継承されたフォントの大きさを表します。exその要素の
fontにおけるエックスハイトを表します。xの文字を持つフォントでは一般的に、フォントにおける小文字の高さに相当します。多くのフォントでは1ex ≈ 0.5emです。ic描画に使用されるフォントにおける「水」 (CJK water ideograph, U+6C34) の文字の送り幅の使用値を表します。
lh使用されている要素の
line-heightプロパティの計算値と同じで、絶対的な長さに変換されます。この単位により、理論上の理想的な空行のサイズをもとに長さ計算ができます。ただし、実際の行ボックスの大きさはコンテンツによって異なる場合があります。
ルート要素のフォントに基づく相対的な長さの単位
ルート要素のフォントの相対的な長さの単位は、<length> 値をルート要素の特定の文字またはフォント属性のサイズで定義します。
rcapルート要素の
fontにおける "cap height" （ふつうの大文字の高さ）と等しいものです。rchremルート要素 (ふつうは
<html>) のfont-sizeを表します。ルート要素のfont-sizeで使うと初期値を表します。多くのブラウザーでは既定値は16pxですが、ユーザー設定によって変わる可能性があります。rexルート要素の
fontにおけるエックスハイトを表します。ricルート要素のフォントにおける
ic単位の値と等しいものです。rlhルート要素のフォントにおける
lh単位の値と等しいものです。この単位により、理論上の理想的な空行のサイズをもとに長さ計算ができます。ただし、実際の行ボックスの大きさはコンテンツによって異なる場合があります。
ビューポートに基づく相対的な長さの単位
ビューポートパーセント値の長さの単位は、 4 つの異なるビューポートサイズ（小、大、動的、デフォルト）に基づきます。さまざまなビューポートサイズの許容範囲は、ブラウザーインターフェイスが動的に拡大・縮小したり、下にあるコンテンツを隠したり表示させたりすることに応答します。
- 小ビューポート単位
ブラウザーインターフェイスが動的に展開されたときのために、可能な限り小さなビューポートが必要な場合は、小ビューポートサイズを使用します。小ビューポートサイズでは、ブラウザーインターフェイスが拡大されたときに、設計したコンテンツがビューポート全体を満たすことができます。このサイズを選ぶと、ブラウザーインターフェイスが折りたたまれたときに空白の空間ができる可能性があります。
例えば、ある要素が小ビューポートサイズに基づくビューポートパーセント値の単位を使用してサイズ設定されている場合、動的なブラウザーインターフェイスがすべて表示されている場合、その要素はそのコンテンツが隠れることなく画面を完全に満たします。しかしながら、それらのブラウザーインターフェイスが非表示になった場合、要素の周りに余分な空間ができるかもしれません。したがって、小ビューポートパーセント値は一般的に使用するのに「より安全」ですが、ユーザーがページを操作し始めた後には、最も魅力的なレイアウトにならなくなるかもしれません。
小ビューポートサイズは接頭辞
svで表され、sv*のビューポートパーセント値の長さの単位になります。小ビューポートパーセント単位のサイズは固定されているため、ビューポート自体のサイズが変更されない限り、安定しています。- 大ビューポート単位
ブラウザーインターフェイスが動的に縮小することに対応して、可能な限り大きなビューポートが必要な場合は、大きなビューポートサイズを使用します。大ビューポートサイズを使用すると、ブラウザーインターフェイスが折りたたまれているときに、デザインしたコンテンツがビューポート全体を満たすことができるようになります。ブラウザーインターフェイスが展開されたときに、コンテンツが隠れてしまう可能性があることに注意する必要があります。
例えば、画面に占める面積がきわめて大きいモバイルブラウザーでは、ユーザーがページをスクロールし始めた後、タイトルバーやアドレスバーの一部またはすべてを非表示にすることがよくあります。要素が大ビューポートサイズに基づくビューポートパーセント値の単位を使用してサイズ設定されている場合、これらのインターフェイスが非表示になっていると、要素のコンテンツは見えるページ全体を満たします。しかし、これらの折りたたみ可能なブラウザーインターフェイスが表示されると、大 ビューポートパーセント単位を使用してサイズ設定または位置指定されたコンテンツを隠す可能性があります。
大ビューポート単位は接頭辞
lvで表し、ビューポートパーセント値の単位lv*になります。大ビューポートパーセント値の単位のサイズは固定されているため、ビューポート自体のサイズが変更されない限り、安定しています。- 動的ビューポート単位
ブラウザーインターフェイスが動的に展開されたり縮小されたりすることに応答して、ビューポートのサイズを自動的に調整したい場合は、動的ビューポートサイズを使用することができます。動的ビューポートサイズを使用すると、動的なブラウザーインターフェイスが存在するか否かに関係なく、デザインしたコンテンツがビューポート内に正確に収まります。
動的ビューポート単位は接頭辞
dvで表し、結果としてdv*ビューポートパーセント値の単位になります。動的ビューポートパーセント値の単位のサイズは、ビューポート自体が変更されなくても安定しません。メモ:動的ビューポートサイズはより細かく制御でき、柔軟性がありますが、動的ビューポートサイズに基づいてビューポートパーセント値の単位を使用すると、ユーザーがページをスクロールしている間にコンテンツのサイズを変更させる可能性があります。これはユーザーインターフェイスの劣化につながり、パフォーマンスヒットを発生させる可能性があります。
- デフォルトビューポート単位
デフォルトビューポートサイズはブラウザーによって定義されます。ビューポートパーセント値の単位の動作結果は、小ビューポートサイズ、大ビューポートサイズ、 2 つの間の中間サイズ、動的ビューポートサイズのいずれかに基づくビューポートパーセント値の単位と同等になる可能性があります。
メモ:例えば、ブラウザーがデフォルトのビューポートパーセント値単位である高さ単位 (
vh) を、大型ビューポートパーセント値高さ単位 (lvh) と同等として実装する場合があります。その場合、ブラウザーインターフェイスが展開されている間、全ページ表示でコンテンツが隠れてしまう可能性があります。今のところ、すべてのデフォルトビューポート単位（vh、vwなど）は、それに対応する大型ビューポート単位（lvh、lvwなど）と同じです。
ビューポートパーセント値の長さは、<length> を初期包含ブロックのサイズに対するパーセント値で定義し、この値はビューポートまたはページ領域、つまり文書内の可視部分のサイズに基づいています。初期包含ブロックの高さや幅が変更されると、それに基づいてサイズ調整される要素はそれに応じて変倍されます。下記のように、ビューポートサイズのそれぞれに対応するビューポートパーセント値の長さの単位が変化します。
メモ:ビューポートの長さは@page 宣言ブロックでは無効になります。
vhビューポートの初期包含ブロックの高さのパーセント値を表します。
1vhはビューポートの高さの 1% です。例えば、ビューポートの高さが300pxの場合、プロパティで70vhの値を指定すると210pxになります。小、大、動的ビューポートサイズに対応するビューポートパーセント値単位はそれぞれ
svh、lvh、dvhです。vhはlvhと同等であり、大ビューポートサイズに基づくビューポートパーセント値の長さの単位を表します。vwビューポートの初期包含ブロックの幅のパーセント値を表します。
1vwはビューポートの幅の 1% です。例えば、ビューポートの幅が800pxの場合、プロパティで50vwの値を指定すると400pxになります。小、大、動的ビューポートサイズのそれぞれのビューポートパーセント値の単位は
svw、lvw、dvwです。vwはlvwと同等であり、大ビューポートサイズに基づくビューポートパーセント値の長さ単位を表します。vmaxvwとvhの大きい方を表します。小、大、動的ビューポートサイズのそれぞれのビューポートパーセント値の単位は
svmax,lvmax,dvmaxです。vmaxは、ブラウザーのデフォルトのビューポートサイズに基づく、ビューポートパーセント値の長さの単位を表します。vminvwとvhの小さい方を表します。小、大、動的ビューポートサイズのそれぞれのビューポートパーセント値の単位は
svmin,lvmin,dvminです。vminは、ブラウザーのデフォルトのビューポートサイズに基づく、ビューポートのパーセント値の長さの単位を表します。vb初期包含ブロックにおける、ルート要素のブロック軸方向のパーセント値を表します。
小、大、動的ビューポートサイズのそれぞれのビューポートパーセント値の単位は
svb,lvb,dvbです。vbはブラウザーデフォルトビューポートサイズに基づくビューポートパーセント値の長さの単位を表します。vi初期包含ブロックにおける、ルート要素のインライン軸方向のパーセント値を表します。
小、大、動的ビューポートサイズのそれぞれのビューポートパーセント値の単位は
svi,lvi,dviです。viはブラウザーデフォルトビューポートサイズに基づくビューポートパーセント値の長さの単位を表します。
コンテナークエリーの長さの単位
コンテナークエリーを用いてコンテナーにスタイルを設定する場合、コンテナークエリーの長さの単位を使用することができます。この単位は、クエリーコンテナーの寸法関連の長さを指定します。コンテナーに対して相対的な長さの単位を使用する部品は、具体的な長さの値を再計算することなく、様々なコンテナーで柔軟に使用することができます。
クエリーに適合するコンテナーが利用できない場合、コンテナークエリーの長さの単位は、その軸に対して小ビューポート単位が (sv*) デフォルトで適用されます
詳しい情報は、コンテナークエリーを参照してください。
cqwクエリーコンテナーの幅のパーセント値を表します。
1cqwはコンテナーの幅の 1% です。例えば、クエリーコンテナーの幅が800pxの場合、プロパティに50cqwの値を指定すると400pxとなります。cqhクエリーコンテナーの高さのパーセント値を表します。
1cqhはコンテナーの高さの 1% です。例えば、クエリーコンテナーの高さが300pxの場合、プロパティに10cqhの値を指定すると30pxとなります。cqiクエリーコンテナーのインラインサイズのパーセント値を表します。
1cqiはクエリーコンテナーのインラインサイズの 1% です。例えば、クエリーコンテナーのインラインサイズが800pxの場合、プロパティに50cqiの値を指定すると400pxとなります。cqbコンテナーのブロックサイズのパーセント値を表します。
1cqbはクエリーコンテナーのブロックサイズの1%です。例えば、クエリーコンテナーのブロックサイズが300pxの場合、プロパティに10cqbの値を指定すると30pxとなります。cqminクエリーコンテナーのインラインサイズまたはブロックサイズの小さい方の値のパーセント値を表します。
1cqminは、クエリーコンテナーのインラインサイズまたはブロックサイズのいずれか小さい方の値の1%です。例えば、クエリーコンテナーのインラインサイズが800pxで、ブロックサイズが300pxの場合、プロパティで50cqminの値は150pxになります。cqmaxクエリーコンテナーのインラインサイズまたはブロックサイズのいずれか大きい方の値のパーセント値を表します。
1cqmaxは、クエリーコンテナーのインラインサイズまたはブロックサイズのいずれか大きい値の 1% です。例えば、クエリーコンテナーのインラインサイズが800pxで、ブロックサイズが300pxの場合、プロパティで50cqmaxの値を指定すると400pxになります。
絶対的な長さの単位
絶対的な長さの単位は、出力メディアの物理的な特性が分かっている場合 (印刷レイアウトなど) に物理的な長さを表します。この方法は、単位の 1 つを物理単位または視角単位に固定し、それ以外にも単位をそれに相対的に定義することです。物理単位にはcm、in、mm、pc、pt、px、Q などがあります。固定する単位は画面のような低解像度の端末か、あるいはプリンターのような高解像度の端末かによって異なります。
低解像度の端末では、px の単位が物理的な参照ピクセルを表し、その他の単位はこれを基準に定義されます。例えば1in は96px と定義され、これは72pt と等しくなります。このような端末では結果的に、インチ (in)、センチメートル (cm)、ミリメートル (mm) といった単位で表される長さは、同名の物理的な単位と同じ長さになるとは限りません。
高解像度の端末では、インチ (in)、センチメートル (cm)、ミリメートル (mm) は対応する物理的な単位と同じになります。従って、px の単位は、それ (1 インチの 1/96) を基準に定義されます。
メモ:たくさんのユーザーが、テキストが読みやすくなるようユーザーエージェントの既定のフォントの大きさを拡大しています。絶対的な長さで指定すると、大きさが固定され、ユーザー設定によって拡大しなくなるため、アクセシビリティ上の問題が発生します。この理由から、font-size を設定する場合には、（em やrem のような）相対的な単位が適しています。
補間
アニメーションの場合、<length> データ型の値は浮動小数点の実数として補間されます。補間は計算値に対して行われます。補間の速度は、アニメーションに関連付けられたイージング関数によって定められます。
例
様々な長さの単位の比較
次の例では、指定された入力フィールドが提供されます。このフィールドに<length> 値（例：300px、50%、30vw）を入力すると、Enter キーまたはReturn キーを押した際に、その下に現れる結果バーの幅が設定されます。
これにより、様々な長さの単位の効果を比較し対照させることができます。
HTML
<div> <div> <label>長さを入力してください:</label> <input type="text" /> </div> <div></div></div><div></div>CSS
html { font-family: sans-serif; font-weight: bold; box-sizing: border-box;}.outer { width: 100%; height: 50px; background-color: #eeeeee; position: relative;}.inner { height: 50px; background-color: #999999; box-shadow: inset 3px 3px 5px rgb(255 255 255 / 50%), inset -3px -3px 5px rgb(0 0 0 / 50%);}.result { height: 20px; box-shadow: inset 3px 3px 5px rgb(255 255 255 / 50%), inset -3px -3px 5px rgb(0 0 0 / 50%); background-color: orange; display: flex; align-items: center; margin-top: 10px;}.result code { position: absolute; margin-left: 20px;}.results { margin-top: 10px;}.input-container { position: absolute; display: flex; justify-content: flex-start; align-items: center; height: 50px;}label { margin: 0 10px 0 20px;}JavaScript
const inputDiv = document.querySelector(".inner");const inputElem = document.querySelector("input");const resultsDiv = document.querySelector(".results");inputElem.addEventListener("change", () => { inputDiv.style.width = inputElem.value; const result = document.createElement("div"); result.className = "result"; result.style.width = inputElem.value; const code = document.createElement("code"); code.textContent = `width: ${inputElem.value}`; result.appendChild(code); resultsDiv.appendChild(result); inputElem.value = ""; inputElem.focus();});結果
仕様書
| Specification |
|---|
| CSS Values and Units Module Level 4 # lengths |