Cascading Style Sheets

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

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

 ページを表示するメディアに合わせてスタイルシートを切り替えることで、メディアごとに表示を変化させることができる。
 ユーザーエージェント（多くの場合ウェブブラウザ）、ウェブサイト制作者、ユーザがそれぞれ定義したCSSのもたらす効果を重ね合わせる（カスケードする）ことができるただし拡張・修正の続いているCSS仕様の全てを完全に実装しているユーザーエージェントは事実上皆無といってよく、実際シェアで多数を占めるユーザーエージェントは部分対応にすぎない。しかし実用上支障のないレベルの実装はされてきており、なおかつ表現の互換性についても考慮されてきている。。

CSSは、1994年にホーコン・ウィウム・リーによって開発された。

 記述 
スタイルの情報は読み込む内容（作成者スタイルシート）やユーザーエージェントの設定（ユーザースタイルシート）の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 の類による優先順位が同じ場合は、属性や擬似クラスの数が多い方を優先する
 それでも優先順位が決まらない場合は、要素の数が多い方を優先する
 これでもまだ優先順位が同一の場合、作成者スタイルシートにおいて以下の順で優先する
 インラインのもの
 外部からのもの
 HTML の align 属性など、CSS 以外によるスタイルの指定は、それと等価な CSS によるスタイル指定が製作者スタイルシートの先頭にあるものとして扱う。ただし、これらの詳細度は最も低いものとする（CSS1 においては要素名による指定を一つだけ含むセレクタと同じ詳細度）

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

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

作成者スタイルシートの記述方法による優先順位は以下の通り。
 特定の要素にスタイルを記述する
 HTML や XML のヘッダ部にそのページ全体を対象にスタイルを定義する
 CSS のみを記述した外部ファイルを用意し、HTML ファイルのヘッダ部からリンクを張ってスタイルを参照させる

 継承 
継承（けいしょう、）は親要素から子要素へのプロパティ値伝播である"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.。

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 属性は内容の横幅とパディングとボーダー分を足したもの、すなわち要素全ての横幅になる:en:Internet Explorer box model bug。そのため 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) 
サムネイル|150px|CSS3のロゴ

CSS3以降ではCSS 2.1を中核とし、新たな機能の追加や改良をモジュールとすることで実現するものとする。ユーザーエージェントは各モジュールへ対応するか否かを自由に選択できるようになる他、縦方向の書字や、HTML以外の規格にまで関与した内容となっている。2023年11月現在で勧告されているモジュールは以下の通り。
+ CSS3の主要モジュール仕様書モジュール仕様書タイトル状態日付css3-backgroundCSS Backgrounds and Borders Module Level 3 勧告候補草案  css-box-3CSS Box Model Module Level 3勧告  css-cascade-3CSS Cascading and Inheritance Level 3 勧告  css-color-3CSS Color Module Level 3勧告  css3-contentCSS Generated Content Module Level 3 草案  css-fonts-3CSS Fonts Module Level 3勧告  css3-gcpmCSS Generated Content for Paged Media Module草案  css3-layoutCSS Template Layout Moduleノート  css3-mediaqueries Media Queries勧告  mediaqueries-4 Media Queries Level 4勧告候補  css3-multicol Multi-column Layout Module Level 1勧告候補  css3-pageCSS Paged Media Module Level 3草案（一部はcss3-breakへ）  css3-breakCSS Fragmentation Module Level 3勧告候補  selectors-3Selectors Level 3勧告  selectors-4Selectors Level 4草案  css3-uiCSS Basic User Interface Module Level 3 (CSS3 UI)勧告  

 Cascading Style Sheets, Level 4 (CSS4)以降 

CSS4はモジュール化されたため、単一の統合された仕様は存在せず、各モジュールが独立して新たなレベルが策定されていく。。

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 Flexible Box Layout Module Level 1のように、CSS2やCSS3には存在しなかったモジュールについては、Level 1からの開始となる。

 CSS Snapshot 
CSS Snapshot はある時点における各種 CSS 仕様書の状態を集約した文書 (W3C Group Note) である"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.。

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

 脚注 

 注釈 

 出典 

 関連項目 
 スタイルシート
 XSL
 DSSSL
 リキッドデザイン
 ホーコン・ウィウム・リー
 CSSの拡張
 LESS
 Sass
スクリーンリーダー

 外部リンク 

 W3C
 Cascading Style Sheets home page
 Cascading Style Sheets, level 1 (CSS1)
 Cascading Style Sheets, level 2 (CSS2)
 Cascading Style Sheets, level 2 revision 1 (CSS2.1)
 Cascading Style Sheets (CSS) Snapshots
 CSS current work & how to participate
 W3C CSS 検証サービス
 勧告・ノートの非公式日本語訳
 段階スタイルシート 水準1(CSS1) 標準情報(TR) TR X 0011:1998
 段階スタイルシート 水準2(CSS2) 標準情報(TR) TR X 0032:2000
 CSS2.1勧告の日本語訳について
 セレクタ Level 3
 CSS 名前空間モジュール
 CSS カラーモジュール Level 3
 CSS スナップショット 2010
ウェブブラウザ
 CSS: カスケーディングスタイルシート - MDN

Category:W3C勧告
Category:World Wide Web
Category:スタイルシート言語
Category:HTML