CSSで2カラムのレイアウト

テーブルタグを使ったページレイアウトから、CSSでのレイアウトに変更する場合、一番悩むのが「段組」だと思います(私も悩みました^^;)

CSSでレイアウトするにはまず、ヘッダー、フッター、サイドバーなどを<div>タグを使ってそれぞれブロック分けしておく必要があります。

ブロックにはそれぞれid属性で名前を付けておきます。

このとき<body>タグの直下に<div>タグをおき全体を包んでおきます。
これをしておかないと全体の横幅が指定できません。

例)

<body>
<div id="wrap">
<div id="head">【ヘッダー】</div>
<div id="content">【コンテンツ】</div>
<div id="side">【サイドバー】</div>
<div id="foot">【フッター】</div>
</div>
</body>

次にCSS部分です。
id属性を指定する場合は#を使います。
段組をするときは「float(回り込み)」を使ってブロックを左右に振り分けます。
横幅は「width」で指定します。このとき左右ブロックの合計の幅が全体の幅より少し小さくなるようにしておきます。marginやborderを指定するときはさらにその分も計算しなければいけません。

解除するときは「clear」を使います。例の場合は【フッター】の部分ですね。
解除を忘れるとレイアウトが崩れる原因になります。

例)

#wrap{ width:780px; }
#head{ width:100%; }
#content{ width:545px; float:right;}
#side{ width:230px; float:left;}
#foot{ width:100%; clear:both; }

サンプル.html