Cascading Style Sheets

**Cascading Style Sheets**
拡張子:	`.css`
MIME Type:	`text/css`
開発者:	World Wide Web Consortium
種別:	スタイルシート
国際標準:	Level 1 (Recommendation), Level 2 (Recommendation), Level 2 Revision 1 (Candidate Recommendation)

HTML
Cascading Style Sheets ダイナミックHTML XHTML HTML エディター HTML要素 HTMLレンダリングエンジン W3C ウェブブラウザ

Cascading Style Sheets（CSS、段階スタイルシート、カスケーディング・スタイル・シート、カスケード・スタイル・シート）とは、HTML や XML の要素をどのように修飾（表示）するかを指示する仕様であり、W3Cによる勧告の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。

CSS は HTML で表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。また、以下のような特徴を持つ。

ページを表示するメディアに合わせてスタイルシートを切り替えることで、メディアごとに表示を変化させることができる
ユーザーエージェント（多くの場合ウェブブラウザ）、ウェブサイト制作者、ユーザがそれぞれ定義した CSS のもたらす効果を重ね合わせ（カスケード）ることができる

しかし、拡張・修正の続いている CSS 仕様の全てを完全に実装しているユーザーエージェントは事実上皆無といってよく、実際シェアで多数を占めるユーザエージェントは部分対応にすぎない。しかし実用上支障のないレベルの実装はされてきており、なおかつ表現のお互いの互換性についても考慮されてきている。

記述

スタイルの情報は読み込む内容（作成者スタイルシート）やユーザーエージェントの設定（ユーザースタイルシート）の二ヶ所に記載できる。またユーザーエージェントも独自のスタイル（デフォルトスタイルシート）を持っている。

作成者スタイルシートはマークアップ文書の中に直接記述するか、別文書として読み込ませる形で利用される。CSS の利便性を最大限発揮する為に、別文書として読み込ませる事が推奨されている。

記述方法

ここでは CSS Level 2 について説明する。CSS の文法は異なるレベル間でも後方互換性を持つように設計されており、例えば CSS Level 1 で書かれたスタイルシートを CSS Level 2 として扱う事も可能である（但し一部に解釈の相違などに伴う非互換部分も存在する）。CSS では要素にスタイルを与えるため、次のような仕様が定められている。

以下の CSS 断片を例にとる。

p#id { color : #ff3300 }

"{" から "}" までの部分を宣言ブロックという
"p#id" をセレクタ（選択子）といい、スタイルが適用される対象をしめす
宣言ブロックとセレクタを合わせて規則集合という
"color : #ff3300" 部分を宣言という
宣言の内、":" より前（上例では "color"）をプロパティ（特性）という
宣言の内、":" より後（上例では "#ff3300"）を値という

上例の CSS 断片を適用すると宣言している文書のうち、セレクタが指定しているものと一致する部位（HTML 文書においては要素、要素の親子関係、特定のクラス、ID など）に、宣言ブロック内の宣言が適用される。宣言は、「プロパティ:値」か、「空（何も記述しない）」のどちらかで構成され、プロパティ、":"、値の前後には空白文字（スペース、タブ、改行など）を自由に入れられ、また";"で区切ることにより宣言を並べて書くことができる。

上例は HTML 文書に適用する場合、「id という ID を持った p 要素の文字色を赤FF(=255)、緑33(=51)、青0にせよ」という指定を意味する。

color : #ff3300;
width : 35%

color : "#0033ff";
width : '53%'

このような宣言があったとき、後者二つは""や''を付したために不正である。なぜなら、""や''で囲ったものは文字列として扱われ、colorプロパティが取りうる色の値（#rrggbb、rgb([0-255],[0-255],[0-255])、または、blackやredなどのキーワードなど）ではないからである。CSSではプロパティ毎に取れる構文が定まっており、それ以外の値が入っていた場合は無視しなければならないとされているため、注意が必要となる。

p#id { color: #ff3300 }
p#id { font-size: 24px }

は、

p#id { color: #ff3300; font-size: 24px }

と等価である。;は前者のように宣言をセレクタに一つずつ書いてあるのを、ひとつのセレクタのブロックで記述するときに宣言を分けるのに使う。そのため、必ずしも宣言に;をつけるのを強制するものではない。

