CSSでロールオーバーを実装する3つの方法さて、前回はWeb制作の際の必須の技術とも言えるCSSでロールオーバーを実装する方法の一つ目として、CSSスプライトを使った方法1(background-positionを使用)をご紹介しました。今回は2つ目の方法をご紹介します。

ここで紹介するロールオーバーを実装する3つの方法

  1. CSSスプライトを使った方法1(background-positionを使用)
  2. CSSスプライトを使った方法2(ネガティブマージンを使用) ←今回
  3. CSSの背景と画像を重ねる方法(hover時にvisibility:hiddenを使う)

2. CSSスプライトを使った方法2(ネガティブマージンを使用)

さて、今回も前回と同じように、まずは制作するナビゲーションメニュー全体の通常時の画像とマウスホバー(hover)時の画像を以下のように一つにまとめます。各メニューは幅91px高さ28pxで全てを一つにまとめた下の画像は幅455px高さ56pxになります。

ロールオーバーの画像

それでは、まずXHTMLのマークアップから始めます。
下記のように、ナビゲーションの各メニューをリストで実装してidを振り分け、各リストには全てを一つにまとめた画像を配置し、アンカータグで囲みます。

//ナビゲーションメニュー
<ul id="navi_menu2">
     <li id="menu01"><a href="#"><img src="images/navi01.jpg" width="455" height="56" alt="Home"></a></li>
     <li id="menu02"><a href="#"><img src="images/navi01.jpg" width="455" height="56" alt="About me"></a></li>
     <li id="menu03"><a href="#"><img src="images/navi01.jpg" width="455" height="56" alt="Gallery"></a></li>
     <li id="menu04"><a href="#"><img src="images/navi01.jpg" width="455" height="56" alt="Link"></a></li>
     <li id="menu05"><a href="#"><img src="images/navi01.jpg" width="455" height="56" alt="Contact"></a></li>
</ul>

次にCSSを書いていきます。まず、リストの幅をメニューの幅に設定し、overflow: hidden;を設定します。これによって、枠からはみ出した画像を表示させないようにします。次に、各メニューの画像の表示位置をネガティブマージンを設定することでずらしていきます。一番左のメニューは設定する必要はありません。二番目のメニューは1番目のメニューの幅と同じ分を、次のメニューはその倍の幅をネガティブマージンを設定し、以下同様に設定します。

//CSS
ul#navi_menu2 li {
width: 91px;
float: left;
overflow: hidden;
}
ul#navi_menu2 li#menu02 img{
margin-left: -91px;
}
ul#navi_menu2 li#menu03 img{
margin-left: -182px;
}
ul#navi_menu2 li#menu04 img{
margin-left: -273px;
}
ul#navi_menu2 li#menu05 img{
margin-left: -364px;
}

次に、各リストのリンクのCSSを設定します。まずは、リンクをブロック要素化し、hover時の画像に縦のネガティブマージンを設定して、表示をずらします。

//CSS
ul#navi_menu2 li a{
display: block;
}
ul#navi_menu2 li a:hover img{
margin-top: -28px;
}

以上で完成です。
前回紹介した方法は、背景に画像を指定するものでしたので、印刷時には表示されないというデメリットがありましたが、今回の方法は画像を直接リストの中に配置していますので、そのデメリットは解消されます。
次回は3つ目の方法をご紹介できればと思っております。