CSSによる段組レイアウトのフレームワーク

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 ってwワロスwww、とかは心の内に秘めておいてください。ちなみに、ターゲットとしているのは IE 6 以降のモダンブラウザあたり。

position を使った際の問題点

可変幅で position 使って段組レイアウトした場合、ポジショニングした要素が通常フローから外れているために、フッタ部分とポジショニングされた要素が重なってしまう場合がある。この辺は、「floatとpositionの使い分け」を参照。なので、フッタ部分の幅をメインと同じにしてサイド部分まで伸びないようにしたパターンも追加しておいた。

あと、レイアウトが崩れる訳ではないのだけれども、Mac IE では position を使ったパターンが、ウィンドウ幅によっては無駄なマージンが右側に発生して横スクロールバーが出てしまうかもしれない。 まあ、それはマック IE のバグなのだけれども、 可変幅・固定幅ともに発生するんでちと微妙。バグの詳細はMac版 Internet Explorer 5 の CSS バグと回避方法 日本語訳の「隠れた margin」あたりで。

その他のレイアウト

今後、時間があればレイアウトのパターンを追加していきます。 メインとサブが共に可変幅のものとか、カラム数を増やしたものとか、エラスティックレイアウトとか。あくまで予定は未定ですけれども。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: https://www.lucky-bag.com/mt/mt-tb.cgi/4

ウノウラボ Unoh Labs - inline-blockでマルチカラムレイアウト (2007年8月 9日 17:26)

yamaokaです。 2007年7月19日、CSS 2.1が再び勧告候補になりました。正式な勧告になるのは来年になりそうですが、CSSに携わっている人は... 続きを読む

chimdon.com (PukiWiki/TrackBack 0.3) - PC/NETのetcetra/2008-04-14 (2008年4月14日 00:27)

プライベートメモ、仕事場メモごちゃ混ぜ。 「ITもういいや」って気分全開なので、特に情報整理するでもなく、こないだの3月までの間に溜まったメモ放出。(投げ... 続きを読む

Comments

wada said:

毎日のように拝見させてもらってます。
今回がはじめてのコメントです。

3カラムの場合
┌┐┌┐┌┐
└┘└┘└┘
ではなく
┌┐┌────┐
│││┌┐┌┐│
│││└┘└┘│
└┘└────┘
見たいに
<div class="left">
</div>
<div class="middle">
<div class="middle-left">
</div>
<div class="middle-right">
</div>
な感じに書いたほうが、FIREFOXでバグが起こりにくいって聞きました。
もしかしたら、古いFIREFOXかもしれませんが。。

e-luck said:

>>wada さん
はじめまして、コメントありがとうございます。
そうですね、仰るとおり確かにもうひとつ div などで括ることで崩れるのを防ぐことは出来ると思います。
ただ、出来れば構造をいじらずに両サイドを自由に入れ替えたりといった事をしたかったもので、今回のサンプルではその構造は採用しませんでした。
アドバイスありがとうございました :)

apro said:

第2子に振り回されて忙しそうですね*smile*

激遅コメントですが。position を使い出すと、ひたすら指定しまくる羽目に陥るので、不採用な私です。(いえ、floatでも指定しまくる羽目になるんですが;;;)それと・・・relative の場合、レンダリングが遅れるというか・・・一瞬、元の位置が見える時(pc、というかUA?)があるので、これまた不採用。

で、結局、positon を煮詰めたことなくて、ソース読んでなるほどとか思ったり。私の場合、単純に趣味の世界なhtml書きなのでお気楽ですけども、仕事で書く人は苦労しまくるなあ・・・と、ちょっと同情してしまいますね。

ウチの(代理で書いてる)サイトも最近ようやっとIE7が増えて、でも30%。いつになったら外せるのか cssハック & いつになったら出来るのか XML宣言;;; いや、でも、IE7 70%越えても結局は、ハック外せないのだろうなとか思うと、涙目。

e-luck said:

>>apro さん
コメントありがとうございます。
家に帰ると、まさに戦場です(笑

floatとposition、それぞれ良い面、不都合な面があるんですけど、僕的にはレイアウトの大枠にはfloatを使う場面が多いですねぇ。positionはもっと小さいパーツを配置する場合には重宝してます。まあ、単純にfloat使うのに慣れてるってのもありますが。

IE7、どうなんでしょうね。次はIE8って名称になるなんて話も出てきていますが、いまだに日本においてはIE7は自動アップデートには出てきていませんよねぇ。
IE6はまだまだ暫く現役そうですし、なかなか悩ましいです。