超初心者向け CSS講座④ CSSでレイアウトする

CSS（スタイルシート）を使ってレイアウトする方法はいくつかありますが、ここでは代表的な、「float」を使った段組みレイアウトをご紹介します。

下図の様なレイアウトをする場合を考えてみます。多くのブログやウェブページは基本的にはこのようなレイアウトで構成されています。

ブロック要素を作る

まずは各エリアを構成するブロック要素を作成していきます。
htmlのbody内は以下の様になります。

<div id=”whole”> <!- 全体を包括するブロック ->
 
	<div id=”header”> <!- HEADER部分を構成するブロック ->
		HEADERの内容
	</div>
 
	<div id=”contents”> <!- CONTENTS部分を構成するブロック ->
		CONTENTSの内容
	</div>
 
	<div id=”menu”> <!- MENU部分を構成するブロック ->
		MENUの内容
	</div>
 
	<div id=”footer”> <!- FOOTER部分を構成するブロック ->
		FOOTERの内容
	</div>
 
</div> <!- whole End ->

レイアウトする

上記で作成した各ブロックをCSS（スタイルシート）によって制御・デザインし、レイアウトしていきます。

/* まず全体のmarginとpaddingをリセットします。*/
* {
	margin: 0;
	padding: 0;
}
 
#whole {
	width: 800px; /* サイト全体の幅を指定 */
	margin: 0 auto; /* 左右のmarginにautoを指定するとセンタリングします */
}
 
#header {
	width: 100%; /* whole内で100%の幅になります */
	height: 50px; /* 高さを指定 */
}
 
#contents {
	width: 650px;
	float: right; /* CONTENTS部分を右に寄せます */
}
 
#menu {
	width: 150px; /* CONTENTS部分と合わせてwholeの幅と同じになるように */
	float: left; /* MENU部分を左に寄せます */
}
 
#footer {
	width: 100%;
	height: 50px;
	clear: both; /* floatを解除します */
}

あとは各エリアの中に更にボックスを作ったり、marginやpaddingを設定していけば、見栄えの良いページを作ることができます。