▼EntryMore▼

a 要素をブロック化する

やっていることを簡単に言うと、リンク（a 要素）をブロック要素にし、それに背景を設定。
そしてロールオーバー時に背景をスライドさせて画像が切り替わっているように見せる、という仕組みです。

まずなんで a 要素をブロック要素にするのか？　ということですが、こうすることによってマウスを乗せたときに反応するエリアが増えるためです。
（a 要素は、普通はインライン要素のため、widht や height が設定できません。
そして、背景を設定するためには width と height が設定できないとすべてが表示できないため画像が切れてしまうことになります。なのでブロック要素にするわけです）

ブロック化した a 要素に背景を指定する

そしてそのブロック要素にした a 要素に background プロパティを使って背景を設定してやります。a 要素の width と height は設定したい背景の画像の幅と高さです。

そしてここでポイントなのが、背景画像を通常時のものとロールオーバー（マウスを上に乗せた状態）のときの 2 種類の画像を縦に並べた画像を用意する、ということです。

なぜそうするのか？

それは、a:hoverを使い、マウスを乗せたときの背景の位置を上にずらすことでまるで画像が切り替わったように見せることができる、ということを利用するためです。

これがサンプルページで使用している背景画像です。
この画像の半分の枠があって、その枠から覗いてるイメージです（枠以外のところは見えない）。
そしてマウスをのせたときに、その枠を左にずらしてやる（実際には画像を右にずらしていますが、イメージです）。

そうするとほら、まるで画像が切り替わったように見えませんか？
パソコン上では一瞬で切り替わるため、まるで画像が指し変わったように見えるわけです。

ではソースの解説をば。
以下がHTML部分です。

HTML ソース

このメニューはリストの ul タグを使用しています。
では続いて CSS 部分です。

CSS ソース

li 要素を左寄せ（float: left）します。
こうすることで、本来なら縦に並んでしまうリストを横に並べることができます。

さて、ここまではメニュー部分の基本部分です。
以下の CSS が今回のポイント、ロールオーバーで画像を変えるテクニックです。

li 要素を float させたら、li 要素の中にある a 要素をブロック要素（display: block）にし、高さと幅を持たせます。これで、ボタン部分のどこを押してもリンクが有効になります。
（display: block）にしないと幅と高さが有効になりません。

そしてさらに、各li要素に名前をつけ、その中にあるa要素に背景画像を設定します。
そして、a 要素内にある文字をtext-indent: -9999pxとし、画面外に表示させます。（つまり画面には表示されない）

text-indent: -9999px はスパム？

よくこの方法が SEO スパムでは、という議論がありますが、この CSS がスパムかどうか判断するのは機械的には無理じゃね？　という意見もあり、実際スパム扱いされるかどうかは未知数です。
個人的には、これをスパムとしてしまうと CSS の見た目を制御する、という根本が否定されるのでは？　と思ってます。

最後にロールオーバー処理を追加する

それはさておき。
これでメニュー部分が画像に置き換わりました。
そして最後の部分が重要です。
a:hover 時の CSS を記述しています。
つまり、ロールオーバー時の処理です。
ここで、設定されている背景を left、つまり左にずらします。

先にも書いた通り、画像が見える枠は固定されているので画面上では画像が切り替わったように見えるのです。

前に書いた、CSSによるポップアップメニュー はこのテクニックの応用で作ってます。
（ただ、IE が CSS に完全に対応していない為、現状は JavaScript も併用してますが）
内容的には、「:hover 時に、見えない要素を見えるようにする」って感じかな？