3カラムレイアウトのサンプル

3カラムのレイアウトのサイトは、今でも多くのサイトで使用されています。作り方は様々あるとおもいます。現在でも主流だと思うのはfloatを使用するケースだとおもいますが、CSS3が導入されればもっと簡単にレイアウトできるようになるとおもいます。今回作ったサンプルはXHTML+CSS2.1のサンプルになります。

floatをつかって設定する

今回のサンプルは、イメージ画像にあるように、左右のサイドメニューにfloatを指定して使います。

マークアップをする

まずはHTMLを作成します。このとき一緒にID属性などを振っておくと良いと思います。

左カラム

右カラム

本文と見出し

[/html] ![](https://www.logw.jp/wp-content/uploads/2011/09/singlelayout.gif "singlelayout") CSSの設定をしていないので、実際には画像とは異なりますが、ボックスはすべて縦のシングルレイアウトになります。（画像は高さを指定してあります）

左(leftcolumn)の設定をする

CSSの設定をします。まずは左側の設定をしていきます

#leftColumn{
width:180px;
background-color:#4691dd;
color:#ffffff;
float:left;
}

上記のCSSを指定すると、ブラウザでは下の画像のように表示されていると思います。

右(rightcolumn)を設定する

左側の設定が終わったら、今度は右側のCSSを設定します。

width:180px;
background-color:#ff0000;
color:#ffffff;
float:right;

このCSSを設定することで、コンテンツが入る部分がフッターと一緒に上にきます。イメージ的には下の画像のようになります。

実際にはこんな風にはなりません。上の画像は高さが均一になっている画像なので、高さが指定してあって均一なら見えるかもしれないですが、高さが違ったりすると、下の画像のようになります。

テキストがずれたり、フッターがメニューよりも上にいたりします。実際にこの状態は右カラムの設定をしてブラウザでアクセスをするとなります。メインのコンテンツ部分はここでは見やすくするために緑にしています。 ※テキストもセンターにくるようにbodyにtext-align:center;のスタイルが適用しています。

メインカラム(コンテンツ)部分を設定

両サイドのCSSの設定が終わりました。今度はメインのコンテンツ部分を設定します。CSSは以下のように設定します。

#contents{
margin:0 190px;
color:#595959;
background-color:#0C6;
}

メインのカラムには、widthの設定をしていません。

代わりに、margin:0 190px; と設定しています。これを設定することで、左右から190pxの位置にコンテンツを設定することにしています。左右のwidthをメインのmarginのサイズをすることで、メインのサイズが調整可能となります。メインの箇所を設定すると下のような感じになります。

フッターの設定をする

ここまでくると、後はフッターの設定をするだけになります。footerにCSSを設定して、下に来るように設定します。

#footer{
clear:both;
background-color:#ef9f14;
}

floatの解除をしています。これでフッターを下に持ってきています。この段階で画像のようになっていると思います。

サンプルファイルのダウンロード

サンプルファイルのダウンロードはこのページからできます。