久しぶりにWEBネタをUPします。
ホームページでボタンにマウスをのせるとボタンの色や
形状が変わったりする効果を見たことがありますでしょうか？
こちらをクリック↓
これはロールオーバーという設定でHP制作に使うDreamweaverと
いうソフトを使えばカンタンに作成できます。
が、その方法だとJavascriptという言語が自動的にhtmlソースに
記述されてしまいます。今まではメニューバーなどをロールオーバーさせたい場合は
Javascriptを使うのが一般的でしたがJavascriptをhtmlに組み込んでしまうと
htmlが複雑になってしまうだけでなく、ページの表示が遅くなります。
出来ればCSS仕様で作った方がベターです。
今日はそのCSSを使ってロールオーバーを作る方法を紹介したいと思います。
まずはPhotoshopやIllustratorなどグラフィックソフトを使って
以下のようなマウスを乗せる前用と乗せた時用、2つのボタンを用意します。
（サイズは同じにしてください。ここでは100px×30pxで作成しています）
ボタン名は通常表示用の【a.jpg】、ロールオーバー時の【a_over.jpg】
以下それぞれ【i.jpg】【u.jpg】【e.jpg】【o.jpg】としています。
次にhtmlファイルのソースです。
*********************************************************************
<div id=”navi”>
<ul>
<li class=”aaa”><a href=”#” mce_href=”#”><img src=”a.jpg” mce_src=”a.jpg” alt=”あああああ” width=”100″ height=”30″ border=”0″></a></li>
<li class=”iii”><a href=”#” mce_href=”#”><img src=”i.jpg” mce_src=”i.jpg” alt=”いいいいい” width=”100″ height=”30″ border=”0″></a></li>
<li class=”uuu”><a href=”#” mce_href=”#”><img src=”u.jpg” mce_src=”u.jpg” alt=”ううううう” width=”100″ height=”30″ border=”0″></a></li>
<li class=”eee”><a href=”#” mce_href=”#”><img src=”e.jpg” mce_src=”e.jpg” alt=”えええええ” width=”100″ height=”30″ border=”0″></a></li>
<li class=”ooo”><a href=”#” mce_href=”#”><img src=”o.jpg” mce_src=”o.jpg” alt=”おおおおお” width=”100″ height=”30″ border=”0″></a></li>
</ul>
</div>
*********************************************************************
naviというナビゲーション用のボックスに<ul>タグ<li>タグを使用してボタンを上記のように配置します。
次にCSSファイルのソースです。
*********************************************************************
ul,li{
margin:0;
padding:0;
}
#navi{
width:800px;
height:30px;
margin:0;
padding-top:20px;
}
#navi li{
float:left;
width:100px;
height:30px;
}
#navi a{
width:100px;
height:30px;
display:block;
}
#navi a img{
visibility: hidden;
text-decoration: none;
}
#navi li.aaa a{
background-image:url(a.jpg);
background-position: left top;
background-repeat: no-repeat;
}
#navi li.aaa a:hover{
background-image:url(a_over.jpg);
background-position: left top;
background-repeat: no-repeat;
}
#navi li.iii a{
background-image:url(i.jpg);
background-position: left top;
background-repeat: no-repeat;
}
#navi li.iii a:hover{
background-image:url(i_over.jpg);
background-position: left top;
background-repeat: no-repeat;
}
#navi li.uuu a{
background-image:url(u.jpg);
background-position: left top;
background-repeat: no-repeat;
}
#navi li.uuu a:hover{
background-image:url(u_over.jpg);
background-position: left top;
background-repeat: no-repeat;
}
#navi li.eee a{
background-image:url(e.jpg);
background-position: left top;
background-repeat: no-repeat;
}
#navi li.eee a:hover{
background-image:url(e_over.jpg);
background-position: left top;
background-repeat: no-repeat;
}
#navi li.ooo a{
background-image:url(o.jpg);
background-position: left top;
background-repeat: no-repeat;
}
#navi li.ooo a:hover{
background-image:url(o_over.jpg);
background-position: left top;
background-repeat: no-repeat;
}
*********************************************************************
あとはhtmlファイルに上記CSSファイルを外部リンク読み込みすれば完成です。
上手くできましたでしょうか？
【display:block】という指定はロールオーバーをリンクの<a>タグに使う場合に使用します。
これをブロック要素といいます。
これを書かないと、画像が上手く表示されないので注意しましょう。
パソコンスクールISA渋谷校/INOUE
