ヘッダー部を作る
簡単なところから、ヘッダー部を作りましょう。
ヘッダー部は、サイトロゴなど常に表示させておきたいものを配置します。
ここはFLASHで作っても良いのですが、作成ソフトにお金がかかったりするので、単純に画像を配置します。
あとは、サイトマップやサイトポリシーなどのリンクを表示しましょう。
問題は背景です。
青空のグラデーションを表示するのですが、フレームにまたがってグラデーションを表示させることになるので、グラデーション画像を分割してヘッダー部に割り当てなければなりません。
ただ、ヘッダー部は縦幅が決まっており、スクロールもしないので画像が途切れてくれるため、ヘッダー部に対してグラデーション画像を分割する必要がありませんので、この問題は先送りできます。
では、ヘッダー部を作っていきましょう。
このページの幅は600ピクセルです。
幅や背景の指定はスタイルシートを使います。
背景画像とサイトロゴの作り方は、そのうち、当サイト「各種ソフトウェアの棚」で紹介しますが、ホームページの作り方を優先させるため、ここではサボります。
よろしければこちらから各画像をダウンロードして下さい。
背景画像−＞site_back.gif （右クリックでリンク先のファイルをダウンロードして下さい）
サイトロゴ−＞site_logo.gif （右クリックでリンク先のファイルをダウンロードして下さい）
これらを使ってヘッダー部を作っていきます。
以下の内容でheader.htmlを作り、virtual_stationnに保存して下さい。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>コスモス石油 バーチャルステーション</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/header.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="site_logo"><a href="#"><img src="images/site_logo.gif"/></a></div>
<ul>
<li id="policy"><a href="#">サイトポリシー</a></li>
<li id="map"><a href="#">サイトマップ</a></li>
<li id="contact"><a href="#">コンタクト</a></li>
</ul>
</body>
</html>
header.html
<head>要素の内容に関しての説明は省きますが、header.cssを読み込んでいることを確認して下さい。
画像（site_logo.gif）はリンクの指定をし、<div>要素の中に入れ、idを割り当てています。
あとはリストでサイトマップなどを表示します。
ここでのリンクは省略しておきます。
このHTMLに対して、スタイルを設定します。
HTMLファイルと同じ場所にcssフォルダを作り、以下のスタイル設定をcommon.cssというファイル名とheader.cssというファイル名でcssフォルダに保存して下さい。
* {
border: 0px;
padding: 0px;
margin: 0px;
common.css
body {
background-image: url(../images/site_back.gif);
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
}
#site_logo {
position: absolute;
top: 0px;
left: 0px;
}
ul {
position: absolute;
right: 20px;
top: 0px;
}
li {
list-style-type: none;
display: inline;
padding-left: 20px;
font-size: 12px;
}
li a {
color: #000000;
}
header.css
最初にユニバーサルセレクタ（*）で、すべての要素に対し枠や余白を０にします。
この指定をしておくと、そのあとのスタイルで指定しなくても良くなります。
重複して指定することを避けるため、私は定石のように利用しています。
bodyに対しては、背景とフォントを指定します。
背景画像で用意したのは、縦長の画像ですが、repeat-xでX方向（横）に繰り返すことができるため、幅のある画像を用意する必要がありません。
画像の入ったボックス（#site_logo）は絶対配置で左上に固定します。
リストも絶対配置で上に固定するのですが、右にぴったりさせたら見にくかったため、右から20ピクセル離しました。
リストの要素に対しては、行頭記号を消し、１列に並べ、それぞれの左側に20ピクセルの間隔を空け、文字サイズを12ピクセルにしています。
リストのリンクの文字色ですが、このままだとほとんどのブラウザで青色の表示になるため、黒に変更しています。
スタイルの記述順に説明したので、プロパティと説明を見比べてみて下さい。
比較的理解しやすいかと思います。
今回作ったファイルはこちらで確認できます ー＞ header.html
表示されたブラウザの表示幅を変えてみて下さい。
画像は左側に、リストは右側に固定されているのを確認して下さい。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>コスモス石油 バーチャルステーション</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/header.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="site_logo"><a href="#"><img src="images/site_logo.gif"/></a></div>
<ul>
<li id="policy"><a href="#">サイトポリシー</a></li>
<li id="map"><a href="#">サイトマップ</a></li>
<li id="contact"><a href="#">コンタクト</a></li>
</ul>
</body>
</html>
header.html
border: 0px;
padding: 0px;
margin: 0px;
common.css
background-image: url(../images/site_back.gif);
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
}
#site_logo {
position: absolute;
top: 0px;
left: 0px;
}
ul {
position: absolute;
right: 20px;
top: 0px;
}
li {
list-style-type: none;
display: inline;
padding-left: 20px;
font-size: 12px;
}
li a {
color: #000000;
}
header.css
