XHTML/CSS・トップ | XHTML・目次

●CDATAセクションの考察

 XHTML文書の中にCSSソースを組み込む場合はCDATAセクションが入ったstyle要素を使いますが、XHTML文書同様、CDATAセクションも拡張子と密接な関係があります。

【XHTML】

<style type="text/css"><![CDATA[
body {
  background-color: #000000;
  color: #ffffff;
}
]]></style>

 この書式でウィンドウズ版IE(v6.0)、Netscape (v7.1)、Mozilla(v1.7.12)、Firefox(v1.5)、Opera(v8.50)のブラウザで確認するとCSSのスタイルが反映されていません。いっぽう、この書式で「html」の拡張子を「xhtml」の拡張子に変更すると、ウィンドウズ版IE(v6.0)以外は、Netscape、Mozilla、Firefox、Operaで反映されています。上記のCDATAセクションの使い方は文法的に正しいのですが、XHTML文書の現状は“XML形式のHTMLファイル”です。XML形式のHTMLファイルとはXML (XHTML)の文法で書かれ、かつ、拡張子が「html」のファイルのことです。厳密な意味でのXML文書ではありません。

 次に以下のようにHTMLのコメント用に使われる「<!--」「-->」の記号でCSSソースを囲み、拡張子が「html」のファイルの場合、ウィンドウズ版IE(v6.0)のブラウザでは表示されますが、そのほかのNetscape (v7.1)、Mozilla(v1.7.12)、Firefox(v1.5)、Opera(v8.50)のブラウザでは反映されません。ただし、拡張子を「xhtml」に変更するとウィンドウズ版IE(v6.0)以外のNetscape (v7.1)、Mozilla(v1.7.12)、Firefox(v1.5)、Opera(v8.50)のブラウザで、反映されています。

【XHTML】

<style type="text/css"><![CDATA[
<!--
 body {
  background-color: #000000;
  color: #ffffff;
}
-->
]]></style>

 XHTML文書ではstyle要素内に「<」、「&」、「--」、「<!--」 などの記号を含ませると、特殊な記号として解釈され、エラーとなるとされていますが、実際はブラウザの種類およびバージョンで確認してみないとわからない部分があります。(script要素にCDATAセクションを使う場合も同じです。)

【参考】

 以下のようにHTMLと同じようにCDATAセクションの入らないstyle要素を使って指定するとXML形式のHTMLファイルの場合だと、どのブラウザでも表示されますが、拡張子を「xhtml」に変更するとNetscape (v7.1)、Mozilla(v1.7.12)、Firefox(v1.5)、Opera(v8.50)の各ブラウザでスタイルが反映されていません。

【XHTML】

<style type="text/css">
<!--
body {
  background-color: #000000;
  color: #ffffff;
}
-->
</style>

【まとめ】

 総合するとCSSはXHML文書の内部ではなく、CSSファイルの外部スタイルシートとして使うことを推奨します。特殊な記号を使った場合でもエラーの心配がなく、現状では最も無難で確実な方法だと思います。または、上記のようにCDATAセクションの入らない、かつ、コメントタグ(<!-- -->)が含まれたstyle要素でCSSソースを組み込んでください。もし、CDATAセクションが入ったstyle要素を使う場合は種類の異なるブラウザをインストールして確認することをおすすめします。また、特殊な記号を入れないようにしてください。

【参考】

 ブラウザのダウンロードは別項の「種類の異なるブラウザをインストールする」をご参照ください。種類の異なるブラウザをインストールして使ってもウィンドウズ版IEと共存が可能ですが、他ブラウザを「既定のブラウザ」に指定すると、HTMLファイルおよび「GIF」「JPEG」などの画像ファイルがそのブラウザ特有のアイコンに変わってしまう場合がありますので注意してください。(変化した場合、ブラウザの設定を変更することにより元に戻すことが可能です。)

※CDATAセクションの検証にはXHTML 1.0 Transitiona と XHTML1.1のDTDで確認しました。

XHTML/CSS・目次 | XHTML・目次

Copyright (C) 2006-2007 http://www.xml.vc/