余白のあるメニューの特定の余白を消す方法
横並びのメニューで、左側あるいは右側にmarginで余白を空けた際、最初あるいは最後のメニュー部分だけ余白は必要ではありませんよね。classを指定しないで余白を消す方法です。
first-childあるいはlast-childセレクタを使用すれば簡単に実現できますが、IE6など一部のブラウザでは対応していません。そこで、ネガティブマージンを使用することで、無駄にclassを指定することなく、最後の余白だけ消すことが出来ます。
(X)HTMLコード
<div class="menu">
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
</ul>
</div >CSSコード
div.menu {
width:430px;
border: solid 1px #000;
}
div.menu ul {
margin:0;
padding:0;
margin-right:-10px;
overflow:hidden;
list-style:none;
zoom:1;
}
* html div.menu ul { /* for IE6 */
margin-right:-20px;
}
div.menu ul li {
float:left;
width:100px;
margin-right:10px;
padding:10px 0;
text-align:center;
background:#ddd;
}liにmargin-right:10px;を指定して右側に余白を空け、ulにmargin-right:-10px;を指定してリストの一番右側の余白を相殺します。
IE6ではfloatしたボックスのmarginの値が2倍になるバグがあるので、* htmlハックを利用してIE6用に、2倍の-20pxをulの右側の余白に指定します。このバグを回避する方法はいくつかあるのですが（例えば「display:inline;」を指定する）、今回はこのような処置を取ります。
IE6でネガティブマージンを有効にするために「zoom:1;」を指定します。これはhasLayoutプロパティの値をtrueにするためです。hasLayoutに関しては、以下のサイトなどを参考にしてください。
ウノウラボ Unoh Labs: hasLayoutとは何か
floatを解除するのに「overflow:hidden;」を使用していますが、以下のページに書いてあるような方法でも構いません。
