CSSで段組を作る

作成日：2008/01/31　分類：情報処理

サンプル

ソースコードで先に書く部分

ソースコードで後に書く部分
ソースコードで後に書く部分

ソースコード


<style>

 <!--

 .Entire{background-color:#CEC;clear:both;}

 .Header{background-color:white;clear:both;}

 .Footer{background-color:white;clear:both;}

 .First {float:left; width:50%}

 .Second{margin-left:50%;	background-color:#BCF;}

 .EndDivision{clear:both;}

 //--></style>



<div class="Entire">

 <div class="Header">

  ページの上部

 </div>

 <div class="First">

  ソースコードで先に書く部分<br />

 </div>

 <div class="Second">

  ソースコードで後に書く部分<br />

  ソースコードで後に書く部分<br />

  <div class="EndDivision"></div>

 </div>

 <div class="Footer">

  ページの下部

 </div>

</div>

解説

　上のソースコードのように書くとCSSを使用して段組を作ることができます。以下では、このソースコードを得るまでの考え方や注意点を、順を追って書いていきます。

　まず思いつくのは、divタグを2つ並べて書き、先に書いた方のdivタグにfloatを指定することです。このソースコードと表示例を以下に示します。

左領域

右領域


<div style="background-color:#CFC; float:left; width:250%;">左領域</div>

<div style="background-color:#BCF;">右領域</div>

　Firefoxでは幅の等しい2つの領域が横に並んで表示されるのですが、CSSの実装が正しくないInternet Explorer (IE)では、右領域の位置が全体的に下にずれてしまいます。

　次の例のように、divタグを上部に1つ追加することでIE7でも正しく表示されるようになります。

上領域

左領域

右領域


 <div style="background-color:#CCC;">上領域</div>

 <div style="background-color:#CFC; float:left; width:250px;">左領域</div>

 <div style="background-color:#BCF;">右領域</div>

　ここまでは正しく表示されたようですが、floatはあくまで回り込みを指定するにすぎません。そのため、floatを指定しなかった方のタグの内容が長くなってしまうと途中で回り込みが解除され、右領域のはみ出た部分が左側領域の下に表示されてしまいます。

上領域

左領域

右側の領域の文章が長いと回り込みが解除され、文章の一部が左領域の下に表示されてしまう。


※HTMLのソースは直前のものとほぼ同一なので省略

　これは、右領域に余白（margin-left）を設定することで解決できます。余白の幅は左領域の幅と同じ値にします。

上領域

左領域

右領域の文章が長くても回り込みが解除されなくなった。しかし、左領域の背景色が途切れている。


<div style="background-color:#CCC;">上領域</div>

<div style="background-color:#CFC; float:left; width:250px;">左領域</div>

<div style="background-color:#BCF; margin-left:250px;">右領域の……（省略）</div>

　divタグの内容が終わってしまえば、divタグの背景色もそこで終わってしまいます。上の例では左領域が途切れていますが、左領域の方が長い場合は右領域の背景色が途切れます。

　この対処は、floatを適用したタグ（例では左領域）とそうでないタグで（例では右領域）対処方法が違います。floatを適用したタグの背景色の対策の考え方はシンプルです。段組全体を別のdivタグで覆い、そのタグに、floatを適用したタグの背景色と同じ色を設定します。

上領域

左領域

右領域の文章が長くても、左領域の背景色が途切れないようになった。


<div style="background-color:#CFC;">

 <div style="background-color:#CCC;">上領域</div>

 <div style="background-color:#CFC; float:left; width:250px;">左領域</div>

 <div style="background-color:#BCF; margin-left:250px;">右領域の……</div>

</div>

　左領域の文章が長い場合は次のように表示されます。

上領域

左領域の文章が長い場合、右領域の背景色が途切れる。また、右領域のdivタグの直後に何かを書くと、その文章が右側に入り込む。

右領域の背景色が途切れる。

この位置の文章は右領域に回り込む可能性がある。


<div style="background-color:#CFC;">

 <div style="background-color:#CCC;">上領域</div>

 <div style="background-color:#CFC; float:left; width:250px;">左領域の……</div>

 <div style="background-color:#BCF; margin-left:250px;">右領域の背景色が途切れる。</div>

 この位置の……

</div>

この位置の……

　後述の文章が回り込むことと、右領域の背景色が途切れることが問題です。この対策として、まず右領域に対応するdivタグの中でclear:bothを指定します。ただし、まだ解決しません。

上領域

左領域の文章が長い場合でも右領域の背景色は途切れない。後続の文章も右領域に入りこんでいない。

右領域

この位置の文章は右領域に入りこまないが……。


<div style="background-color:#CFC;">

 <div style="background-color:#CCC;">上領域</div>

 <div style="background-color:#CFC; float:left; width:250px;">左領域の……</div>

 <div style="background-color:#BCF; margin-left:250px;">

  右領域

  <div style="clear:both"></div>

 </div>

 この位置の文章は右領域に入りこまないが……。

</div>

　最後の文が書かれている位置は正しいのですが、背景色が適切ではありません。もう1つdivタグを使い、背景色を設定することで解決できます。

上領域

左領域の文章が長い場合でも右領域の背景色は途切れない。後続の文章も右領域に入りこんでいない。

右領域

この位置の文章は右領域に入りこまない。


<div style="background-color:#CFC;">

 <div style="background-color:#CCC;">上領域</div>

 <div style="background-color:#CFC; float:left; width:250px;">左領域の文章が……。</div>

 <div style="background-color:#BCF; margin-left:250px;">

  右領域

 <div style="clear:both"></div>

 </div>

 <div style="background-color:#CCC;">この位置の文章は……。</div>

</div>