制作者(webmaster)
野嵜健秀(Takehide Nozaki)
公開
2001-09-29

Cascading Style Sheetsの記述ルール

前提

Cascading Style Sheetsでは、HTML文書の特定の部分を選擇し、その選擇された部分(セレクタ)に對するスタイルを宣言します。HTML文書の部分を選擇する際には、屡々HTMLの要素を利用します。Cascading Style Sheetsを利用しようとしてゐるウェブ制作者は、豫めHTMLの要素の概念を理解してゐる必要があります。

記述のルール

原則

Cascading Style Sheetsの記述にはルールがあります。

「スタイルを指定したい對象」は、不特定の要素の中から選擇的に選ばれるので、セレクタと呼ばれます。

スタイルの指定は、「宣言」と呼ばれます。

スタイルを適用したいセレクタに對し、スタイルを宣言するには、以下の筆法を用ゐます。

セレクタ { 宣言 }

セレクタ

仕樣的に決つた方法に從つて、セレクタを記述する事で、制作者はスタイルを指定する對象を特定出來ます。

CSS2では、以下のものが、セレクタとして定義出來るやうになつてゐます。

全ての要素
例:* {color:black;background-color:white;}
或要素
例:p {color:navy;background-color:white;}
要素の子孫の要素
例:blockquote p {color:black;background-color:silver;}
要素の直接の子供の要素
例:body > p {color:black;background-color:white;}
要素の擬似class
例:a:link {color:red;background-color:yellow;}
隣接セレクタ
例:h1 + h2 {margin-top:0.5em;}
屬性セレクタ
例:h1[title] {color:blue;background-color:silver;}
classセレクタ
例:h2.headline {text-align:right;}
IDセレクタ
例:h1#maintitle {position:absolute;top:3em;left:4em;}

セレクタとして、對象の要素ずばりを指定する事も可能ですが、文脈によつて特定の要素をUser Agentに抽出させるやうな形で指定する事も可能、と云ふ事です。

「セレクタ=要素」と云ふ解説が屡々なされますが、結果としてさうなる(事がある)だけです。特定のCSSのパターンマッチのルールが結果としてHTMLの要素の繼承ルールと符合するので、我々はCSSをHTMLのスタイルシートとして利用出來る、と考へておきませう。

ただ、セレクタの記述がどこまで生かされるかは、User Agentの實裝によります。特に、文脈判斷を要求する隣接セレクタや屬性セレクタは、最新のブラウザですら完全に實裝してゐない事があります。複雜な指定をしても、ブラウザによつてはレンダリングされない事があります。その場合にも、それなりに意味の通るやうに、豫めHTML文書やスタイルシートを仕上げておく事は、制作者に當然要求される「氣配り」と云ふものでせう。

セレクタの詳細は、CSS2 Selectors(CSS2 セレクタ・邦譯)を參照して下さい。

宣言

宣言は、{プロパティ:値;プロパティ:値;プロパティ:値(;)}と云ふ形式で記述します。宣言の區切りは「;」です。宣言の尻尾に「;」を書く必要はありません。書いても文句は言はれない筈ですが。

p要素へのスタイル指定の例:p {color:black;background-color:white;}

目次