ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >3カラムレイアウト >
ヘッダー部分を作る

ヘッダー部分を作る

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

手順2 ヘッダー部分を作る

文字サイズ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 id="header"><img src="./image/logo.gif" alt="タイトルロゴ"></div>

外部ファイル

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

■ その他の項目

レイアウト全体の設定
レフトメニューを作る
メインコンテンツを作る
ライトメニューを作る

3カラムレイアウトの解説に戻る


HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.