Loading AI tools
HTMLやXMLの要素をどのように修飾するかを指示する仕様の一つ ウィキペディアから
Cascading Style Sheets(CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート)は、HTMLやXMLの要素をどのように修飾(表示)するかを指示する仕様の一つで、World Wide Web Consortium (W3C) がとりまとめ勧告する、文書の構造と体裁を分離させるという理念を実現するために提唱されたスタイルシートの具体的な仕様の一つ。
CSSはHTMLで表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。以下の点を特徴とする。
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 は必ずしも一つのところで一意に指定できず、そのため指定内容の衝突を避けるために優先順位がユーザーエージェントによって計算される。その結果は、以下のような条件により算出される。
記載可能な方法の詳細は次の通りで、一般的に優先される順位で並べ替えている(CSS2で最重要指定の優先順位の仕様が変更されている、勧告6章4)。
!important
を宣言に付加する!important
を宣言に付加する。作成者スタイルシートの記述方法による優先順位は以下の通り。
継承(けいしょう、英: 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 までの仕様が公開されている。
ボックスモデルの参考図
マージン
ボーダー
パディング
内容
パディング
ボーダー
マージン
ボックスに width
属性を設定したとき、W3C のボックスのモデルでは内容の横幅であると解釈される。そしてパディングとボーダー分の横幅は要素の横幅に追加される。
他方マイクロソフトのボックスのモデルでは width
属性は内容の横幅とパディングとボーダー分を足したもの、すなわち要素全ての横幅になる[2]。そのため Internet Explorer 5.5 以下と 6.0 以上および Internet Explorer 以外のWebブラウザでの表示を近づけるためには、パディングとボーダーを0にする、もしくはCSSハックを使う必要がある。
Internet Explorer 6 では DOCTYPE が正確ならば標準準拠モードに移行できる(ただ XML や XHTML の場合、XML 宣言を仕様通り書くと過去互換モードでレンダリングされるバグがある)。
CSS2 は CSS1 の上位互換。幾つかの概念の追加・拡大・改訂が行われた。
具体的には表示媒体(モニターや TV、紙媒体など)によって自動的にスタイルシートを変更できるようにし、それに附随して音声ブラウザへの対応、印刷媒体への対応が行われ、フォントなどの表示機能の拡張や、ボックスの概念の修正などが行われた。
ただし2002年頃以降に発表されたCSS対応UAで、これを仕様と見なしているものは存在せず、実質的に、CSS2.1 に仕様としての役割を委ねた形になっている。CSS2勧告の仕様書にアクセスすると、CSS2 は管理されておらず、仕様の参照や実装は CSS 2.1 を基にせよと奨励する注意書きがある。
CSS2 の改訂版。CSS2仕様書の不明瞭な定義が原因で各ユーザーエージェントのCSS2実装に非互換が生じたため、曖昧な記述を明確にする改訂が行われた。また、 text-shadow
プロパティのように、CSS2 で策定されていながら長い間実装が行われなかったもの、display
プロパティの run-in
値のように、複数のユーザーエージェントで相互運用性を確保できなかった機能は削除されている。それらは CSS3 以降のレベルで定義され直すことになる。
CSS の実装に際してベンダは、2002年頃から CSS2.1 を基本仕様と見なしている。
CSS3以降ではCSS 2.1を中核とし、新たな機能の追加や改良をモジュールとすることで実現するものとする[3]。ユーザーエージェントは各モジュールへ対応するか否かを自由に選択できるようになる他、縦方向の書字や、HTML以外の規格にまで関与した内容となっている。2023年11月現在で勧告されているモジュールは以下の通り。
モジュール | 仕様書タイトル | 状態 | 日付 |
---|---|---|---|
css3-background | CSS Backgrounds and Borders Module Level 3 | 勧告候補草案 | 2023年2月 |
css-box-3 | CSS Box Model Module Level 3 | 勧告 | 2023年4月 |
css-cascade-3 | CSS Cascading and Inheritance Level 3 | 勧告 | 2021年2月 |
css-color-3 | CSS Color Module Level 3 | 勧告 | 2022年1月 |
css3-content | CSS Generated Content Module Level 3 | 草案 | 2019年8月 |
css-fonts-3 | CSS Fonts Module Level 3 | 勧告 | 2018年9月 |
css3-gcpm | CSS Generated Content for Paged Media Module | 草案 | 2014年5月 |
css3-layout | CSS Template Layout Module | ノート | 2015年3月 |
css3-mediaqueries | Media Queries | 勧告 | 2012年6月 |
mediaqueries-4 | Media Queries Level 4 | 勧告候補 | 2021年12月 |
css3-multicol | Multi-column Layout Module Level 1 | 勧告候補 | 2021年10月 |
css3-page | CSS Paged Media Module Level 3 | 草案(一部はcss3-breakへ) | 2018年10月 |
css3-break | CSS Fragmentation Module Level 3 | 勧告候補 | 2018年12月 |
selectors-3 | Selectors Level 3 | 勧告 | 2018年11月 |
selectors-4 | Selectors Level 4 | 草案 | 2022年11月 |
css3-ui | CSS Basic User Interface Module Level 3 (CSS3 UI) | 勧告 | 2018年6月 |
![]() | この節の加筆が望まれています。 |
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 仕様書の状態を集約した文書 (W3C Group Note) である[5]。
CCS 2.1 より後の CSS は単一仕様書ではなく各モジュール仕様書の総体により定義されている。その副作用として CSS 全体の状況を俯瞰するのが難しくなっていた。CSS snapshot はこれを解決するために W3C CSSWG が発行している Group Note である。Group Note であり正式な W3C 勧告ではないが、より機動的に「CSS Snapshot 2023」といった形でおおよそ年次発行されている。