値の定義構文

CSS の値の定義構文は、形式文法であり、 CSS プロパティや関数の有効な値の組み合わせ定義するのに使われます。この構文に加えて、有効な値の組み合わせは意味的な制約で有効値の集まりをさらに制限できます (例えば、数値を正の値に限定します)。

定義構文ではどの値が許可され、相互作用が可能であるかを記述します。成分は、キーワードや、リテラルとみなされる文字列、CSS データ型の値、またはその他の CSS プロパティのいずれかです。

成分値の種類

キーワード

共通キーワード

引用符なしのリテラルで、字句通りの意味が事前に定義されているキーワードです。例: auto, smaller, ease-in

inherit, initial, unset の場合

すべての CSS プロパティで、 CSS 全体で定義されているキーワード inherit, initial, unset を使うことができます。これらは値定義に現れず、暗黙的に定義されています。

リテラル

CSS のスラッシュ ('/') やカンマ (',') のようないくつかの文字は、文字自身として現れ、プロパティ定義で値の区切りに使われます。カンマはよく、列挙する値や数学的な関数の引数の区切りに使われます。スラッシュはよく、意味的に異なるものの、共通の構文を持つ値の集まりの区切りに使われます。よくあるのは、一括指定 (shorthand) プロパティで、同じ型だが異なるプロパティに属する成分を区切る使い方です。

どちらの記号も値定義に文字通り現れます。

データ型

基本データ型

データの種類によっては CSS 全体で使われ、仕様書のすべての値に一度だけ定義されるものがあります。これは基本データ型と呼ばれ、名前を記号 '<' と '>' で囲って表現されます。例: <angle>, <string>, …

非終端データ型 (Non-terminal data types)

一般的でないデータ型ですが、非終端データ型も '<' と '>' で囲みます。

非終端データ型には 2 種類あります。

  • 同名プロパティを共有するデータ型で、引用符で囲みます。この場合、データ型はプロパティと同じ値のセットを共有します。一括指定プロパティの定義でよく使われます。
  • プロパティと同じ名前を共有していないデータ型。これらのデータ型は、基本データ型にとても近いものです。基本データ型と異なるのは、定義の物理的な位置だけです。この場合、通常、その定義は、それらを使用するプロパティの定義に物理的にとても近いところにあります。

成分値の組み合わせ

角括弧

角括弧はいくつかの対象、結合子、乗算子を取り囲み、単一の成分に変換します。ひとまとまりの成分の結合優先順を無視するために使われます。

css
bold [ thin && <length> ]

この例は次の値に一致します。

  • bold thin 2vh
  • bold 0 thin
  • bold thin 3.5em

次の値には一致しません。

  • thin bold 3embold は角括弧で定義された成分と並列なので、その前に出現しなければなりません。

並列

いくつかのキーワード、リテラル、データ型を順に配置し、1 つ以上の空白で区切る置き方を並列と呼びます。並列の成分はどれも必須で、記述順どおりに出現する必要があります

css
bold <length> , thin

この例は次の値に一致します。

  • bold 1em, thin
  • bold 0, thin
  • bold 2.5cm, thin
  • bold 3vh, thin

次の値には一致しません。

  • thin 1em, bold。対象は記述通りの順でなければなりません
  • bold 1em thin。対象は必須です。リテラルであるカンマも存在する必要があります
  • bold 0.5ms, thinms 値は <length> ではありません。

二重アンパサンド

2 つ以上の成分を二重アンパサンド && で区切ると、対象すべてが必須だが出現順は問わないという意味になります。

css
bold && <length>

この例は次の値に一致します。

  • bold 1em
  • bold 0
  • 2.5cm bold
  • 3vh bold

次の値には一致します。

  • bold。どちらの成分も出現しなければなりません。
  • bold 1em bold。どちらの成分も 1 度だけ出現しなければなりません。

メモ: 並列は二重アンパサンドより優先されます。例えば bold thin && <length>[ bold thin ] && <length> と同じ意味です。これは bold thin <length><length> bold thin を含みますが、bold <length> thin は含みません。

二重バー

2 つ以上の成分を二重バー || で区切ると、すべての対象が省略可能であることを意味します。少なくともいずれか 1 つが存在する必要がありますが、順序は問いません一括指定プロパティの値定義に使われます。

css
<'border-width'> || <'border-style'> || <'border-color'>

この例は次の値に一致します。

  • 1em solid blue
  • blue 1em
  • solid 1px yellow

次の値には一致しません。

  • blue yellow。各成分は最大で 1 回だけ出現できます。
  • bold。どの対象の値もこのキーワードを使えません。

メモ: 二重アンパサンドは二重バーより優先されます。例えば bold || thin && <length>bold || [ thin && <length> ] と同じ意味です。 bold, thin <length>, bold thin <length>, thin <length> bold を含みますが、<length> bold thin は 含みません。 bold を省略しないのなら、thin && <length> 成分全体よりも前か後ろに置く必要があるからです。

単一バー

2 つ以上の対象を単一バー | で区切ると、全対象が排他的な選択肢であることを意味します。選択肢のうち 1 つだけが存在する必要があります。利用可能なキーワードを列挙する際によく使われます。

