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

セレクタは、実装レベルの高いブラウザならばどの属性であっても 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)は親要素から子要素へのプロパティ値伝播である[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-backgroundCSS Backgrounds and Borders Module Level 3 勧告候補草案000000002023-02-01-00002023年2月
css-box-3CSS Box Model Module Level 3勧告000000002023-04-01-00002023年4月
css-cascade-3CSS Cascading and Inheritance Level 3 勧告000000002021-02-01-00002021年2月
css-color-3CSS Color Module Level 3勧告000000002022-01-01-00002022年1月
css3-contentCSS Generated Content Module Level 3 草案000000002019-08-01-00002019年8月
css-fonts-3CSS Fonts Module Level 3勧告000000002018-09-01-00002018年9月
css3-gcpmCSS Generated Content for Paged Media Module草案000000002014-05-01-00002014年5月
css3-layoutCSS 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-pageCSS Paged Media Module Level 3草案(一部はcss3-breakへ)000000002018-10-01-00002018年10月
css3-breakCSS Fragmentation Module Level 3勧告候補000000002018-12-01-00002018年12月
selectors-3Selectors Level 3勧告000000002018-11-01-00002018年11月
selectors-4Selectors Level 4草案000000002022-11-01-00002022年11月
css3-uiCSS Basic User Interface Module Level 3 (CSS3 UI)勧告000000002018-06-01-00002018年6月

Cascading Style Sheets, Level 4 (CSS4)以降.mw-parser-output .ambox{border:1px solid #a2a9b1;border-left:10px solid #36c;background-color:#fbfbfb;box-sizing:border-box}.mw-parser-output .ambox+link+.ambox,.mw-parser-output .ambox+link+style+.ambox,.mw-parser-output .ambox+link+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+style+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+link+.ambox{margin-top:-1px}html body.mediawiki .mw-parser-output .ambox.mbox-small-left{margin:4px 1em 4px 0;overflow:hidden;width:238px;border-collapse:collapse;font-size:88%;line-height:1.25em}.mw-parser-output .ambox-speedy{border-left:10px solid #b32424;background-color:#fee7e6}.mw-parser-output .ambox-delete{border-left:10px solid #b32424}.mw-parser-output .ambox-content{border-left:10px solid #f28500}.mw-parser-output .ambox-style{border-left:10px solid #fc3}.mw-parser-output .ambox-move{border-left:10px solid #9932cc}.mw-parser-output .ambox-protection{border-left:10px solid #a2a9b1}.mw-parser-output .ambox .mbox-text{border:none;padding:0.25em 0.5em;width:100%;font-size:90%}.mw-parser-output .ambox .mbox-image{border:none;padding:2px 0 2px 0.5em;text-align:center}.mw-parser-output .ambox .mbox-imageright{border:none;padding:2px 0.5em 2px 0;text-align:center}.mw-parser-output .ambox .mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ambox .mbox-image-div{width:52px}html.client-js body.skin-minerva .mw-parser-output .mbox-text-span{margin-left:23px!important}@media(min-width:720px){.mw-parser-output .ambox{margin:0 10%}}

この節の加筆が望まれています。

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


次ページ
記事の検索
おまかせリスト
▼オプションを表示
ブックマーク登録
mixiチェック!
Twitterに投稿
オプション/リンク一覧
話題のニュース
列車運行情報
暇つぶしWikipedia

Size:39 KB
出典: フリー百科事典『ウィキペディア(Wikipedia)
担当:undef