Cascading Style Sheets
出典: フリー百科事典『ウィキペディア（Wikipedia）』
| HTML |
|---|
|
Cascading Style Sheets |
| 拡張子: | .css |
|---|---|
| MIME Type: | text/css |
| 開発者: | World Wide Web Consortium |
| 種別: | スタイルシート |
| 国際標準: | Level 1 (Recommendation), Level 2 Revision 1 (Working Draft) |
Cascading Style Sheets（カスケーディング・スタイル・シート、CSS）とは、HTML や XML の要素をどのように修飾（表示）するかを指示する仕様であり、W3Cによる勧告の一つ。カスケード・スタイル・シートとも呼ばれる。スタイルシートの一種。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。
CSS は HTML で表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。また、以下のような特徴を持つ。
- ページを表示するメディアに合わせてスタイルシートを切り替えることで、メディアごとに表示を変化させることができる
- ユーザーエージェント（多くの場合Webブラウザ）、ウェブサイト制作者、ユーザがそれぞれ定義した CSS のもたらす効果を重ね合わせ（カスケード）ることができる
しかし、拡張・修正の続いている CSS 仕様の全てを完全に実装しているユーザエージェントは事実上皆無といってよく、実際シェアで多数を占めるユーザエージェントは部分対応にすぎない。しかし実用上支障のないレベルの実装はされてきており、なおかつ表現のお互いの互換性についても考慮されてきている。
目次 |
[編集] 記述
スタイルの情報は読み込む内容（作成者スタイルシート）やユーザエージェントの設定（ユーザスタイルシート）の二ヶ所に記載できる。またユーザエージェントも独自のスタイル（デフォルトスタイルシート）を持っている。
作成者スタイルシートはマークアップ文書の中に直接記述するか、別文書として読み込ませる形で利用される。CSS の利便性を最大限発揮する為に、別文書として読み込ませる事が推奨されている。
[編集] 記述方法
ここでは CSS Level 2 について説明する。CSS の文法は異なるレベル間でも後方互換性を持つように設計されており、例えば CSS Level 1 で書かれたスタイルシートを CSS Level 2 として扱う事も可能である（但し一部に解釈の相違などに伴う非互換部分も存在する）。CSS では要素にスタイルを与えるため、次のような仕様が定められている。
以下の CSS 断片を例にとる。
p#id { color : rgb(255, 51, 0) }
- "{" から "}" までの部分を宣言ブロックという
- "p#id" をセレクタ（選択子）という
- 宣言ブロックとセレクタを合わせて規則集合という
- "color : rgb(255, 51, 0)" 部分を宣言という
- 宣言の内、":" より前（上例では "color"）をプロパティ（特性）という
- 宣言の内、":" より後（上例では "rgb(255, 51, 0)"）を値という
上例の CSS 断片を適用すると宣言している文書のうち、セレクタが指定しているものと一致する部位（HTML 文書においては要素、要素の親子関係、特定のクラス、ID など）に、宣言ブロック内の宣言が適用される。宣言は、「プロパティ:値」か、「空（何も記述しない）」のどちらかで構成され、プロパティ、":"、値の前後には空白文字（スペース、タブ、改行など）を自由に入れられ、また";"で区切ることにより宣言を並べて書くことができる。
上例は HTML 文書に適用する場合、「id という ID を持った p 要素の文字色を赤255(=FF)、緑51(=33)、青0にせよ」という指定を意味する。
color : rgb(255, 51, 0);
width : 35%
color : rgb("0", "51", "255");
width : '53%'
このような宣言があったとき、後者二つは""や''を付したために不正である。なぜなら、""や''で囲ったものは文字列として扱われ、colorプロパティが取りうる色の値（#rrggbb、rgb([0-255],[0-255],[0-255])、または、blackやredなどのキーワードなど）ではないからである。CSSではプロパティ毎に取れる構文が定まっており、それ以外の値が入っていた場合は無視しなければならないとされているため、注意が必要となる。
p#id { color: rgb(255, 51, 0) }
p#id { font-size: 24px }
は、
p#id { color: rgb(255, 51, 0); font-size: 24px }
と等価である。;は前者のように宣言をセレクタに一つずつ書いてあるのを、ひとつのセレクタのブロックで記述するときに宣言を別けるのに使う。そのため、必ずしも宣言に;を附すのを強制するものではない。
[編集] 優先順位
CSS は必ずしも一つのところで一意に指定できず、そのため指定内容の衝突を避けるために優先順位がユーザエージェントによって計算される。その結果は、以下のような条件により算出される。
- 作成者スタイルシートはユーザスタイルシートより優先される
- デフォルトスタイルシートは他のスタイルシートを優先する
- 最重要指定されている宣言はユーザスタイルシートが作成者スタイルシートより優先される（CSS1では逆）
- 外部から読み込んだものは読み込んだ先とまとめて扱う
- 詳細度によって整理する
- そのセレクタ内で指定先を一意に決められるもの（IDの類）が多い方を優先する
- IDの類による優先順位が同じ場合は、属性や擬似クラスの数が多い方を優先する
- それでも優先順位が決まらない場合は、要素の数が多い方を優先する
- これでもまだ優先順位が同一の場合、作成者スタイルシートにおいて以下の順で優先する
- インラインのもの
- 外部からのもの
- HTMLのalign属性など、CSS以外によるスタイルの指定は、それと等価なCSSによるスタイル指定が製作者スタイルシートの先頭にあるものとして扱う。ただし、これらの詳細度は最も低いものとする（CSS1においては要素名による指定を一つだけ含むセレクタと同じ詳細度）
記載可能な方法の詳細は次の通りで、一般的に優先される順位で並び替えている（CSS2で最重要指定の優先順位の仕様が変更されている、勧告6章4）。
- ユーザスタイルシート中で最重要指定された宣言 - ユーザエージェントの設定のスタイルの中で!importantを宣言に付加する
- 作成者スタイルシート中で最重要指定された宣言 - 作成者が内容に付随させたスタイル中で!importantを宣言に付加する。
- 作成者スタイルシート中の通常の宣言
- ユーザスタイルシート中の通常の宣言
- デフォルトスタイルシートの宣言
作成者スタイルシートの記述方法による優先順位は以下の通り。
- 特定の要素にスタイルを記述する
- HTMLやXMLのヘッダ部にそのページ全体を対象にスタイルを定義する
- CSSのみを記述した外部ファイルを用意し、HTMLファイルのヘッダ部からリンクを張ってスタイルを参照させる
[編集] 利点と問題点
[編集] 利点
CSS を使う利点としては以下のものが挙げられる。なおCSSの仕様に直接関係しないものもある。
- (X)HTML文書構造とCSS表現を分ける事により指定した全てのページデザインの統一が容易になる
- 外部CSSを使うことで更新・編集作業が効率化され保守性も向上する
- 公共機関や自治体、これらに関連する民間企業などのサイトではW3Cが策定した仕様やWAIが規格した情報バリアフリーに準拠してXHTML/CSSデザインの制作が多い。現にアメリカではリハビリテーション法により「連邦政府や関連する組織では、購入する全ての情報通信機器はアクセシビリティに対応したものにしなければならない」とされていることから構造と表現を分離する考え方はスタンダードになっている。これも踏まえ、アクセシビリティ対応も SEO対策も容易に行える
- 表現指定を省いた分ページの軽量化が可能で、表示にかかる時間を短縮できる。故に転送量の削減にもつながる
- Internet Explorerを除くユーザースタイルシートや読み上げ方法を設定できる視覚ブラウザとの親和性を向上
- 印刷用のCSSファイルを用意すれば、不要な部分を取り除いたりフォントサイズの調整など適切な印刷を行える
[編集] 問題点
以下に問題点を列挙する。問題点のほとんどは、CSSの仕様の策定者側が、あらかじめWebデザインの趨勢について綿密な調査を行なった上で仕様を決めていないことに起因する。
- 古いユーザエージェントでは未実装ないしバグつき実装が多い。
- 現在の勧告案（2006年12月17日現在）では table 要素を用いたマルチカラムのページレイアウト手法に直接対応する CSS プロパティが存在しない。勧告案でマルチカラムを実現する手法は table による記述方法よりも格段に難易度が高く、CSS が普及しない要因の一つとなっている。
- 仕様そのものが基本的に論文(Paper)を手軽に表現できることを最優先に設計されているHTMLの特性に沿ったかたちで設計されているため、現在も流通しているレイアウト手法のすべてをカバーできるとは限らない。CSS3でマルチカラムの指定方法が策定されつつあるが、CSS内で本来は無視されるはずの改行コードを使用して記述する手法が採用されており、破綻をきたしている。
- HTML仕様にブロックレベルとインラインレベルという言葉がある。CSS仕様では、displayプロパティの計算値を元にしてこれと同じ言葉を使う旨がきちんと説明してある。しかし、きちんと説明したからと言って、同じ言葉を使うべきではなかった。案の定、多くの人が、HTML用語とCSS用語の違いを認識出来ていない。
- Web業界もCSSデザインが主流となりつつあるが、上記の欠点をまるで存在しないかのように振る舞うCSS推進派と、上記の欠点に常に悩まされ続けているテーブルレイアウト保守派の間にはあきらかな温度差があり、現場のWebデザイン関係者との会話が成立しない場合が多々ある。この場合、欠点があるにもかかわらずそれを認めようともせず、対策方法についての啓蒙も行なわなわず、都合の悪い表現はこそこそコメントアウトしたりする推進者側の態度に問題があるのは自明であろう。
[編集] 勧告等
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年頃から、これを基本仕様と見なしている。
[編集] Cascading Style Sheets, level 3 (CSS3)
CSS3では全体的にモジュール化され、ユーザエージェントがどれに対応しどれに対応しないか自由に選択できるようになる他、縦方向の書字や、HTML以外の規格にまで関与した内容となっている。まだどのモジュールも勧告されていない。
[編集] 関連項目
[編集] 外部リンク
- W3Cによる勧告等
- W3Cによる勧告の邦訳
- W3C CSS Validation Service
- CSS2 tests by Peter-Paul Koch
- Box model hack
- Another box model workaround
- CSS Panic Guide - a fast resource
- CSS-discus wiki - A wiki dedicated to CSS
- CSS: under construction
- Acid2 Test
- <oXygen/> CSS Editor
 |
この「Cascading Style Sheets」は、コンピュータに関連した書きかけです。この記事を加筆して下さる人を求めています。（Portal:コンピュータ） |
