|
|
他の言語
|
Cascading Style Sheets
Cascading Style Sheets（CSS、段階スタイルシート、カスケーディング・スタイル・シート、カスケード・スタイル・シート）とは、HTML や XML の要素をどのように修飾（表示）するかを指示する仕様であり、W3Cによる勧告の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。 CSS は HTML で表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。また、以下のような特徴を持つ。
しかし、拡張・修正の続いている CSS 仕様の全てを完全に実装しているユーザーエージェントは事実上皆無といってよく、実際シェアで多数を占めるユーザエージェントは部分対応にすぎない。しかし実用上支障のないレベルの実装はされてきており、なおかつ表現のお互いの互換性についても考慮されてきている。
[編集] 記述スタイルの情報は読み込む内容（作成者スタイルシート）やユーザーエージェントの設定（ユーザースタイルシート）の二ヶ所に記載できる。またユーザーエージェントも独自のスタイル（デフォルトスタイルシート）を持っている。 作成者スタイルシートはマークアップ文書の中に直接記述するか、別文書として読み込ませる形で利用される。CSS の利便性を最大限発揮する為に、別文書として読み込ませる事が推奨されている。 [編集] 記述方法ここでは CSS Level 2 について説明する。CSS の文法は異なるレベル間でも後方互換性を持つように設計されており、例えば CSS Level 1 で書かれたスタイルシートを CSS Level 2 として扱う事も可能である（但し一部に解釈の相違などに伴う非互換部分も存在する）。CSS では要素にスタイルを与えるため、次のような仕様が定められている。 以下の CSS 断片を例にとる。 p#id { color : #00ccff }
上例の CSS 断片を適用すると宣言している文書のうち、セレクタが指定しているものと一致する部位（HTML 文書においては要素、要素の親子関係、特定のクラス、ID など）に、宣言ブロック内の宣言が適用される。宣言は、「プロパティ:値」か、「空（何も記述しない）」のどちらかで構成され、プロパティ、":"、値の前後には空白文字（スペース、タブ、改行など）を自由に入れられ、また";"で区切ることにより宣言を並べて書くことができる。 上例は HTML 文書に適用する場合、「id という ID を持った p 要素の文字色を赤FF(=255)、緑33(=51)、青0にせよ」という指定を意味する。 color : #00ccff; width : 35% color : \"#ffcc00"; width : '53%' このような宣言があったとき、後者二つは""や''を付したために不正である。なぜなら、""や''で囲ったものは文字列として扱われ、colorプロパティが取りうる色の値（#ffff44、rgb([0-255],[0-255],[0-255])、または、#FFFFFFやredなどのキーワードなど）ではないからである。CSSではプロパティ毎に取れる構文が定まっており、それ以外の値が入っていた場合は無視しなければならないとされているため、注意が必要となる。 p#id { color: #00ccff } p#id { font-size: 24px } は、 p#id { color: #00ccff; font-size: 24px } と等価である。;は前者のように宣言をセレクタに一つずつ書いてあるのを、ひとつのセレクタのブロックで記述するときに宣言を分けるのに使う。そのため、必ずしも宣言に;をつけるのを強制するものではない。 セレクタは、実装レベルの高いブラウザならばどの属性であってもCSSを適用することが可能であり、この場合IDに関する属性セレクタであるので、#idは[id="id"]と等価である。セレクタの簡単なマッチングが可能である。 そのほかHTMLタグに対する適用、文書構造からみた子・兄妹構造へ適用するセレクタ、更にはリンクや動的な表現・言語に関する疑似クラス(:link、:hover、:lang)などがある。 [編集] 優先順位CSS は必ずしも一つのところで一意に指定できず、そのため指定内容の衝突を避けるために優先順位がユーザーエージェントによって計算される。その結果は、以下のような条件により算出される。
記載可能な方法の詳細は次の通りで、一般的に優先される順位で並び替えている（CSS2で最重要指定の優先順位の仕様が変更されている、勧告6章4）。
作成者スタイルシートの記述方法による優先順位は以下の通り。
[編集] 勧告等CSS のバージョンは複数あり、現在 Level 1 と Level 2、そして開発中の Level 3 がある。詳細は外部リンク参照のこと。 [編集] Cascading Style Sheets, level 1 (CSS1), 勧告 1996年12月
ボックスにwidth属性を設定したとき、W3C のボックスのモデルでは内容の横幅であると解釈される。そしてパディングとボーダー分の横幅は要素の横幅に追加される。 他方マイクロソフトのボックスのモデルでは width 属性は内容の横幅とパディングとボーダー分を足したもの、即ち要素全ての横幅になる。 そのため複数のブラウザでこのモデルを使うのは容易でない。これを回避するには、パディングとボーダーを0にする。ほかの可能性はリンクセクションのハックを使う手がある。 しかし Internet Explorer 6 では DOCTYPE が正確ならば標準準拠モードに移行出来る（ただXMLやXHTMLの場合、XML宣言を仕様どおり書くと過去互換モードで走ってしまうバグがある）。 [編集] Cascading Style Sheets, level 2 (CSS2), 勧告 1998年5月CSS2 は CSS1 の上位互換。幾つかの概念の追加・拡大・改訂が行われた。 具体的には表示媒体（モニターや TV、紙媒体など）によって自動的にスタイルシートを変更できるようにし、それに附随して音声ブラウザへの対応、印刷媒体への対応が行われ、フォントなどの表示機能の拡張や、ボックスの概念の修正などが行われた。 但し、2002年頃以降に発表されたCSS対応UAで、これを仕様と見なしているものは存在せず、実質的に、CSS2.1に仕様としての役割を委ねた形になっている。W3CのCSSトップページからも、2004年に削除され、CSS2.1に変更されている。 [編集] Cascading Style Sheets, level 2 revision 1 (CSS2.1)CSS2のマイナーチェンジとなるバージョン。text-shadowプロパティのように、CSS2で策定されていながらも殆ど実装されない代物などが削除されている（それらはCSS3で定義され直すことになる）。 注がれた時間と労力は他のCSS仕様の比ではない。 CSSの実装に際してベンダは、2002年頃からCSS2.1を基本仕様と見なしている。 2007年7月時点で勧告候補(Candidate Recommendation)が公開されている。 [編集] Cascading Style Sheets, level 3 (CSS3)CSS3では全体がモジュール化され、ユーザーエージェントがどのモジュールに対応し、どのモジュールに対応しないか自由に選択できるようになる他、縦方向の書字や、HTML以外の規格にまで関与した内容となっている。現在、どのモジュールも勧告には至っていない。 [編集] 関連項目[編集] 外部リンク
|
|||||||||||||||||||||||||||
