ピュアCSSで実装するDKIRを応用した画像ボタンのロールオーバー効果

カテゴリ:CSSだけでアクションを作る 2009年12月22日 22:00

最近、「XHTML&CSS超高速コーディング術」という 牧野工房 さんが出している本を読みました。その中で、画像のロールオーバー効果を CSS で実現しているくだりがありました。

そこではvisibility: hiddenを利用したテクニックが載っていました。
概要としては、メニューなどの部分を普通に img 要素でマークアップしておき、マウスオーバー時や閲覧中のカテゴリの画像を背景にして該当の場合に img 要素を文字通り非表示にする、という方法で実装していました。

が、その場合だともし画像オフの場合や、オフにしていなくても回線の問題などで画像が表示されていないような場合に、マウスオーバーしたとき(あるいはカテゴリ閲覧中)に情報がまったく見れない、ということが(少ないですが)可能性としてありえるのでは、と思いました。

そこで、以前書いた これで決まり?な画像置換 - DKIR を応用した、上記のような場合でも情報が見れなくならないようなロールオーバー効果を実現する方法を書いてみたいと思います。

▼EntryMore▼

今回のテクニックは、前回 のものと同様、z-indexのマイナス値を利用したものになります。
なぜそうなるのか、という理由については前回のエントリーを参考にしてください。そちらには詳しく図説もあります。

さて、まずはマークアップから見ていきます。といっても、今回はまったく普通のマークアップになります。(不要な span 要素などは一切ありません)

HTML ソース

見ての通り、基本的な画像を使ったメニューのマークアップですね。
なので、逆に考えればこのようにマークアップしている場合は、ほぼ CSS のみで対応可能、ということになります。

CSS ソース

前回と同様、隠したい部分の要素(img 要素)に z-index: -1 を指定します。
こうすることで a 要素の下に img 要素が潜り込みます。そしてこれが今回のテクニックの主題ですが、もし仮に画像がオフだったり、読み込みがされていなくても、メニューに指定した画像は alt 属性でテキストが表示され、下に潜り込んだとしてもそもそも画像が読み込まれていなければテキストは画像で隠れないので、結果テキストは表示されたままになる、というわけです。

使う上でのポイント

このテクニックを使う上でのちょっとしたポイントです。

IE 対策の注意点

注意点としては#menu li a:hoverに指定しているposition: static です。

これは IE6 対策です。なので、モダンブラウザでは必要のない指定になります。
IE6 の場合、a 要素自身もなにか変更がないと、hover 時に子要素に変化をさせたい場合でも変化がおきません。hasLayout あたりの問題だと思っているのですが、それを回避するためです。

理由については 画像のマウスオーバーで、離れた位置に拡大画像を表示する の「新発見したこと」で詳しく書いているので参考にしてみてください。

a 要素に display: inline-block を指定する

もう 1 点は、a 要素にdisplay: inline-blockを指定していることです。
これは、a 要素をブロック要素にしないとしっかりとエリアが確保されないためです。(指定しないと、img 要素が a 要素の後ろに潜り込んだときにおかしな表示になってしまいます)

ただ、display: blockを指定してしまうと、幅を明示しないといけなくなってしまいます。
そこでdisplay: inline-blockを使うわけです。(これならインライン要素としての性質もあるので、子要素(img 要素)の幅までしか広がりません)

さらにこのdisplay: inline-block、IE にもちゃんと対応しています。(ただし、対応しているのはインライン要素のみ、という限定的な対応の上、仕様通りの実装ではなく、display: inline + hasLayout が true、というちょっと特殊な状態になります)

ただ、IE には対応していますが、逆に Firefox2 では対応していません。その代わりに指定しているのがdisplay: -moz-inline-boxです。
これは、Firefox が独自に実装している値で、display: inline-blockとほぼ同様の動きをします。厳密に言うと違いがあるのですが、今回のサンプルでは問題がないので説明は割愛します。

上記の部分を指定しておくことで、画像サイズと同じに a 要素のサイズが拡張されるので CSS 側の指定が少なくて済む、というわけです。(ちょっと分かりづらいですが、HOME 部分だけちょっと横幅が大きいものを指定しています。それでも、CSS 側の指定に一切手を加えることなくロールオーバーの効果が実現できているのが分かると思います)

このテクニックを使う上でのメリット

最後に、今回は CSS Sprite を利用していますが、ロールオーバー用の画像を個別に書き出してそれぞれに指定しても問題ありません。しかも、普通に背景に指定しているのでロールオーバーでありがちな画像がチラつく、という問題がないのもメリットのひとつです。

「XHTML&CSS超高速コーディング術」を読んだ感想

最後にちょっとだけこの本を読んだ感想を書いてみたいと思います。
内容は、「コーディングの徹底的な効率化の実現方法」です。

読んでいて感じたのは、大体の場合においてここまで徹底はできないのではないかな、ということと、ルールを厳格化する上で、ブラウザの表示時のパフォーマンスをややないがしろにしているのでは、という印象を受けました。

ただ、非常に効率的なことが書いてあるので、ポイントポイントで拾っていくことで管理がしやすくなるんじゃないかな、というのも同時に感じました。

こういった本を読むのは久々だったんですが、「なるほどーこんなやり方があったんだ!」っていう気付きもあったりしました。やっぱり本を読むのは大事ですね。また、こういった管理方法などを読むことで自社にはない方法に気付けたり、それを取り入れたりできると思うので一度読んで見るといいかもしれません。

この記事のカテゴリー一覧を見る⇒CSSだけでアクションを作る

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/170