221.88.216.11: /* Cascading Style Sheets, Level 4 (CSS4) */

2013-06-18T00:26:46Z

Cascading Style Sheets, Level 4 (CSS4)

新規ページ

{{WikipediaPage|ウィキペディアにおけるCSSの設定については、[[Help:外装の詳細設定]]をご覧ください。}}
{{infobox file format
| name = Cascading Style Sheets
| extension = .css
| icon = [[ファイル:Nuvola mimetypes source css.png|127px]]
| mime = text/css
| owner = [[World Wide Web Consortium]]
| creatorcode =
| genre = [[スタイルシート]]
| containerfor =
| containedby =
| extendedfrom =
| extendedto =
| standard = [http://www.w3.org/TR/CSS1/ CSS Level 1 (Recommendation)],<br />
[http://www.w3.org/TR/2008/REC-CSS2-20080411/ CSS Level 2 (Recommendation)],<br />
[http://www.w3.org/TR/CSS2/ CSS Level 2 Revision 1 (Recommendation)],<br />
[http://www.w3.org/TR/css3-selectors/ Selectors Level 3 (Recommendation)],<br />
[http://www.w3.org/TR/css3-color/ CSS Color Module Level 3 (Recommendation)],<br />
[http://www.w3.org/TR/css3-namespace/ CSS Namespaces Module Level 3 (Recommendation)],<br />
}}
{{HTML}}

'''Cascading Style Sheets'''（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート）とは、[[HyperText Markup Language|HTML]] や [[Extensible Markup Language|XML]] の要素をどのように修飾（表示）するかを指示する、[[World Wide Web Consortium|W3C]]による仕様の一つ。文書の''構造''と''体裁''を[[関心の分離|分離]]させるという理念を実現する為に提唱された[[スタイルシート]]の、具体的な仕様の一つ。

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

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

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

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

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

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

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

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

<source lang="css">
p#id { color : #ff3300 }
</source>

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

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

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

<source lang="css">
color : #ff3300;
width : 35%
</source>

<source lang="css">
color : "#0033ff";
width : '53%'
</source>

このような宣言があったとき、後者二つは""や<nowiki>''</nowiki>を付したために不正である。なぜなら、""や<nowiki>''</nowiki>で囲ったものは文字列として扱われ、colorプロパティが取りうる色の値（#rrggbb、rgb([0-255],[0-255],[0-255])、または、blackやredなどのキーワードなど）ではないからである。

<source lang="css">
p#id { color: #ff3300 }
p#id { font-size: 24px }
</source>

は、

<source lang="css">
p#id { color: #ff3300; font-size: 24px }
</source>

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

セレクタは、実装レベルの高いブラウザならばどの属性であっても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ファイルのヘッダ部からリンクを張ってスタイルを参照させる



== 勧告等 ==
CSSの仕様はレベルという段階をもち、2011年11月段階で、Level 1 から Level 4 までの仕様が公開されている。

=== Cascading Style Sheets, level 1 (CSS1), 勧告 1996年12月 ===
* [[フォント]][[プロパティ]]
* [[色]]及び[[背景]]のプロパティ
* [[テキスト]]プロパティ
** 語間の調整
** 行寄せ
* ボックスプロパティ
** マージン
** ボーダー
** パディング
* 類別プロパティ
** 表示
** リスト
'''ボックスモデルの参考図'''
<div style="border:1px dotted #999999;background-color:#ffffff;width:21em;padding:1em;">
マージン
<div style="border:1px solid #4d8ca5;background-color:#6cb5df;width:19em;padding:1em;">
ボーダー
<div style="border:1px solid #4d8ca5;background-color:#00f3f3;width:17em;padding:1em;">
パディング
<div style="border:1px solid #4d8ca5;background-color:#00f3f3;width:15em;padding:1em;">
内容
</div>
パディング
</div>
ボーダー
</div>
マージン
</div>
ボックスに'''width'''属性を設定したとき、[[World Wide Web Consortium|W3C]] のボックスのモデルでは内容の横幅であると解釈される。そしてパディングとボーダー分の横幅は要素の横幅に追加される。

他方[[マイクロソフト]]のボックスのモデルでは width 属性は内容の横幅とパディングとボーダー分を足したもの、即ち要素全ての横幅になる<ref>[[:en:Internet Explorer box model bug]]</ref>。そのためInternet Explorer5.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以降では全体が[[モジュール化]]され、ユーザーエージェントがどのモジュールに対応し、どのモジュールに対応しないか自由に選択できるようになる他、縦方向の書字や、HTML以外の規格にまで関与した内容となっている。2013年5月現在で勧告されているモジュールは以下の通り。
* [http://www.w3.org/TR/css3-color/ CSS Color Module Level 3], 勧告 2011年6月
* [http://www.w3.org/TR/css3-namespace/ CSS Namespaces Module], 勧告 2011年6月
* [http://www.w3.org/TR/css3-selectors/ Selectors Level 3], 勧告 2011年9月
* [http://www.w3.org/TR/css3-mediaqueries/ Media Queries], 勧告 2012年6月

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

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

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

{{節stub}}

== 脚注・出典 ==
<references />

== 関連項目 ==
* [[スタイルシート]]
** [[Extensible Stylesheet Language|XSL]]
** [[Document Style Semantics and Specification Language|DSSSL]]
* [[リキッドデザイン]]
* [[ホーコン・ウィウム・リー]]

== 外部リンク ==
{{Wikibooks|CSS}}
* W3C
** [http://www.w3.org/Style/CSS/ Cascading Style Sheets home page]
** [http://www.w3.org/TR/REC-CSS1/ Cascading Style Sheets, level 1 (CSS1)]
** [http://www.w3.org/TR/2008/REC-CSS2-20080411/ Cascading Style Sheets, level 2 (CSS2)]
** [http://www.w3.org/TR/CSS2/ Cascading Style Sheets, level 2 revision 1 (CSS2.1)]
** [http://www.w3.org/TR/CSS/ Cascading Style Sheets (CSS) Snapshots]
** [http://www.w3.org/Style/CSS/current-work CSS current work & how to participate]
* 勧告・ノートの非公式日本語訳
** [http://www.y-adagio.com/public/standards/css1/toc.htm 段階スタイルシート水準1(CSS1) 標準情報(TR) TR X 0011:1998]
** [http://www.y-adagio.com/public/standards/tr_css2/toc.html 段階スタイルシート水準2(CSS2) 標準情報(TR) TR X 0032:2000]
** [http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/ CSS2勧告邦訳について]
** [http://momdo.s35.xrea.com/web-html-test/spec/CSS21/ CSS2.1勧告の日本語訳について]
** [http://standards.mitsue.co.jp/resources/w3c/TR/css3-selectors/ セレクタ Level 3]
** [http://standards.mitsue.co.jp/resources/w3c/TR/css3-namespace/ CSS 名前空間モジュール]
** [http://standards.mitsue.co.jp/resources/w3c/TR/css3-color/ CSS カラーモジュール Level 3]
** [http://standards.mitsue.co.jp/resources/w3c/TR/css-2010/ CSS スナップショット 2010]
*ウェブブラウザ
** [http://msdn.microsoft.com/ja-jp/library/ms531205.aspx MSDN Library - Cascading Style Sheets]
** [https://developer.mozilla.org/ja/css CSS - MDC]
*その他
** [http://jigsaw.w3.org/css-validator/ W3C CSS 検証サービス]
** [http://www.quirksmode.org/ CSS2 tests by Peter-Paul Koch]
** [http://www.tantek.com/CSS/Examples/boxmodelhack.html Box model hack]
** [http://webfx.eae.net/dhtml/boxsizing/boxsizing.html Another box model workaround]
** [http://thenoodleincident.com/tutorials/css/ CSS Panic Guide] - a fast resource
** [http://css-discuss.incutio.com/ CSS-discus wiki] - A wiki dedicated to CSS
** [http://webstandards.org/act/acid2/test.html Acid2 Test]

{{W3C標準}}

{{DEFAULTSORT:CASCADINGSTYLESEETS}}
{{Internet-stub}}

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

[[mk:CSS селектори]]

Cascading Style Sheets - 版の履歴

221.88.216.11: /* Cascading Style Sheets, Level 4 (CSS4) */