2009-10-15

floatとmarginの問題は案外根が深くて、今までjsファイルで分岐させたりして対応させてたんだけど、最近はjQueryでDOMをいじったりするためにあんまりjsファイルを読み込ませるとサイトの立ち上がりが遅くなるし、メンテや制作時に分けが分からなくなることが多いので備忘録的な目的でちょっとしたTipsを。

■スタイルシートの構成
ＣＳＳは下記のような構成にしてます。

style.css
@import url("default.css");
@import  url("layout.css");
@import  url("float.css");
@import  url("font.css");
@import  url("module.css");

で各目的ごとに分けます。
あとはdivのブロックごとに都度CSSを作成。ま、この辺はメンテナンス性を重視ですな。
んで注目して欲しいのは"float.css"
ここにブロックを入れ子にするようなレイアウトブロックのfloatに関するプロパティをまとめて記述しておきます。

■floatの記述例
#container {
   overflow: hidden;
}

#container:after {
   content: "";
   display: block;
   clear: both;
   height: 1px;
   overflow: hidden;
}

/* IE6対策 */
/*\*/
 * html #container {
    height: 1em;
    overflow: visible;
}
/**/

こうすることでレイアウトに使うブロックをサクサク追加して、あとのmarginやフォントなどに関するプロパティを"layout.css"にまとめておきます。
floatの記述がご覧の通り長いのでここにさらに他のプロパティも書いちゃうと忙しいときとか久々にメンテするときとか「あで～～～＠＠」ということになりかねないので本当にメンテナンス性重視で構成してます。ま、ある意味頭の悪い構成かもしれないので分かる人は適宜変更して下さい。

■marginの記述例

.banner {
       width:210px;
       _width:230px;
       padding-bottom:20px;
       background: #F9F9F7;
       border: 1px dashed #333;
       padding: 9px;
       display: inline-block;
       margin-bottom: 10px;
}

まあアンダースコアハックは有名ですよね。これでずいぶん楽になりました。あとdisplay:inline-block;は単体のブロックとして最近使ってます。こんだけでも全然違う。
但し、Vista環境では使いようによっては崩れる場合があるので、そこらへんはまた検証したらこのブログに載せます。
バグ報告とか皆さんのアイデアとかコメント下さい。

とかって、これらも参考サイトありきのことなんで、わざわざブログに書くのもどうかと思ったけどたまには制作っぽいことも書きたいな～と思ったのでそんだけっす。
他にも色々と参考になるいいサイトもありますんで是非ご覧下さい。（ありがとうございます。）

それとブロック内のＵＬタグのセンター揃えのVistaのズレに悩んでるんで、またそこら辺もいいサイトとか検証したTipsがあれば紹介します。とはいえもうちょっとブラウザの振る舞いが統一してくれれば助かるんだけど・・・。

参考サイト
http://www.fsiki.com/archive/css-doc/float.html
http://c-brains.jp/blog/wsg/08/05/29-160304.php
http://www.cssmake.com/2008/05/ie6floatmargin2.html