Cascading Style Sheets

Cascading Style Sheets
拡張子	.css
MIMEタイプ	text/css
開発者	World Wide Web Consortium
種別	スタイルシート
国際標準	CSS Level 1 (Recommendation),; CSS Level 2 (Recommendation),; CSS Level 2 Revision 1 (Recommendation),; Selectors Level 3 (Recommendation),; CSS Color Module Level 3 (Recommendation),; CSS Namespaces Module Level 3 (Recommendation),

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

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

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

CSSは、1994年にWWW生誕の地である欧州原子核研究機構に勤務するホーコン・ウィウム・リーにより提唱された。

記述

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

作成者スタイルシートはマークアップ文書の中に直接記述するか、別文書として読み込ませる形で利用される。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 などのキーワードなど）ではないからである。また、

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 ファイルのヘッダ部からリンクを張ってスタイルを参照させる

継承

継承（けいしょう、英: Inheritance）は親要素から子要素へのプロパティ値伝播である^[1]。

CSS の継承機能により効率的かつ意味論に沿ったスタイル付けが可能になる。例えばホームページ内に <article><h2><div> の3階層構造からなるミニ記事を書く場合を考える。ミニ記事を周りから区切るために背景色を <article style="background: #a9a9a9;"> で指定する場合、意図としてはミニ記事全体すなわち <article>以下全要素の背景が変わってほしい。CSS は継承によりこれを実現する。すなわち、子要素に背景色を指定しない（<article style="background: #a9a9a9;"><h2><div>）場合でも自動的に親要素のプロパティが子要素へ引き継がれ、ミニ記事全体の背景が変わる。継承がない場合、ミニ記事の <h2> ヘッダー部が白背景のままになってしまう。

勧告等

CSS の仕様にはレベルという段階があり、2011年11月段階で、Level 1 から Level 4 までの仕様が公開されている。

Cascading Style Sheets, level 1 (CSS1), 勧告 1996年12月

フォントプロパティ
色および背景のプロパティ
テキストプロパティ
- 語間の調整
- 行寄せ
ボックスプロパティ
- マージン
- ボーダー
- パディング
類別プロパティ
- 表示
- リスト

ボックスモデルの参考図

マージン

ボーダー

パディング

内容

パディング

ボーダー

マージン

ボックスに width 属性を設定したとき、W3C のボックスのモデルでは内容の横幅であると解釈される。そしてパディングとボーダー分の横幅は要素の横幅に追加される。

他方マイクロソフトのボックスのモデルでは width 属性は内容の横幅とパディングとボーダー分を足したもの、すなわち要素全ての横幅になる^[2]。そのため Internet Explorer 5.5 以下と 6.0 以上および Internet Explorer 以外のWebブラウザでの表示を近づけるためには、パディングとボーダーを0にする、もしくはCSSハックを使う必要がある。

Internet Explorer 6 では DOCTYPE が正確ならば標準準拠モードに移行できる（ただ XML や XHTML の場合、XML 宣言を仕様通り書くと過去互換モードでレンダリングされるバグがある）。

Cascading Style Sheets, level 2 (CSS2), 勧告 1998年5月

CSS2 は CSS1 の上位互換。幾つかの概念の追加・拡大・改訂が行われた。

具体的には表示媒体（モニターや TV、紙媒体など）によって自動的にスタイルシートを変更できるようにし、それに附随して音声ブラウザへの対応、印刷媒体への対応が行われ、フォントなどの表示機能の拡張や、ボックスの概念の修正などが行われた。

ただし2002年頃以降に発表されたCSS対応UAで、これを仕様と見なしているものは存在せず、実質的に、CSS2.1 に仕様としての役割を委ねた形になっている。CSS2勧告の仕様書にアクセスすると、CSS2 は管理されておらず、仕様の参照や実装は CSS 2.1 を基にせよと奨励する注意書きがある。

Cascading Style Sheets, level 2 revision 1 (CSS 2.1), 勧告 2011年6月

CSS2 の改訂版。CSS2仕様書の不明瞭な定義が原因で各ユーザーエージェントのCSS2実装に非互換が生じたため、曖昧な記述を明確にする改訂が行われた。また、 text-shadow プロパティのように、CSS2 で策定されていながら長い間実装が行われなかったもの、display プロパティの run-in 値のように、複数のユーザーエージェントで相互運用性を確保できなかった機能は削除されている。それらは CSS3 以降のレベルで定義され直すことになる。

CSS の実装に際してベンダは、2002年頃から CSS2.1 を基本仕様と見なしている。

Cascading Style Sheets, level 3 (CSS3)

CSS3のロゴ

CSS3以降ではCSS 2.1を中核とし、新たな機能の追加や改良をモジュールとすることで実現するものとする^[3]。ユーザーエージェントは各モジュールへ対応するか否かを自由に選択できるようになる他、縦方向の書字や、HTML以外の規格にまで関与した内容となっている。2023年11月現在で勧告されているモジュールは以下の通り。

