数値データ型

CSS 宣言はすべて、プロパティと値のペアから成っています。値には、単一のキーワード、整数、関数、異なる型の組み合わせなど、プロパティに応じてさまざまなデータ型を含めることがあります。また、値には単位を持つものもあれば、持たないものもあります。数値データ型には <integer>、<number>、<dimension>、<percentage> の値があります。このガイドは数値データ型の概要です。より詳細な情報については、各値の型に対応するページを参照してください。

整数

整数は 1 桁以上の 0 から 9 の十進数で、1024、-55 など該当します。整数は + や - を先頭に付けることができますが、記号と整数の間に空白を開けないでください。

数値

<number> は実数を表します。小数点以下の小数部はあってもなくても構いません。例えば 0.255、128、-1.2 が該当します。数値にも + や - の記号を先頭に付けることができます。

寸法

<dimension> は、<number> に単位が付いたものです。例えば 45deg、100ms、10px が該当します。付けた単位の識別子は大文字小文字が区別されません。数値と単位の間には、空白やその他の文字を入れないでください。すなわち、 1 cm は無効です。

CSS では、以下のものを表すために寸法を使います。

以下の節で、これらについて説明します。

寸法の単位

長さ (距離) の単位がプロパティの値として使用できるとき、これを <length> 型と呼びます。CSS の長さには、相対的な長さと絶対的な長さの 2 種類があります。相対的な長さの単位は、他の何かからの相対的な長さを指定します。

相対的な長さには、フォント相対長とビューポートパーセント値の 2 種類があります。 どちらも 2 つの型に分かれます。 フォント相対長の単位には、ローカルフォント相対長またはルートフォント相対長があります。ビューポートのパーセント値の長さは、ビューポートの高さまたは幅のサイズに関連しているか、または CSS コンテナーモジュールで定義されているように、コンテナーから相対的なものです。

ローカルフォント相対長

ローカルフォント相対長は、「ローカル」のフォントサイズまたは行の高さに相対的な長さを指定し、要素自体の特徴の計算値のサイズとの相対で長さを指定するか、循環参照の場合には、 em 値（font-size プロパティ）や lh 値（line-height プロパティ）のように、要素が継承した値との相対的な長さを指定します。 例えば、 em は要素上のフォントサイズに関連し、 ex は要素のフォントの x 高からの相対になります。

単位 相対値の基準
cap この要素のフォントの大文字の高さ（大文字の公称高さ）。
ch "0" (ZERO, U+0030) の字形が表す、この要素のフォントにおける幅の狭い文字の平均文字送り。
em この要素のフォントのフォントサイズ。
ex この要素のフォントの x 高。
ic "水" (CJK の水の表意文字、U+6C34) の字形が表す、この要素のフォントにおける全角字形の平均文字送り。
lh この要素の行の高さ。

ルートフォント相対長

ルートフォント相対長は、要素のルート要素である祖先、例えば <html> や <svg> などに関連した長さを指定します。 例えば、 rem はルート要素のフォントサイズに対する相対値であり、 rex はルート要素のフォントの x 高です。

単位 相対値の基準
rcap ルート要素のフォントの大文字の高さ（大文字の公称高さ）。
rch "0" (ZERO, U+0030) の字形が表す、ルート要素のフォントにおける幅の狭い文字の平均文字送り。
rem ルート要素のフォントのフォントサイズ。
rex ルート要素のフォントの x 高。
ric "水" (CJK の水の表意文字、U+6C34) の字形が表す、ルート要素のフォントにおける全角字形の平均文字送り。
rlh ルート要素の行の高さ。

ビューポート単位

ビューポート単位の長さは、ビューポートの寸法に関連した長さを指定します。 例えば、 vw はビューポートの幅に関連し、 vh はビューポートの高さに関連します。

単位 相対値の基準
dvh 動的ビューポートの高さの 1%。
dvw 動的ビューポートの幅の 1%。
lvh 大ビューポートの高さの 1%。
lvw 大ビューポートの幅の 1%。
svh 小ビューポートの高さの 1%。
svw 小ビューポートの幅の 1%。
vb ルート要素のブロック軸におけるビューポートサイズの 1%。
vh ビューポートの高さの 1%。
vi ルート要素のインライン軸におけるビューポートサイズの 1%。
vmax ビューポートの大きい方の寸法の 1%。
vmin ビューポートの小さい方の寸法の 1%。
vw ビューポートの幅の 1%。

コンテナー単位

コンテナークエリー長単位は、クエリーコンテナーの寸法に対する長さを指定します。 例えば、 cqw はクエリーコンテナーの幅に対する相対値であり、 cqh はクエリーコンテナーの高さに対する相対値です。

