[PR] 容量300MB、月額125円、高性能なサーバが日本最大級のバックボーンに直結。さくらのレンタルサーバ。
ロールオーバー風のリンクボタンを作ろう ～リストタグ編 その１～
リストタグのテキストにリンクをつけた場合のロールーオーバー風リンクボタンを作ってみましょう。ポイントはスタイルシートによるインラインレベル要素とブロックレベル要素の切り替えです。
スタイルシート適用前
リストタグは前後に改行が入るブロックレベル要素なので、何も設定しなければ自動的に縦に並びます。
＜ＨＴＭＬソースの記述例＞
リンクタグ編その２とまったく同じソースコードです。ちなみに、リンク先を「#（シャープ）」にするとページトップを表示するリンクができます。
<ul>
<li><a href="#">リンクＡ</a></li>
<li><a href="#">リンクＢ</a></li>
<li><a href="#">リンクＣ</a></li>
</ul>
スタイルシート適用後
リストタグは前後に改行が入るブロックレベル要素なので、横に一列に並べるにはスタイルシートのフロートを設定する必要があります。
＜ＨＴＭＬソースの記述例＞ ～その２との違いに注目！～
サンプルでは<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;
}
