レイアウトテンプレ

2カラム、3カラムの基本レイアウト設定です。

*----------------- 2カラム -----------------*
html
head
body

#wrapper
#sideber ←	#main →

* HTML
<!-- 2カラム　基本パターン --> <div id="wrapper"> <div id="main"> </div> <div id="sideber"> </div> </div>
* CSS
/* cssソース */ #wrapper{ width:700px; } #main{ width:500px; float:right; } #sidebar{ width:200px; float:left; }

wrapperの入れ子に、サイドバーは左、メインは右にfloatプロパティで配置する。
この場合、HTML上では常にメインがサイドバーより先に配置されるようにすることが可能。
入れ子のラッパーと、左右の段の幅の合計の幅を一致させるが、borderやmarginなども考慮する。
ユーザビリティを優先させるなら、ラッパーを相対値（%）、サイドバーを絶対値（px）指定にしてリキッドレイアウトにする。


*----------------- 3カラム -----------------*
html
head
body

#wrapper
#sideber ←	#content → #main ← #extra →

* HTML
<!-- 3カラム　基本パターン --> <div id="wrapper"> <div id="content"> <div id="main"> </div> <div id="extra"> </div> </div> <div id="sideber"> </div> </div>
* CSS
/* cssソース */ #wrapper{ width:750px; } #content{ width:550px; float:right; } #sidebar{ width:200px; float:left; } #main{ width:300px; float:left; } #extra{ width:250px; float:right; }

wrapperの入れ子に、サイドバー1は左、メインとサイドバー2（extra）をcontentの入れ子に入れて右にfloatプロパティで配置する。