余白のあるメニューの特定の余白を消す方法

|

横並びのメニューで、左側あるいは右側に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に関しては、以下のサイトなどを参考にしてください。

floatを解除するのに「overflow:hidden;」を使用していますが、以下のページに書いてあるような方法でも構いません。

CSSの小技に関する記事(53)

参考サイト

お勧めCSS教本

Powered by Movable Type 4.21-ja

最近のブログ記事