cssでボタンを作成する際ベストな手法とは？

いままではナビゲーションボタンを作成する際、img要素を利用しそれをjavascriptでロールオーバー処理していましたが、ここ数年CSSを使ったロールオーバー処理がよく採用されています。その理由として挙げられるのが、手軽さとソースの合理性でしょう。

javascriptを全く使用しないので、html（xhtml）とcssの知識だけで制作可能なので、敷居が比較的低い（最もjavascriptを使用した方法はdreamweaverを使えばもっと簡単なのですが…）。そして、ソースの合理性。文書構造としてみれば、本来メニューにはボタンという概念は必要ないわけです。cssではimg要素を使用しなくてもボタンを作成できるので、xhtmlとcssの本質である文書構造とデザインの分離が可能になるわけです。

ここから本題となるわけですが、”cssでボタンを作成する際ベストな手法”。極論を言えば、ボタンの画像は背景だけ用意しておき、テキストはプレーンな状態がベストです。”display:none”、”text-indent:-9999px”でテキストを消す手法はスパムとして扱われる可能性があるためです。そのためか最近はプレーンなテキストを利用する手法を採用しているサイトを良く見かけます。

しかし、上記のようなデメリットがありつつも、テキストも画像化されたボタンを使いたい人も多いかと思います。では、この場合どの手法を採用するのがベストなのか？個人的には”text-indent:-9999px”でテキストを消す手法がベストだと思います。この手法だと余計なタグを使用しなくて済むからです。それでは実際に簡単な例を紹介。

/*htmlソース*/
<a href="sample.html">ボタン</a>


/*cssソース*/
a {
   display:block;
   width:100px;
   height:25px;
   background-image:url(btn.gif);
   text-indent:-9999px;
   overflow:hidden;
}

この方法が一番シンプルなソースでボタンが作成可能だと思います。簡単に解説しますとdisplay:block;でa要素をブロック要素化し、width、heightプロパティを有効化しています。background-imageで任意の画像を指定。text-indent:-9999px;でテキストを消しています。IEやOperaなどのブラウザではこれで正常に動作するのですが、firefoxではボタンを押した際、余計なアウトラインが表示されてしまいます。ここでoverflow:hidden;と指定してやることで意図する表示になります。

”display:none”を使う手法だと、a要素の中にspan要素を包含し、そのspan要素に対して”display:none”を指定してテキストを消すので、余計なタグを追加する必要があります。また、この方法だと、音声ブラウザでその部分が読み飛ばされるのでオススメできません。