ヘッダーを作る
折角ページを作っても、ヘッダーとフッターがないと、どうも締まりがヨロシクナイ！
そうは、思いませんか？
今回と次回の記事では、ヘッダーとフッターのつけ方を書いていきますね。
[第０１３号]２カラム（２段組）レイアウトで組み上げた２カラムレイアウトにヘッダーをつけてみることにします。
レイアウト設計図は、下図のようになりますね。
さて、ヘッダー部分のCSSを設定してみましょう。
そのほかの設定については、 ２カラム（２段組）レイアウト を参照してくださいね。
- footerの設定（#header）
- width（幅）：620px
- height（高さ）：100px
- margin（外側の余白）：上下左右に0px
- padding（内側の余白）：上下左右に10px
- background-color（背景色）：silver（シルバー）
もう何も言わなくてもわかるかもしれませんね＾＾
少し注意すべきなのは、width（幅）のサイズでしょうか。
640px ではありませんよ！
もしも、padding（内側の余白）が、上下左右に0px だったら、640px になりますね。
<div id="body">
<div id="header">ヘッダー</div>
<div id="contents">
<div id="main">メイン</div>
<div id="side">サイド</div>
<div class="c-both"></div>
</div>
</div>
</body>
▼CSS部分
margin: 0px;
padding: 0px;
background-color: #cc0000;/* ワインレッド */
text-align: center;
}
#body {
width: 640px;
margin: 20px auto;
padding: 20px;
background-color: white;
text-align: left;
}
#header {
width: 620px;
height: 100px;
margin: 0px;
padding: 10px;
background-color: silver;
}
#contents {
width: 640px;
margin: 0px;
padding: 0px;
}
#main {
float: left;
width: 470px;
margin: 0px;
padding: 10px;
background-color: #66CCFF;/* 水色 */
}
#side {
float: right;
width: 130px;
margin: 0px;
padding: 10px;
background-color: orange;
}
.c-both {
clear: both;
}
ヘッダー部分に height（高さ）を100px 設けましたが、これは、設定しなくてもよい場合が多いです。
設定しなくてはならない場合は、背景を画像で表示させたい時や、背景画像としてタイトルを表示させる時などですね。
画像を背景にするときは「background-image: url("img/title.gif")」のように書きます。
透過画像にすれば、背景色が透けて見えますので、うまく利用するといいですね。
▼表示例
▲イメージ図です。実際の表示とはサイズ（実寸の半分）が異なります<(__)>
