【Web制作】 nカラムのレイアウトを作るPublished2007-04-0220:35 2カラム 2カラムのレイアウトを作る方法について。 HTMLとCSSを次のように書きます。 2カラムのレイアウトのHTML <div id="container"> <div id="main"> Main Column </div> <div id="sub"> Sub Column </div> </div> 2カラムのレイアウトのCSS #container { clear: both; /* #mainのwidth + #subのwidth */ width: 960px; } #main { /* サイドバーが左の場合に書く */ float: right; /* サイドバーが右の場合に書く */ float: left; width: 720px; } #sub { float: left; width: 240px; } widthは適当な値に変更して下さい。 3カラム 3カラムのレイアウトを作る方法について。 中央にメインコンテンツ、左右にサイドバーがあるレイアウトを想定しています。 HTMLとCSSを次のように書きます。 3カラムのレイアウトのHTML <div id="container"> <div id="wrapper"> <div id="main"> Main Column </div> <div id="sub"> Sub Column </div> </div> <div id="extra"> Extra Column </div> </div> 3カラムのレイアウトのCSS #container { clear: both; /* #mainのwidth + #subのwidth + #extraのwidth */ width: 960px; } #wrapper { float: left; /* #mainのwidth + #subのwidth */ width: 800px; } #main { float: right; width: 640px; } #sub { float: left; width: 160px; } #extra { float: left; width: 160px; } widthは適当な値に変更して下さい。