ナスカとアルテミスでスタイルシートを適用させる際の注意点

以下の記述は現在(2004-07-09)解決されています。したがって参考に留めてください。

ナスカ及びアルテミスの広告はhtmlファイルの最後に<body>広告内容</body>が挿入されるので、下記のように<body>が2つ出現します。

<!DOCTYPE 〜>
<html lang="ja">
<head>
…
<title>〜</title>
</head>
<body>
…
</body>
</html><body>←2つ目の<body>
広告内容
</body>

そのために一部のブラウザでスタイルシートの適用に問題が起こります。以下の例をご覧ください。

html記述例

…
<body id="hogehoge">
<div id="main">
<h1>あかさたな</h1>
<h2>はまやらわ</h2>
…

スタイルシート記述例

body {/* body要素への指定 */
 background-color:#999999; /* 適用される */
}
#hogehoge {/* body要素のIDセレクタへの指定 */
 background-color:#ccccff; /* 無効 */
}
h1 {/* h1要素への指定 */
 background-color:#ff0000; /* 適用される */
}
#hogehoge h1 {/* body要素のIDセレクタの子孫セレクタへの指定 */
 background-color:#00ff00; /* 無効 */
}
#main h2 {/* div要素のIDセレクタの子孫セレクタへの指定 */
 background-color:#00ffff; /* 適用される */
}

例のようなhtmlとスタイルシートの記述を行った場合、Macintosh版Internet Explorerで問題が生じます。

body要素に直接指定したスタイルシートは適用されますが、body要素のクラスセレクタ・IDセレクタ及びそれぞれの子孫セレクタへの指定が無効になってしまうのです。他のブラウザ(Mozilla1.3.1・Netscape7.x・Netscape Communicator 4.x・iCab・Opera6.x)では問題ないのでMacIE固有の問題だと思われます。が、MacOS9以下の環境でもっとも多く使用されているブラウザのため、Macintosh向けのwebページでは問題に対応することが望ましいと考えました。

暫定的な回避方法は以下のようなものを考えました。

1.作成したhtmlファイルのbody要素のclassid属性を取り除き、直後に同様のclassid属性を指定したdiv要素を加える

加工前

…
<body id="index">
<h1>MacDeNazca</h1>

加工後

…
<body>
<div id="index">
<h1>MacDeNazca</h1>

この場合スタイルシートの記述は書き換える必要がないのが大きな利点です。

もっと単純に、body要素に指定していたclassid属性をhtml要素に移すことでも対応できます。

ただし、Netscape Communicator 4.xやiCabはhtml要素へのクラスセレクタ・IDセレクタ及びそれぞれの子孫セレクタへの指定に対応できません。Windows版Internet Explorerの対応状況も不明です。

加工前

<!DOCTYPE 〜>
<html lang="ja">
…
<body id="index">
<h1>MacDeNazca</h1>
…

加工後

<!DOCTYPE 〜>
<html lang="ja" id="index">
…
<body>
<h1>MacDeNazca</h1>
…

2.スタイルシートを分割するなど、body要素のクラスセレクタ・IDセレクタによる区別を行わないサイトデザインに変更する

当サイトでは1.の方法で対応しました。

無料レンタル無料ホームページ無料オンラインストレージ