floatで作る縦並びメニュー
1.ベースとなるリストを作る
まずは、ul要素を用いて、li要素でメニューの分だけ用意する。またテキストをa要素で記述する。さらにそれらをdiv要素で包括する。
[html]
<div id="navi">
<ul>
<li><a="#">HOME</a></li>
<li><a="#">サービス概要</a></li>
<li><a="#">会社概要</a></li>
<li><a="#">お問い合わせ</a></li>
<li><a="#">サイトマップ</a></li>
</ul>
</div>
[/html]
2.リスト要素の設定
普段制作する時は個々に設定はしませんが、ここでは個々に設定します。(CSS側)
※ここで注意しなくてはならない点はul要素やli要素にmarginとpaddingの両方の指定をしておくこと。「Windows Internet Explore6」や「Opera8」はデフォルトのスタイルにおけるul要素のpaddingは0ですが、「Firefox1」の場合は左方向に40pxのpaddingを持っているなど、ブラウザごとにより差があるので、統一するために指定します。
[css]
#navi ul{
list-style: none;
margin: 0;
padding: 0;
}
#nav li{
margin: 0;
padding: 0;
}
[/css]
3.ul要素を包括したdiv要素のボックス幅を設定
ここの設定で縦並びか、横並びかを設定します。(CSS側)
[css]
#navi{
width: 150px;
}
[/css]
4.マーカー画像の設定
メニューによくある三角をつける。(お好きなものをつけてください。つけなくても可)
[css]
#navi a { background: #FFFFFF url(images/list_marker_red.gif) left center no-repeat;
padding: 4px 0 4px 10px;
}
[/css]
5.リンク領域を拡大し、アレンジを加える
このままではリンク領域が小さすぎて押しにくいので、大きくする。また区切り線を入れ、分かれていることを明確にする。
[css]
#navi ul {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid #CCC;
}
#navi li {
margin: 0;
padding: 0;
border-bottom: 1px solid #CCC;
}
#navi a {
background: #FFFFFF url(images/list_marker_red.gif) left center no-repeat;
padding: 4px 0 4px 10px;
display: block;
width: 140px !important; /*Windows IE対策のため、ボックス幅を指定 */
width /**/: 150px; /*Window IE5用の値を指定 */
color: #333;
text-decoration: none;
}
[/css]
ここで注目する点はa要素のdisplayプロパティにblockを指定した点がポイントです。ブロックレベル要素として表示させることで、リンク領域が#naviのコンテンツの幅いっぱいまで広げることができます。
※ブロックレベルのボックスであれば、widthプロパティを入れなくても自動的に親要素のボックスまで広がりますが、「Windows Internet Explore6」では、displayプロパティでa要素をブロックレベル要素として表示させた場合、同時にボックス幅を明示しておかなければ、リンク領域だけが元の幅のままに留まってしまうことがあります。
6.オンマウス時のスタイルを指定する
リンク領域が広がりクリックしやすくなりましたが、次にオンマウスで変化させ、よりわかりやすくする。
[css]
#navi li {
margin: 0;
padding: 0;
border-bottom: 1px solid #CCC;
background: #EEA031 url(images/list_marker_white.gif) left center no-repeat;
}
#navi a:hover {
color: #FFFFFF;
background-image: none;
background-color: transparent;/*オンマウス時に背景色を透過する指定*/
}
[/css]
floatで作る縦並びメニューのサンプルはこちら
上記の記述とは多少異なる部分はあります。詳しくはソースを確認してください。