CSS による段組レイアウトを実現するには、float プロパティか position プロパティのどちらかを使った方法を選択することになると思うのだけれども、 float 派の自分としては position を使った方法の利点・欠点を知っておかなければと思ったんで、float で作ったのと同じように position でも段組レイアウトを作ったみた。せっかくだから、それらレイアウトをまとめた CSS フレームワークを公開します。
ちなみに、各レイアウトの詳細な説明はありません。それについては、いつか何かで解説します。 また、このフレームワークは自由に使って頂いて構いませんが、それによって生じる問題についてのサポートは行いません。
ただし、こういう状況では崩れるよという報告や、逆にこうすると良いよというアドバイスが頂けるのであれば、ぜひお願いします。 という非常に調子の良いたくらみ。わはは
サンプルの文書構造
一応、2 カラムと 3 カラムを用意。それぞれの文書構造は以下のような感じで、どちらもメインコンテンツが先に来るような構造。
<body>
<div class="container">
<div id="head">...</div>
<div class="content">
<div id="mainContent">
<div class="section">...</div>
</div>
<div id="subContent">
<div class="section">...</div>
</div>
</div>
<div id="foot">...</div>
</div>
</body>3 カラムの方は、サブの後にエクストラを追加しただけ。
<body>
<div class="container">
<div id="head">...</div>
<div class="content">
<div id="mainContent">
<div class="section">...</div>
</div>
<div id="subContent">
<div class="section">...</div>
</div>
<div id="extraContent">
<div class="section">...</div>
</div>
</div>
<div id="foot">...</div>
</div>
</body>div 多くね？とか container ってｗワロスｗｗｗ、とかは心の内に秘めておいてください。ちなみに、ターゲットとしているのは IE 6 以降のモダンブラウザあたり。
position を使った際の問題点
可変幅で position 使って段組レイアウトした場合、ポジショニングした要素が通常フローから外れているために、フッタ部分とポジショニングされた要素が重なってしまう場合がある。この辺は、「floatとpositionの使い分け」を参照。なので、フッタ部分の幅をメインと同じにしてサイド部分まで伸びないようにしたパターンも追加しておいた。
あと、レイアウトが崩れる訳ではないのだけれども、Mac IE では position を使ったパターンが、ウィンドウ幅によっては無駄なマージンが右側に発生して横スクロールバーが出てしまうかもしれない。 まあ、それはマック IE のバグなのだけれども、 可変幅・固定幅ともに発生するんでちと微妙。バグの詳細はMac版 Internet Explorer 5 の CSS バグと回避方法 日本語訳の「隠れた margin」あたりで。
その他のレイアウト
今後、時間があればレイアウトのパターンを追加していきます。 メインとサブが共に可変幅のものとか、カラム数を増やしたものとか、エラスティックレイアウトとか。あくまで予定は未定ですけれども。
Comments
毎日のように拝見させてもらってます。
今回がはじめてのコメントです。
3カラムの場合
┌┐┌┐┌┐
└┘└┘└┘
ではなく
┌┐┌────┐
│││┌┐┌┐│
│││└┘└┘│
└┘└────┘
見たいに
<div class="left">
</div>
<div class="middle">
<div class="middle-left">
</div>
<div class="middle-right">
</div>
な感じに書いたほうが、FIREFOXでバグが起こりにくいって聞きました。
もしかしたら、古いFIREFOXかもしれませんが。。
>>wada さん
はじめまして、コメントありがとうございます。
そうですね、仰るとおり確かにもうひとつ div などで括ることで崩れるのを防ぐことは出来ると思います。
ただ、出来れば構造をいじらずに両サイドを自由に入れ替えたりといった事をしたかったもので、今回のサンプルではその構造は採用しませんでした。
アドバイスありがとうございました :)
第２子に振り回されて忙しそうですね*smile*
激遅コメントですが。position を使い出すと、ひたすら指定しまくる羽目に陥るので、不採用な私です。（いえ、floatでも指定しまくる羽目になるんですが；；；）それと・・・relative の場合、レンダリングが遅れるというか・・・一瞬、元の位置が見える時(pc、というかUA？)があるので、これまた不採用。
で、結局、positon を煮詰めたことなくて、ソース読んでなるほどとか思ったり。私の場合、単純に趣味の世界なhtml書きなのでお気楽ですけども、仕事で書く人は苦労しまくるなあ・・・と、ちょっと同情してしまいますね。
ウチの（代理で書いてる）サイトも最近ようやっとIE7が増えて、でも30%。いつになったら外せるのか cssハック ＆ いつになったら出来るのか XML宣言；；； いや、でも、IE7 70%越えても結局は、ハック外せないのだろうなとか思うと、涙目。
>>apro さん
コメントありがとうございます。
家に帰ると、まさに戦場です（笑
floatとposition、それぞれ良い面、不都合な面があるんですけど、僕的にはレイアウトの大枠にはfloatを使う場面が多いですねぇ。positionはもっと小さいパーツを配置する場合には重宝してます。まあ、単純にfloat使うのに慣れてるってのもありますが。
IE7、どうなんでしょうね。次はIE8って名称になるなんて話も出てきていますが、いまだに日本においてはIE7は自動アップデートには出てきていませんよねぇ。
IE6はまだまだ暫く現役そうですし、なかなか悩ましいです。