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カラムレイアウトを作るイメージを持っておいてください。