3カラムレイアウト − 外枠・ヘッダー・フッター
外枠を作りヘッダー・フッター部分を記述、メインスペースに余白を設定するのは3カラムレイアウトでも同様です。外枠作成、ヘッダー・フッターの作成詳細については「2カラムレイアウト − 外枠を作る」「2カラムレイアウト − ヘッダー・フッターの設置」を参考にしてください。
HTMLの記述
<div id="outline">
<div class="header">
タイトルなど
</div><!-- end header -->
<div class="outline-marign">
ここに左右の内枠を作ります。
</div><!-- end outline-marign -->
<div class="footer">
コピーライトなど
</div><!-- end footer -->
</div><!-- end outline -->
<div id="outline">
<div class="header">
タイトルなど
</div><!-- end header -->
<div class="outline-marign">
ここに左右の内枠を作ります。
</div><!-- end outline-marign -->
<div class="footer">
コピーライトなど
</div><!-- end footer -->
</div><!-- end outline -->
CSSの記述
body { text-align:center; }
#outline {
width:750px;
text-align:left;
margin:0 auto;
}
.outline-margin { margin:0 10px; }
ブラウザ上の表示
（分かりやすくするため、高さ、色、枠線をつけています）
body { text-align:center; }
#outline {
width:750px;
text-align:left;
margin:0 auto;
}
.outline-margin { margin:0 10px; }
ブラウザ上の表示
（分かりやすくするため、高さ、色、枠線をつけています）
3カラムでも2カラム同様、左右の余白はしっかりとっておきましょう。
なお、上記ソースおよび表示例に「ここに左右の内枠を作ります。」とありますが、3カラムレイアウトの場合、2カラムを作った後でさらに2つの枠を作ることになります。ですので、この段階ではまだ2カラムレイアウトを作るイメージを持っておいてください。