2カラムレイアウト － ヘッダー・フッターの設置

2カラムレイアウト － ヘッダー・フッターの設置

左右に寄せる枠を作る前に、左右に寄せない部分＝ヘッダー・フッター部分を作成してしまいます。

このページで言うと、ヘッダー部分とはタイトルとグローバルナビが表示されている部分、フッター部分はコピーライト記載部分になります。

<div id="wrap">
	<div id="header">
		タイトルなど
	</div><!-- /header -->
	<div id="inner">
		ここに左右の内枠を作ります。
	</div><!-- /inner -->
	<div id="footer">
		コピーライトなど
	</div><!-- /footer -->
</div><!-- /wrap -->

DIVタグは幅の指定をしない場合、記述した部分の範囲内（上の例では外枠780pxの範囲内）で100％表示されます。このような形で左右に寄せない部分は必ず出てくるものですので、左右の枠を作り始めてHTMLソースがゴチャゴチャしてくる前に、あらかじめ作っておきましょう。

なお上の例では、ヘッダー、フッターとも左右の余白を取らないよう、左右の余白を指定している「<div id="inner">～</div>」の外側にそれぞれを記述しました。ヘッダー、フッターの左右両端にもメイン部分同様に余白を設けたい場合は、それぞれを「<div id="inner">～</div>」の内側に記述してください。