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> のうち deg、grad、rad、turn のいずれかの単位が付いたものです。

<time> (時間)

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

<frequency> (周波数)

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

<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> を deg、grad、rad、turn の単位識別子、または 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>

オブジェクト領域の位置を定義します。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 入門: 値と単位
• CSS 関数記法