CSSで動く画像ロールオーバーの利点について

質問

javascriptを使わずCSSのみで動かすロールオーバー画像の利点と欠点が↓以外にあれば教えて下さい。私の解釈が間違っていればご指摘願います。

■利点
1.HTMLのソースが綺麗＝ソースコードが軽くなる。
2.検索ロボットが余分なソースを読まなくてもよくなる為、SEO対策に有効。
3.listタグ（UL、LI）はSEOで重みづけが大きい？従ってlistタグで作成されたメニューはロボットに重要視される。

■欠点
1.CSSファイルが複雑化。

javascriptでもできる事をあえてCSSでしようとする意図がイマイチ掴めません。
また、メニューの背景のみを画像にした場合（メニュー名はテキスト）、CSSもさほど複雑化しないと思いますが、もしメニューひとつひとつを画像にしていた場合はCSSが複雑化しないんでしょうか。

回答No.2

taseki

> ■利点
> 1.HTMLのソースが綺麗＝ソースコードが軽くなる。

書き方によりますが、ごく僅かにhtmlソース自体はデータ量が少なくなるのは確かでしょうね。
外れた話題になりますが、IEなどではユーザー定義属性を使って、
<IMG SRC="menu01.gif" OVERSRC="menu01_ov.gif">
なんて書き方もできます（環境に依存などは別の話題として）。

> 2.検索ロボットが余分なソースを読まなくてもよくなる為、SEO対策に有効。

これはほとんど意味はないでしょう。むしろ逆で、ロボットはCSSの一部を解析しようとしますが、scriptなどは完全に無視します。
さらに、ロボットはけっこう賢いので、そもそも不要なタグや属性などは無視します。
また仮にロボットが読み込むデータを削るとしたら、SEOに影響するほどということになると、相当量のデータを削らなければ意味がないです。

> 3.listタグ（UL、LI）はSEOで重みづけが大きい？従ってlistタグで作成されたメニューはロボットに重要視される。

これも、CSSかjavascriptかの違いには関係ありません。ロールオーバーに何を使うかではなく、作成時に重要視されるタグを考慮するかどうかの問題です。

> ■欠点
> 1.CSSファイルが複雑化。

必要なscriptコードと比較した場合、むしろ逆に単純ですむのではないでしょうか。

★欠点追加

２．ロールオーバーのスムーズな動作のためには、「画像の先読み」が大変重要になりますが、CSSだけでこれを実現しようとすると、少々面倒になり、また正常に動作しないケースも多くあります。

３．多くの環境に対応したい、という場合、どちらかというとjavascriptでのロールオーバーの方が古いブラウザなどでも対応できる場合が多いです。もちろん、javascriptのオン/オフは別の問題として。

以上を踏まえると、お書きになった利点・欠点については、すべてがとは言いませんが、率直に言ってほとんどがあまり意味がないように思います。
それよりも最大の利点は、ANo.1の方も書かれているように、「scriptを使わない」こと自体が大きな意味を持ちます。
しかしそれは、実現したいこと（機能）自体が重要な意味を持つ場合に限られる利点であって、極端な話、ロールオーバー自体が動かなくても全く問題ない（ように作らなければいけない）わけですから、scriptで実装しても何ら問題ありません。

そもそもロールオーバーなどの要素は付加的要素、つまり「ただの飾り」と捉えて使うべきですから、他に影響させず付け加えるなら素直にjavascriptで実装したほうが無難かつ何かと便利で、そして利点も多いように思います。
私もANo.1の方と同様に普段は基本的にjavascriptをオフにしています。それでも閲覧自体には全く問題なく、逆に問題が出るようなサイトのほうが問題です。

逆の言い方をすれば、その機能が動かなければ、そのページは全く意味をなさなくなってしまう、というほど重要なものだったら、これをscriptを使わず実現できたら、こんな良い事はありません。
付加的な機能（ロールオーバー）を、付加的な技法（script）を使って実現するのは、問題がなく、本来の主要部分とは切り離されますし、自然な形にも思えます。

回答No.1

tona-tona

難しい事は識者の方のレスをお待ち頂くとして、
私はそのままずばり、JavaScriptを使っていない事が利点です。

私はいつも検索であちこちのサイトを回る時はJavaScriptは切っています。どの位の割合かはわからないけど、それなりにいると思うのでそうしています。