CSSで3カラムレイアウトを実現する
3カラムレイアウトは、これまでの2カラムレイアウトの応用で実現することができます。基本的に使用するテクニックはこれまでと同じです。
フロート型：3カラムレイアウト
まず、フロート型で、メイン（div#main）、サブ1（div#sub1）、サブ2（div#sub2）の3カラムレイアウトを実現する方法をみてみましょう。
（X）HTMLのソースでは、メイン、サブ1、サブ2の順で出現します。
<div id="container">
<div id="wrapper">
<div id="main">メイン</div>
<div id="sub1">サブ1</div>
</div>
<div id="sub2">サブ2</div>
</div>
3カラムレイアウトをフロート型で実現する方法もさまざまですが、今回は次のようにします。
div#container {
position: relative; /* 基準位置の座標（0 , 0）を提供
}
div#main {
position: relative;
width: 70%;
top: 0;
left: 20%;
width: 60%;
background-color: red;
}
div#sub1 {
position: absolute;
top: 0;
left: 0;
width: 20%;
background-color: blue;
}
div#sub2 {
position: absolute;
top: 0;
right: 0;
width: 20%;
float: right;
background-color: blue;
}
div#footer {
width: 100%;
background-color: black;
color: white;
}
仕組みとしては、図14のように、メインを右フロート、サブ1を左フロートさせ、両者をラッパー（div#wrapper）で囲みます。さらに、ラッパーを左フロート、サブ2を右フロートさせ、全体をコンテナで囲みます。
ポジショニング型：3カラムレイアウト
ポジショニング型で3カラムレイアウトを実現する方法もさまざまですが、今回は、メインコンテンツを相対配置、サブ1とサブ2を絶対配置で指定する方法を見てみましょう。
（X）HTMLソースは、メイン、サブ1、サブ2をコンテナで囲んで記述します。
<div id="container"> <div id="main">メイン</div> <div id="sub1">サブ1</div> <div id="sub2">サブ2</div> </div>
CSSは、次のように指定します。今回は、サブ1とサブ2を絶対配置にします。この場合も、2カラム同様、絶対配置する内容が絶対配置しない内容の高さを超えた場合、フッターと重なって表示されるという点に注意してください。
div#container {
position: relative; /* 基準位置の座標（0, 0）を提供 */
width: 100%;
}
div#main {
position: relative; /* 座標（0, 20%）に相対配置 */
width: 70%;
top: 0;
left: 20%;
width: 60%;
}
div#sub1 {
position: absolute; /* 座標（0, 0）に絶対配置 */
top: 0;
left: 0;
width: 20%;
}
div#sub2 {
position: absolute; /* 座標（0, 0）に絶対配置 */
top: 0;
right: 0;
width: 20%;
}
このCSSレイアウトのポイントは次のとおりです。
- コンテナに「position: relative」を指定し、ポジショニングの基準位置（座標[0,0]）を提供する。コンテナの幅として、ここでは「width: 100%」を指定しておく
- メインコンテンツに「position: relative」を指定し、「top: 0」「left: 20%」を指定する。これにより、メインコンテンツが座標（0, 20%）に相対配置される。さらに「width: 60%」を指定しておく
- サブコンテンツ1に「position: absolute」を指定し、「top: 0」および「left:0」を指定する。これによりサブコンテンツ1が座標（0, 0）に絶対配置される。幅は「width: 20%」とする
- サブコンテンツ2に「position: absolute」を指定し、「top: 0」および「right: 100%」（あるいは「left: 80%」でも可）を指定する。これによりサブコンテンツ1が座標（0, 100%）に絶対配置される。幅は「width: 20%」とする
まとめ
一般的によく見られるような比較的単純なレイアウトであれば、clearプロパティやclearfixを使用することで、フッタの重なりをコントロールすることができる分フロート型が向いています。横配置の得意なフロート型に対し、ポジショニング型は、縦配置が得意だと言えるでしょう。自分より後の要素も自由に配置をコントロールすることができますが、フッタの重なりには注意が必要です。
今回紹介したフロート型、およびポジショニング型のレイアウトテクニックは、どちらも、（X）HTMLのソース上では、メインのコンテンツを先に記述し、サブコンテンツは後から記述することができます。CSSによるクロスブラウザな表示も大切ですが、まずは（X）HTMLの構造を考え、内容の重要なものから先に記述することが大切です。
これにより、CSSが利用できない環境であっても、重要な内容を先に伝えることができ、SEO上でも有効なコンテンツとなるのです。これまでの連載で述べてきたように、見た目はCSSで後から自由に変更することができます。
