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

左右に寄せない部分をあらかじめ作っておく。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

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

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

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

[HTMLの記述]

<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>」の内側に記述してください。