CSS データ型

構文

CSS の形式文法では、データ型は < と > の不等号で囲まれたキーワードで表記されます。それらは具体的な CSS コードエンティティに対応していません。

テキストデータ型

これらの型には、キーワード、識別子、文字列、URL などがあります。

定義済みのキーワード

あらかじめ意味が定義されたキーワード、例えば collapse の値は border-collapse プロパティの値のためのものです。

CSS 全体のキーワード

カスタムプロパティを含むすべてのプロパティは、CSS 全体のキーワードを受け入れます。

initial

プロパティの初期値として指定された値です。

inherit

要素の親におけるプロパティの計算値です。

revert

カスケードを先のオリジンの値にロールバックします。

revert-layer

カスケードを前のカスケードレイヤーの値まで戻します。

unset

プロパティが継承されるかどうかに応じて inherit または initial として動作します。

<custom-ident>

ユーザー定義の識別子です。例えば、grid-area プロパティを使って割り当てる名前などです。

<dashed-ident>

<custom-ident> に 2 つのダッシュで始めなければならないという制限を追加したものです。例えば、CSS カスタムプロパティなどです。

<string>

引用符で囲まれた文字列で、content プロパティの値など使用されます。

url()

リソースへのポインターで、例えば background-image プロパティの値などです。

数値データ型

これらのデータ型は、数量、インデックス、位置などを示すために使用されます。これらのデータ型のほとんどは、CSS 値と単位仕様書で定義されていますが、それ以外の仕様書にもその仕様書固有のデータ型が記述されています。例えば、CSS グリッドレイアウトでは、fr という単位が定義されています。

<integer>（整数）

1 桁以上の 0 から 9 までの 10 進数の値で、- または + が先行することがあります。

<number>（数値）

小数部分を持つこともある実数で、例えば 1 や 1.34 などです。

<dimension>（大きさ）

単位付きの数値。例えば 90deg、50ms、15em などです。この型には、距離 (<length>)、時間 (<time>)、周波数 (<frequency>)、解像度 (<resolution>) などの大きさが含まれます。

<percentage>（パーセント値）

パーセント記号の付いた数値で、例えば 10% などです。

<ratio>（比率）

<number> / <number> という構文で表される比率です。

<flex>

CSS グリッドレイアウトに導入された柔軟な長さで、<number> に fr の単位が付加したものとして記述され、グリッドトラックのサイズ調整に使用されます。

数量

これらの <dimension> 型は、寸法やその他の数量を指定するために使用されます。

<length>（長さ）

長さは <dimension> の一種で、寸法を表します。

<angle>（角度）

角度は linear-gradient() などのプロパティで使用されるもので、 <dimension> のうち deg、grad、rad、turn のいずれかの単位が付いたものです。

<time>（時間）

時間の単位は <dimension> に s や ms の単位を付けたものです。

<frequency>（周波数）

周波数は <dimension> に Hz や kHz という単位を付けたものです。

<resolution>（解像度）

<dimension> の一種で、 dpi, dpcm, dppx, x のいずれか単位を付けたものです。

型の組み合わせ

CSS プロパティの中には、 <dimension> と <percentage> のどちらかを取ることができるものがあります。この場合、パーセント値は、許容される大きさに一致する大きさに解決されます。大きさに加えてパーセント値を取ることができるプロパティは、以下に示す型のいずれかを使用します。

<length-percentage>

値として長さまたはパーセント値を受け取ることができる型です。

<frequency-percentage>

値として周波数またはパーセント値を受け取ることができる型です。

<angle-percentage>

値として角度またはパーセント値を受け取ることができる型です。

<time-percentage>

値として時間またはパーセント値を受け取ることができる型です。

色

CSS 色モジュールは、CSS における <color> データ型と、色に関するその他の型を定義しています。

<color>

キーワードまたは色の数値で指定します。

<alpha-value>

色の透明度を指定します。 <number> の場合は 0 が完全な透明、1 が完全な不透明となり、<percentage> の場合は 0% が完全な透明、100% が完全な不透明となります。

<hue>

<angle> を deg、grad、rad、turn の単位識別子、または無単位の <number> （これは deg として解釈される）で指定します。これは色相環上の角度であり、<absolute-color-functions> の成分のみで使用されます。

画像

CSS 画像は、グラデーションを含む画像を扱うデータ型を定義しています。

<image>

画像への URL 参照や色のグラデーションです。

<color-stop-list>

2 つ以上の色経由点のリストで、オプションで色ヒントを使ったトランジション情報があります。

<linear-color-stop>

グラデーションのこの部分の色経由点を示すための <color> と <length-percentage> です。

<linear-color-hint>

色がどのように補間されるかを示すための <length-percentage> です。

<ending-shape>

放射グラデーションで使用されます。circle または ellipse のキーワード値を指定することができます。

<size>

放射グラデーションの末端のの大きさを決定します。キーワードまたは <length> を指定できますが、パーセント値は指定できません。

2 次元の位置指定

<position> データ型は <background-position> プロパティで定義されたものと同様に解釈されます。

<position>

オブジェクト領域の位置を定義します。top や left などのキーワードや、<length-percentage> の値を指定します。

計算データ型

これらのデータ型は CSS 数学関数の計算で使用されます。

<calc-sum>

加算 (+) と減算 (-) 演算子を挟む一連の計算値。このデータ型は両方の値に単位があることを要求されます。

<calc-product>

乗算 (*) や除算 (/) を運営する演算子を挟んだ一連の計算値。乗算の場合、一方の値は無単位でなければなりません。除算の場合、 2 つ目の値は無単位でなければなりません。

<calc-value>

計算を受け入れる値を定義します。 <number>, <dimension>, <percentage>, <calc-keyword> または入れ子になった <calc-sum> 計算のような値です。

<calc-keyword>

e や π のような、 CSS の数学関数で使用することができる数値定数を表す CSS キーワードを定義します。

図形データ型

CSS 図形および CSS 境界とボックス装飾モジュールでは、次のデータ型を定義しています。

<basic-shape>

clip-path、shape-outside、offset-path の各プロパティで使用される図形関数を記述します。

<corner-shape-value>

コンテナーの角の図形を記述します。corner-shape 一括指定プロパティおよびその構成要素のプロパティによって使用され、影響を受けるコンテナーの角に適用される図形を指定します。

データ型のアルファベット順の索引

• <absolute-size>
• <alpha-value>
• <angle>
• <angle-percentage>
• <axis>
• <baseline-position>
• <basic-shape>
• <blend-mode>
• <box-edge>
• <calc-keyword>
• <calc-sum>
• <color>
• <color-interpolation-method>
• <content-distribution>
• <content-position>
• <corner-shape-value>
• <custom-ident>
• <dashed-function>
• <dashed-ident>
• <dimension>
• <display-box>
• <display-inside>
• <display-internal>
• <display-legacy>
• <display-listitem>
• <display-outside>
• <easing-function>
• <filter-function>
• <flex>
• <frequency>
• <frequency-percentage>
• <generic-family>
• <gradient>
• <hex-color>
• <hue>
• <hue-interpolation-method>
• <ident>
• <image>
• <integer>
• <length>
• <length-percentage>
• <line-style>
• <named-color>
• <number>
• <overflow>
• <overflow-position>
• <percentage>
• <position>
• <position-area>
• <ratio>
• <relative-size>
• <resolution>
• <self-position>
• <shape>
• <string>
• <system-color>
• <text-edge>
• <time>
• <time-percentage>
• <transform-function>
• <url>

仕様書

関連情報

• CSS 単位と値
• CSS 入門: 値と単位
• CSS 関数記法