Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

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

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

【訳注: 記事内ではentityの訳語に「対象」を当てています。】

成分 (component)の値の型

キーワード

共通キーワード

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

特殊なキーワード inherit と initial

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

リテラル

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 度だけ出現しなければなりません。
注記: 並列は二重アンパサンドより優先されます。例えば bold thin && <length> は [ bold thin ] && <length> と同じ意味です。これは bold thin <length> や <length> bold thin を含みますが、bold <length> thin は含みません。

二重バー

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

<'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> bold, や thin <length> bold を含みますが、bold <length> bold thin は 含みません。bold を省略しないのなら、thin && <length> 成分全体よりも前か後ろに置く必要があるからです。

単一バー

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 回だけ存在できます。

注記: 二重バーは単一バーより優先されます。例えば bold | thin || <length> は bold | [ thin || <length> ] と同じ意味です。bold, thin, <length>, <length> thin, や thin <length> を含みますが、bold <length> は含みません。| 結合子の両側それぞれから 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 は最大で 1度しか出現できません。
  • 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 キーワードよりも前に出現する必要があります。

概要

記号 名前 説明 例
結合子
  並列 どちらも必須でこの順で出現する必要あり 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 回 （省略可能 (optional) を表す） bold smaller?
{A,B} 波括弧 少なくとも A 回、最大で B 回 bold smaller{1,3}
# ハッシュ記号（シャープ、ナンバー） 1 回以上。各出現がカンマ (',') で区切られている必要がある bold smaller#

仕様

仕様書 策定状況 コメント
CSS Values and Units Module Level 3
Value definition syntax の定義		 勧告候補 CSS Level 2 (Revision 1)
Value definition syntax の定義 からハッシュ記号乗算子を追加
CSS Level 2 (Revision 1)
Value definition syntax の定義		 勧告 CSS Level 1
Value definition syntax の定義 から二重アンパサンド結合子
CSS Level 1
Value definition syntax の定義		 勧告 初回定義

関連情報

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: Sebastianz, Prinz_Rana, Guillaume-Heras, prayash, ethertank, sosleepy
 最終更新者: Sebastianz,