戻る

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要素を使う場合は種類の異なるブラウザをインストールして確認することをおすすめします。また、特殊な記号を入れないようにしてください。

XHTML文書と外部スタイルシートの作り方
inserted by FC2 system