CSSでロールオーバーを実装する3つの方法 その1ロールオーバーは、いまやWeb制作の際の必須の技術となっています。Webデザイナーさんにおいては、特にナビゲーション等を作成する時にはロールオーバーを必ずと言っていいほど実装している事かと思います。そんな当たり前の技術になったロールオーバーですが、実装するにはいくつかの方法があります。CSSスプライトを使う方法、javaScriptを使った方法など、それぞれの方法にはメリット・デメリットが存在し、どの方法を使うかは制作者の選択に委ねられます。それらの方法の中から、今回は3つの方法でナビゲーションメニューを実装する方法をこちらでご紹介したいと思います。

CSSでロールオーバーを実装 その1 目次

  1. ロールオーバーを実装する3つの方法
  2. まず、CSSスプライトとは?
  3. 実装方法について

1. ロールオーバーを実装する3つの方法

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

2. まず、CSSスプライトとは?

CSSスプライトとは、元の画像とマウスホバー時の画像を一つにまとめたものをbackgroundで表示させて、CSSでそれぞれの状態の時の表示位置を設定してずらすことで、ロールオーバー効果を実装する方法です。読み込む画像が一つで済むためにHTTPリクエストが一回で済み、円滑に画像を表示させる事ができる点がこの方法を使うメリットです。今やWebデザイナーさんには当たり前のテクニックになっている技術ですね。

2-1.CSSスプライトを使うメリット

一つの画像で済むのでHTTPリクエストが1回で済み、ちらつき等がなく円滑な表示が可能。

2-2.CSSスプライトを使うデメリット

設定、メンテナンスが面倒。

3. 実装方法について

3-1.CSSスプライトを使った方法1(background-positionを使用)

CSSスプライトの概念は上記のとおりです。
こちらでは、その中の一つ目の方法をご紹介します。

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

ロールオーバー画像

ナビゲーションの各メニューはリストで実装しidを振り分け、テキストをリンクで囲みます。

//ナビゲーションメニュー
<ul id="navi_menu">
     <li id="menu01"><a href="#">Home</a></li>
     <li id="menu02"><a href="#">About me</a></li>
     <li id="menu03"><a href="#">Gallery</a></li>
     <li id="menu04"><a href="#">Link</a></li>
     <li id="menu05"><a href="#">Contact</a></li>
</ul>

次にCSSを書いていきます。まず、リスト全体を囲んでいる[ul]タグに幅と高さを指定します。今回は、各メニューの[li]タグの幅は91pxでそれが5つ並びますので、幅は455pxになります。次に[li]タグにも幅91px高さ28pxを設定し、float:left;を設定し、メニューを横並びにします。ここでは記述しませんが、この後に出てくる要素には必ずclear:both;を設定して下さいね。

//CSS
ul#navi_menu {
width: 455px;
height: 28px;
}
ul#navi_menu li {
width: 91px;
height: 28px;
float: left;
}

次に、リンクに対して以下のように設定します。背景にメニューの画像を指定しno-repeat;とします。line-heightはメニューの高さを設定し、ブロック要素化してテキストインデントを設定します。

//一番左のメニュー[Home]に対する設定
ul#navi_menu li a{
background:url(images/navi_menu_ex.png) no-repeat;
line-height: 28px;
display: block;
text-indent: -9999px;
}

次は、各リストの背景の表示位置の設定をします。まず、最初に一番左のメニューから設定します。通常時にはbackground-position: 0px 0px;、マウスホバー(hover)時には高さに-28pxを設定します。

//一番左のメニュー[Home]の通常時とhover時の表示位置の設定
li#menu01 a{
background-position: 0px 0px;
}
li#menu01 a:hover{
background-position: 0px -28px;
}

他のメニューも同じように設定していきます。背景表示の横のマージンは91ピクセルずつ表示をずらし、マウスホバー(hover)時は常に高さ分表示をずらします。

//他のメニューの通常時とhover時の表示位置の設定
li#menu02 a{
background-position: -91px 0px;
}
li#menu02 a:hover{
background-position: -91px -28px;
}
li#menu03 a{
background-position: -182px 0px;
}
li#menu03 a:hover{
background-position: -182px -28px;
}
li#menu04 a{
background-position: -273px 0px;
}
li#menu04 a:hover{
background-position: -273px -28px;
}
li#menu05 a{
background-position: -364px 0px;
}
li#menu05 a:hover{
background-position: -364px -28px;
}

以上で完成です。
次回は2つ目の方法をご紹介できればと思っております。