Cascading Style Sheets

ウィキペディアにおけるCSSの設定については、「(Help:外装の詳細設定)」をご覧ください。

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

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),

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

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

CSS は、1994年にWWW生誕の地である CERN に勤務するホーコン・ウィウム・リーにより提唱された。

記述

スタイルの情報は読み込む内容（作成者スタイルシート）やユーザーエージェントの設定（ユーザースタイルシート）の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）。

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

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

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

勧告等

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

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

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

ボックスモデルの参考図

マージン

ボーダー

パディング

内容

パディング

ボーダー

マージン

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

他方マイクロソフトのボックスのモデルでは width 属性は内容の横幅とパディングとボーダー分を足したもの、すなわち要素全ての横幅になる^[1]。そのため 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 を中核とし、新たな機能の追加や改良をモジュールとすることで実現するものとする^[2]。ユーザーエージェントは各モジュールへ対応するか否かを自由に選択できるようになる他、縦方向の書字や、HTML以外の規格にまで関与した内容となっている。2018年7月現在で勧告されているモジュールは以下の通り。

Summary of main module-specifications^[3]

Module	Specification title	Status	Date
css3-background	CSS Backgrounds and Borders Module Level 3	Candidate Rec.	000000002017-10-01-00002017年10月
css3-box	CSS basic box model	Working Draft,	000000002018-07-01-00002018年7月
css-cascade-3	CSS Cascading and Inheritance Level 3	Candidate Rec.	000000002016-05-01-00002016年5月
css3-color	CSS Color Module Level 3	Recommendation	000000002018-06-01-00002018年6月
css3-content	CSS3 Generated and Replaced Content Module	Working Draft	000000002016-06-01-00002016年6月
css-fonts-3	CSS Fonts Module Level 3	Candidate Rec.	000000002018-06-01-00002018年6月
css3-gcpm	CSS Generated Content for Paged Media Module	Working Draft	000000002014-05-01-00002014年5月
css3-layout	CSS Template Layout Module	Note	000000002015-03-01-00002015年3月
css3-mediaqueries	Media Queries	Recommendation	000000002012-06-01-00002012年6月
mediaqueries-4	Media Queries Level 4	Candidate Rec.	000000002017-09-01-00002017年9月
css3-multicol	Multi-column Layout Module Level 1	Working Draft	000000002018-05-01-00002018年5月
css3-page	CSS Paged Media Module Level 3	Working Draft	000000002013-03-01-00002013年3月
selectors-3	Selectors Level 3	Candidate Rec.	000000002018-01-01-00002018年1月
selectors-4	Selectors Level 4	Working Draft	000000002018-02-01-00002018年2月
css3-ui	CSS Basic User Interface Module Level 3 (CSS3 UI)	Recommendation	000000002018-06-01-00002018年6月

Cascading Style Sheets, Level 4 (CSS4)

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

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

未だに勧告候補に至っていない Level 3 モジュールが存在する中、既に Level 4 モジュールの公開草案がいくつか公開されている。

脚注

[脚注の使い方]

注釈

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

出典

1. ^ en:Internet Explorer box model bug
2. ^ §2.1 CSS Levels, 『CSS Snapshot 2015』 W3C
3. ^ “All CSS specifications”. W3.org (2014年5月22日). 2014年5月30日閲覧。

関連項目

• スタイルシート
  • XSL
  • DSSSL
• (リキッドデザイン)
• ホーコン・ウィウム・リー
• CSSの拡張
  • LESS
  • Sass

外部リンク

 

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

• 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
• 勧告・ノートの非公式日本語訳
  • 段階スタイルシート 水準1(CSS1) 標準情報(TR) TR X 0011:1998
  • 段階スタイルシート 水準2(CSS2) 標準情報(TR) TR X 0032:2000
  • CSS2勧告邦訳について^[]
  • CSS2.1勧告の日本語訳について
  • セレクタ Level 3
  • CSS 名前空間モジュール
  • CSS カラーモジュール Level 3
  • CSS スナップショット 2010
• ウェブブラウザ
  • MSDN Library - Cascading Style Sheets^[]
  • CSS: カスケーディングスタイルシート - MDN
• その他
  • W3C CSS 検証サービス
  • 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
  • Acid2 Test^[]
• CSSフレームワーク
  • ブートストラップユーザーインターフェイスキット - MDBootstrap