CSSレイアウト
応用レイアウト
すべて可変幅の３カラムレイアウト
すべてのカラムを固定幅する他に、すべて可変幅にすることで、メインコンテンツを上のほうに記述することもできます。
基本的には、すべて固定幅にする場合と同じです。フロート（回り込み）を用いたレイアウト（１）を参照してください。
気をつけておくべきことは、%（パーセント）による幅指定は親要素の幅を100%とした時の相対的な長さの指定方法です。この例の場合は、
- 中央カラム ＆ 左カラム ・・・ 親要素は id="wrapper" のdiv要素
- 右カラム ＆ wrapper ・・・ 親要素はbody要素
となっていることに注意してください。
また、中央カラム と 左カラム 、右カラム と wrapper の合計幅がそれぞれ 100% になっていないことに注目してください。
今回の場合だと、70 + 29.5 = 99.5[%] と指定されています。なぜ0.5%の空白を持たせるのかというと・・・要素を回り込ませるには、多少の余裕（スペース）が必要、と考えればいいでしょう。（可変幅の場合のみ。固定幅のときは余裕は無くても大丈夫。）
合計を100%とした場合、ブラウザにもよりますが、（ウインドウを小さくしていくと）レイアウトが崩れたりします。それを回避させるために、0.5%の余裕を持たせてあります。
以下、ソースコードになります。
<html>
<head>
<title>３カラム＋ヘッダー＋フッター（全カラム可変幅１）</title>
<link rel="stylesheet" href="../sample6_4.css" type="text/css" />
</head>
<body>
<div id="header">
<p>ヘッダー</p>
</div>
<div id="wrapper">
<div id="center-column">
<p>中央のカラムです。</p>
</div>
<div id="left-column">
<p>左側のカラムです。</p>
</div>
</div>
<div id="right-column">
<p>右側のカラムです。</p>
</div>
<div id="footer">
<p>フッター</p>
</div>
</body>
</html>
* { margin: 0; padding: 0; }
#wrapper { width: 70%; float: left; }
#header {
height: 100px;
background: #f99;
}
#left-column {
float: left;
width: 29.5%;
background: #fdd;
}
#center-column {
float: right;
width: 70%;
background: #fff;
}
#right-column {
float: right;
width: 29.5%;
background: #fdd;
}
#footer {
height: 40px;
background: #f99;
clear: both;
}
コピペが面倒な人用に、ファイルをまとめた物を用意しました。ZIPで圧縮してあります。CSSレイアウトサンプル６－４（ZIP）
固定幅のときと同じように、div要素（wrapper）を一つ少なくすることもできます。カラムの記述順は 左カラム ⇒ 中央カラム ⇒ 右カラム のようになりますので、上の方法とどちらを使うべきかよく検討してください。
また、今回も上のレイアウト方法の場合と同様に、左カラム＋中央カラム＋右カラム = 100% になっていません。
以下、ソースコードです。
<html>
<head>
<title>３カラム＋ヘッダー＋フッター（全カラム可変幅２）</title>
<link rel="stylesheet" href="../sample6_5.css" type="text/css" />
</head>
<body>
<div id="header">
<p>ヘッダー</p>
</div>
<div id="left-column">
<p>左側のカラムです。</p>
</div>
<div id="center-column">
<p>中央のカラムです。</p>
</div>
<div id="right-column">
<p>右側のカラムです。</p>
</div>
<div id="footer">
<p>フッター</p>
</div>
</body>
</html>
* { margin: 0; padding: 0; }
#header {
height: 100px;
background: #f99;
}
#left-column {
float: left;
width: 25%;
background: #fdd;
}
#center-column {
float: left;
width: 50%;
background: #fff;
}
#right-column {
float: left;
width: 24.5%;
background: #fdd;
}
#footer {
height: 40px;
background: #f99;
clear: both;
}
コピペが面倒な人用に、ファイルをまとめた物を用意しました。ZIPで圧縮してあります。CSSレイアウトサンプル６－５（ZIP）
スクリーンショットを見てもらえばわかりますが、右カラムの右側に空白が出来ています。これは、３つのカラムの幅の合計が 99.5% となっているためです。この空白ですが・・・気になりますよね（笑）合計幅を100%にすることは出来ないので、誤魔化してしまうのがいいでしょう。
具体的には、
- ヘッダーとフッターの幅も99.5%にする
- 右カラムの背景色とbodyの背景色を同じ色にする
などの対策が考えられますので、試してみるといいかもしれません。
