本節では,スタイルシートを埋め込む style
要素と,相対指定時の基準 URI を指定する base
要素について説明する。
style
要素 style
要素は,head
要素の内容として現れ,スタイルシートを記述するためのものである。基本は,Let's begin XHTML の Section 16 で紹介した。
#PCDATA
次のような属性がある。
属性名 | 属性値 | 備考 |
---|---|---|
国際化に関する属性 | ||
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
要素の内容に半角不等号「<
」「>
」およびアンパサンド「&
」が現れたら,それぞれ“<
”“>
”“&
”と参照しなければならない(逆に,HTML 4 では,参照せずそのまま書かなくてはならない)。特に,CSS2 での子要素セレクタ(シンプルセレクタを「>
」で結ぶ;Let's begin CSS の“2.2 下位要素セレクタ,子要素セレクタ”参照)を使用する場合は注意が必要である。
HTML 4 と XHTML では,以上のような点で style
要素の処理のされ方が異なっているので,不安であれば外部のファイルとして用意しておくほうが無難である。
base
要素 URI を相対指定するときは,既定ではその文書の URI が基準になる。このときの相対指定時の基準 URI を特に指定するのが base
要素である。head
要素の内容として 1 つだけ出現することが許されている。内容をもたず,必須の href
属性に基準 URI を絶対指定で与える。
EMPTY
属性名 | 属性値 | 備考 |
---|---|---|
href | URI | 必須:その文書の基準 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
”を指すようになる。