BODY内にCSS「a:hover」を使いたい

質問

「HEAD内の書き換えは不可」
「スクリプト（JavaScriptなど）言語使用不可」
という条件がある中で、
オンマウスした時にフォント色と画像の変化をしたいのです。

BODYタグ内で、スタイルシートの「a:hover」を設定する方法、
その他でも可能になる方法があれば教えてください。

また、<style type="text/css">宣言はHEAD内にということですが、
無理やりBODY内に<style type="text/css">宣言した場合
どのような現象が起きるのでしょうか？
（実際にIE6でこの方法をやってみましたが、レイアウトのくずれやおかしな挙動はありませんでした）

よろしくお願いします。

回答No.1

quads · ベストアンサー

> 「HEAD内の書き換えは不可」
body要素内しか編集できないのですね。

> 「スクリプト（JavaScriptなど）言語使用不可」
これはどういう制限でしょうか。
イベント属性すら利用できないと考えてよいのでしょうか。

:hover 疑似クラスに相応する効果を実現するには、
:hover 疑似クラスを指定できる形でスタイルシート指定をする ⇒ つまりセレクタを用いた指定（style 要素、外部スタイルシート）を行うか、
onmouseover, onmouseout などのイベント属性を指定する必要があります。

style 要素は head 要素内、外部スタイルシート参照も link 要素あるいは style 要素内記述となるので head 要素内記述ができないと実現できません。
しかしながら、以下に示すような実態もあります。

> また、<style type="text/css">宣言はHEAD内にということですが、
> 無理やりBODY内に<style type="text/css">宣言した場合
> どのような現象が起きるのでしょうか？
多くのUAは、たとえ style 要素が body 要素内にあったとしても、style 要素を無視せずに解釈して適用します。
※ この表現は厳密なものではありません。

つまり、
> （実際にIE6でこの方法をやってみましたが、レイアウトのくずれやおかしな挙動はありませんでした）
適用されることが多いです。
これはあくまでUAが拡大解釈しているだけに過ぎないので保証されることではありません。

ただし、大抵のモダンブラウザでは現在、実際に適用されるので、何らかの理由で head 要素内を編集できない場合には body 要素内に style 要素を記述するような妥協策もあります。

たとえば、私が以前カスタマイズを依頼された「したらばBBS」において、結果的に body 要素内に style 要素を記述する形で対応したケースもあります。

別件ですが、XHTMLで style 要素や script 要素の内容をコメントアウトした場合、仕様上は内容を無視するようになっていますが、実際はUAが拡大解釈して、無視されずに適用されることがあります。

文書型定義に反することは必須ですが、body 要素内に style 要素を記述するのも妥協策のひとつではあります。
その場合は、もしも body 要素内の style 要素が適切に解釈されなかったときを考慮し、style 要素の内容をコメントアウトすべきです。
仮にXHTML文書であっても、上記の通り、実際には適用される場合が多いのでどうしてもという状況であれば妥協策に転じるのもアリだと思います。

本来は、
> 「HEAD内の書き換えは不可」
> 「スクリプト（JavaScriptなど）言語使用不可」
> という条件
を改善することを考えるべきなのですが。

お礼

なるほど、大変勉強になります。
イベント属性も利用できないといった条件でしたので、
実際のケースもいただけて非常に助かりました。
スマートで丁寧なご回答どうもありがとうございました！