<length>
<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-height です。x
の文字を持つフォントでは一般的に、フォントにおける小文字の高さに相当します。多くのフォントでは1ex ≈ 0.5em
です。 ic
-
描画に使用されるフォントにおける「水」 (CJK water ideograph, U+6C34) の文字の送り幅と同じです。
lh
-
使用されている要素の
line-height
プロパティの計算値と同じで、絶対的な長さに変換されます。この単位により、理論上の理想的な空行のサイズをもとに長さ計算ができます。ただし、実際の行ボックスの大きさはコンテンツによって異なる場合があります。
ルート要素のフォントに基づく相対的な長さの単位
ルート要素のフォントの相対的な長さの単位は、 <length>
値をルート要素の特定の文字またはフォント属性のサイズで定義します。
rcap
-
ルート要素の
font
における "cap height" (ふつうの大文字の高さ)と等しいものです。 rch
-
ルート要素の
font
における0
(ゼロ、Unicode 文字 U+0030) の幅、または送り幅と等しいものです。 rem
-
ルート要素 (ふつうは
<html>
) のfont-size
を表します。ルート要素のfont-size
で使うと初期値を表します。多くのブラウザーでは既定値は16px
ですが、ユーザー設定によって変わる可能性があります。 rex
-
ルート要素の
font
における x の高さを表します。 ric
-
ルート要素のフォントにおける
ic
単位の値と等しいものです。 rlh
-
ルート要素のフォントにおける
lh
単位の値と等しいものです。この単位により、理論上の理想的な空行のサイズをもとに長さ計算ができます。ただし、実際の行ボックスの大きさはコンテンツによって異なる場合があります。
ビューポートに基づく相対的な長さの単位
ビューポートパーセント値の長さの単位は、 4 つの異なるビューポートサイズ(小、大、動的、既定)に基づきます。さまざまなビューポートサイズの許容範囲は、ブラウザーインターフェイスが動的に拡大・縮小したり、下にあるコンテンツを隠したり表示させたりすることに応答します。
- 小ビューポートサイズ
-
ブラウザーインターフェイスが動的に展開されたときのために、可能な限り小さなビューポートが必要な場合は、小ビューポートサイズを使用します。小ビューポートサイズでは、ブラウザーインターフェイスが拡大されたときに、設計したコンテンツがビューポート全体を満たすことができます。このサイズを選ぶと、ブラウザーインターフェイスが折りたたまれたときに空白の空間ができる可能性があります。
例えば、ある要素が小ビューポートサイズに基づくビューポートパーセント値の単位を使用してサイズ設定されている場合、動的なブラウザーインターフェイスがすべて表示されている場合、その要素はそのコンテンツが隠れることなく画面を完全に満たします。しかしながら、それらのブラウザーインターフェイスが非表示になった場合、要素の周りに余分な空間ができるかもしれません。したがって、小ビューポートパーセント値は一般的に使用するのに「より安全」ですが、ユーザーがページを操作し始めた後には、最も魅力的なレイアウトにならなくなるかもしれません。
小ビューポートサイズは接頭辞
sv
で表され、sv*
のビューポートパーセント値の長さの単位になります。小ビューポートパーセント単位のサイズは固定されているため、ビューポート自体のサイズが変更されない限り、安定しています。 - 大ビューポートサイズ
-
ブラウザーインターフェイスが動的に縮小することに対応して、可能な限り大きなビューポートが必要な場合は、大きなビューポートサイズを使用します。大ビューポートサイズを使用すると、ブラウザーインターフェイスが折りたたまれているときに、デザインしたコンテンツがビューポート全体を満たすことができるようになります。ブラウザーインターフェイスが展開されたときに、コンテンツが隠れてしまう可能性があることに注意する必要があります。
例えば、画面に占める面積がきわめて大きいモバイルブラウザーでは、ユーザーがページをスクロールし始めた後、タイトルバーやアドレスバーの一部またはすべてを非表示にすることがよくあります。要素が大ビューポートサイズに基づくビューポートパーセント値の単位を使用してサイズ設定されている場合、これらのインターフェイスが非表示になっていると、要素のコンテンツは見えるページ全体を満たします。しかし、これらの折りたたみ可能なブラウザーインターフェースが表示されると、 大 ビューポートパーセント単位を使用してサイズ設定または位置指定されたコンテンツを隠す可能性があります。
大ビューポート単位は接頭辞
lv
で表し、ビューポートパーセント値の単位lv*
になります。大ビューポートパーセント値の単位のサイズは固定されているため、ビューポート自体のサイズが変更されない限り、安定しています。 - 動的ビューポートサイズ
-
ブラウザーインターフェイスが動的に展開されたり縮小されたりすることに応答して、ビューポートのサイズを自動的に調整したい場合は、動的ビューポートサイズを使用することができます。動的ビューポートサイズを使用すると、動的なブラウザーインターフェイスが存在するか否かに関係なく、デザインしたコンテンツがビューポート内に正確に収まります。
動的ビューポート単位は接頭辞
dv
で表し、結果としてdv*
ビューポートパーセント値の単位になります。動的ビューポートパーセント値の単位のサイズは、ビューポート自体が変更されなくても安定しません。メモ: 動的ビューポートサイズはより細かく制御でき、柔軟性がありますが、動的ビューポートサイズに基づいてビューポートパーセント値の単位を使用すると、ユーザーがページをスクロールしている間にコンテンツのサイズを変更させる可能性があります。これはユーザーインターフェイスの劣化につながり、パフォーマンスヒットを発生させる可能性があります。
- 既定ビューポートサイズ
-
既定ビューポートサイズはブラウザーによって定義されます。ビューポートパーセント値の単位の動作結果は、小ビューポートサイズ、大ビューポートサイズ、 2 つの間の中間サイズ、動的ビューポートサイズのいずれかに基づくビューポートパーセント値の単位と同等になる可能性があります。
メモ: 例えば、あるブラウザーは既定で高さのビューポートパーセント値の単位 (
vh
) を実装しているかもしれませんが、これは大ビューポートパーセント値の高さ単位 (lvh
) と同じです。といった具合に、ブラウザーインターフェイスが展開されている間、全ページ表示のコンテンツが見えなくなる可能性があります。
ビューポートパーセント値の長さは、 <length>
を初期包含ブロックのサイズに対するパーセント値で定義し、この値はビューポートまたはページ領域、つまり文書内の可視部分のサイズに基づいています。初期包含ブロックの高さや幅が変更されると、それに基づいてサイズ調整される要素はそれに応じて変倍されます。下記のように、ビューポートサイズのそれぞれに対応するビューポートパーセント値の長さの単位が変化します。
メモ:
ビューポートの長さは @page
宣言ブロックでは無効になります。
vh
-
ビューポートの初期包含ブロックの高さのパーセント値を表します。
1vh
はビューポートの高さの 1% です。例えば、ビューポートの高さが300px
の場合、プロパティで70vh
の値を指定すると210px
になります。小、大、動的ビューポートサイズのそれぞれのビューポートパーセント値の単位は
svh
、lvh
、dvh
です。vh
はブラウザー既定ビューポートサイズに基づくビューポートパーセント値の長さの単位を表します。 vw
-
ビューポートの初期包含ブロックの幅のパーセント値を表します。
1vw
はビューポートの幅の 1% です。例えば、ビューポートの幅が800px
の場合、プロパティで50vw
の値を指定すると400px
になります。小、大、動的ビューポートサイズのそれぞれのビューポートパーセント値の単位は
svw
、lvw
、dvw
です。vw
はブラウザー既定ビューポートサイズに基づくビューポートパーセント値の長さの単位を表します。 vmax
-
vw
とvh
の大きい方を表します。小、大、動的ビューポートサイズのそれぞれのビューポートパーセント値の単位は
svmax
,lvmax
,dvmax
です。vmax
はブラウザー既定ビューポートサイズに基づくビューポートパーセント値の長さの単位を表します。 vmin
-
vw
とvh
の小さい方を表します。小、大、動的ビューポートサイズのそれぞれのビューポートパーセント値の単位は
svmin
,lvmin
,dvmin
です。vmin
はブラウザー既定ビューポートサイズに基づくビューポートパーセント値の長さの単位を表します。 vb
-
初期包含ブロックにおける、ルート要素のブロック軸方向のパーセント値を表します。
小、大、動的ビューポートサイズのそれぞれのビューポートパーセント値の単位は
svb
,lvb
,dvb
です。vb
はブラウザー既定ビューポートサイズに基づくビューポートパーセント値の長さの単位を表します。 vi
-
初期包含ブロックにおける、ルート要素のインライン軸方向のパーセント値を表します。
小、大、動的ビューポートサイズのそれぞれのビューポートパーセント値の単位は
svi
,lvi
,dvi
です。vi
はブラウザー既定ビューポートサイズに基づくビューポートパーセント値の長さの単位を表します。
コンテナークエリーの長さの単位
コンテナークエリーを用いてコンテナーにスタイルを設定する場合、コンテナークエリーの長さの単位を使用することができます。 この単位は、クエリーコンテナーの寸法関連の長さを指定します。 コンテナーに対して相対的な長さの単位を使用する部品は、具体的な長さの値を再計算することなく、様々なコンテナーで柔軟に使用することができます。 詳しい情報は、コンテナークエリーを参照してください。
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
になります。
絶対的な長さの単位
絶対的な長さの単位は、出力メディアの物理的な特性が分かっている場合 (印刷レイアウトなど) に物理的な長さを表します。これはある単位を物理的な単位に固定してから、これを基準に他の単位を定義します。固定する単位は画面のような低解像度の端末か、あるいはプリンターのような高解像度の端末かによって異なります。
低解像度の端末では、px
の単位が物理的な参照ピクセルを表し、その他の単位はこれを基準に定義されます。例えば 1in
は 96px
と定義され、これは 72pt
と等しくなります。このような端末では結果的に、インチ (in
)、センチメートル (cm
)、ミリメートル (mm
) といった単位で表される長さは、同名の物理的な単位と同じ長さになるとは限りません。
高解像度の端末では、インチ (in
)、センチメートル (cm
)、ミリメートル (mm
) は対応する物理的な単位と同じになります。従って、 px
の単位は、それ (1 インチの 1/96) を基準に定義されます。
メモ:
たくさんのユーザーが、テキストが読みやすくなるようユーザーエージェントの既定のフォントの大きさを拡大しています。絶対的な長さで指定すると、大きさが固定され、ユーザー設定によって拡大しなくなるため、アクセシビリティ上の問題が発生します。この理由から、 font-size
を設定する場合には、(em
や rem
のような)相対的な単位が適しています。
px
-
1 ピクセルです。画面表示では、伝統的に端末の 1 ピクセル (ドット) を表します。しかし、プリンターや高解像度の画面では、 CSS の 1 ピクセルが端末の複数ピクセルになることがあります。
1px
=1in / 96
です。 cm
-
1 センチメートルです。
1cm
=96px / 2.54
です。 mm
-
1 ミリメートルです。
1mm
=1cm / 10
です。 Q
-
1/4 ミリメートルです。
1Q
=1cm / 40
です。 in
-
1 インチです。
1in
=2.54cm
=96px
です。 pc
-
1 パイカです。
1pc
=12pt
=1in / 6
です。 pt
-
1 ポイントです。
1pt
=1in / 72
です。
補間
例
様々な長さの単位の比較
以下の例では、入力欄に <length>
の値(例えば 300px
, 50%
, 30vw
)を入力することができ、 Return を押したときにバーの長さが反映されます。
これにより、様々な長さの単位の効果を比較し対照させることができます。
HTML
<div class="outer">
<div class="input-container">
<label>長さを入力してください:</label>
<input type="text" id="length" />
</div>
<div class="inner"></div>
</div>
<div class="results"></div>
CSS
html {
font-family: sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.outer {
width: 100%;
height: 50px;
background-color: #eee;
position: relative;
}
.inner {
height: 50px;
background-color: #999;
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;
result.innerHTML = `<code>width: ${inputElem.value}</code>`;
resultsDiv.appendChild(result);
inputElem.value = "";
inputElem.focus();
});
結果
仕様書
Specification |
---|
CSS Values and Units Module Level 4 # lengths |
ブラウザーの互換性
BCD tables only load in the browser