Cascading Style Sheets
Cascading Style Sheets(カスケーディング・スタイル・シーツ)は、HTMLやXMLの要素をどのように修飾(表示)するかを指示するスタイルシート言語である。World Wide Web Consortium (W3C) がとりまとめ勧告する、文書の構造と体裁を分離させるという理念を実現するために提唱された。略称は、CSS。 CSSはHTMLで表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。以下の点を特徴とする。
CSSは、1994年にホーコン・ウィウム・リーによって開発された。 記述スタイルの情報は読み込む内容(作成者スタイルシート)やユーザーエージェントの設定(ユーザースタイルシート)の2か所に記載できる。ユーザーエージェントも独自のスタイル(デフォルトスタイルシート)を持っている。 作成者スタイルシートはマークアップ文書の中に直接記述するか、別文書として読み込ませる形で利用される。CSS の利便性を最大限発揮するために、別文書として読み込ませる事が推奨されている。 記述方法ここでは CSS Level 2 について説明する。CSS の文法は異なるレベル間でも後方互換性を持つように設計されており、例えば CSS Level 1 で書かれたスタイルシートを CSS Level 2 として扱うことも可能である(ただし一部に解釈の相違などに伴う非互換部分も存在する)。CSS では要素にスタイルを与えるため、次のような仕様が定められている。 以下のCSS断片を例にとる。 p#id { color: #ff3300 }
上例の CSS 断片を適用すると宣言している文書のうち、セレクタが指定しているものと一致する部位(HTML 文書においては要素、要素の親子関係、特定のクラス、ID など)に、宣言ブロック内の宣言が適用される。宣言は、「 上例は HTML 文書に適用する場合、「 color: #ff3300;
width: 35%
color: "#0033ff";
width: '53%'
このような宣言があったとき、後者二つは p#id { color: #ff3300 }
p#id { font-size: 24px }
は、 p#id { color: #ff3300; font-size: 24px }
と等価である。 セレクタは、実装レベルの高いブラウザならばどの属性であっても CSS を適用することが可能であり、この場合 ID に関する属性セレクタであるので、 優先順位CSS は必ずしも一つのところで一意に指定できず、そのため指定内容の衝突を避けるために優先順位がユーザーエージェントによって計算される。その結果は、以下のような条件により算出される。
記載可能な方法の詳細は次の通りで、一般的に優先される順位で並べ替えている(CSS2で最重要指定の優先順位の仕様が変更されている、勧告6章4)。
作成者スタイルシートの記述方法による優先順位は以下の通り。
継承継承(けいしょう、英: Inheritance)は親要素から子要素へのプロパティ値伝播である[1]。 CSS の継承機能により効率的かつ意味論に沿ったスタイル付けが可能になる。例えばホームページ内に 勧告等CSS の仕様にはレベルという段階があり、2011年11月段階で、Level 1 から Level 4 までの仕様が公開されている。 Cascading Style Sheets, level 1 (CSS1), 勧告 1996年12月ボックスモデルの参考図 マージン ボーダー パディング 内容 パディング ボーダー マージン ボックスに 他方マイクロソフトのボックスのモデルでは 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実装に非互換が生じたため、曖昧な記述を明確にする改訂が行われた。また、 CSS の実装に際してベンダは、2002年頃から CSS2.1 を基本仕様と見なしている。 Cascading Style Sheets, level 3 (CSS3)CSS3以降ではCSS 2.1を中核とし、新たな機能の追加や改良をモジュールとすることで実現するものとする[3]。ユーザーエージェントは各モジュールへ対応するか否かを自由に選択できるようになる他、縦方向の書字や、HTML以外の規格にまで関与した内容となっている。2023年11月現在で勧告されているモジュールは以下の通り。
Cascading Style Sheets, Level 4 (CSS4)以降
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 SnapshotCSS Snapshot はある時点における各種 CSS 仕様書の状態を集約した文書 (W3C Group Note) である[5]。 CCS 2.1 より後の CSS は単一仕様書ではなく各モジュール仕様書の総体により定義されている。その副作用として CSS 全体の状況を俯瞰するのが難しくなっていた。CSS snapshot はこれを解決するために W3C CSSWG が発行している Group Note である。Group Note であり正式な W3C 勧告ではないが、より機動的に「CSS Snapshot 2023」といった形でおおよそ年次発行されている。 脚注注釈
出典
関連項目外部リンク
|