| |
|
カスケーディング・スタイル・シート (CSS) とは、HTMLやXMLの要素をどのように修飾（表示）するかを指示するもの。カスケード・スタイル・シートとも呼ばれる。主にWWWなどで用いられるスタイルシートの一種。文書の構造と外観を分離させると目的で作られた。この背景には、HTMLなど記述言語は本来論理的構造を記述するためのものであり、どのように表示するかを記述すべきでないという思想がある。
CSSは、上記の目的を達成するために、HTMLで表現可能と考えられるデザインの大部分を再現できる要素を取り入れつつ新たなデザイン機能を備えるほか、
ここではCSS2を用いるものとする。CSSの文法は異なるバージョン間でも互換性を持つように設計されていて、例えばCSS1で書かれたスタイルシートをCSS2として扱っても一部を除いて、ほぼ有効である。CSSでは要素にスタイルを与えるため、次のように仕様が定められている。
記述
スタイルの情報は読み込む内容（作成者スタイルシート）やユーザエージェントの設定（ユーザスタイルシート）の二ヶ所に記載でき、またユーザエージェントも独自のスタイル（デフォルトスタイルシート）を持っている。読み込むHTMLの中に書き込んでも良いし、そのHTMLとは別の文書としても良く、別文書とすることが現在推奨されている。記述方法
とCSSで定めたとき、{から}までを宣言ブロックと言い、その前のp#idをセレクタと言い、宣言ブロックとセレクタを合わせて規則集合と言う。このときこのCSSで指定する文書のセレクタと一致するもの（HTMLの要素の他にも特定のクラスや、親子関係などでの指定も可能）に、宣言ブロック内の宣言を適用する。color: #rgb(255, 51, 0)を宣言と言い、:より前をプロパティ、:より後を値と呼ぶ。宣言はプロパティ:値か、空（何も記述しない）のどちらかで、プロパティ、:、値の前後には空白文字（スペース、タブ、改行など）を自由に入れられ、また;で区切ることにより宣言を並べて書くことが出来る。この記述がなされたとき、HTMLでこのCSSを指定した場合idというIDを持ったp要素の文字色を赤255(=FF)、緑51(=33)、青0とせよと指定することになる。
このような宣言があったとき、後者二つは""や''を付したために不正である。なぜなら、colorプロパティでは色の値（#rrggbb、rgb([0-255],[0-255],[0-255])、または、blackやredなどのキーワードなど）、widthプロパティでは長さの値（px、emなど）しか取ることが出来ず、""や''で囲ったものは文字列として扱われ、RGB値、パーセント値としてユーザエージェントが取ってはならないからである。CSSではプロパティ毎に取れる構文が定まっており、それ以外の値が入っていた場合は無視しなければならないとされているため、注意が必要となる。
は、
と等価である。;は前者のように宣言をセレクタに一つずつ書いてあるのをセレクタの記述をひとつだけにするときに使う。そのため、必ずしも宣言に;が入るのを強制するものではない。優先順位
CSSは必ずしも一つのところで一意に指定できず、そのため指定内容の衝突を避けるために優先順位がユーザエージェントによって計算される。その計算方法は、
記載可能な方法の詳細は次の通りで、一般的に優先される順位で並び替えている（CSS2で最重要指定の優先順位の仕様が変更されている、勧告6章4）。利点と問題点
利点
CSS使う利点としては以下のものが挙げられる。問題点
などのため、なかなか CSS が浸透しないという現状もある。勧告
CSSのバージョンは複数あり、現在CSS1とCSS2、そしてW3Cで開発中のCSS3がある。詳細は外部リンク参照のこと。
マージン
|
ボックスにwidth属性を設定したとき、それだとW3Cのボックスのモデルでは内容の横幅であると解釈される。そしてパディングとボーダー分の横幅は要素の横幅に追加される。
他方マイクロソフトのボックスのモデルではwidth属性は内容の横幅とパディングとボーダー分を足したもの、即ち要素全ての横幅になる。
そのため複数のブラウザでこのモデルを使うのは容易でない。これを回避するには、パディングとボーダーを0にする。ほかの可能性はリンクセクションのhackを使う手がある。
しかしInternet Explorerの6ではDOCTYPEが正確ならば標準準拠モードにスウィッチすることが出来る。
具体的には表示媒体によってスタイルシートを変更できるようにし、それに附随して音声ブラウザへの対応、印刷媒体への対応が行われ、フォントなどの表示機能の拡張や、ボックスの概念の修正などが行われた。
CSS2のマイナーチェンジとなるバージョン。text-shadowプロパティのように、CSS2で策定されていながらも殆ど実装されない代物などが削除されている（それらはCSS3で定義され直すことになる）。
CSS3では全体的にモジュール化され、ユーザエージェントがどれに対応しどれに対応しないか自由に選択できるようになる外、縦方向の書字や、HTML以外の規格にまで関与した内容となっている。まだどのモジュールも勧告されていない。
Cascading Style Sheets, level 2 (CSS2) 1998年5月
CSS2はCSS1の上位互換で、また幾つかの概念の追加・拡大が行われた。Cascading Style Sheets, level 2 revision 1 (CSS2.1) 2002年8月
（作業中）Cascading Style Sheets, level 3 (CSS3)
（作業中）参考
外部リンク
Conformance Testing: