seckie画像をリストで配置したグローバルナビゲーションにロールオーバーを設定する時の話。JavaScriptを使わずCSSだけで実現するロールオーバーはいくつかやり方があると思いますが、以下のパターンをよく使っています。-9999px;}全てのナビがロールオーバーした状態の画像を用意し、#globalNavの背景に設定します。li要素に明示的な幅指定を行っておき、その子であるa要素にdisplay:block;を設定。a:hover時にtext-indent:-9999px;を設定することでimg要素を画面外に飛ばし、背景画像を見せることでロールオーバーさせています。この手法の欠点は、各ボタンを格納するli要素に明示的に幅を指定しないと意図した表示にならないという点。仮に、各ボタンの横幅が異なっている場合、各li要素にclassとかidを振って別々の幅を指定してやらないといけないということになります。パターン2各ボタンの横幅が異なっているけれど、各li要素にclassやidを書きたくない場合・・・このシチュエーションって結構経験していて悩んでいたのですが、どうにか実現することができたのがこのパターンです。XHTMLはパターン1と同じとして。9999px;}li要素には幅指定を行いません。右のボタンとの余白をmargin-rightで設定しますが、全てのボタンでこれが同一になるように画像のスライスを調節します。右のmarginが領域を飛び出してしまうケースもあると思いますが、その辺は適当にうまくやります。a要素はdisplay:inline-block;になるようにします。inline-blockなのでvertical-alignの調整も行っておきましょう。Vol.27での小山田さんのセッション(のスライド)が参考になります。img要素にwidth、height属性をそれぞれ明示的に指定をする必要があります。これはFirefox2で正しく表示するために必要です。a:hoverのpadding-topに大きな値を指定して、含んでいるimg要素を追い出すようにしてやれば、完了です。追い出した部分を非表示にするために、#globalNavにheightの明示的な指定とoverflow:hidden;の指定が必要なのでお忘れなく。2009-10-28display:-moz-inline-boxとdisplay:inline-blockの順序が逆だったので修正。小山田さんのセッション(のスライド)におけるコードを尊重させていただきたいと思います。2009-10-28Firefox2においての表示不具合への対処について、本文に追記しました。{vertical-align:bottom;}の指定の2点が必要です。これらの指定がない場合、Firefox2で初回読み込み時に限って画像が正しく表示されませんでした。2回目の読み込みでは正常な表示だったので、画像がキャッシュされていない状態において幅・高さが検出できないために起こる現象のようです。IconDock.com.。