ヘッダー部分を作る

レイアウト全体の設定ができたので次はヘッダー部分を作ります。

文字サイズ95%、枠線1px のボックスです。ヘッダーのボックスの下側には左右のサイドバーとメインコンテンツのボックスが配置されるので5pxの余白を入れています。前ページのdivタグのボックスで横幅を710pxと指定しているのでヘッダーのボックスは横幅を指定しません。

ヘッダーのボックスの中にはホームページのタイトルを入れるので <h1>タグを使用します。　タイトルの文字を小さくしたい場合は外部ファイルのCSSで調整します。

【ブラウザ表示】

ヘッダー部分のソース

<div id="header"><h1>ホームページのタイトル</h1></div>

外部ファイル

div#header{
padding:5px;
font-size:95%;
margin-bottom:5px;
border:1px solid silver;
}

テキストのタイトルよりもロゴ画像の方が良い場合はヘッダーのボックスにイメージタグを入れて下さい。タイトルはHPの看板となる部分なのでロゴ画像にするのが一般的です。

【ブラウザ表示】

ヘッダー部分のソース

外部ファイル

div#header{
padding:10px;
margin-bottom:5px;
border:1px solid silver;
}