本章ではCSSの文法上の規則について説明します。
キーワード(予約語)は引用符で囲みません。特に注意するのが16進表記の色名(#ffffffなど)です。スタイルシートで引用符""をよく使うのは、日本語やスペースを含むフォント名です。
p { font-style : "Courier New","MS ゴシック",osaka,serif }
CSSは基本的に大文字と小文字の区別をしません。
しかし、クラス名、ID名、フォント名、URLなどCSSの制御外の部分については、大文字小文字の区別がつけられます。
特に、クラス名、ID名で使用可能な文字は[A-Za-z0-9]の範囲にある文字で、最初は必ずアルファベットから始めなければいけません。その他、アンダーバーは使えないことにも注意しましょう。
前のページでも説明したとおり、CSSのコメントは、/*で始まり*/で閉じます。このコメントは入れ子にしてはいけません。
CSS2を完全に実現するブラウザは、エラー処理として、そのスタイルシートが存在しないような扱いをします。特に長さの値の単位忘れがCSS2ではエラーとなることに注意しましょう。
H1 { color: red; rotation: 70minutes }
/*これは次のように解析されます。*/
H1 { color: red; }
H1 { background: "red" } /* CSS2ではキーワードを引用符で括ってはならない */
H1 { border-width: 3 } /* 長さの値には単位が必須 */
長さの単位には、相対と絶対の2種類があります。CSS2では、単位の無い長さはエラー処理されるので注意が必要です。
パソコンによって解像度が異なりますから、指定したCSSの長さを常に実現できるとは限らず、近似値が採用される場合があります。フォントによっては、近似値の大きさがギザギザになる場合がありますので、特に絶対単位で文字の大きさを指定するときは注意しましょう。
パーセント値は、常に長さなど他の値に対する相対値です。基準を指定していないプロパティにパーセント値を指定した場合は、初期値に対する相対値となります。
URLs(Uniform Resource Locators)とは、Web上でのリソースのありかを示す1つの方式で、リソースを識別するための新しい拡張方式にURN(Uniform Resource Name)があります。この両者を合わせて[URI](Uniform Resource Identifier)と呼びます。
uriは、url()の形で使用します。カッコ内の""は有っても無くてもどちらでもかまいません。
BODY { background: url("http://www.www.com/back.gif") }
table { background: url(table.gif) }
色の値は、キーワードかRGB数値のどちらかで指定します。
CSS2のキーワードとして登録されている色名は、次の16色のみです。
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
このほかにも、システム色などが利用できます。
BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }
EM { color: #f00 } /* #rgb */
EM { color: #ff0000 } /* #rrggbb */
EM { color: rgb(255,0,0) } /* integer range 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */
文字列は、一重あるいは二重引用符を用いて示します。二重引用符の内部に再び二重引用符を記述する場合はエスケープ(「\"」あるいは「\22」と書く)をつけます。
また、文字列中で改行をする場合は、「\A」(大文字に注意)を使うということですが、以下の例ではNetscape6.01では改行はしませんでした。
.new:before { color : red; content: "■" }
.newnew:after { color : red ; content: "新規アップ \A 2001/6/25" }
<div class="new">前に赤の「■」を表示</div><div class="newnew">後ろに赤で「新規アップ 2001/6/25」を表示</div>