Webデザイン講座 > Webデザイン制作編 > HTML/CSSの小技 > リストで作ったメニューをボタンのように見せかける

リストで作ったメニューをボタンのように見せかける

CSSだけでボタンを作る

Web標準が背景にあってか、メニューをリストとして表すことも多くなりました。しかし、ただリストにしたのでは、見栄えが同じようになってしまいます。そこで、今回はCSSで見栄えを整形する技をお話していきます。

サンプル

ソース

<ul>
<li><a href="#">メニューA</a></li>
<li><a href="#">メニューB</a></li>
<li><a href="#">メニューC</a></li>
<li><a href="#">メニューD</a></li>
</ul>

ul li{
float:left;
list-style-type:none;

}
li a{
display:block;
width:100px;
padding:15px;
margin:10px;
border:outset #cccccc 3px;
text-decoration:none;
background-color:#cccccc;
text-align:center;
color:#000000;
}
li a:hover{
text-decoration:none;
border-style:inset;
background-color:#999999;
}

手順1 リストの「・」を取り除く

まず、リストの「・」を取り除くことから始めます。li要素にlist-style-typeプロパティを指定して値はnoneにしておきます。

ul li {
list-style-type:none;
}

手順2 li要素をfloatプロパティを使って回り込ませる

手順1の状態ではメニューリストが縦に表示されている状態です。ここでCSSのfloatプロパティを利用して、横に並んでいる状態を作ってみます。

ul li {
list-style-type:none;
float:left;
}

上のCSSを適用したとき
上の実行結果

補足

メニュー名が長い場合には、このままの状態だと変なところで改行がされて、ちょっと気持ちの悪いものになってしまいます。もし、必要であれば「white-space」プロパティを入れて、文章で改行されてないように設定しましょう。

手順3 a要素をブロック要素にして、幅を指定する

a要素でリンクできる領域を増やすためにブロック要素のように見せかけます。displayプロパティで値をblockにします。

そして、幅を指定します。ここで幅を指定しないと、テキストの部分だけにリンクがでてしまって、周りの余白にはリンクができないからです。

li a{
display:block;
width:100px;
}

手順4 装飾する

ここまで来ればしめたものです。CSSを使って装飾を施していきましょう。枠線や背景色と文字色です。

li a{
display:block;
width:100px;
padding:15px;
margin:10px;
border:outset #cccccc 3px;

text-decoration:none;
background-color:#cccccc;
text-align:center;
color:#000000;
}

補足

JavaScriptでもロールオーバーを表示することはできますが、CSSだけでもきちんとロールオーバーを再現することが出来ます。:hoverの疑似クラスを利用して、ロールオーバーを再現できます。

li a:hover{
text-decoration:none;
border-style:inset;
background-color:#999999;
}

2005年11月7日更新