CSSデザインノートでタグ「margin」が付けられているもの

今まで、ボックス要素を上下左右中央する場合、トリッキーな方法を用いて実現させていました。

でも、IE8以降から、次のような、簡単なCSSで実装可能になったようです。

(X)HTMLコード

<div class="box"></div>

CSSコード

.box {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    width:500px;
    height:500px;
}

どうして、このような書き方で実装可能なのかというのは、以下のブログに詳しく書いてあります。

私は勝手に、「top」と「bottom」、「left」と「right」は同時指定できないと思っていたのですが、勘違いでしたね。もっとしっかり仕様書を読まなければ...。

ということは、次のように、topなどで位置を決めることで、widthやheightを固定しない方法もできるのですね。

CSSコード

.box {
    position:absolute;
    top:20%;
    left:20%;
    right:20%;
    bottom:20%;
}

この場合であれば、「margin:auto;」の指定や、width、heightの指定は不要になります。

画像をコンテンツの中央に配置したい場合は、marinを使います。ポイントは、画像を表示するimgタグはインライン要素ですがそれではmarinが有効にならないので、ブロック要素にすることです。

(X)HTMLコード

<img src="image.gif" alt="" class="center" />

CSSコード

.center {
   display:block;
   margin:0 auto;
}

「IE6以前のブラウザにおいて、floatしたブロック要素にマージン(margin)を指定すると値が2倍になってしまう」というのは非常に有名なIE6のバグなのですが、最近floatを解除するのに、親要素にfloatを指定して回り込みを解除することをよくしているので、このバグによく遭遇します。このバグの解決方法を紹介します。

(X)HTMLコード

<ul>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>

CSSコード

li {
   display:inline;
   float:left;
}

display:inline;にすると、他のブラウザで不都合は起こらないのか?という疑問が起こるわけですが、仕様どおりの動作をするブラウザでは起こりません。

というのも、「floatを指定した要素にdisplayプロパティは無視される」と仕様書に書いてあります。

float:left・・・左に浮動するブロックボックスを生成する。 続く内容は、('clear'プロパティの指定に従いつつ)そのボックスの右側に上から流し込まれる。 このプロパティが'none'以外の値を取る場合、その要素の'display'プロパティは無視される。

視覚整形モデルより引用

また、リストを横並びにして、余白をマージンで空ける場合があります。その際、最後の余白は不必要な場合、親要素にマイナスのマージン(ネガティブマージン)を指定することで、各要素の間だけに余白を空けることが出来ます。しかし、IE6ではネガティブマージンが効かない場合があります。

IE6でネガティブマージンを有効にするために「zoom:1;」を指定します。

CSSコード

ul {
   zoom:1;
}
これはhasLayoutプロパティの値をtrueにするためです。hasLayoutに関しては、以下のサイトなどを参考にしてください。

例えば、Amazonのアフィリエイトみたいに、書籍の画像と説明文を横並びにする方法です。 説明文が長いとき画像の下に回りこまないのが美しいですよね。方法は二通りあります。

  1. marginで指定
  2. overflowで指定

以下にサンプル画像を示します。

サンプル画像

基本の(X)HTMLコードは以下のようになります。

(X)HTMLコード


<div class="column">
<img src="image.gif" alt="" />
<p>
テキストテキストテキストテキストテキスト
・・・(略)・・・
テキストテキストテキストテキストテキスト
</p>
</div>

1.marginで指定

画像の横幅が固定の場合は、その大きさ分をmarginで空けます。

CSSコード

.column img{
   float:left;
}

.column p{
   margin-left:160px;
}

この場合、次の要素も回り込んだままなので、clearなどを指定して回り込みを解除しなければなりません。

2.overflowで指定

画像の横幅が未知の場合は、余白を固定することが出来ません。overflowを使用することで、テキストが回り込まなくなります。

CSSコード

.column img{
   float:left;
}

.column p{
   overflow:hidden;
   zoom:1;
}

「zoom:1;」はIE6でレイアウトが崩れるのを防ぐために指定します。

横並びのメニューで、左側あるいは右側に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;」を使用していますが、以下のページに書いてあるような方法でも構いません。

最近のブログ記事