質問: お世話になります。 タイトルの件、使い方について不明点があり質問させていただきました。 先日CSSの参考書を見ていたところ、 下記コードにてテキストを画像に置換するテクニックを学びました。 参考書以外に類似記事もあったので、 スタンダードなテクニックなのかなと思います。 ``` text-indent: 100%; white-space: nowrap; overflow: hidden; ``` ただ、いままで画像を挿入は、 `background-image`,htmlでの`img`タグ等を利用しておりましたが、 上記だとどんなメリットがあるのか(どんなケースの場合に使うとよいのか)が分からず、 ご存知の方がいらっしゃいましたら、ご教示頂けないでしょうか。 どうぞよろしくお願いいたします。
回答: backgroundに画像を仕込むことにより、CSSにて :hover(マウスオン)での変化をCSSのみで記述することができます。 ※html5が勧告されている現在では、aタグの中にimgを複数仕込むことにより、ほぼ同じ挙動が実現できるようになりました また、昔は検索エンジンによる情報取得の際に 画像のaltに対する認識が弱いこともあり、 画像テキストなどではこのような処理が行われていたことも多かったようです。 いわゆる過去の慣習のようなものですね。 現在は画像altの取得でも、css拡張の面でも 改良され、無理にそのようなコーディングをする必要はありません。