この規格ページの目次
3
X 4168 : 2004
0.2.33 スタイルシート (style sheet) 規則の集まり。
0.2.34 UA 利用者エージェント(User Agent)の短縮形であって,ウェブブラウザ又はウェブクライアント
であることが多い。
0.2.35 利用者 (user) 文書可視化の対象となる人。読者(0.2.27)と同義。
0.2.36 重み (weight) 規則の優先度。
この規格においては,一重引用符('...')は,HTML及びCSSの抜粋を引用する。
1. 基本概念
簡単なスタイルシートを設計することは容易であり,HTMLを少し知っていて,幾つかの
基本的なデスクトップ出版用語を知っているだけでよい。例えば,'H1'要素のテキストカラーを青にする
には,次のとおり記述すればよい。
H1 [{ color: blue}]
この例は,簡単なCSS規則であって,規則は二つの主要部分,つまり選択子('H1')及び宣言('color: blue')
から成る。宣言は二つの部分,つまり特性('color')及び値('blue')をもつ。この例は,HTML文書を可視化す
るために必要な特性の一つだけに影響を与えようとするものであるが,それだけで一つのスタイルシート
として特徴付けられている。他のスタイルシートと組み合わせれば(CSSの基本的な特徴の一つが,スタ
イルシートを組み合わせること。),文書の最終表示を決定する。
選択子は,HTML文書とスタイルシートとの間のリンクであり,すべてのHTML要素型は,選択子にな
り得る。HTML要素型は,HTML規定(8.の[2]を参照)の中で定義される。
'color'特性は,HTML文書の表示を決定する約50個の特性の一つとする。この規格は,特性及びそれが
とる値のリストを定義する。
HTMLの文書作成者は,その文書に固有のスタイルを推奨しようとする場合だけ,スタイルシートを書
く必要がある。各UA("ウェブブラウザ"又は"ウェブクライアント"であることが多い。)は,適当ではあ
るがありきたりの方法で文書を表示するデフォルトのスタイルシートをもっている。附属書Aは,HTML
2.0規定(8.の[3]を参照)が推奨するとおりにHTML文書を表示するスタイルシートの例を示す。
CSS1言語の形式文法については,附属書Bが規定する。
1.1 HTMLへの組込み
スタイルシートが表示に影響を与えるためには,UAは,スタイルシートの存
在を知らなければならない。HTML規定(8.の[2]を参照)が,どのようにしてHTMLをスタイルシートと
をリンクさせるかを規定する。したがって1.1は,参考であって規定ではない。
<HTML>
<HEAD>
<TITLE>title</TITLE>
<LINK REL=STYLESHEET TYPE="text/css"
HREF="http://style.com/cool" TITLE="Cool">
<STYLE TYPE="text/css">
@import url(http://style.com/basic);
H1 [{ color: blue}]
</STYLE>
</HEAD>
<BODY>
<H1>Headline is blue</H1>
――――― [JIS X 4168 pdf 6] ―――――
4
X 4168 : 2004
<P STYLE="color: green">While the paragraph is green.
</BODY>
</HTML>
この例は,スタイルとHTMLとを組み合わせる次の四つの方法を示す。
a) 外部スタイルシートをリンクする'LINK'要素を用いる。
b) 'HEAD'要素の中の'STYLE'要素を用いる。
c) SSの'@import'記法を使用してインポートしたスタイルシートを用いる。
d) 'BODY'の中の要素の'STYLE'属性を用いる。
オプションd)は,スタイルを内容と混在させ,これまでのスタイルシートにあった利点を損ねる。
'LINK'要素は,読者が選択できる別のスタイルシートを参照し,インポートしたスタイルシートは,ス
タイルシートの残りと自動的にマージされる。
従来より,UAは,未知のタグに対しては何もせずに無視してきた。その結果,古いUAは,'STYLE'
要素を無視するが,その内容は文書本体の部分として扱われ,そのまま可視化される。切り替えの際には,
'STYLE'要素を,SGMLコメントを用いて隠してもよい。
<STYLE TYPE="text/css"><!--
H1 [{ color: green}]
--></STYLE>
'STYLE'要素は,(8.の[2]で定義するとおり)DTDの中で"CDATA"として宣言されるので,適合SGML
パーサは,このスタイルシートを削除されるはずのコメントであるとは判断しない。
1.2 グループ化
スタイルシートのサイズを小さくするために,選択子をコンマ区切りのリストでグル
ープ化できる。
H1, H2, H3 [{ font-family: helvetica}]
同様に,宣言もグループ化できる。
H1 [{
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}]
固有のグループ化構文をもつ特性もある。
H1 [{ font: bold 12pt/14pt helvetica}]
この例は,その前の例に等価となる。
1.3 継承
最初の例(1.の例)において,'H1'要素のカラーは青に設定された。'H1'要素の中に強調要素
があるとしよう。
<H1>The headline <EM>is</EM> important!</H1>
'EM'要素にカラーが指定されていなければ,強調された"is"は,親要素のカラーを継承する。つまり,そ
れも青く表示される。'font-family', 'font-size'などの他のスタイル特性も同様に継承される。
"デフォルト"のスタイル特性を文書に設定するために,すべての可視要素を下位にもつ要素に対して特
――――― [JIS X 4168 pdf 7] ―――――
5
X 4168 : 2004
性を設定できる。HTML文書では,'BODY'要素がこの機能を果たす。
BODY [{
color: black;
background: url(texture.gif) hite;
}]
たとえ文書作成者が'BODY'タグを省略しても(文法には違反しない),これは動作する。それは,HTML
パーサが欠けたタグを推定することによる。この例は,テキストカラーを黒に,背景をある画像に設定す
る。もしその画像がなければ,背景は白になる。(これに関する詳細は,5.3を参照されたい。)
親要素から子要素に継承されないスタイル特性もある。ほとんどの場合,それは直感に基づく。例えば,
'background'特性は継承しないが,親要素の背景はデフォルトで透けて見える。
特性の値が,他の特性に対するパーセントの値になることも多い。
P [{ font-size: 10pt}]
P [{ line-height: 120%}]
パーセントの値を使える各特性に関しては,それがどの特性を参照するかを定義する。'P'の子要素は,
percentageではなく,'line-height'の計算された値(つまり12pt)を継承する。
1.4 選択子としてのクラス
要素に対する制御の粒度を高めるために,新しい属性'CLASS'がHTMLに
追加された(8.の[2]を参照)。'BODY'要素の中のすべての要素はクラスに分類でき,スタイルシートの中
でそのクラスを指定できる。
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
H1.pastoral [{ color: #00FF00}]
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=pastoral>Way too green</H1>
</BODY>
</HTML>
通常の継承規則は,クラス分けされた要素に適用する。それらは,文書構造の親要素から値を継承する。
選択子の中でタグ名を省略することによって,同一クラスのすべての要素を指定できる。
.pastoral [{ color: green}]
選択子ごとに一つだけのクラスを指定できる。したがって 'P.pastoral.marine'は,CSS1では無効な選択子
となる。(1.6に示す文脈依存選択子は,単純選択子ごとに一つのクラスをもつことができる。)
CSSは,CLASS属性に大きな力を与えているので,多くの場合,どのHTML要素にそのクラスが設定
されているかはまったく問題でない。どの要素に対してもそれ以外の要素をエミュレートさせることがで
きる。この力の引継ぎは推奨しない。それは,普遍的な意味をもつ構造(HTML要素)の水準をそれが削
除することによる。CLASSに基づく構造は,制限付きドメインの中だけで有効であり,そこではクラスの
意味は相互に承認されてきた。
――――― [JIS X 4168 pdf 8] ―――――
6
X 4168 : 2004
1.5 選択子としてのID
HTML (8.の[2]を参照)は,文書に関して一意な値をもつことが保証されてい
る'ID'属性も導入している。したがってそれは,スタイルシートの選択子として特に重要であり得る。それ
は,'#'を前置して指定できる。
#z98y [{ letter-spacing: 0.3em}]
H1#z98y [{ letter-spacing: 0.5em}]
<P ID=z98y>Wide text</P>
この例では,最初の選択子は,'ID'属性の値のために,'P'要素と一致する。2番目の選択子は,要素型('H1')
及びID値の両方を指定し,その結果,'P'要素とは一致しない。
ID属性を選択子として用いることによって,スタイル特性を要素ごとに設定できる。スタイルシートは
文書構造を活用して設計されてきたが,この機能は,HTMLの構造要素の利点を用いることなく,キャン
バスにうまく表れる文書を,文書作成者が生成することを可能にする。スタイルシートのこの利用は,推
奨しない。
1.6 文脈依存選択子
継承は,CSS設計者のタイプ入力を削減する。すべてのスタイル特性を設定する
代わりに,デフォルトを生成し,例外をリストできる。'H1'の中の'EM'要素に別のカラーを与えるために,
次の指定を行える。
H1 [{ color: blue}]
EM [{ color: red}]
このスタイルシートが有効である場合,'H1'の内外のすべての強調節は赤になる。'H1'の中の'EM'要素だ
けを赤にしたければ,次の指定が可能になる。
H1 EM [{ color: red}]
選択子は開いている要素のスタック上での検査パターンであり,この形式の選択子は文脈依存選択子と
呼ばれる。文脈依存選択子は,空白によって分離された複数の単純選択子(これまでに記述した選択子は,
すべて単純選択子であった。)から成る。最後の単純選択子に一致する要素(この場合,'EM'要素)だけが,
検査パターンが一致する場合に限って,指定される。CSS1の文脈依存選択子は,先祖の関係を捜すが,
他の関係(例えば,親子関係)は,今後の改訂で導入するかもしれない。この例では,'EM'が'H1'の子孫で
ある場合,つまり'EM'が'H1'要素の内部にある場合に,検査パターンが一致する。
UL LI [{ font-size: small}]
UL UL LI [{ font-size: x-small}]
ここでは,最初の選択子は,少なくても一つの先祖'UL'をもつ'LI'要素に一致する。2番目の選択子は,
最初の選択子のサブセット,つまり少なくても二つの先祖'UL'をもつ'LI'要素に一致する。その競合は,2
番目の選択子が,もっと長い検査パターンをもつので固有性がより高いことによって解決される。これに
関する詳細は,段階順序(3.2)を参照されたい。
文脈依存選択子は,要素型,CLASS属性,ID属性又はこれらの組合せを探すことができる。
DIV P [{ font: small sans-serif}]
.reddish H1 [{ color: red}]
#x78y CODE [{ background: blue}]
DIV.sidenote H1 [{ font-size: large}]
最初の選択子は,先祖の中に'DIV'をもつすべての'P'要素と一致する。2番目の選択子は,クラス'reddish'
である先祖をもつすべての'H1'要素と一致する。3番目の選択子は,'ID=x78y'をもつ要素の子孫であるすべ
――――― [JIS X 4168 pdf 9] ―――――
7
X 4168 : 2004
ての'CODE'要素と一致する。4番目の選択子は,クラス'sidenote'である先祖'DIV'をもつすべての'H1'要素と
一致する。
幾つかの文脈依存選択子は,グループにまとめることができる。
H1 B, H2 B, H1 EM, H2 EM [{ color: red}]
これは,次に等価となる。
H1 B [{ color: red}]
H2 B [{ color: red}]
H1 EM [{ color: red}]
H2 EM [{ color: red}]
1.7 コメント
CSSスタイルシートにおけるテキストのコメントは,Cプログラム言語(8.の[7]を参照)
のコメントに類似している。
EM [{ color: red}]
コメントは,入れ子にできない。CSS1パーサにとっては,コメントは空白に等価とする。
2. 擬似クラス及び擬似要素
CSS1においては,スタイルは通常,文書構造の中の要素位置に基づいて
要素に付与される。多様なスタイルにもこの簡単なモデルで充分であるが,幾つかのよく使う組み効果は
カバーできない。疑似クラス及び疑似要素の概念は,CSS1での指定を拡張して,外部情報がフォーマッ
ト化処理に影響を与えることを可能にする。
疑似クラス及び疑似要素は,CSS選択子で用いることができ,HTMLソースには存在しない。スタイル
シートにおける指定に用いるために,幾つかの条件のもとで,UAが疑似クラス及び疑似要素を"挿入"す
る。それらは"クラス"及び"要素"とよばれるが,それは,その振る舞いを記述する便利な方法であること
による。もっと細かくは,仮想タグ列がその振る舞いを定義する。
疑似要素は,要素の一部を指定するのに用い,疑似クラスは,スタイルシートをいろいろな要素型の中
で区別可能にする。
2.1 アンカ擬似クラス
UAは通常,新しくたどられたアンカを古いものと区別して表示する。CSS1で
は,これを'A'要素の中の疑似クラスが扱う。
A:link [{ color: red}]
A:visited [{ color: blue}]
A:active [{ color: lime}]
'HREF'属性をもつすべての'A'要素は,これらのグループの一つ(一つだけ)に入る(つまり,目標アン
カは影響を受けない。)。UAは,要素を'visited(たどり済み)'から'link(リンク)'に,ある時間の後に移
ることを選択してよい。'active(活性)'リンクは,現在読者が(例えば,マウスボタン押下によって)選
択中であるものとする。
アンカ疑似クラスのフォーマット化は,クラスが手動で挿入された場合に類似している。UAは,アン
カ疑似クラスの遷移によって現在表示している文書を,再フォーマット化する必要はない。例えば,スタ
イルシートは,文法に違反せずに,'active'リンクの'font-size'は'visited'リンクのそれより大きくすることを
指定できるが,読者が'visited'リンクを選択するとき,UAが動的に文書を再フォーマット化する必要はな
い。
疑似クラス選択子は,通常のクラスと一致せず,逆も成り立つ。したがって,次の例のスタイル規則は
どんな影響も与えない。
――――― [JIS X 4168 pdf 10] ―――――
次のページ PDF 11
JIS X 4168:2004の国際規格 ICS 分類一覧
- 35 : 情報技術.事務機械 > 35.240 : 情報技術(IT)の応用 > 35.240.30 : 情報,ドキュメンテーション及び出版業務におけるITの応用
JIS X 4168:2004の関連規格と引用規格一覧
- 規格番号
- 規格名称