パソコン教室・パソコンスクールISA船橋校 店長ブログ

こんにちは。

今日は【CSS】のお話です。

CSSレイアウトをしていると、marginを使って余白を作って
調整したりすることが出てきます。

CSSでレイアウトを始めたばかりの方たちが
最初にぶつかる壁が、おそらくこの現象ではないでしょうか？

この現象は主にfloatを使ってレイアウトをしているときに
おきる現象です。

widthの数値も全部計算してあっているはずなのに
なぜかブラウザで見ると、レイアウトが崩れてしまう・・・。

そんなことがIE6ではよくおきます。

実はfloatしている要素にmarginの指定をすると
IE6では、そのmarginが2倍にとられてしまうのです・・・。

なんともやっかいですね（＾－＾；）

つまり、たとえばCSS上では

margin-left:10px;

と設定していても、20px分とられてしまうので
仮にぴったりサイズ指定をしていたとしても
これによりレイアウトが崩れてしまう原因となることがあるわけですね。

ここまで現象の説明をしてきましたが、知りたいのはやっぱり解決方法です。

解決方法はとても簡単。

【解決方法】
floatしているブロックに対して

display: inline;

と入れるだけです。

例）
※widthの設定は適当な数字です。

#leftbox   {       display: inline;   
    float: left;   
    width: 180px;   
    height: 200px;   
    margin-left: 10px;   }