CSS - <length>

• トップ
• CSSリファレンス
• <length>

• 説明
• 単位
  • 現在の要素に基づく相対的単位
  • ルート要素に基づく相対的単位
  • 絶対的な単位
  • ビューポート単位
  • ダイナミックビューポート単位
  • コンテナクエリー単位
• 使用例
• リンク

説明

「数値＋単位」の形式で長さを指定します。数値は小数でも構いません。相対単位では em や rem、絶対単位では px がよく使用されます。

.sample1 { width: 300px; height: 60px; }
.sample2 { width: 3.5rem; height: 2.7rem; }

長さを示す際は通常は単位が必須ですが、0 の場合のみ単位を省略することができます。

.sample3 { margin: 0; padding: 0; }

単位

現在の要素に基づく相対的単位

• em : 現在の要素における、通常文字の高さ。元々は文字 'M' の横幅でしたが定義が変わっています。
• ex : 現在の要素における、文字 'x' の高さ。
• cap : 現在の要素における、通常の大文字の高さ。Chrome 118 から利用可能。(サポート状況)
• ch : 現在の要素における、文字 '0' の横幅。
• lh : 現在の要素における、line-height の値。Chrome 109 から利用可能。(サポート状況)
• ic : 現在の要素における、文字 '水'(U+6C34) の送り幅(余白を含む幅)。

ルート要素に基づく相対的単位

• rem : ルート要素における、通常文字の高さ。元々は文字 'M' の横幅でしたが定義が変わっています。
• rex : ルート要素における、文字 'x' の高さ。
• rcap : ルート要素における、通常の大文字の高さ。Chrome 118 から利用可能。(サポート状況)
• rch : ルート要素における、文字 '0' の横幅。
• rlh : ルート要素における、line-height の値。
• ric : ルート要素における、文字 '水'(U+6C34) の送り幅(余白を含む幅)。

絶対的な単位

• px : 1ピクセル。1px = 1in / 96。通常は画面上の1ドットを示しますが、デバイスによっては数ドットになることがあります。
• cm : 1センチメートル。1cm = 1in / 2.54。
• mm : 1ミリメートル。1mm = 1cm / 10。
• Q : 1/4ミリメートル。1Q = 1mm / 4。
• in : 1インチ。1in = 2.54cm = 96px。
• pc : 1パイカ。1pc = 1in / 12。
• pt : 1ポイント。1pt = 1in / 72。

ビューポート単位

現在のビューポート(表示領域)を基準とする単位が追加されました。vw, vh, vmin, vmax は Chrome 26 から、vi, vb は Chrome 108 から利用可能です。(サポート状況)

• vw : 現在のビューポートの横幅の100分の1。
• vh : 現在のビューポートの高さの100分の1。
• vi : 現在のビューポートのインライン方向の長さ(横書きの場合は横幅)の100分の1。
• vb : 現在のビューポートのブロック方向の長さ(横書きの場合は高さ)の100分の1。
• vmin : vw と vh の小さい方。
• vmax : vw と vh の大きい方。

ダイナミックビューポート単位

スマホでアドレスバーなどの表示・非表示によってビューポートの高さが変わる場合に対応するために、新しい単位が追加されています。s～ や d～ を用いることにより、アドレスバーなどがコンテンツを隠してしまうことを防ぐことができます。Chrome 108 から利用可能です。(サポート状況)

• s～：アドレスバーなどが表示された場合を考慮した最小ビューポートサイズ。
• l～：アドレスバーなどが表示されない場合の最大ビューポートサイズ。
• d～：アドレスバーなどの有無によりダイナミックに変動するビューポートサイズ。

上記を用いて下記の単位が追加されています。

• svw : ビューポートの横幅の100分の1(最小ビューポート基準)。
• svh : ビューポートの高さの100分の1(最小ビューポート基準)。
• svi : ビューポートのインライン方向の長さの100分の1(最小ビューポート基準)。
• svb : ビューポートのブロック方向の長さの100分の1(最小ビューポート基準)。
• svmin : svw と svh の小さい方(最小ビューポート基準)。
• svmax : svw と svh の大きい方(最小ビューポート基準)。
  
  
• lvw : ビューポートの横幅の100分の1(最大ビューポート基準)。
• lvh : ビューポートの高さの100分の1(最大ビューポート基準)。
• lvi : ビューポートのインライン方向の長さの100分の1(最大ビューポート基準)。
• lvb : ビューポートのブロック方向の長さの100分の1(最大ビューポート基準)。
• lvmin : svw と svh の小さい方(最大ビューポート基準)。
• lvmax : svw と svh の大きい方(最大ビューポート基準)。
  
  
• dvw : ビューポートの横幅の100分の1(ダイナミックビューポート基準)。
• dvh : ビューポートの高さの100分の1(ダイナミックビューポート基準)。
• dvi : ビューポートのインライン方向の長さの100分の1(ダイナミックビューポート基準)。
• dvb : ビューポートのブロック方向の長さの100分の1(ダイナミックビューポート基準)。
• dvmin : svw と svh の小さい方(ダイナミックビューポート基準)。
• dvmax : svw と svh の大きい方(ダイナミックビューポート基準)。

コンテナクエリー単位

コンテナクエリー を指定する際に使用できる下記の単位が追加されています。Chrome 105 から利用可能です。(サポート状況)

• cqw : コンテナの横幅の100分の1。
• cqh : コンテナの高さの100分の1。
• cqi : コンテナのインライン方向の長さ(横書きの場合は横幅)の100分の1。
• cqb : コンテナのブロック方向の長さ(横書きの場合は高さ)の100分の1。
• cqmin : cqi と cqb の短い方。
• cqmin : cqi と cqb の長い方。

使用例

.sample {
    color: black;
    background-image: url(../image/back.gif);
    width: 100px;
    height: 100px;
    border: 1px solid gray;
}

<div class="sample">こんにちわ</div>

リンク

• https://developer.mozilla.org/ja/docs/Web/CSS/length
• http://www.w3.org/TR/css3-values/#lengths
• https://drafts.csswg.org/css-values-4/#length-value

---