-
10ヶ月ぶりに3回目となりました。
今回は画像を使ったように見せかけた
ULタグを利用してのブロックメニューの作り方の紹介です。
フルブラウザへ対応させる為、プロでもあまり出来ない技を使用するので一人前を目指す人は是非とも習得してください。
今回ポイントとなるのはフルブラウザ対応策の
●中央寄せ
●余白の作り方
の2点となります
下記サンプルソースで画像のようなメニューが出来ます。
-
ソースは。。。。
<div id="menu">
<h1>SITE MENU</h1>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">BBS</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
body {
font-size: 12px;
background-color:#fff;
text-align:center;
}
#menu {
width:150px;
margin:0 auto;
text-align:left;
}
#menu h1 {
font-size:100%;
margin:0;
}
#menu ul {
margin:0;
padding:0;
border:#ccc 1px solid;
border-bottom:0;
background-color:#eee;
}
#menu li {
margin:0;
padding:0;
list-style:none;
}
#menu li a {
display:block;
width:100%;
line-height:150%;
border-top:#fff 1px solid;
border-bottom:#ccc 1px solid;
color:#666;
text-decoration:none;
text-indent:8px;
}
#menu li a:hover {
background-color:#f4f4f4;
border-top:#ddd 1px solid;
}
■解説
まずは中央寄せにする為にIE5.5以下はautoが利用できません。
それを回避するためにbody要素に
text-align:center;
とIEのバグを利用して中央寄せにします。
それだけでは他のブラウザは中央寄せにならないので
#menuに
margin:0 auto;
を指定して中央寄せに
text-align:center;でテキストの中央寄せを解除するために
text-align:left;
と設定します。
aタグのインライン要素をdisplay:block;とブロック要素へ変更します。
コレだけではIEのバグがおきるのでwidth:100%を指定。
次に立体的に見せるため同じくaタグに
border-top:#fff 1px solid;
とハイライトを付けます。
さらにマウスオーバーしたとき(a:hover)も自然に押し込んだ形になるように
border-top:#ddd 1px solid;
と影を演出します。
これで画像を使ったような立体的な処理が出来ました。
次に余白を付けて調整しますがここがポイント!
IE5.5以下は余白に対するCSSの解釈が違います。
幅500pxのボックスがあります。
左右10pxづつ余白を付けたとしましょう。
横幅はいくつになりますか?
普通ならボックス500px+余白20px(左右10px)で520pxとなります。
しかしIE5.5以下では500pxのままなのです。
そこでメニュー部のテキストの余白をあけるためにtext-indentを利用して余白に見せかけます。
text-indentは文章の1行目にインデントを付けるものです。
また縦の余白を付けるためline-heightを用いてテキスト上下に余白を付けてます。
こうする事で幅を変えずに余白を作ることが出来ます。
ハックを一切使用しなくてもHTMLのマーキングの仕方やCSSを工夫すればフルブラウザへの対応も可能になります。
まずはソースをそのままコピペして
お好きな背景色を付けてみてください