セレクタは、実装レベルの高いブラウザならばどの属性であってもCSSを適用することが可能であり、この場合IDに関する属性セレクタであるので、#idは[id="id"]と等価である。セレクタの簡単なマッチングが可能である。そのほかHTMLタグに対する適用、文書構造からみた子・兄妹構造へ適用するセレクタ、更にはリンクや動的な表現・言語に関する疑似クラス(:link、:hover、:lang)などがある。

優先順位

CSS は必ずしも一つのところで一意に指定できず、そのため指定内容の衝突を避けるために優先順位がユーザーエージェントによって計算される。その結果は、以下のような条件により算出される。

作成者スタイルシートはユーザースタイルシートより優先される
デフォルトスタイルシートは他のスタイルシートを優先する
最重要指定されている宣言はユーザースタイルシートが作成者スタイルシートより優先される（CSS1では逆）
外部から読み込んだものは読み込んだ先とまとめて扱う
詳細度によって整理する
- そのセレクタ内で指定先を一意に決められるもの（IDの類）が多い方を優先する
- IDの類による優先順位が同じ場合は、属性や擬似クラスの数が多い方を優先する
- それでも優先順位が決まらない場合は、要素の数が多い方を優先する
これでもまだ優先順位が同一の場合、作成者スタイルシートにおいて以下の順で優先する
1. インラインのもの
2. 外部からのもの
HTMLのalign属性など、CSS以外によるスタイルの指定は、それと等価なCSSによるスタイル指定が製作者スタイルシートの先頭にあるものとして扱う。ただし、これらの詳細度は最も低いものとする（CSS1においては要素名による指定を一つだけ含むセレクタと同じ詳細度）

記載可能な方法の詳細は次の通りで、一般的に優先される順位で並び替えている（CSS2で最重要指定の優先順位の仕様が変更されている、勧告6章4）。

ユーザスタイルシート中で最重要指定された宣言 - ユーザーエージェントの設定のスタイルの中で!importantを宣言に付加する
作成者スタイルシート中で最重要指定された宣言 - 作成者が内容に付随させたスタイル中で!importantを宣言に付加する。
作成者スタイルシート中の通常の宣言
ユーザースタイルシート中の通常の宣言
デフォルトスタイルシートの宣言

作成者スタイルシートの記述方法による優先順位は以下の通り。

特定の要素にスタイルを記述する
HTMLやXMLのヘッダ部にそのページ全体を対象にスタイルを定義する
CSSのみを記述した外部ファイルを用意し、HTMLファイルのヘッダ部からリンクを張ってスタイルを参照させる

勧告等

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以外の規格にまで関与した内容となっている。現在、どのモジュールも勧告には至っていない。

この節は執筆中です。加筆、訂正して下さる協力者を求めています。

外部リンク

ウィキブックスにCSS関連の教科書や解説書があります。

W3Cによる勧告等
W3Cによる勧告の邦訳
W3C CSS 検証サービス
CSS2 tests by Peter-Paul Koch
Box model hack
Another box model workaround
MSDN Library - Cascading Style Sheets
CSS Panic Guide - a fast resource
CSS-discus wiki - A wiki dedicated to CSS
CSS: under construction
Acid2 Test
<oXygen/> CSS Editor
CSSEZ

表・話・編・歴 World Wide Web Consortium の標準

W3C勧告	CDF · CSS · DOM · HTML · MathML · OWL · RDF · RDF Schema · SVG · SOAP · SMIL · SPARQL · VoiceXML · WSDL · XHTML · XML · XForms · XML Information Set · XML Schema · XPath · XQuery · XSL · XSL Transformations · XSL Formatting Objects · XLink · XML Base · XInclude · XML署名

Notes	XAdES

ワーキングドラフト	XFrames · HTML 5

この「Cascading Style Sheets」は、インターネットやウェブに関連した書きかけ項目です。この記事を加筆して下さる協力者を求めています（P:コンピュータ）。

Why are we here?
All text is available under the terms of the GNU Free Documentation License
This page is cache of Wikipedia. History