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

2006年6月27日 00:07

ソース解説を追記しました(*'-')

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

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

▼サンプルはこちら
CSSによる画像を使ったロールオーバーのサンプル

新しくサンプルを作りなおして再アップしました。

▼EntryMore▼

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

結構色んなところで言われてるのですでに知ってるyo！　って人が多いと思いますが、
初心者向け、というか、分かりやすく書くことを目標にしてるので噛み砕いて書いていきたいと思います。（そのほうが自分の勉強にもなるし、再発見にもつながるしねｗ）

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

そしてここでポイントなのが、背景画像を通常時のものとロールオーバー（マウスを上に乗せた状態）のときの2種類の画像を縦に並べた画像を用意する、ということです。
なぜそうするのか？
それは、a:hoverを使い、マウスを乗せたときの背景の位置を上にずらすことで
まるで画像が切り替わったように見せることができる、ということを利用するためです。

これがサンプルページで使用している背景画像です。
この画像の半分の枠があって、その枠から覗いてるイメージです。（枠以外のところは見えない）
そしてマウスをのせたときに、その枠を左にずらしてやる。（実際には画像を右にずらしていますが、イメージです）
そうするとほら、まるで画像が切り替わったように見えませんか？
パソコン上では一瞬で切り替わるため、まるで画像が指し変わったように見えるわけです。

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

<ul id="headerList">
<li class="home"><a href="#">List01</a></li>
<li class="menu01"><a href="#">List02</a></li>
<li class="menu02"><a href="#">List03</a></li>
<li class="menu03"><a href="#">List04</a></li>
<li class="menu04"><a href="#">List05</a></li>
</ul>

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

#header ul#headerList li {
float: left;
margin-right: 4px;
}

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

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

#header ul#headerList li a {
display: block;
text-decoration: none;
text-indent: -9999px;
width: 76px;
height: 27px;
}
#header ul#headerList li.home a {
background: url(images/menu_home.gif) right top no-repeat;
}
/* 以下、メニューが複数の場合は
その分だけそれぞれ指定します。 */
#header ul#headerList li a:hover {
background-position: left top;
}

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

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

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

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

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

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

合わせて読むと役に立つかもなエントリー

パーマリンク
コメント(11)
トラックバック(1)

トラックバックURL

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

トラックバック

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

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

byyoseyama Blog 2007年9月18日 14:49

1 - きっぴさん

こんにちは、始めまして。
私は、ただいま勉強中で、この記事とても参考になりました。

mixiのDreamweaverトピから来ました。

これからは、ちょくちょく訪問させて頂きたいのでよろしくおねがいします。
（CSSソース早く見たいで〜す！）

2006年6月29日 07:13

2 - えどさん

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

2006年6月29日 12:53

3 - モモンガさん

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

これからも勉強させてください！

2006年7月 3日 18:47

4 - カルさん

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

2007年3月22日 14:39

5 - えどさん

>>カルさん
どもです。
そうですね。最近ではもっと色々な手法の画像置換の技術が出て来てますね。画像OFF、CSS OFFでも見れるような。

このエントリー自体は「画像置換のやりかた」ということで書いているので、そこまでは気にしてませんでした(^^;

結構前のエントリーなので、新しくそれらを考慮したエントリーを近いうちに書きたいと思います。
ご指摘ありがとうございました。

2007年3月22日 15:27

6 - ume さん

始めまして。
ナビゲーションの背景画像を
一枚の画像
（表示の画像の下にロールオーバー時の画像を重ねて書き出したもの1枚）
を使って、CSSでスムーズにロールオーバーしたいのですが、
どうも上手くいきません。
position設定しておりますが、
ボタンメニューの間に白の縦ラインを2px入れてます。
その場合はどうしたらいいものか、あちこち探しておりますが、アドバイスいただけたらよろしくお願いします。

width=760px
height=26px
書き出し画像は760×52px
一つのボタンのwidth=152px
最初のボタンだけon状態にして、他ロールオーバー時に背景画像入れ替え。
文字はspanで飛ばしております。

2007年8月27日 01:06

7 - えどさん

umeさん、コメントありがとうございます(*'')

えっと、ちょっと状況がよく分からないのですが・・すでにサーバにアップされている状態のものとかありますか？

見てみないとなんともいえませんが、おっきなひとつの画像に5つのメニューボタンのon/offのすべての状態を書き出して、それを個別に表示する、というイメージで間違いないですか？

それと問題点としてはどんな状況ですか？　ロールオーバーしないのか、画像が変なところで切れているのか。
ちなみに、on状態のものを固定したい場合は、on用のclassかIDを用意し、on状態にしておきたい要素にclassかIDを付加することで実現できますよ。（:hoverの記述部分をそのclassかIDのものにコピー）

2007年8月27日 09:50

8 - ume さん

説明がわかりにくかったですね、申し訳ありません。
ロールオーバーはスムーズにできました。
スペルミスで上手くいかなかったみたいです。

今は地図をマウスオンで、地域別に色を変えるやり方を探しております。

2007年9月 1日 03:42

9 - えどさん

>>umeさん

地域別、ということはページが違うということですか？
ページ単位で違うのであれば、bodyにIDを設定して、そのID配下で色だけを変えるなどすると、比較的簡単に設定ができると思います。

例)
body#page1 a.test:hover
body#page2 a.test:hover
...

みたいな感じです。

2007年9月 3日 11:30

10 - 通りすがりさん