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

個別記事

前後の記事

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

この記事が属するカテゴリー: CSS

CSS による段組レイアウトを実現するには、float プロパティか position プロパティのどちらかを使った方法を選択することになると思うのだけれども、 float 派の自分としては position を使った方法の利点・欠点を知っておかなければと思ったんで、float で作ったのと同じように position でも段組レイアウトを作ったみた。せっかくだから、それらレイアウトをまとめた CSS フレームワークを公開します。

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」あたりで。

その他のレイアウト

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

2007-08-03T12:51:11+09:00 | コメント (4) | トラックバック (1) |

トラックバック

このエントリーのトラックバックURL:: http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/411

このリストは、次のエントリーを参照しています: CSSによる段組レイアウトのフレームワーク:

ウノウラボ Unoh Labs さんからのトラックバック: inline-blockでマルチカラムレイアウト; yamaokaです。 2007年7月19日、CSS 2.1が再び勧告候補になりました。正式な勧告になるのは来年になりそうですが、CSSに携わっている人は... [続きを読む]; 2007年08月09日 17:26

wada さんからのコメント

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

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

2007年08月03日 23:52

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

apro さんからのコメント

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

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

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

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

2007年12月10日 06:12

e-luck さんからのコメント

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

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

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

2007年12月10日 22:31

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を < 、> を > とそれぞれ置き換えてください。

Lucky bag::blog