CSS3の主要モジュール仕様書^[4]
モジュール	仕様書タイトル	状態	日付
`css3-background`	CSS Backgrounds and Borders Module Level 3	勧告候補草案	000000002023-02-01-00002023年2月
`css-box-3`	CSS Box Model Module Level 3	勧告	000000002023-04-01-00002023年4月
`css-cascade-3`	CSS Cascading and Inheritance Level 3	勧告	000000002021-02-01-00002021年2月
`css-color-3`	CSS Color Module Level 3	勧告	000000002022-01-01-00002022年1月
`css3-content`	CSS Generated Content Module Level 3	草案	000000002019-08-01-00002019年8月
`css-fonts-3`	CSS Fonts Module Level 3	勧告	000000002018-09-01-00002018年9月
`css3-gcpm`	CSS Generated Content for Paged Media Module	草案	000000002014-05-01-00002014年5月
`css3-layout`	CSS Template Layout Module	ノート	000000002015-03-01-00002015年3月
`css3-mediaqueries`	Media Queries	勧告	000000002012-06-01-00002012年6月
`mediaqueries-4`	Media Queries Level 4	勧告候補	000000002021-12-01-00002021年12月
`css3-multicol`	Multi-column Layout Module Level 1	勧告候補	000000002021-10-01-00002021年10月
`css3-page`	CSS Paged Media Module Level 3	草案（一部はcss3-breakへ）	000000002018-10-01-00002018年10月
`css3-break`	CSS Fragmentation Module Level 3	勧告候補	000000002018-12-01-00002018年12月
`selectors-3`	Selectors Level 3	勧告	000000002018-11-01-00002018年11月
`selectors-4`	Selectors Level 4	草案	000000002022-11-01-00002022年11月
`css3-ui`	CSS Basic User Interface Module Level 3 (CSS3 UI)	勧告	000000002018-06-01-00002018年6月

Cascading Style Sheets, Level 4 (CSS4)以降

CSS4はモジュール化されたため、単一の統合された仕様は存在せず、「Level 4」モジュールの総称となる^[3]。

Level 4 モジュールで追加される機能は、Level 3 モジュールで未定義だった新しい機能のほか、草案に一度含まれながら、相互運用性を十分に確保出来ず仕様から省かれた機能からなる。

未だに勧告候補に至っていないLevel 3モジュールが存在する中、勧告候補になったLevel 4モジュール仕様書はMedia Queries Level 4、CSS Conditional Rules Module Level 4などがある。このほか、Level 5、6のモジュール草案もCSS Color Module Level 5やCSS Cascading and Inheritance Level 6が公開されている。

CSS Snapshot

CSS Snapshot はある時点における各種 CSS 仕様書の状態を集約した文書 (W3C Group Note) である^[5]。

CCS 2.1 より後の CSS は単一仕様書ではなく各モジュール仕様書の総体により定義されている。その副作用として CSS 全体の状況を俯瞰するのが難しくなっていた。CSS snapshot はこれを解決するために W3C CSSWG が発行している Group Note である。Group Note であり正式な W3C 勧告ではないが、より機動的に「CSS Snapshot 2023」といった形でおおよそ年次発行されている。

脚注

[脚注の使い方]

注釈

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

出典

^ "Inheritance propagates property values from parent elements to their children." W3C CSSWG. (2022). CSS Cascading and Inheritance Level 4, W3C Candidate Recommendation Snapshot, 13 January 2022.
^ en:Internet Explorer box model bug
^ ^a ^b World Wide Web Consortium (14 February 2023). "2.4 CSS Levels". CSS Snapshot 2023 (英語). 2023年11月21日閲覧。
^ "All CSS specifications" (英語). W3C. 6 September 2023. 2023年10月22日時点のオリジナルよりアーカイブ。2023年11月21日閲覧。
^ "CSS Snapshot 2023 ... This document collects together into one definition all the specs that together form the current state of Cascading Style Sheets (CSS) as of 2023." CSSWG. (2023). CSS Snapshot 2023.

外部リンク

この項目は、インターネットやウェブに関連した書きかけの項目です。この項目を加筆・訂正などしてくださる協力者を求めています（PJ:コンピュータ/P:コンピュータ）。

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

[2] "Inheritance propagates property values from parent elements to their children." W3C CSSWG. (2022). CSS Cascading and Inheritance Level 4, W3C Candidate Recommendation Snapshot, 13 January 2022.

[3] :Internet Explorer box model bug

[LatestSnapshotLevel-4] World Wide Web Consortium (14 February 2023). "2.4 CSS Levels". CSS Snapshot 2023 (英語). 2023年11月21日閲覧。

[5] "All CSS specifications" (英語). W3C. 6 September 2023. 2023年10月22日時点のオリジナルよりアーカイブ。2023年11月21日閲覧。

[6] "CSS Snapshot 2023 ... This document collects together into one definition all the specs that together form the current state of Cascading Style Sheets (CSS) as of 2023." CSSWG. (2023). CSS Snapshot 2023.

[注釈 1]

[1]

[2]

[3]

[4]

[5]