リンク画像をCSSを使って背景画像にするメリット

質問

リンク画像をCSSで設定するメリットは何ですか？

左上の「OKwave」のロゴマークもそうですが、なぜHTML言語のimgタグとaタグの組み合わせで、リンクを作っていないのでしょうか？
CSSで画像を背景画像として設定するメリットは何なのでしょうか？

すいません、ご教示願います。

回答No.3

ORUKA1951 · ベストアンサー

＞imgタグとaタグの組み合わせで、リンクを作っていないのでしょうか？
　一言で言うと「その画像は文書構造には無関係な背景だから」です。
　説明すれば長くなりますが、そもそもHTMLの最大の目的は、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML4.01仕様書( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

　ですね。ウェブページにアクセスするユーザーエージェントは、上記の例に加えて検索エンジンも含まれますが、画像が負担になる携帯電話などの帯域の狭いものもいます。画像の絵柄の意味を理解できるのは人だけです。人意外も訪問する・・

　それ以外にも随所に
「文書構造とプレゼンテーションとのより明解な区別。従って、プレゼンテーション目的の場合HTMLの要素や属性ではなくスタイルシートの使用を奨励する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.3.2 )」
「テキストを画像に置き換えて表現する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )のはまずい」
「HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )」

　たとえば、
<a href="htt://hge.com"><span>ほげ</span></a>
　と書かれていれば、スタイルシートで
a[href="htt://hge.com"]{background:url()****}
a[href="htt://hge.com"] span{display:none;}
　とすれば、携帯電話や検索エンジン、点字端末や読み上げソフトは率直にテキストとして理解します。また、さきでデザインを変えようとしたときにHTMLを書き換える必要もありませんね。

　リンクボタンやリンク画像は、多くの場合は単なる背景以上の意味は持ちませんので、画像を使わないほうが良いでしょう。逆に画像(たとえば製品群が一目でわかるような画像)にリンクを張りたいときは、画像にリンクを張ると考えると良いでしょう。その場合でも、altにはきちんと代替文字を帰すべきですし、マークアップがナビゲーションリストのひとつでしたら、<div class="nav></div>(HTML4.01)、<nav></nav>(HTML5)で括るべきです。
　後者の場合も、
<div class="nav">
　<ul>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
　</ul>
</div>
としかマークアップしないことが圧倒的に多いです。私は・・
　だって先でデザインを変えたくなったとき、すべてのホページの該当部分を変えると考えるとぞっとしますモン。

お礼

>>リンクボタンやリンク画像は、多くの場合は単なる背景以上の意味は持ちませんので、画像を使わないほうが良いでしょう。逆に画像(たとえば製品群が一目でわかるような画像)にリンクを張りたいときは、画像にリンクを張ると考えると良いでしょう。

リンク先の文章やHTMLとCSSの役割のちがいを挙げて説明していただいたので、とてもよくわかりました。
私は全てのリンクボタンを、画像を使って設定していました。
仰るとおり、デザインを変えるときどうするのか？　という疑問にぶつかったとき、ものすごく手間がかかることに今、気づきました。

>>だって先でデザインを変えたくなったとき、すべてのホページの該当部分を変えると考えるとぞっとしますモン。

私も今頃、ぞっとしてきました＾＾；

回答ありがとうございます。
背景を使うか、画像を使うかは、No.1さん、No.3さんのご回答通り、それに装飾以上の意味があるのか、ないのかを判断基準にします。

回答No.2

神崎 渉瑠（@taloo）

ロゴマークをコンテンツの一部と見なすかどうかという、考え方によるものです。

<img>なら画像ファイルを変更すれば、その画像は変更されます。
CSSのbackground-imageなら画像ファイルを変更すれば、その画像は変更されます。
画像を変更する（アップロードする）ことに違いはありませんから、<img>をCSSで書き直すメリットはありません。

お礼

>>ロゴマークをコンテンツの一部と見なすかどうかという、考え方によるものです。

たしかにどちらに分類すべきか曖昧ですね。
どちらを使うかは好みの問題ですか。
回答ありがとうございました。
参考にします。

回答No.1

dscripty

画像がコンテンツの一部のときは、img タグ。

例えば、説明のための図とか、絵とか、写真とか、スクリーンショットとか。

それ以外は装飾だから CSS で HTML と分離すれば、
装飾を変更するだけなら、CSS を変更するだけで、一度に全ページへ変更が反映されるから、
個々の HTML を編集する必要がなくて楽だし、コンテンツ管理も楽。

「コンテンツ」と「装飾」の分離がポイント！

お礼

>>それ以外は装飾だから CSS で HTML と分離すれば、
装飾を変更するだけなら、CSS を変更するだけで、一度に全ページへ変更が反映されるから、
個々の HTML を編集する必要がなくて楽だし、コンテンツ管理も楽。

なるほど。そういうことだったのですか！
たしかに、その方が大変楽ができます。
使い分けが、よくわかりました。
回答ありがとうございました。