3. CSSの構文規則
CSSの文
前節「スタイルシートを適用する」の最後に外部スタイルシートについて説明した。 そこで使用した外部スタイルシート"sample.css"の内容は、以下の１行のみである。
h1 {color: #ff0000}
CSSでは、これを「文（statements）」と呼ぶ。CSSの記述は、この文の集まりとして記述されることになる。 CSSの文には2つの種類がある。
- @規則（At-rules）
- 規則集合（rule-sets）
@規則
「@規則」は、"@"に続けてキーワードを記述したもので、次に出現するセミコロン（;）までか、 次に出現するブロック終端までの全体から構成される。 より細かな説明については、それぞれのキーワードが表す規則ごとに異なるので、その@規則が出てきた時に説明することにする。
規則集合
規則集合は、「セレクタ」と「宣言ブロック」から構成されている。
h1 {color: #ff0000}
この場合には、"h1"の部分がセレクタとなり、それに続く左括弧"{"と対応する右括弧"}"で囲まれた部分を宣言ブロックと呼ぶ。 セレクタは宣言ブロックに指定されたスタイルが適用される対象であり、宣言ブロックには「宣言」と呼ばれるスタイルに関する記述を行う。 例の場合には、"color: #ff0000"の部分が宣言となる。
宣言（declaration）は０個以上記述可能であり、１個以上記述する場合は、「プロパティ:値」という形式で記述する。 また、２個以上宣言を記述する場合には、それぞれの宣言をセミコロン";"で区切る。
プロパティは、CSS2で予約された「識別子」であり、使用可能な文字は次のとおりである。
- 英字
- 数字（ただし、先頭文字に使用することはできない）
- ISO10646で161以上のコードが振られている文字
- ハイフン（ただし、先頭文字に使用することはできない）
値は、各プロパティごとに定められている。 ただし、どの場合でも識別子、文字列、数値、長さ、パーセント値、URI、色、角度、時間、周波数から構成される値を指定する。
以上のことをまとめると、規則集合の書き方は次のようになる。
セレクタ { プロパティ:値; }
値の種類
値には、識別子、文字列、数値、長さ、パーセント値、URI、色、角度、時間、周波数がある。 ここでは、音声に関するスタイルである角度、時間、周波数を除いた各値の種類について説明する。
キーワードと文字列
「文字列」は、一重あるいは二重引用符を用いて表す。引用符の内部に再び同一の引用符を記述することはできない。
"文字列"
ここで注意しなければならないことは、「キーワード」(※ CSSで定義されている単語のこと。)は識別子の一種であり、引用符に挟んではならない。例えば、
green
これはキーワード"green"となるが、
"green"
これはキーワードではなく文字列"green"である。
数値
「数値」には、「整数値」と「実数値」がある。数値には「10進記法」のみを用い、整数値は、0から9までの数字のみで構成され、 実数値は小数点を示すドットと組み合わされて構成される。また、数値には、必要に応じて"+"か"-"を付け加えて正負を表すことができる。
長さ
「長さ」は、縦横の大きさを表現する場合に指定される。長さは、任意の正負符号（デフォルトはプラス）の後に数値と「単位識別子」を記述する。
[符号] 数値 単位識別子
また、長さが"0"の場合は、単位識別子を省略できる。単位識別子には、「相対単位」と「絶対単位」がある。 相対単位には以下のものがある。
- em
- 関連要素の"font-sizeプロパティ"の値を参照する
- ex
- 関連フォントの"x-heightプロパティ"を参照する
- px
- 閲覧しているデバイスの解像度を参照する
一般に、"em"は対象文字サイズの"m"の文字の幅を基にし、"ex"は対象フォントサイズの"x"の高さを基にしている。 また、"px"は、ピクセルを表す単位である。
次に絶対単位には以下のものがある。
- in
- インチ -- 1inは2.54cmに等しい
- cm
- センチメートル
- mm
- ミリメートル
- pt
- ポイント -- 1ptは1/72inに等しい
- pc
- パイカ -- 1pcは12ptに等しい
パーセント値
「パーセント値」は、任意の正負符号（デフォルトはプラス）の後に数値と"%"が続く形式で記述される。
[符号] 数値%
URI
「URI」は、簡単に言えば、「URL」と「URN」を合わせた表現だが、これを値として記述する場合には、「url()」という関数記法を用いる。
url(URIを記述)
このとき記述するURIは引用符で挟んでも挟まなくてもよい。
色
「色」は、キーワードかRGB値のどちらかで指定することができる。キーワードとして定められている色(※ キーワード"orange"は、CSS 2.1で追加された。)は、次のものである。
aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white, yellow,
orange
RGB値を指定する場合は、「16進数表記」あるいは「rgb()」という関数表記を用いる。 16進数表記のRGB値は、シャープの直後に3桁もしくは6桁の16進数が続く形式で構成される。
#rrggbb
#rgb
3桁のRGB表記(#rgb)は、6桁の形式(#rrggbb)に変換された形式で解釈されます。 例えば、"#abc"という値は"#aabbcc"という値に変換される。なお、16進表記の英字は大文字、小文字を区別しない。"rgb()"関数表記形式では、括弧内にコンマで区切った3つの数値（整数かパーセント値）を記述する。
rgb(r, g, b)
このとき整数値の"255"が、パーセント値の"100%"、16進数表記の"FF"に対応する。 つまり、以下の４種類の記述は同一の色を表すことになる。
#FFF
#FFFFFF
rgb(255,255,255)
rgb(100%,100%,100%)