●実践的な段組みの作り方

 CSS3の草案には、段組み専用のプロパティはありますが、CSS2にはありません。しかしながら、段組み同様のレイアウトは可能です。2カラム、画面全体を使った段組み構成、および、ヘッダ領域(タイトル領域とタイトルの説明領域)、フッタ領域(最下段)の構成にも対応できるように解説してみます。基本は、ブロック要素である div要素に floatプロパティを組み合わせた方法です。ここでは、需要の多い3カラムの段組み構成と本体を中央に配置したブログ調の段組みで解説します。(ですので、ブログ作りにも通じる基本形です。)わかりやすいように、3カラムを構成している領域の背景色とは異なる全体の背景色(背景画像)を指定し、また、段組みを構成しているdiv要素には色の付いたボーダーをそれぞれ付けてみました。異なるボーダー色ということは、異なるdiv要素ですから、異なる背景色や背景画像を個別に指定できることになります。

【CSS】↓

body {
 background-color: #ffddff;
 background-image: url("y7b.gif");
 color: #000000;
 margin-top: 5%;
 margin-bottom: 10%;
 text-align: center;
}
div#content {
 width: 870px;
 border: solid 2px #000000;
 margin-left: auto;
 margin-right: auto;
}
div#column1 {
 float: left;
 width: 180px;
 background-color: #ffffff;
 text-align: left;
 border: solid 4px #ff00ff;
 padding: 10px;
}
div#column2 {
 float: left;
 width: 400px;
 background-color: #ffffff;
 text-align: left;
 border: solid 4px #008000;
 margin-left: 10px;
 padding: 10px;
}
div#column3 {
 float: left;
 width: 180px;
 background-color: #ffffff;
 text-align: left;
 border: solid 4px #800080;
 margin-left: 10px;
 padding: 10px;
}

【HTML】↓

<div id="content">
 <div id="column1">divの要素内容</div>
 <div id="column2">divの要素内容</div>
 <div id="column3">divの要素内容</div>
</div>

【解説】↑↓

 floatプロパティを複数使ってCSSの段組みを作ると、ブラウザの表示幅を狭めた際に右側ブロックが左側ブロックの下に潜り込んでしまう場合があります。これを回避させるには、一緒に指定する widthプロパティの値にパーセンテージ(〜%)を使うか、段落を構成している複数の div要素の回りをさらに div要素で囲み、そのdiv要素にwidthプロパティで幅を指定した上で、全体の幅を固定します。幅が狭いと右側ブロックが再度潜り込んでしまいますので、ブラウザの表示画面を縮小・拡大させながら調整してください。

 なお、(img要素のようにあらかじめ、幅を持っている要素以外は)floatプロパティを指定した要素には、widthプロパティで幅を指定しなければなりません。また、段落を構成する div要素に(左右の)マージンを設けた場合は、そのマージンを加算した全体の幅を widthプロパティで指定します。

【補足】↓

 ここでは、それぞれのdiv要素にfloatプロパティの値として、 leftを指定していますが、float: left、float: left、float: rightと最後のdiv要素にrightの値を使うこともできます。2カラム構成の場合も同様、float: left、float: rightまたは、float: right、float: rightを指定した右寄せ構成の段組みを作ることも可能です。それから、body要素に適用している text-align: centerの指定は、すべてのブラウザが標準モード(標準準拠モード)で表示されるDTDの場合は、省略することができます。(その際は、段組みごとに指定しているtext-align: leftのテキストの行揃えを省略します。)当サイトのトップページは、2カラムですが、ヘッダとフッタを付けたレイアウトで作ってあります。併せて、(ソースを)ご参照ください。ここでは、解説していませんが、フッタを付ける場合、フッタを構成する div要素には、clearプロパティを使って、回り込みを回避させ、画面中央にくるように配置します。(clearプロパティ、および floatプロパティにつきましては、別項に解説していますので併せて、ご参照ください。)

 XHTML/CSS・目次 | 配置と表示・目次

Copyright (C) 2007 http://www.xml.vc/