単位 相対値の基準
cqb クエリーコンテナーのブロックサイズの 1%
cqh クエリーコンテナーの高さの 1%
cqi クエリーコンテナーのインラインサイズの 1%
cqmax cqi と cqb の大きい方の値
cqmin cqi と cqb の小さい方の値
cqw クエリーコンテナーの幅の 1%

絶対的な長さの単位

絶対的な長さの単位は物理的な長さであり、インチやセンチメートルなどと決まっています。そのため、これらの単位の多くは、印刷などの固定サイズの媒体への出力に向いています。たとえば、 mm は物理的なミリメートルで、センチメートルの 1/10 です。

単位 名称 換算
cm センチメートル 1cm = 96px/2.54
in インチ 1in = 2.54cm = 96px
mm ミリメートル 1mm = 1/10th of 1cm
pc パイカ 1pc = 1/6th of 1in
pt ポイント 1pt = 1/72th of 1in
px ピクセル 1px = 1/96th of 1in
Q 1/4 ミリメートル 1Q = 1/40th of 1cm

長さの値を使用する場合、その長さが 0 なら単位をつける必要はありません。そうでないときには、単位は必須で、大文字小文字は区別せず、値の数値部分の直後に空白をはさむことなく付けなければなりません。

角度の単位

角度の値は <angle> 型で表され、以下の値を受け付けます。

単位 名称 説明
deg 度 完全な円は 360 度です。
grad グラディアン 完全な円は 400 グラディアンです。
rad ラジアン 完全な円は 2π ラジアンです。
turn 周 完全な円は 1 周です。

時間の単位

時間の値は <time> 型で表されます。時間の値を含めるときは、単位 — the s か ms — の指定が必要です。以下の値を受け付けます。

単位 名称 説明
ms ミリ秒 1000 ミリ秒で 1 秒です。
s 秒

周期の単位

周期の値は <frequency> 型で表されます。以下の値を受け付けます。

単位 名称 説明
Hz ヘルツ 1 秒間に発生する回数を表します。
kHz キロヘルツ 1 キロヘルツは 1000 ヘルツです。

1Hz は 1hz や 1HZ とも表記でき、 1 秒あたり 1 サイクルとなります。

フレックス単位

フレックス単位は <flex> 型で表します。次の値を受け入れます。

単位 名称 説明
fr フレックス グリッドコンテナー内で柔軟な長さを表します。

解像度の単位

解像度の単位は <resolution> 型で表されます。これらは、CSS のインチ、センチメートル、ピクセルに収まるドット数を示すことで、画面などの視覚表現におけるドット 1 つの大きさを表します。以下の値を受け付けます。

単位 説明
dpcm センチメートル当たりのドット数。
dpi インチ当たりのドット数。
dppx, x ピクセル当たりのドット数。

パーセント

<percentage> は他の値の割合を表す型です。

パーセント値は、常に長さなどの他の量に対する相対的な値です。パーセントにできるプロパティごとに、パーセントが参照する量も定義されています。この量は、同じ要素の別のプロパティの値であったり、祖先要素のプロパティの値であったり、包含ブロックの測定値であったり、何か他のものであったりします。

例えば、ボックスの width をパーセントで指定した場合、ボックスの親要素で計算された幅を参照するパーセントになります。

css
.box {
  width: 50%;
}

パーセントと寸法の混合

一部のプロパティでは、2 つの型のいずれかの寸法を受け入れることがあります。<length> または <percentage> といった具合です。この場合の許容値は、<length-percentage> のように組合わせ単位として仕様書で詳解しています。他に取りうる組み合わせは以下の通りです。

特殊データ型 (他の仕様書で定義)

色

<color> の値は要素機能 (背景色など) の色を指定します。これは CSS 色モジュールで定義されています。

画像

<image> の値は、CSS で使用できる各種すべての画像を指定します。これは CSS 画像の値と置換要素モジュールで定義されています。

位置

<position> 型は位置取りできる領域内におけるオブジェクトの 2D 位置を定義します。例えば、コンテナー要素内の背景画像がこれにあたります。この型は background-position として解釈されるために、CSS の背景と境界の仕様書 で定義されています。

関数記法

関数記法は、 CSS でより複雑な型を表現したり、特殊な処理を呼び出すことができる値の型です。この構文は、関数名の直後に左括弧 ( 、関数記法の引数、右括弧 ) と続きます。関数は複数の引数を取ることができ、CSS のプロパティ値と同様の書式になります。

括弧内のホワイトスペースは許容されますが、任意です。(ただし、min()、max()、minmax()、clamp() 関数については、各ページ内の空白に関する注意事項を参照してください。)

rgb()、rgba()、hsl()、hsla() の古い構文など、一部の古い関数記法ではカンマを使用していましたが、一般的にカンマはリストアイテムを区切るためにのみ使用されます。引数を区切るためにカンマを使用する場合、カンマの前後には空白文字をオプションで挿入できます。

仕様書

Specification
CSS Values and Units Module Level 4

関連情報