カスケーディングスタイルシート (CSS) 言語の基本的な狙いは、ブラウザーのエンジンがページの要素を、色、位置、装飾などの特定の特性をもって描けるようにすることです。 CSS の構文はこの狙いを反映し、以下のような基本的な構成要素があります。

  • 識別子であるプロパティ。人間が読むことができ、どのような特性か考えることのできる名前を定義します。
  • 特性がどのようにエンジンに操作されなければならないか表す。どのプロパティも、形式文法及び意味論的な意味で定義され、ブラウザに実装された、妥当な値を対として持ちます。

CSS の宣言

CSS のプロパティを特定の値に設定することは、 CSS 言語の核となる仕組みです。プロパティと値の組は宣言と呼ばれ、どの CSS エンジンも、1つ1つのページの要素を適切に配置し、形作るために、どの宣言を要素に適用するかを計算します。

CSS では、プロパティと値の両方とも、既定で大文字と小文字を区別しません。組はコロン ':' (U+003A COLON) で分割され、プロパティと値の前、間、後のホワイトスペースは (内部のものを除き) 無視されます。

css syntax - declaration.png

CSS には100を超える種類のプロパティと、無限に近い種類の値があります。すべてのプロパティと値の組み合わせが許されるわけではなく、どのプロパティも、何が妥当な値であるか定義されています。与えられたプロパティの値が妥当ではなかったとき、その宣言は妥当ではないと見なされ、 CSS エンジンから完全に無視されます。

CSS の宣言ブロック

宣言は、左中括弧 '{' (U+007B LEFT CURLY BRACKET) と右中括弧 '}' (U+007D RIGHT CURLY BRACKET) で区切られた構造の中で、ブロックにグループ化されます。ブロックは入れ子になることがあるため、左中括弧と右中括弧が対応していなければなりません。

css syntax - block.png

このようなブロックは必然的に宣言ブロックと呼ばれ、その中の宣言はセミコロン ';' (U+003B SEMICOLON) で区切ります。宣言ブロックは宣言を持たず、空になることもあります。宣言の周囲のホワイトスペースは無視されます。ブロックの最後の宣言は、セミコロンで終わらせる必要はありませんが、セミコロンで終わらせればブロックを他の宣言で拡張するときにセミコロンを付け忘れることを防げるため、良い書き方とみなされます。

css syntax - declarations block.png

左中括弧と右中括弧を除いた、セミコロンで分割された宣言のリストである CSS 宣言ブロックの内容は、 HTML の style 属性の中に置くことができます。

CSS の規則セット

もしスタイルシートが、1つの宣言をウェブページのどの要素にも適用するとしたら、それはひどく使えないものになるでしょう。本当の目的は、それぞれの宣言を文書のそれぞれの部品に適用することです。

CSS ではこれを、宣言ブロックと条件を関連付けることで実現します。それぞれの (妥当な) 宣言ブロックの前に、ページの要素を選択する条件であるセレクターを置きます。セレクターと宣言ブロックの組を規則セット、またはしばしば単に規則と呼びます。

css syntax - ruleset.png

ページの要素は複数のセレクターに一致する可能性があるため、複数の規則によってあるプロパティが異なる値で複数回現れる可能性があるため、 CSS 標準ではあるプロパティが他のプロパティより優先され、適用されなければならないことを定義しています。これをカスケードアルゴリズムと呼びます。

単一のセレクターで構成される規則セットを複数まとめて表記する方法の一つとして、規則セットをセレクターの集合で記述することが挙げられますが、各規則セットの妥当性を上手くまとめるものではない点に注意しましょう。

基本セレクターのうちの一つが妥当ではなかった場合 (架空の要素や架空のセレクターを使った際など)、セレクター全体が妥当ではないこととなり、規則全体も (妥当ではないものとして) 無視されます。

CSS の文

規則セットはスタイルシートの主な構成要素であり、よく大きな一連の規則セットのみから成ります。しかし、ウェブ制作者がスタイルシートで伝えたい情報としては、他にも文字セット、インポートする他の外部スタイルシート、フォントフェイス、リストカウンターの記述などがあります。このためには別の、特定の種類の文を使用します。

は、空白ではないすべての文字で始まり、 (文字列の外にあり、エスケープされておらず、別の {} または () または [] の対の中に含まれていない) 最初の右中括弧またはセミコロンで終わる構成要素です。

css syntax - statements Venn diag.png

文には二種類があります。

  • 規則セット (または規則)。ここまで見てきたように、 CSS の宣言の集合を、セレクタによって表現された状態に関連付けています。
  • @-規則。アットマーク '@' (U+0040 COMMERCIAL AT) で始まり、識別子が後続し、ブロックの外のセミコロンまたは次のブロックの終わりに至るまで続きます。それぞれの種類の @-規則は、識別子によって定義され、当然ながら独自の内部構文や意味を持つことがあります。 @-規則はメタデータ情報 (@charset@import など) を伝えたり、条件情報 (@media@document) など) を伝えたり、記述的情報 (@font-face など) を伝えたりするために使用します。

規則または @-規則ではない文は、すべて妥当ではなく、無視されます。

他にも文のグループとして、入れ子文があります。これらは @-規則特有のサブセットである条件付きグループ規則の中で使用することができます。これらの文は、特定の条件が一致した場合にのみ適用されます。例えば、 @media @-規則の内容は、示された条件に一致するブラウザーが実行されている端末でのみ適用されるなどです。 CSS1 と CSS2.1 では、条件付きグループ規則内では規則セットのみが利用できました。それではあまりに厳しかったので、 CSS Conditionals Level 3 では、この制約は撤廃されました。現在、それは今でも試験的でどのブラウザーでも対応しているわけではないものの、条件付きグループ規則はより広い範囲の内容を持つことができ、規則セットだけではなく、すべてではないものの、一部の @-規則を含むこともできます。

関連情報

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

タグ: 
このページの貢献者: mfuji09, keis94, mpcjazz, kei-itof, ethertank, sii
最終更新者: mfuji09,