cssでレイアウトするときのコツ

coldfusionとは関係なく、単なるhtmlの事です。

今さらですが、cssでページをレイアウトするときのコツがつかめました。

イントラでサイトを作るときでも、いくつかのブラウザでチェックをしています。
今はIE6、IE7、FireFox2.0の３種類です。

CSSでレイアウトをすると、マージンmarginとパディングpaddingの解釈がブラウザによって違うので、表示がぐちゃぐちゃになってしまうことがあります。

完全にやろうとすると、かなりマニアックなCSSハックの世界が待っているようです。
とりあえず、イントラならそこまで必要ないですね。普通。

ただ、せめて社内シェアのトップ３くらいは押さえた方がいいと思います。


で、そんなCSSのレイアウトが崩れてしまう悩みを解決するコツを最近覚えたので書いておきます。

すごい単純。

width,height 　と　margin,padding　を同時に使わない。

これがコツです。これだけで、ブラウザによるレイアウト崩れがかなりなくなります。


つまり、

div#contents {
 width:700px;
 margin:5px 0 5px 10px;
}

などとしない　ってことです。

widthとmarginを指定するなら、その子要素でやります。

div#contents {
 width:700px;
}

div#contents div#main {
 margin:5px 0 5px 10px;
}

といった感じ。


ブラウザによってレイアウトが崩れてしまったときはお試しあれ。