

お世話になります。  
タイトルの件、使い方について不明点があり質問させていただきました。

先日CSSの参考書を見ていたところ、  
下記コードにてテキストを画像に置換するテクニックを学びました。

参考書以外に類似記事もあったので、  
スタンダードなテクニックなのかなと思います。  
<http://w3q.jp/t/1914>

[code]

    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    
[/code]

ただ、いままで画像を挿入は、  
`background-image`,htmlでの`img`タグ等を利用しておりましたが、  
上記だとどんなメリットがあるのか（どんなケースの場合に使うとよいのか）が分からず、  
ご存知の方がいらっしゃいましたら、ご教示頂けないでしょうか。

どうぞよろしくお願いいたします。


CC BY-SA 4.0
2018-12-21T22:58:07.270
51429
2020-04-18T16:06:30.897
2018-12-22T00:37:29.723
23994
19541
question
html css
CSSのテキスト→画像置換について


backgroundに画像を仕込むことにより、CSSにて  
:hover（マウスオン）での変化をCSSのみで記述することができます。  
※html5が勧告されている現在では、aタグの中にimgを複数仕込むことにより、ほぼ同じ挙動が実現できるようになりました

また、昔は検索エンジンによる情報取得の際に  
画像のaltに対する認識が弱いこともあり、  
画像テキストなどではこのような処理が行われていたことも多かったようです。

いわゆる過去の慣習のようなものですね。  
現在は画像altの取得でも、css拡張の面でも  
改良され、無理にそのようなコーディングをする必要はありません。


CC BY-SA 4.0
2019-01-15T11:40:14.063
51989
2019-01-15T11:40:14.063
31792
51429
answer