CSS によるロールオーバー

Webデザイナー見習いのトゥルーです。

CSSで実装したロールオーバーのグローバルナビゲーションやローカルナビゲーション。今や当たり前のように見かけますが、私のような初心者は理解するまで結構大変でした。。。
今回は同じく理解に苦しんでいるという初心者の方に向けて、ロールオーバーのグローバルナビゲーションを解り易く解説していきたいと思います。

では、やり方を・・・

まず下記のように2枚画像を用意します。

①はナビゲーションを一まとめにした1枚画像で実際に切り替わる画像です。
②はサーバーや回線の都合で読み込みが遅れて、メニュー部分が真っ白になってしまうのを防ぐ為の背景画像として使います。

続いてhtmlにグローバルナビ部分の要素を記述します。

今回は<ul>リストを使用しました。

HTML

<div id=”globalnavi”>
<ul>
<li id=”top-current”><a href=”#”>TOP</a></li>
<li id=”menu1″><a href=”#”>MENU1</a></li>
<li id=”menu2″><a href=”#”>MENU2</a></li>
<li id=”menu3″><a href=”#”>MENU3</a></li>
<li id=”menu4″><a href=”#”>MENU4</a></li>
</ul>
<div>

そして、CSSの主要部分のソースを記述します。

CSS

#globalnavi {
width: 900px;
height: 40px;
margin: 0;
padding: 0;
background-image: url(‘画像②’) no-repeat;
}

#globalnavi li {

float:left; ———横並びにする為に、float:leftで左に
}

続いて、a要素の指定です。まずは共通の指定を最初にします。

#globalnavi a {
display: block; ——–インライン要素からブロック要素へ変更
width: 180px; ——–メニューの横幅
height: 40px;——–メニューの高さ
color:#FFFFFF;
font-size:14px;
text-decoration: none; ——–リンクの下線を消す
background: url(‘画像①’) ? no-repeat;
}

今回は文字部分をテキストにしてありますが、画像で作りたい場合はtext-indexnt:-9999px; を追加してテキストを画面外に飛ばしま す。

そして、各メニュー用のスタイルを指定します。

#top-current a {background-position: 0 0px;} ——–今いるページの表示画像の位置を指定
#top a {background-position: 0 -40px;} ——–通常時の表示画像の位置を指定
#top a:hover {background-position: 0 -80px;} ——–マウスオーバー時の表示画像の位置を指定

TOPのcurrentの背景は左上にあるので位置の指定はbackground-position: 0 0px;になります。

通常時の背景は一枚画像の真ん中の黄色に当たるので、上に-40px分移動させる指定を行い、

マウスオーバー時の背景は一枚画像を、上に-80px分移動させる事でロールオーバーを実現してます。

以下のMENU1からは上の移動に加えて左に-180pxづつ移動させる指定を行います。

#menu1-current a {background-position: -180px 0px;}
#menu1 a {background-position: -180px -40px;}
#menu1 a:hover {background-position: -180px -80px;}

#menu2-current a {background-position: -340px 0px;}

#menu2 a {background-position: -340px -40px;}
#menu2 a:hover {background-position: -340px -80px;}

#menu3-current a {background-position: -510px 0px;}

#menu3 a {background-position: -510px -40px;}
#menu3 a:hover {background-position: -510px -80px;}

#menu4-current a {background-position: -680px0px;}

#menu4 a {background-position: -680px-40px;}
#menu4 a:hover {background-position: -680px-80px;}

CSSによるロールオーバーのメリットは、

・リンク画像を個別に用意せず一枚にまとめられる事

・ジャバスクリプトを切られた環境でも実行できると言う事

・CSSの場合リンクのテキストにキーワードを挿入できるのでSEO的に良い事

などが上げられます。ナビゲーション関係はサイトを作る上で必須なので、どうせ作るならSEOにも強くアクセシビリティも強いものにしてみてはどうでしょう。

この記事は

Interest Speaker > How to / Tips > CSS によるロールオーバー

この記事と類似または関連した記事

webフォント
webフォントを使ってサイトの表現力をアップ
任意の子要素にスタイルを反映させるCSS疑似クラス
任意の子要素にスタイルを反映させるCSS疑似クラス「:nth-child()」
ボックスを横並びにしたとき、最後のマージンを調整する方法
ボックスを横並びにしたとき、最後のマージンを調整する方法