CSSによる画像を使ったロールオーバー

カテゴリ:CSSテクニック 2006年6月27日 00:07

CSSによる画像を使ったロールオーバーです。
すでに色々なところで言われていて、結構ポピュラーなことだと思いますが、
まぁ備忘録ってことでお付き合いくださいw

通りすがりさんに指摘されたので追記です。
ここで紹介しているテクニックは、「背景画像を使用した」テクニックです。
そのため、画像を OFF にして閲覧している人がいた場合、
通常の画像であれば、alt 属性に書かれている内容が表示されるため問題ありませんが、
このテクニックの場合、メニューになにも表示されなくなってしまうので注意が必要です。

新しく、これで決まり?な画像置換 - DKIR という記事を書きました。
こちらは "画像OFF、CSS ON でも問題ない" というメリットがあるのでオススメです。

CSSによる画像を使ったロールオーバー デモ

▼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 時に、見えない要素を見えるようにする」って感じかな?

この記事のカテゴリー一覧を見る⇒CSSテクニック

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

トラックバックURL

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

トラックバック

CSSでロールオーバー [xhtml+css]

もう最近だと定番ですね。nサンプル<div id=”mainnav”><ul><li id=...

byyoseyama Blog 2007年9月18日 14:49

コメント

1 - きっぴ さん

こんにちは、始めまして。n私は、ただいま勉強中で、この記事とても参考になりました。nmixiのDreamweaverトピから来ました。nこれからは、ちょくちょく訪問させて頂きたいのでよろしくおねがいします。n(CSSソース早く見たいで〜す!)

2006年6月29日 07:13

2 - えど さん

どもです。nコメントありがとです!nまだデザイン部分とかもほとんど手を加えてないのですが、n情報だけは伝えていきたいので、頻繁に更新する予定です(*'-')よろしくです(=´▽`=)ノ

2006年6月29日 12:53

3 - モモンガ さん

えどさん、さっそく見にきました。nCSS使ったロールオーバーもここに掲載されてたんですね、n参考にさせていただきます。nこれからも勉強させてください!

2006年7月 3日 18:47

4 - カル さん

っつーか、この方法だと万が一画像が読み込まれない場合、意味が通じないメニューってことですよね・・・SEO どうのこうのの前に。

2007年3月22日 14:39

5 - えど さん

>>カルさんどもです。nそうですね。最近ではもっと色々な手法の画像置換の技術が出て来てますね。画像OFF、CSS OFFでも見れるような。nこのエントリー自体は「画像置換のやりかた」ということで書いているので、そこまでは気にしてませんでした(^^;結構前のエントリーなので、新しくそれらを考慮したエントリーを近いうちに書きたいと思います。nご指摘ありがとうございました。

2007年3月22日 15:27

6 - ume さん

始めまして。nナビゲーションの背景画像を一枚の画像n(表示の画像の下にロールオーバー時の画像を重ねて書き出したもの1枚)nを使って、CSSでスムーズにロールオーバーしたいのですが、nどうも上手くいきません。nposition設定しておりますが、nボタンメニューの間に白の縦ラインを2px入れてます。nその場合はどうしたらいいものか、あちこち探しておりますが、アドバイスいただけたらよろしくお願いします。nwidth=760pxheight=26px書き出し画像は760×52px一つのボタンのwidth=152px最初のボタンだけon状態にして、他ロールオーバー時に背景画像入れ替え。n文字はspanで飛ばしております。

2007年8月27日 01:06

7 - えど さん

umeさん、コメントありがとうございます(*'')えっと、ちょっと状況がよく分からないのですが・・すでにサーバにアップされている状態のものとかありますか?n見てみないとなんともいえませんが、おっきなひとつの画像に5つのメニューボタンのon/offのすべての状態を書き出して、それを個別に表示する、というイメージで間違いないですか?nそれと問題点としてはどんな状況ですか? ロールオーバーしないのか、画像が変なところで切れているのか。nちなみに、on状態のものを固定したい場合は、on用のclassかIDを用意し、on状態にしておきたい要素にclassかIDを付加することで実現できますよ。(:hoverの記述部分をそのclassかIDのものにコピー)

2007年8月27日 09:50

8 - ume さん

説明がわかりにくかったですね、申し訳ありません。nロールオーバーはスムーズにできました。nスペルミスで上手くいかなかったみたいです。n今は地図をマウスオンで、地域別に色を変えるやり方を探しております。

2007年9月 1日 03:42

9 - えど さん

>>umeさん地域別、ということはページが違うということですか?nページ単位で違うのであれば、bodyにIDを設定して、そのID配下で色だけを変えるなどすると、比較的簡単に設定ができると思います。n例)body#page1 a.test:hoverbody#page2 a.test:hover...みたいな感じです。

2007年9月 3日 11:30

10 - 通りすがり さん

これ背景OFFにしてみると何がなんだかわからないので個人的に好きじゃないんです。n仕事中にネットを見る時に(見ていい会社です)背景きっていることが多いので。nなので、出来ればそういうこともありますよ、と注意書きコメントを入れていただけるとうれしいかなと。。。

2008年3月 8日 15:22

11 - えど Author Profile Pageさん

>>通りすがり さんコメントありがとうございます。nえっと、背景OFFって設定、ブラウザにありましたっけ・・?n画像をOFFにできるのは知っているのですが、n背景のみをOFFにすることもできるのでしょうか?

2008年3月 8日 18:41