CSS（スタイルシート）でレイアウトする
CSS（スタイルシート）を使ってレイアウトする方法はいくつかありますが、ここでは代表的な、「float」を使った段組みレイアウトをご紹介します。
下図の様なレイアウトをする場合を考えてみます。web77.infoも基本的にはこのようなレイアウトで構成されています。
ブロック要素を作る
まずは各エリアを構成するブロック要素を作成していきます。
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を設定していけば、見栄えの良いページを作ることができます。