Unformed Building

CSS仕様のプロパティ値の構文の読み方

公開：

パーマリンク

W3CにあるCSSプロパティ値の読み方というか、構文についてのメモです。
覚えておくと調べるときに楽になります。

この内容は「About the CSS 2.1 Specification - 1.4 Conventions」に書いてあるものの一部（+α）です。

各プロパティは、次のような表記で定義されています。

‘プロパティ名’
Value:正規の値と構文
Initial:初期値
Applies to:このプロパティが適用される要素
Inherited:プロパティが継承されているかどうか
Percentages:パーセンテージがどのように解釈されるか (何に対してのパーセンテージかなど)
Media:このプロパティが適用されるメディアグループ
Computed value:値がどのように計算されるか
Animatable:アニメーション可能かどうか (表記のないものもあります)

値の部分のキーワードは文字通りに記述しなければなりません。また、スラッシュ（/）やコンマ（,）も同様に文字通りに記述しなければなりません。
"<"と">"で囲まれているものはデータ型を表します。基本的にリンクがあるので、その型がどういうものはリンク先の説明を参照すること。

  • いくつか単語が並置されている場合、その順序通りに全て記述しなければなりません。
  • バー（|）は2つ以上の選択肢の区切りで、それらの中の1つを記述しなければなりません。
  • ダブルバー（||）は2つ以上の選択肢の区切りで、それらの中の1つ以上を記述しなればなりません。これは順不同です。
  • ダブルアンパサンド（&&）は2つ以上の構成要素の区切りで、それらの全てを記述しなければなりません。これは順不同です。
  • ブラケット（[ ]）はグルーピングのために使用されます。

優先順は左から順に並置 - ダブルアンパサンド - ダブルバー - バーです。
次の2つは等しくなります。

  a b   |   c ||   d &&   e f
[ a b ] | [ c || [ d && [ e f ]]]

[a b]と[e f]はその表記通りに記述します。
dと[e f]はどちらも必須で順不同です。
cと[d && [e f]]はcのみ、[d && [e f]]のみ、または両方を記述します。順不同。
[a b]と[c || [d && [e f]]]はどちらか片方を記述します。

データ型、キーワード、グループには次の修飾子がついていることがあります。

  • アスタリスク（*）は、先行する型、単語、グループが0回以上出現することを示します。
  • プラス（+）は、先行する型、単語、グループが1回以上出現することを示します。
  • クエスチョンマーク（?）は、先行する型、単語、グループが任意であることを示します。
  • 波括弧で囲まれた数字のペア（{A,B}）は、先行する型、単語、グループが最低A回、最大B回出現することを示します。

2012年7月24日版の「CSS Backgrounds and Borders Module Level 3」を例に、実例を見てみます。

background-colorの値は次のようになっています。

<color>

これは簡単ですね。<color>型を見ればいいだけです。
次にbackground-imageを見てみます。

<bg-image> [ , <bg-image> ]*

1つ目の<bg-image>型は必須で、2つ目以降はコンマの後に<bg-image>型を書きます。このコンマと<bg-image>型の組み合わせは0回以上記述できます。
では<bg-image>型とは何かをリンクから見てみると次のように書かれています。

<bg-image> = <image> | none

<bg-image>型とは<image>型もしくはnoneキーワードであることが分かります。
そうしたら「<image>型とは？」となるので、同様にリンク先を参照します。

最後にbox-shadowプロパティを見てみます。
このプロパティの値は次のようになっています。

none | <shadow> [ , <shadow> ]*

noneキーワードか、<shadow>型（コンマ区切りで複数回指定可）のどちらかとなっています。
<shadow>型は次のような構文になっています。

<shadow> = inset? && [ <length>{2,4} && <color>? ]

insetキーワードは任意ですが、書くときは[<length>{2,4} && <color>?]グループと一緒に書く必要があります。insetキーワードとグループとの組み合わせは順不同です。

[<length>{2,4} && <color>?]グループ内は<length>型を2つ以上4つ以内記述し、<color>型と一緒に書く必要があります。<length>型の繰り返しと<color>型の組み合わせは順不同です。
ただし、<color>型は任意なので[<length>{2,4} && <color>?]グループ内は<length>{2,4}だけを記述することもできます。

2つ以上4つ以内の<length>型はそれぞれ何を示すか、というのはすぐ近くに書かれているのでそれを読めば分かります。
また<color>型を指定しなかったらどうなるのかについても近くに書かれています。

以上で終わりますが、ここに書いたものは本当に簡単な説明ですので、最初に挙げたリンク先も読むことをお勧めします。