hamashun.com

CSSを利用してテキストを隠し、代わりに画像を配置するテクニックを一般に画像置換と呼びます。
このサイトのナビゲーション部分もそれを利用しています。
でも、このテクニックには、注意するべき点がいくつかあります。
それはSEOスパムの問題であったり、画像を表示しない設定をしている環境での問題であったりするのですけど、今回は見た目の問題を取り上げてみたいと思います。

具体的にどういった問題なのかと言うと、いろいろなサイトを、特にFirefoxで見ていると、ナビゲーションをクリックした瞬間に、謎の点線が横（多くの場合左方向です）に延びているのに気づいた事はないでしょうか？
これは決して見栄えが良いとは言えません。
この問題は、CSSとXHtmlに数行追加するだけで解決する事ができます。

ではまず、問題を解決していないサンプルを見てください。
点線が大きく左右に延びているのが分かると思います。
これのコードが以下です。

a {
 display:block;
 width:100px;
 height:30px;
}

#home a {
 background:url(nav_home.gif);
 text-indent:-9999px;
}

#blog a {
 background:url(nav_blog.gif);
 text-indent:9999px;
}


<ul>
<li id="home"><a href="#">home</a></li>
<li id="blog"><a href="#">blog</a></li>
</ul>

点線が表示される原因となっているのは、<a>タグにtext-indentを使用して、テキストを隠している為です。
これによってテキストは画面外に追いやられ、表示されなくなりますけど、存在はしています。
だからクリックすると、画面外まで点線が表示されるのです。
今回はそれが分かりやすいように、わざとインデントを左右に割り振ってみました。

そして、問題を解決したサンプルと見比べてみてください。
点線は、画像の領域内に収まっています。
CSSとXHtmlを次のように変更しました。

span {
 position:absolute;
 width:0;
 height:0;
 overflow:hidden;
}

a {
 display:block;
 width:100px;
 height:30px;
}

#home a {
 background:url(nav_home.gif);
}

#blog a {
 background:url(nav_blog.gif);
}


<ul>
<li id="home"><a href="#"><span>home</span></a></li>
<li id="blog"><a href="#"><span>blog</span></a></li>
</ul>

どこが変わったか分かるでしょうか？
XHtmlに<span>を追加して、そこにCSSでテキストを隠す指定をしています。
<span>に指定しているプロパティは、widthとheightを0にして、更にoverflow:hiddenを指定する事で、テキストを隠します。
position:absoluteは、一部のブラウザで隠しきれない事があるので、その修正です。

XHtml側に余分なタグが増えてしまう、という短所はありますけど、デザインの見栄えの良さを考えれば、こちらのテクニックも無視できないと思います。