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

解決済

質問者：a_berry
質問日時：2013/06/24 02:34
回答数：1件

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

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

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

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2013/06/24 08:06

＞「text-indent: -9999px;」などの方法は隠しテキストにあたり、あまり良くないことを知りました。

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

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