ulタグで縦並びのボタンメニューを作る - CSS Tips - 仮想空間

ulタグを使った、ボタンメニューの作り方を紹介します。画像は一切使用しません。

HTMLの記述

<ul>
<li><a href="#">リンク1</a></li>
<li><a href="#">リンク2</a></li>
<li><a href="#">リンク3</a></li>
<li><a href="#">リンク4</a></li>
</ul>

CSSの記述

ul{
margin:0px;
padding:0px;
list-style:none;
}
 
a{
text-decoration:none;
text-align:center;
width:160px;
display:block;
}
 
a:link,
a:visited{
color:#0000FF;
background:#DDDDDD;
border-width:1px;
border-color:#EEEEEE #CCCCCC #CCCCCC #EEEEEE;
border-style:solid;
}
 
a:hover{
color:#0000AA;
background:#CCCCCC;
border-width:1px;
border-color:#DDDDDD #BBBBBB #BBBBBB #DDDDDD;
border-style:solid;
}

ポイント

aタグは本来インラインレベル要素なので、文字自体をクリックしないとリンク先には飛べません。

そこで、aタグにdisplay:block;を指定してブロックレベル要素に変え、横幅を指定することによって、文字以外の部分をクリックしてもリンク先に飛べるようにします。

更に、このaタグの擬似クラス（a:link，a:visited，a:hover）に背景とボーダーを設定することによって、ボタンらしくみえるようにします。

投稿日

07.03.08

カテゴリー

CSS Tips

コメント

0

トラックバック

0