値の定義構文

共通キーワード

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

inherit, initial, unset の場合

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

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

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

基本データ型

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

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

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

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

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

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

bold [ thin && <length> ]

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

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

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

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

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

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, thin。 ms 値は <length> ではありません。

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

bold && <length>

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

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

次の値には一致します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

bold smaller*

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

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

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

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

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

bold smaller+

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

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

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

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

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

bold smaller?

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

• bold
• bold smaller

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

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

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

bold smaller{1,3}

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

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

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

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

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

bold smaller#

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

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

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

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

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

[ bold? smaller? ]!

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

• bold
• smaller
• bold smaller

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

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

• CSS の主要概念:
  • CSS の構文
  • アットルール
  • コメント
  • 詳細度
  • 継承
  • ボックスモデル
  • レイアウトモード
  • 視覚整形モデル
  • マージンの相殺
  • 値
    • 初期値
    • 計算値
    • 使用値
    • 実効値
  • 値の定義構文
  • 一括指定プロパティ
  • 置換要素