各CSSプロパティの表の読み方
ここでは、CSSのプロパティの表の読み方を説明します。先ず表のサンプルです。
値 | 採り得る値とその構文 |
---|---|
初期値 | デフォルト値 |
適用 | 適用可能な要素 |
継承 | 継承するか否か |
パーセンテージ | パーセンテージが使用可能な場合、どの値を基本とするのか 使用出来ない場合は、省略します |
値の範囲 | 値の範囲に制限がある場合、その範囲 制限が無い場合は省略します |
レベル | そのプロパティがどのレベルで使えるのか |
メディア | 適用可能なメディア |
プロパティ1つにつき、このような表が1つずつ付いています。複数のプロパティをまとめて1つの表で説明する場合もあります。
では、上から順に説明していきます。
値の記述形式
これはそのまま、値の書き方についてです。例を見てみましょう。
値 | [ <'border-width'> || <'border-style'> || <色> ] | inherit |
---|---|
値 | [ <識別子> <整数値>? ]+ | none | inherit |
値 | [<ファミリ名> , ]* <ファミリ名> |
値 | [ <長さ> | thick | thin ]{1,4} |
<と>で囲ってある値は、特殊な値です。データ型(data types)と呼ばれています。これらの値は通常、上記の例のようにそれぞれの値の説明にリンクしてあります。< と > で囲っていない値は、キーワードと言って、そのまま書きます。'や"で括ってはいけません。
それ以外の部分、[]・|・||、あとキーワードやデータ型、 ] の後に付いている、?・*・+・{}の説明をする必要があります。先ずは前半、[]・|・||について説明します。
- 並列に書き並べた値、つまり半角スペースなどで区切って並べた値は、すべて指定通りの順序で出現しないといけません。
- 複数の値を |(一重縦棒) で区切ってある場合、そのうち1つだけが出現しないといけません。0個でも2個でも駄目です。
- 複数の値を ||(二重縦棒) で区切ってある場合、そのうち少なくとも1つが任意の順序で出て来ないといけません。
- [ 〜 ](大括弧) はその範囲をグループ化します。
値の並列は||よりも結合力が強く、||は |よりも結合力が強いです。ですから、以下の例は
a b | c || d e
以下と等価になります。
[ a b ] | [ c || [ d e ]]
もっと詳しく言うと、値の組み合わせとしては、以下の組み合わせが可能という事です。
a b
c d e
c
d e
d e c
?・*・+・{}の説明に移ります。これらは修飾子(modifiers)と呼ばれています。
- *(アスタリスク)は、直前のデータ型、キーワード、グループを0回以上繰り返します。
- +(プラス)は、直前のデータ型、キーワード、グループを1回以上繰り返します。
- ?(疑問符)は、直前のデータ型、キーワード、グループを0回又は1回出現させます。
- 中括弧で括った自然数の組{A, B}は、直前のデータ型、キーワード、グループをA回以上B回以下繰り返します。
では、先ほどと同じように、実例で見て行く事にしましょう。
[ <識別子> <整数値>? ]+ | none | inherit
<整数値> に疑問符(?)が、[ <識別子> <整数値>? ] 全体にプラス(+)が付いているので、<識別子>を値に採る場合、<識別子>は最低一つ書く、オプションとして<整数値>を付けられる、という意味になります。
例えばこのような例が挙げられます。
<識別子> <識別子> <整数値> <識別子> <整数値>
<識別子> <識別子>
none
inherit
2つ目の例です。
[<ファミリ名> , ]* <ファミリ名>
この場合、[<ファミリ名> , ] 全体にアスタリスク(*)が掛かっていますので、コロン付きの<ファミリ名>を0回以上、最後に必ずコロン無しの<ファミリ名>、となります。人語で解釈すると、コロンで区切って<ファミリ名>を列挙、という事です。
例としては、以下のようなものが挙げられます。
<ファミリ名>
<ファミリ名> , <ファミリ名>
<ファミリ名> , <ファミリ名> , <ファミリ名> , <ファミリ名>
3つ目の例です。
[ <長さ> | thick | thin ]{1,4}
この場合、[ <長さ> | thick | thin ] までが {1,4} の対象になっていますので、3者選択を1回から4回繰り返します。
例としてはこのようになります。
thin
thick thin
<長さ> thin thick <長さ>
thick thin thick thin
以上で、値の読み方の説明を終わります。少々ややこしく思えるでしょうが、各プロパティでもきちんと説明していますので、ここでは大体の感じを掴んで頂ければ良いです。あとは慣れです。"木を見て森を見ず"、良い意味で使われる諺ではありませんが、全体を見て混乱せずに始めから順を追って見ていけば、何が書かれているか見えてくると思います。
初期値
そのプロパティに何も指定しなかった場合(つまり、ある要素に関するそのプロパティの宣言がすべて不正であったり、又は無かった場合)の値です。祖先要素から値を継承する場合が多いので、注意してください。継承するかどうかは、各プロパティの「継承」の欄をご覧ください。
適用
そのプロパティが有効な要素を示します。ここに書かれている要素以外にそのプロパティを指定しても無意味という事です。これと継承を利用して、その子孫要素のみに適用する、という方法もあります。
CSSでは建前上はすべての要素にすべてのプロパティが適用可能となっています。
継承
祖先要素から値を受け継ぐか否かです。相対的な値を採る場合でも、それを計算してから計算後の値を継承します。
が、'line-height'の値が数値の場合は、継承のし方が異なります。
CSS2になってから、[inherit] という値が導入されました。この値を使うと、値を継承しないプロパティでも、継承させる事が可能です。また、既に値を指定してしまったプロパティで、継承性を一時的に解除する為にも使えます。
パーセンテージ
プロパティにパーセンテージが与えられた時、それをどう解釈すべきかが書かれています。使用出来ない場合は、この項目は省略されています。
値の範囲
値の範囲に制限がある場合、その範囲を書きます。制限が無い場合、又はその単位系自身が制限を伴う場合は、この項目は省略されています。
レベル
そのプロパティがどのレベルで使えるのかを示します。
- -4 となっている場合はレベル1から4まで使用可能、
- 2-5 となっている場合はレベル2から5まで、
- 3- となっている場合は、レベル3から最新のレベルまで、
- - しかない場合は全レベルを通して 使用可能という事です。
- UA名が記載されている場合はそのUAの独自拡張CSSです。
最も、まだ レベル2 までしか無く、レベル3 を策定中なのですが。
メディア
プロパティが適用可能なメディアグループです。
CSS2ではUAは少なくとも一つのメディアタイプに対応する事が必須となりました。対応しているメディアタイプがあるプロパティのメディアグループに属している場合、UAはそのプロパティをサポートする必要があります。
また、このメディアタイプの導入に伴い、@import規則内でのメディアタイプの指定、@media規則、@page規則が導入されました。
詳細はメディアタイプの項を参考にしてください。