ADP: かちょええナビゲーションを目指す（1）があまりうまくいっていないので、先に、ADPでのロールオーバーテクニックついて説明する。「見た目oriented」と「アクセシビリティ」の両立をうまくはかっていると思う、と自画自賛。
出来上がりについては、サンプル参照。
また、本サイトの上部のメニューのように画像が並ばせる場合、縦に画像を並べるのはうまくいきましたが、横に並べるのはうまくいきませんでした。
最終的に、私のサイトの上部のメニューについて言えば、「CSSによる画像切り替えは使えない」という結論に達しました。
（2004年1月7日、一色政彦さん）
という意見をふまえて、今回は横に並べてみた。
解説の前に先にメリット。Re: #BLOG: CSSで画像を動的に切り替えるには？で紹介されていたyuuさんのサンプルは、画像を2つ用意して、それぞれマウスオーバーで入れ替えている。このやり方は、はじめてマウスオーバーするときに画面がちらつく場合がある。また、テキストを消しているので、Operaなんかで画像表示をoffにすると、何も表示されなくなってしまう。今回のは、ちょっとずるい手を使ってそれらを解決。また、IE6のボックスに関する致命的なバグも、さらにずるい手を使ってすりぬけている。
解説。ソースは直接サンプルページのを見てほしい。
まず、HTML部分はふつうにul, li, a要素を使ってメニューのリストを書いている。ロールオーバーは、background-positionを使って背景画像を動かすことで対応。アサノさんのところで詳しい説明があるのでパス。
今回のキモは、背景画像の色と同じ色でテキストを書いて、そのテキスト色にあった背景色を別個に指定しているところ。これで、{画像 on, 画像 off}×{CSS on, CSS off}の4パターンすべてでうまく表示される。ただしこれはもしかするとGoogleに嫌われるかもしれない。ADPで実際使っているやつは、テキストもそのまま表示させている。ご利用は計画的に。
ul＋li＋a要素を使うとき、テキストをボタンの中の思った位置に表示させるには、paddingを使わなければならない。ここで、paddingの解釈の仕方がIE6だけ間違っている、という問題が生じる。
解決法。li要素ではボタンの大きさにあたるheightとwidthを指定する。その中のa要素ではwidthを指定せず、ボタンの高さにあたるheightとテキスト用のpaddingを指定する。a要素でheightを指定しないと、ブラウザによってはテキストよりも下の部分の背景画像が表示されなくなるので、必須。で、こうすると、IE6ではちゃんと表示され、IE6以外、つまり正しい解釈をするブラウザではa要素が下に大きくはみだすことになってしまう。そこで、li要素にoverflow: hidden;を指定して、はみ出した部分を無視させる。
正しい解釈をするブラウザで、わざと変になるように書くというのは邪道以外の何物でもないが、仕様どおりに描写されれば思ったとおりになる、という意味では間違っていない、と強調しておこう。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/116
さすがだなあと思いました。
このナビゲーションスタイルを真似るサイトが出てきそうなので、あえて提言を。UAの表示領域を小さくした場合にoverflow: hidden;を指定したli要素が増えるとどうなりますでしょうか？
<h1>の折り返しと被る可能性も。
ssさんありがとうございます。たしかに被りますね。サイトに適用するときは、h1要素（や本文）に関してもなにかしら指定する必要があります。
いやー、コレいいですね。もう覚えました(謎)。それはそれとして、このフォーム、各フィールドから次へ行きたいからタブキーを押すとき、上のsearchボックスのところへフォーカスが飛んでしまってウザイです(IE6)。
ありがとうございますー。てゆうか、タブの順番、どこかに展示しておきたいぐらいウザかったですね（もう直しちゃいましたが）。すみませんでした。
ADPさんのところ、うーん、それにしてもすっきりとした綺麗なデザインだなー。何をするのもセンスセンスセンス、センスがものを言う。
自分にも欲しい扇子。なんちて。
ありがとうございますー。ソースもデザインも、おおっ？というのがあったらまずパクってみるのが一番ですね。
ページ内で、テキスト全選択（Ctrl+A）や、ナビゲーション部分をマウスで範囲選択すると、隠している文字が見えちゃうんですね。