[PR] 容量300MB、月額125円、高性能なサーバが日本最大級のバックボーンに直結。さくらのレンタルサーバ。

すぐに役立つＣＳＳ実践テクニック・ＴＩＰＳ集

ロールオーバー風のリンクボタンを作ろう　～リストタグ編　その１～

　リストタグのテキストにリンクをつけた場合のロールーオーバー風リンクボタンを作ってみましょう。ポイントはスタイルシートによるインラインレベル要素とブロックレベル要素の切り替えです。

スタイルシート適用前

　リストタグは前後に改行が入るブロックレベル要素なので、何も設定しなければ自動的に縦に並びます。

HTMLソースコードサンプル

　リンクタグ編その２とまったく同じソースコードです。ちなみに、リンク先を「#（シャープ）」にするとページトップを表示するリンクができます。

<ul>
<li><a href="#">リンクＡ</a></li>
<li><a href="#">リンクＢ</a></li>
<li><a href="#">リンクＣ</a></li>
</ul>

スタイルシート適用後

　リストタグは前後に改行が入るブロックレベル要素なので、横に一列に並べるにはスタイルシートのフロートを設定する必要があります。

HTMLソースコードサンプル

　サンプルでは<DIV>タグでリストタグを囲みましたが、リンクタグ編その２のように<ul>タグにクラスを設定しても同じことができます。

<div class="sample03">
<ul>
<li><a href="#">リンクＡ</a></li>
<li><a href="#">リンクＢ</a></li>
<li><a href="#">リンクＣ</a></li>
</ul> </div>

スタイルシートサンプル

　<a>タグは前後に改行が入らないインラインレベル要素なので、リンクの幅を設定するためにブロックレベル要素に変更します。パディングだけの設定でもできるようです。

div.sample03 li {
list-style-type:none;
float:left;
width:120px;
height:30px;
margin:3px;
text-align:center;
}
div.sample03 a {
display:block;
width:100%;
padding:5px 0px;
text-decoration:none;
background-color:#3333CC;
color: #FFFFFF;
}

div.sample03 a:hover {
background-color:#FF9900;
}

サイトトップページへ戻る