月別アーカイブ 2007年08月

前後の月

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

この記事が属するカテゴリー
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 ってｗワロスｗｗｗ、とかは心の内に秘めておいてください。ちなみに、ターゲットとしているのは 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) |はてなブックマーク