WWW 特論 第3回
CSS ( Cascading Style Sheets ) とは
原田研究室
35608044 久保田裕章
目次
背景・概要
- 近年、多くの WEB ページが HTML によって記述され公開されている
- インターネットの普及に伴い、HTMLが様々な方法で拡張した
- 複雑化・環境限定・相互運用性の低下
→ これらの解決策が CSS ( Cascading Style Sheets )
- 見栄えの良さではなく、構造化文書の意味や構造などの概念を認知してもらうための技術
- CSS の正式勧告水準
- CSS 1 ( 1996年12月17日勧告 )
- CSS 2 ( 1998年05月12日勧告 )
- W3C は 改訂版 CSS 2.1 と次世代 CSS 3 が現在策定中
CSS の意味と役割
- XHTMLでマーク付けした意味や枠組みをユーザーに正しく伝えるためには、意味・機能を誰もが把握できるような方法で表現することが必要 → スタイルシートの利用
- スタイルシートの特徴 ( CSS 2 及び 2.1 仕様書の設計方針より )
- 構造的な文書との組み合わせ
- メンテナンスしやすい
- シンプルである
- 柔軟性がある
- 多彩な表現力
- プログラムからのアクセス
- 文書の持つ機能や意味をわかりやすく表現するだけでなく、一つの文書を異なる環境に対してそれぞれ最適に表現できるようになる
CSS の基本処理の流れ
- CSS の基本処理は以下の通り
- 元になる文書を解析し、文書のツリーを構築
- スタイルを適用し対象メディア ( 画面、印刷、音声など ) を特定
- 文書に関連付けられたスタイルシートのうち、対象メディアに適用するものを取得
- 文書ツリーの全ての要素について、対象メディアに適用されるすべてのプロパティの値をスタイル規則に従って決定
- スタイルのプロパティ値が注記されたツリーに従って、表現のベースとなる整形構造体を生成
- 整形構造体を対象メディアに転送して実際の表現を行う
スタイルシートの構文
- CSS は「どの要素の」「どのような表現性質を」「どんな値に設定するか」の３つでスタイル適用の規則を示す
- 「どの要素の」 → セレクタ
- 「どのような表現性質を」 → プロパティ
- 「どんな値に設定するか」 → (プロパティの) 値
- 例 )
XHTML 文書への読み込み
- スタイルシートをXHTML 文書に読み込む方法は以下の３つ
- link 要素によって外部スタイルシートを結びつける
<link rel = "stylesheet" type = " text/css " href = " ( CSS の URI ) " />
- style 要素にその文書に適用するスタイル規則を記述
<style type = "text/css">
h1 { font-size : 150% }
</style>
- 対象要素にstyle 属性を使ってスタイル宣言を記述
<h1 style = "font-size : 150% "> ...
- 複数の文書に共通するスタイルを外部スタイルシートにまとめてlink 要素で組み込む
→ スタイルの一貫性を保ち、メンテナンスが容易になる
＠ 規則
@ import " generic .css " ;
@ media
@ media screen {
body { font-size : 1em }
}
@ media print {
body { font-size : 1opt }
}
@ charset
- スタイルシート中に日本語などを記述する場合に文字コードを指定する
@ charset " Shift_JIS " ;
セレクタ
- セレクタとは…
XHTML で記述した機能や意味のブロックをスタイルシートに結びつけ、具体的な表現として利用者に提供する媒介
- セレクタ
- 要素型セレクタ
- クラスセレクタ
- ID セレクタ
- 子孫セレクタ
- 子要素,隣接セレクタ
- 属性セレクタ
- 擬似クラスセレクタ
- 擬似要素セレクタ
名前をセレクタとして用いる
h1 { font-size : 175% }
h1, h2, h3, h4 { font-family: sans-serif} /* グループ化 */
* { color: black } /* ユニバーサルセレクタ */
クラスセレクタ
/* class = " example " を持つ p 要素にマッチ */
p.example { background-color: #FFFF90 ; }
/* class = " example " を持つ全ての要素にマッチ */
*.example { background-color: #FFFF90 ; }
.example { background-color: #FFFF90 ; }
ID セレクタ
/* いずれも同じ要素にマッチする */
div#header { color : navy }
*#header { font-size : 1em }
#header { font-align : right }
名前を組み合わせるセレクタ
- CSS では、ツリー上の位置関係を利用してスタイル適用対象を指定することができる
- 簡易要素ツリー。兄弟レベルは左にあるものが文書中で先に出現するものとする
名前を組み合わせるセレクタ - 子孫セレクタ -
- 子孫セレクタ
要素の親子関係に基づいて対象要素を決める。任意のセレクタを空白文字で結合して " A B " の形で列挙
/* adress 要素内の em 要素の文字色を緑に */
adress em { color : green }
名前を組み合わせるセレクタ - 子孫セレクタ ( 2 ) -
- 子孫セレクタ
あるクラス名を持つ要素に特定して指定したい場合にも使える
/* toc というクラス名を持つ ol 要素の子孫である li 要素に対して枠を表示 */
ol.toc li { border : 1px gray solid }
名前を組み合わせるセレクタ - 子要素セレクタ -
- 子要素セレクタ
要素 B が要素 A の直接の子要素のものだけを指定したいときに " A > B " の形で指定
/* toc というクラス名を持つ ol 要素の直接の子要素である li 要素のみフォントを大きく */
ol.toc > li { font-size: 1.2em }
名前を組み合わせるセレクタ - 隣接セレクタ -
- 隣接セレクタ
要素 A と要素 B が文書ツリー上で同じ親を持ち、この順序で連続している場合 " A + B " の形で指定
B にスタイルが適用される
/* 大見出し ( h1 ) の直後にくる段落 ( p ) の前に広めのマージンをとる */
h1 + p { margin-top : 1.5em }
属性セレクタ
- class 属性、id 属性だけでなく、要素が持つ属性一般を基準にしてスタイルを適用
- 属性セレクタは、 [ ] 内に属性のマッチングパターンを記述して示す
| [ attr ] |
要素が属性 attr を持っている場合にマッチ |
| [ attr = value ] |
要素の属性 attr の値が value に等しい場合にマッチ |
| [ attr ~= value ] |
要素の属性 attr の値が空白で区切られたリストで、そのうち１つが value に等しい場合 |
| [ attr |= value ] |
要素の属性 attr の値がハイフンで複数の値からなりその最初が value に等しい場合 |
/* lang 属性が英語と指定されている段落のフォントを欧文フォントで表示 */
p[ lang |= "en" ] { font-family : "Times" , serif }
擬似クラスと擬似要素
- 文書ツリー以外の条件によってスタイルを設定したいときに用いる
- 擬似クラスセレクタ
- ハイパーリンクのアンカーは通常、リンク先が未訪問か訪問済みかで異なるスタイルを用いる。これは文書ツリー上では表現できないので擬似クラス : link をセレクタとしてスタイルを宣言する
a : link { color : blue }
スタイル設計の効率的手順
- 一般にスタイルの設計は以下の順で行うと良い
- 全体に共通する要素型セレクタなどによる定義を行う
- 文書の大きな機能ブロックを表す要素型や ID セレクタなどのスタイル規則を定義
- 各機能ブロック内のサブブロックのスタイル規則を子孫セレクタなどを利用して定義
カスケード処理
- CSS では複数のスタイルシートを組み合わせて利用可能
- スタイルシートには３つの出処 ( origins ) がある
- 制作者スタイルシート
HTML 文書でスタイルシートを文書内に埋込んだり、外部リンクで読込ませて適用する
- ユーザスタイルシート
ユーザがスタイルシートを含むファイルを指定できる
- デフォルトスタイルシート
ブラウザなどが標準スタイルとして内蔵する
- 複数のスタイルシートから規則を読み込んだ結果、同じ要素の同じプロパティのスタイル宣言に競合が生じる場合がある
→ カスケードというルールに基づいて順位付けを行い、どれを適用するかを決定する
カスケードの順序
- 第１キー : 宣言の重要度と出処の重み ( 以下、優先度の低い順に示す )
- デフォルトスタイルシート
- ユーザスタイルシート
- 制作者スタイルシート
- 制作者 ( !important )
- ユーザ ( !important )
- 第２キー : セレクタの特定度による順位付け ( 次ページ参照 )
- 第３キー : スタイルシートの読み込み順とその中での宣言順序
- キーによる昇順の並び替え → 一番最後になるものが対象プロパティの値
- 同じ順位を持つ宣言が複数ある場合は、あとで読込まれた宣言が適用される
- 共通するスタイルを定義したシートを先に読込み、個別文書のスタイルシートで必要なスタイルを上書き、といったことが可能
セレクタの特定度による順位付け
- 様々なセレクタの中でも、個別の要素を特定できるセレクタが優先すべき規則として扱われるべきである
- 以下、特定度の計算方法を示す
- if ( style 属性に記述された宣言である ) a を 1 else b を 0 とする
- セレクタ内の ID セレクタの数を b とする
- セレクタ内のその他の属性及び擬似クラスの数を c とする
- セレクタ内の要素型名および擬似要素の数を d とする
- a , b , c , d の数をこの順に連結する
| セレクタ | style 属性 | id 数 | 属性数 | 要素型数 | 特定度 |
| em | 0 | 0 | 0 | 1 | 0001 |
| p.example | 0 | 0 | 1 | 1 | 0011 |
| #header | 0 | 1 | 0 | 0 | 0100 |
| ( style 属性 ) | 1 | 0 | 0 | 0 | 1000 |
