Hop step XHTML―ホップ ステップ XHTML

Section 24:スタイルシートモジュール・ベースモジュール

 本節では,スタイルシートを埋め込む style 要素と,相対指定時の基準 URI を指定する base 要素について説明する。

スタイルシートの埋め込み:style 要素

 style 要素は,head 要素の内容として現れ,スタイルシートを記述するためのものである。基本は,Let's begin XHTML の Section 16 で紹介した。

内容モデル
#PCDATA
テキスト

次のような属性がある。

style 要素の属性
属性名属性値備考
国際化に関する属性
title 属性
typeメディアタイプ必須:スタイルシート言語のメディアタイプ
mediaメディアそのスタイルシートが,どんなメディア向けかを表すキーワード
xml:spaceキーワードpreserve”に固定される。明示的な指定は必要ない。

ここで,xml:space 属性は,この要素を使用する際には特に気にしなくてもよい。

 必須の type 属性には,スタイルシート言語のメディアタイプを指定する。CSS の場合は,“text/css”となる。

 media 属性には,そのスタイルシートをどのメディアに対して適用させるかを指定できる。値は,Section 22 であげたものである。

 style 要素でのスタイルシートは,link 要素による外部のスタイルシートの読み込みと順序が問題になることがある。CSS の場合は,カスケーディングの仕組みがはたらく。基本となるスタイルを link 要素で取り込んでおいて,その XHTML ファイル内だけ特別な指定をする場合には,すべての link 要素での読み込みのあとに style 要素を記述することになる。

 次に掲げるのは,画面の場合と印刷の場合で異なるスタイルを適用させる,2 つの style 要素である(ひとつのファイル中に複数の style 要素があってもかまわない)。

<style type="text/css" media="screen">
body { background-color: #FFC; }
</style>
<style type="text/css" media="print">
body { background-color: #FFF; }
</style>

 ここで,もう一度注意を促しておくと,XHTML では,style 要素の内容として XML のコメント“<!-- ... -->”が出現すると,本物のコメントとして扱われる。HTML 4 で許されていた,“未対応ブラウザ対策”としてのコメントアウトは,XHTML ではできない。もし,HTML 4 のように,style 要素の内容をコメントとして記述すると,要素の内容が何もないことと同じになってしまう。

 また,XHTML では,style 要素の内容に半角不等号「<」「>」およびアンパサンド「&」が現れたら,それぞれ“&lt;”“&gt;”“&amp;”と参照しなければならない(逆に,HTML 4 では,参照せずそのまま書かなくてはならない)。特に,CSS2 での子要素セレクタ(シンプルセレクタを「>」で結ぶ;Let's begin CSS の“2.2 下位要素セレクタ,子要素セレクタ”参照)を使用する場合は注意が必要である。

 HTML 4 と XHTML では,以上のような点で style 要素の処理のされ方が異なっているので,不安であれば外部のファイルとして用意しておくほうが無難である。

相対指定時の基準 URI:base 要素

 URI を相対指定するときは,既定ではその文書の URI が基準になる。このときの相対指定時の基準 URI を特に指定するのが base 要素である。head 要素の内容として 1 つだけ出現することが許されている。内容をもたず,必須の href 属性に基準 URI を絶対指定で与える。

内容モデル
EMPTY
base 要素の属性
属性名属性値備考
hrefURI必須:その文書の基準 URI を絶対指定で与える

 たとえば,現在の URI が“http://www.tg.rim.or.jp/~hexane/ach/hsxh/hsxh24.htm”であるとき,基準 URI が指定されていなければ,相対 URI“index.htm”は,“http://www.tg.rim.or.jp/~hexane/ach/hsxh/index.htm”を指す。しかし,

<base href="http://www.tg.rim.or.jp/~hexane/ach/" />

と指定されていた場合は,“index.htm”は,“http://www.tg.rim.or.jp/~hexane/ach/index.htm”を指すようになる。