ウェブデザイナー募集 ホームページ作成HOME

ホームページ作成講座HAC Design

CSS ロールオーバー

CSS ロールオーバー

ロールオーバーとはマウスを画像などに載せた時に、画像が入れ替わったりする動作のことを言います。メニューバーなどに使われていることが多いですね。

下記の画像にマウスを載せてみてください。

これをロールオーバーといいます。今まではメニューバーなどをロールオーバーさせたい場合は、java script(ジャバスクリプト)を使うのが一般的でした。しかし、java script(ジャバスクリプト)をHTMLに組み込んでしまうと、HTMLが複雑になってしまうだけでなく、ページの表示が遅くなります。

そういったことを避ける為にjava script(ジャバスクリプト)を外部ファイルに書き込んだりするのも手ですが、CSSでもjava script(ジャバスクリプト)で書き込んでいたロールオーバーと同じように表示することができます。

意外と簡単にできてしまうためjava script(ジャバスクリプト)でロールオーバーを書いていた人なら楽々できてしまいます。また、画像ファイルも背景画像として、CSSで表示するのでHTMLはスッキリします。

それでは、CSSでロールオーバーを書いて見ましょう。

#image a{
display:block;
width:200px;
color:#F0027F;
background:url(../images/bottan.jpg) no-repeat;
height:50px;
line-height:50px;
text-decoration:none;
text-align:center;}

#image a:hover{
color:orange;
background:url(../images/bottan2.jpg) no-repeat;
}

今回のロールオーバーには、2つの色違いの同じバナーを使いました。
【bottan.jpg】と【bottan2.jpg】です。このふたつにマウスを載せたときの設定と乗せていないときの状態をCSSで設定してあげたると上記のようになります。

ここで大事なのが、【display:block】という指定。

ロールオーバーをリンクの<a>タグに使う場合に使用します。これをブロック要素といいます。
これを書かないと、画像が上手く表示されないので注意しましょう。

また、【height:50px】と【line-height:50px】は文字の高さの中央揃えのために書きます。
paddingなどで設定してもいいのですが、細かい数字設定やブラウザによっては上手く表示されなったりするので、【height:50px】と【line-height:50px】を使い文字を中央に揃えます。数字はもちろん、設定する画像の高さによって変えてください。

そして、文字色も背景画像に合わせて変えてあります。これはお好みでどうぞ。変えたくなければ、#image a:hover の color を設定しなければいいだけです。

そしてこれをHTMLに書くとこうなります。

<div id ="image"><a href="URL">見本です。</a></div>

至ってシンプルですね。これはサイドメニューやバナーなどいろいろなところに使えます。

CSSでロールオーバーができるようになると画像のタグがHTMLから減りますし、ソースも軽くなります。java script(ジャバスクリプト)でロールオーバーにしていた人は是非試してみてください。

また当サイトでも色の設定だけによるロールオーバーをサイドメニューに設定しています。

これは、【display:block】で背景色を設定しただけです。そのため背景画像は用意しないでロールオーバーしていますね。このようにロールオーバーといっても画像を用意しなくてもできます。

ではサイドバーに当サイトの指定しているCSSを見本にロールオーバーを設定してみましょう。

CSSでロールオーバーをサイドバーに指定する

このサイトではサイドメニューのHTMLは下記のように設定しています。

<div id="sidemenu">
<dl>
<dt>CSSの基礎知識</dt>
<dd><a href="URL">CSS フォント</a></dd>
<dd><a href="URL">CSS テーブル</a></dd>
<dd><a href="URL">CSS ロールオーバー</a></dd>
<dd><a href="URL">CSS 背景</a></dd>
<dd><a href="URL">CSS margin</a></dd>
<dd><a href="URL">CSS float</a></dd>
</dl>
</div>

<dl>というタグは用語と説明をセットで使える便利なタグです。<ul>タグや<li>タグでサイドメニューを設定している人も覆いのですが、ここでは<dl>タグを使用しました。

<dl>タグは定義リストといい、 <dt>には用語<dd>には説明を入れます。この場合メニューカテゴリとメニューといった感じでペアにしています。

このサイトでは、<dd>にロールオーバーを使っています。<dd>には<p>タグや<img>タグなども入れることができます。ここではリンクタグ入れました。

そのためCSSでロールオーバーを設定するには<div id="sidemenu">の<dd>の<a>タグになります。

そのCSSの設定は下記の通り。

#sidemenu dd{
font-size:13px;
border-bottom:1px solid #fff;
}

#sidemenu dd a{
display:block;
height:20px;
line-height:20px;
color:#666666;
padding-left:16px;
text-decoration:none;
}

#sidemenu dd a:hover{
color:#fff;
background:orange
;}

このように、【display:block】とマウスが乗ったときの #sidemenu dd a:hover に対して
【background:orange】が設定されることによりロールオーバーされています。

実際にHTMLとCSSを書いてみると簡単だということがよくわかります。

読んでいるだけではきっとよくわからないので、実際に設定をしてみてください。


CSSの基礎知識
CSS・スタイルシートとは
ブログのCSS
CSSでレイアウト 書き方編
CSSでレイアウト 実践編
CSSポイントレイアウト
CSS フォント
CSS テーブル
CSS ロールオーバー
CSS 背景
CSS margin
CSS float
あると便利!
CSS エディター
FireFoxとCSS
CSSのお勧め書籍
リファレンスHOME
ウェブサイトHOME