css2の裏の裏


4.CSS2の構文と基本データ型


  1. 構文
  2. エラー処理
  3. 値の種類

4-1. 構文

本章ではCSSの文法上の規則について説明します。

(1)キーワード

キーワード(予約語)は引用符で囲みません。特に注意するのが16進表記の色名(#ffffffなど)です。スタイルシートで引用符""をよく使うのは、日本語やスペースを含むフォント名です。

p { font-style : "Courier New","MS ゴシック",osaka,serif }

(2)大文字・小文字

CSSは基本的に大文字と小文字の区別をしません。

しかし、クラス名、ID名、フォント名、URLなどCSSの制御外の部分については、大文字小文字の区別がつけられます。

特に、クラス名、ID名で使用可能な文字は[A-Za-z0-9]の範囲にある文字で、最初は必ずアルファベットから始めなければいけません。その他、アンダーバーは使えないことにも注意しましょう。


(3)コメント

前のページでも説明したとおり、CSSのコメントは、/*で始まり*/で閉じます。このコメントは入れ子にしてはいけません。

4-2.エラー処理

CSS2を完全に実現するブラウザは、エラー処理として、そのスタイルシートが存在しないような扱いをします。特に長さの値の単位忘れがCSS2ではエラーとなることに注意しましょう。

4-3.値の種類

(1)整数値、実数値


(2)長さ

長さの単位には、相対と絶対の2種類があります。CSS2では、単位の無い長さはエラー処理されるので注意が必要です。

  1. 相対単位
    em : 関連要素の'font-size'の値を参照
    ex: 関連フォントの'x-height'を参照
    px: 閲覧しているデバイスの解像度を参照
  2. 絶対単位
    in: インチ -- 1in=2.54cm
    cm: センチメートル
    mm: ミリメートル
    pt: ポイント -- 1pt=1/72in
    pc: パイカ -- 1pcは12ptに等しい

パソコンによって解像度が異なりますから、指定したCSSの長さを常に実現できるとは限らず、近似値が採用される場合があります。フォントによっては、近似値の大きさがギザギザになる場合がありますので、特に絶対単位で文字の大きさを指定するときは注意しましょう。


(3)パーセント値

パーセント値は、常に長さなど他の値に対する相対値です。基準を指定していないプロパティにパーセント値を指定した場合は、初期値に対する相対値となります。


(4)URL + URN = URI

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) }

(5)色

色の値は、キーワードか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% */

(6)文字列

文字列は、一重あるいは二重引用符を用いて示します。二重引用符の内部に再び二重引用符を記述する場合はエスケープ(「\"」あるいは「\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>

Index