Nuts Choco Web Design - 情報誌 -

マウスオーバーの動作を行うと、リンクのボタンの色や画像が変わるような動作を作る場合はJavaScriptを使うことがあります。ただ、クライアントによっては最初からJavaScriptを無効にしていることがあり、正常にリンクの動作も行われない可能性があります。今回はCSSを使ったリンクボタンについて説明します。HTMLで以下のようなリンクと画像をあらかじめ作成しておきます。

【HTMLタグ】
<ul id="test">
 <li id="test1"><a href="#">test1</a></li>
 <li id="test2"><a href="#">test2</a></li>
</ul>

【ボタンの画像】


上記の設定でスタイルシートを以下のような記述にすることで
リンクボタンが動的に動いている感じのものが作成できます。

【スタイルシート】
/*基本設定*/
#test { height: 25px;list-style-type: none;}
#test li {float: left;width: 60px;}
#test li a {display: block;overflow: hidden;width: 100%;height: 0 !important;height /**/:25px;
padding-top: 25px;background-image: url(test.jpg);}
/*画像指定*/
#test1 a { background-position:  0     0; }
#test2 a { background-position: -60px  0; } 
/*マウスオーバーの画像指定*/
#test1 a:hover { background-position:  0     -25px; }
#test2 a:hover { background-position: -60px  -25px; }

【説明】
1.list-style-type:none でリストタグの「・」を無効にします。
2.float: left で配置を指定します。
3.display: block; で A リンクの属性を文字箇所以外もクリックできるようにblock に変更します。
4.background-position:  0     0; は横方向 0 の上方向 0 の画像を表示させる
5.background-position: -60px  -25px; は横方向 65px の上方向 25px の画像を表示させる

完成はこちら