画像を使ったナビゲーションバー

質問

本を読んだりwebを検索したりしながら、足掛け10年以上HPを作っている素人です。

ナビゲーションバーについて質問なのですが、
今までマウスオーバーで画像が変わるナビゲーションバーを
１枚の画像を使用する方法で作っていました。
cssで通常時とロールオーバー時の画像の位置を指定し、
「text-indent: -9999px;」と記入して、テキストリンクは画面外に隠すような方法です。

でもなんとなくナビゲーションバーについて検索していたら
「text-indent: -9999px;」などの方法は隠しテキストにあたり、あまり良くないことを知りました。

通常時もマウスオーバー時も画像を使ってのナビゲーションバーにしたい場合
どのような方法が適当になるのでしょうか？
ほとんどの検索結果では、テキストインデントにマイナスの値を振ったものが該当してしまい
解決策が見当たりません。

よろしくお願いいたします。

回答No.1

ORUKA1951 · ベストアンサー

＞「text-indent: -9999px;」などの方法は隠しテキストにあたり、あまり良くないことを知りました。
　それは、ありえません。<span class="hide">富士山が世界遺産に登録</span>検索エンジンはスタイルシートを読みませんが、<span class="hide">富士山が世界遺産に登録</span>そのページの内容と、<span class="hide">富士山が世界遺産に登録</span>文字の整合性の判断はします。それが「隠し文字がまずい」と言う意味です。
　上のように書いて、span.hide{text-indent:-20em;}なんてすれば、明らかに跳ねられる。
　と言う意味です。

＞通常時もマウスオーバー時も画像を使ってのナビゲーションバーにしたい場合
どのような方法が適当になるのでしょうか？
　a:after{content:url();display:black;width:***;height:****;position:absolute;top:***;left:***;}
とか・・

お礼

解りやすい解説までしてくださり、ありがとうございました。