3カラムレイアウト - 外枠・ヘッダー・フッター

3カラムでも2カラム同様、外枠作りはしっかりと。

CSSレイアウト実践講座

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

運営者プロフィール

運営者ブログ*

お問い合わせ

3カラムレイアウト - 外枠・ヘッダー・フッター

外枠を作りヘッダー・フッター部分を記述、メインスペースに余白を設定するのは3カラムレイアウトでも同様です。

外枠作成、ヘッダー・フッターの作成詳細については「2カラムレイアウト - 外枠を作る」「2カラムレイアウト - ヘッダー・フッターの設置」を参考にしてください。

[HTMLの記述]

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

[CSSの記述]

body { text-align:center; }
#wrap { width:780px; text-align:left; margin:0 auto; }
#inner { margin:0 10px; }

[ブラウザ上の表示]

タイトルなど
ここに左右の内枠を作ります。
コピーライトなど
(分かりやすくするため、高さ、色、枠線をつけています)

3カラムでも2カラム同様、左右の余白はしっかりとっておきましょう。

なお、上記ソースおよび表示例に「ここに左右の内枠を作ります。」とありますが、3カラムレイアウトの場合、2カラムを作った後でさらに2つの枠を作ることになります。ですので、この段階ではまだ2カラムレイアウトを作るイメージを持っておいてください。

ここで使用しているCSSプロパティ