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

●XHTML文書におけるJavaScriptの注意点

 XHTML(XML)+CSS環境のJavaScriptとして「Ajax(エイジャックス)」がありますが本稿は割愛します。ここでは既存のJavaScriptソースをXHTML文書(+CSS)で使う際の注意点を掲載します。

■meta要素でスクリプト言語を指定する

 CSSの内部スタイルシートとして、style属性を利用し、要素に直接スタイルを適用する場合、HTML(XHTML)ソースの<head>〜</head>間にmeta要素でスタイルシート言語を指定しますが、スクリプト言語も同じように、meta要素で指定します。どちらも指定しなくてもデフォルトでスタイルシート言語、スクリプト言語として認識されますが、指定するのが正式です。(指定しなくてもエラーとなりませんが、指定しましょうという意味です。)

【HTML】↓

<meta http-equiv="content-script-type" content="text/javascript">

【XHTML】↓

<meta http-equiv="content-script-type" content="text/javascript" />

 style属性を使って、要素に直接スタイルを適用させる場合に使うmeta要素と併せると次のようになります。

<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />

■「language」属性のみの指定はエラーまたは廃止

 現在、HTMLとXHTML文書タイプにおいて、「type」属性はscript要素の上で必要とされており、次のように「language」属性を使うと正式なHTML文書、XHTML文書においてはエラーとなります。

【スクリプト例1×】

<script language="JavaScript" src="スクリプト呼び出しパス(URL)"></script>

【スクリプト例1○】

<script type="text/javascript" src="スクリプト呼び出しパス(URL)"></script>

【スクリプト例2×】

<script language="JavaScript">
<!--
 JavaScriptのソース
// -->
</script>

【スクリプト例2○】

<script type="text/javascript">
<!--
 JavaScriptのソース
// -->
</script>

 以下のように「language」属性と「type」属性の両方を同時指定したとします。

<script language="Javascript" type="text/javascript">
<!--
 JavaScriptのソース
// -->
</script>

 この方法だと、XHTML 1.0 StrictとXHTML 1.1および、XHTML BasicのDTD(文書型定義)ではエラーとなります。「language」属性はHTML 4.01 、XHTML 1.0 のTransitional DTDまたは、Frameset DTDのみ使用できることになっていますが、「language」属性の単独指定はすべてのDTDで文法的にエラーです。必ず、「type」属性を使って指定してください。

※「type」属性はスクリプト言語のMIMEタイプを指定します。(MIMEはサーバーサイドの設定です。)当サイトは「type」属性の単独指定を推奨します。

■CDATAセクションの注意

 スクリプトを次のようにCDATAセクション(<![CDATA[ 〜 ]]>)で囲ったscript要素はエラーとなりますのでご注意ください。

【スクリプト例1×】

<script type="text/javascript"><![CDATA[
<!--
 JavaScriptのソース
-->
]]></ script>

【スクリプト例2×】

<script type="text/javascript"><![CDATA[
 JavaScriptのソース
]]></ script>

 ブラウザによっては、うまく表示されても他ブラウザで表示されないケースがありますので、CDATAセクションの形にするときは注意しましょう。

【解説】

 エラーを回避するもっとも有効な手段はJavaScriptのソースを「js」の拡張子の別ファイル(JSファイル)として、外部に置くのがベターです。または、CDATAセクションを入れないで記述するしかありません。XHTMLのDTDで作成する場合、ホームページ作成ソフトによっては強制的にCDATAセクションの形のソースとなってしまう場合がありますが工夫して対応するしかありません。なお、JSファイルはウィンドウズ環境だとJavaScriptと互換性のある「JScript」ファイルとなります。JSファイルを呼び出すソースは以下のように記述します。

■<body>〜</body>間、または<head>〜</head>間

<script type="text/javascript" src="呼び出し先のファイル名またはパス"></script>

【関連ページ】

【最後に】

 厳密にはXHTML環境のstyle要素、script要素に、[CDATA]を使わなければならないのですが、含まれる記号によってはうまく反映されない、動作しないなどのエラーとなる場合があります。その点、外部ファイルに記載する分には特殊な記号を使っても問題は起こりません。もし、CDATAセクションを使う場合であっても最終的にはウィンドウズ版IEのブラウザ以外に「Firefox」または「Opera」のブラウザで確認するように心がけ、マークアップ検証をするといいでしょう。また、JavaScriptには幾つかのバージョンがありますが、本稿はバージョンについて割愛します。(JavaScript1.0〜JavaScript1.5)

XHTML/CSS・目次 | XHTML・目次

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