CSSレイアウト
応用レイアウト
すべて固定幅の３カラムレイアウト
左カラム：120px、右カラム：180px、 中央カラム：500px の固定幅３カラムのレイアウトを考えてみましょう。（固定幅の２カラムレイアウトについては、フロート（回り込み）を用いたレイアウト（３）を参考にしてください。）
左右と中央のカラム幅を合計すると、800px となります。したがって、横幅が 800px のボックスとして wrapper2 というdiv要素が３つのカラムを囲んでいます。また、左カラムと中央カラムを囲む wrapper という幅が 620px のdiv要素も用意してあります。
以下のような記述を行うことで、（多くの場合）メインコンテンツとなる中央カラムをHTML文章の上のほうに書くことができます。
この場合は、 中央カラム ⇒ 左カラム ⇒ 右カラム の順に記述になります。
<html>
<head>
<title>３カラム＋ヘッダー＋フッター（全カラム固定幅１）</title>
<link rel="stylesheet" href="sample6_2.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<p>ヘッダー</p>
</div>
<div id="wrapper2">
<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>
</div>
</body>
</html>
* { margin: 0; padding: 0; }
body { text-align: center; }
#wrapper { text-align: left; width: 800px; margin: 20px auto; }
#wrapper2 { width: 620px; float: left; }
#header {
height: 100px;
background: #f99;
}
#left-column {
float: left;
width: 120px;
background: #fdd;
}
#center-column {
float: right;
width: 500px;
background: #fff;
}
#right-column {
width: 180px;
background: #fdd;
float: right;
}
#footer {
height: 40px;
background: #f99;
clear: both;
}
コピペが面倒な人用に、ファイルをまとめた物を用意しました。ZIPで圧縮してあります。CSSレイアウトサンプル６－２（ZIP）
また、カラムの順番は 左カラム ⇒ 中央カラム ⇒ 右カラム となってしまいますが、下のようなレイアウト方法も考えられます。それぞれのカラムに配置するコンテンツの中身によって、どちらの方法が良いのか考えてみてください。
ちなみに、下の方法であれば、div要素を一つ少なくすることができます。
<html>
<head>
<title>３カラム＋ヘッダー＋フッター（全カラム固定幅２）</title>
<link rel="stylesheet" href="sample6_3.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<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>
</div>
</body>
</html>
* { margin: 0; padding: 0; }
body { text-align: center; }
#wrapper { text-align: left; width: 800px; margin: 20px auto; }
#header {
height: 100px;
background: #f99;
}
#left-column {
float: left;
width: 120px;
background: #fdd;
}
#center-column {
float: left;
width: 500px;
background: #fff;
}
#right-column {
float: right;
width: 180px;
background: #fdd;
}
#footer {
height: 40px;
background: #f99;
clear: both;
}
コピペが面倒な人用に、ファイルをまとめた物を用意しました。ZIPで圧縮してあります。CSSレイアウトサンプル６－３（ZIP）