css
<percentage> | <length> | left | center | right | top | bottom

この例は次の値に一致します。

  • 3%
  • 0
  • 3.5em
  • left
  • center
  • right
  • top
  • bottom

次の値には一致しません。

  • center 3%。各成分は 1 つだけ存在しなければなりません。
  • 3em 4.5em。成分は最大で 1 回だけ存在できます。

メモ: 二重バーは単一バーより優先されます。例えば bold | thin || <length>bold | [ thin || <length> ] と同じ意味です。bold, thin, <length>, <length> thin, や thin <length> を含みますが、bold <length> は含みません。| 結合子の両側それぞれから 1 つだけ対象が存在できるからです。

成分値の乗算子

乗算子は、それ以前にある対象を何回繰り返せるかを表す記号です。乗算子がなければ、対象は 1 度だけしか出現してはいけません。

乗算子は足し合わせることはできず、他のどの結合子より優先される点に注意してください。

アスタリスク (*)

アスタリスク乗算子は対象の 0 回以上の出現を示します。

css
bold smaller*

この例は次の値に一致します。

  • bold
  • bold smaller
  • bold smaller smaller
  • bold smaller smaller smaller など

次の値には一致しません。

  • smallerbold は並列で、他のどの smaller キーワードより先に出現する必要があります。

プラス (+)

プラス乗算子は対象の 1 回以上の出現を示します。

css
bold smaller+

この例は次の値に一致します。

  • bold smaller
  • bold smaller smaller
  • bold smaller smaller smaller など

次の値には一致しません。

  • boldsmaller が少なくとも 1 回 出現しなければなりません。
  • smallerbold は並列で、他のどの smaller キーワードよりも前に出現しなければなりません。

疑問符 (?)

疑問符乗算子は、対象は省略可能で、0 回または 1 回出現することを意味します。

css
bold smaller?

この例は次の値に一致します。

  • bold
  • bold smaller

次の値には一致しません。

  • bold smaller smallersmaller は最大で 1 回しか出現できません。
  • smallerbold は並列で、他のどの smaller キーワードよりも前に出現する必要があります。

波括弧 ({ })

波括弧乗算子は、カンマで区切った 2 つの整数を囲うもので、対象が少なくとも A 回、最大で B 回出現することを示します。

css
bold smaller{1,3}

この例は次の値に一致します。

  • bold smaller
  • bold smaller smaller
  • bold smaller smaller smaller

次の値には一致しません。

  • boldsmaller が少なくとも 1 回出現する必要があります。
  • bold smaller smaller smaller smallersmaller は最大で 3 回しか出現できません。
  • smallerbold は並列で、他のどの smaller キーワードよりも前に出現する必要があります。

ハッシュ記号 (#)

ハッシュ記号乗算子は対象が (プラス乗算子のように) 1 回以上繰り返されるが、それぞれをカンマ (',') で区切る必要があることを示します。

css
bold smaller#

この例は次の値に一致します。

  • bold smaller
  • bold smaller, smaller
  • bold smaller, smaller, smaller など

次の値には一致しません。

  • boldsmaller が少なくとも 1 度出現する必要があります。
  • bold smaller smaller smallersmaller の出現部がそれぞれをカンマで区切る必要があります。
  • smallerbold は並列で、どの smaller キーワードよりも前に出現する必要があります。

強調点 (!)

グループの後の強調点乗算子は、グループが必須であり、少なくとも 1 つの値を生み出す必要があることを示します。グループ内の項目の構文が内容全体を省略することができるとしていても、少なくとも 1 つの成分値を省略することはできません。

css
[ bold? smaller? ]!

この例は次の値に一致します。

  • bold
  • smaller
  • bold smaller

次の値には一致しません。

  • boldsmaller もないものは、どちらか一つが現れる必要があります。
  • smaller boldbold は並列であり、 smaller キーワードの前に現れる必要があります。
  • bold smaller boldbold および smaller は一度だけしか現れてはいけません。

まとめ

記号 名前 説明
結合子
並列 どちらも必須でこの順で出現する必要がある solid <length>
&& 二重アンパサンド どちらも必須だが出現順は問わない <length> && <string>
|| 二重バー どちらかが存在する必要があり、出現順は問わない <'border-image-outset'> || <'border-image-slice'>
| 単一バー 正確に 1 つだけ存在する必要がある smaller | small | normal | big | bigger
[ ] 角括弧 結合優先順を変える bold [ thin && <length> ]
乗算子
乗算子なし 1 回 solid
* アスタリスク 0 回以上 bold smaller*
+ プラス記号 1 回以上 bold smaller+
? 疑問符 0 回か 1 回 (すなわち省略可能) bold smaller?
{A,B} 波括弧 少なくとも A 回、最大で B bold smaller{1,3}
# ハッシュ記号 1 回以上。各出現がカンマ (',') で区切られている必要がある bold smaller#
! 強調点 グループが少なくとも1つの値を生み出す必要がある [ bold? smaller? ]!

仕様書

Specification
CSS Values and Units Module Level 4
# value-defs

関連情報