CSS データ型

CSS データ型は、 CSS のプロパティや関数で使用される具体的な値 (キーワードや単位を含む) を定義しています。これはコンポーネント値型の特殊な種類です。

よく使われるデータ型は、 CSS 値と単位仕様書で定義されています。この仕様書は関数表記も定義しており、これはより複雑な型や処理を指定することができます。その他の型は、該当する型で仕様書で定義されています。

以下に、最もよく目にする型のリファレンスを掲載していますが、すべての CSS 仕様書で定義されている型を網羅しているわけではありません。

構文

css
selector {
  property: <unit-data-type>;
}

CSS の形式文法では、データ型は "<" と ">" の不等号で囲まれたキーワードで表記されます。

テキストのデータ型

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

定義済みのキーワード

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

CSS 全体のキーワード

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

initial

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

inherit

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

revert

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

unset

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

<custom-ident>

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

<dashed-ident>

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

<string>

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

url()

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

数値データ型

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

<integer> (整数)

1 桁以上の 0 から 9 までの 10 進数の値です。

<number> (数値)

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

<dimension> (大きさ)

単位を付けた数値で、 23px や 15em などです。

<percentage> (パーセント値)

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

<ratio> (比率)

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

<flex>

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

数量

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

<length> (長さ)

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

<angle> (角度)

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

<time> (時間)

時間の単位は <dimension>sms の単位を付けたものです。

<frequency> (周波数)

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

<resolution> (解像度)

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

型の組み合わせ

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

<length-percentage>

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

<frequency-percentage>

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

<angle-percentage>

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

<time-percentage>

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

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

<color>

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

<alpha-value>

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

<hue>

成分である <absolute-color-functions> に固有の 色相環<angle>deggradradturn の単位識別子、または deg と解釈される無単位の <number> で指定します。

画像

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

<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>

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

計算データ型

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

<calc-sum>

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

<calc-product>

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

<calc-value>

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

<calc-constant>

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

仕様書

Specification
CSS Values and Units Module Level 4

関連情報