フッター部を作る
次はフッター部です。
サイトイメージが爽やかな屋外空間なので、フッター部のイメージは地面と言ったところでしょうか。そうすることで、価格看板をイメージしたメニュー部がしっかり地面に立っているようになります。
となると、フッターの背景は茶系統ということになりますが、境界がはっきりしてしまうので、こちらもグラデーションをかけます。
フッター部の内容ですが、コピーライトくらいしかありませんので、簡単に済ませましょう。
では、以下の内容でfooter.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/footer.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="copyright">
<address>
Copyright © 2009 Cosmos Oil Co.,Ltd. Virtual Station All Rights Reserved.
</address>
</div>
</body>
</html>
footer.html
ここでは、フッター用のスタイルシート（footer.css）を読み込みます。
コピーライトは<address>要素に入れます。
そして、その全体を<div>要素で囲みます。
コピーライトの内容は好きにして下さい。
次に、以下の内容でfooter.cssを作り、cssフォルダに保存して下さい。
body {
background-image: url(../images/footer_back.gif);
background-repeat: repeat-x;
}
#copyright {
text-align: center;
position: relative;
top: 1em;
}
#copyright address {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-weight: bold;
font-style: italic;
}
footer.css
bodyに対しては、ヘッダー部と同様に背景を指定し、X方向に繰り返します。
#copyrightに対しては、文字を中央寄せにします。
このままでは文字が一番上に表示されますので、本来表示される場所から１文字分下へ移動させます。
addressに対しては、フォントを明朝風にし、サイズを14ピクセルにし、太字の斜体にします。
今回作ったファイルはこちらで確認できます ー＞ footer.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/footer.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="copyright">
<address>
Copyright © 2009 Cosmos Oil Co.,Ltd. Virtual Station All Rights Reserved.
</address>
</div>
</body>
</html>
footer.html
background-image: url(../images/footer_back.gif);
background-repeat: repeat-x;
}
#copyright {
text-align: center;
position: relative;
top: 1em;
}
#copyright address {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-weight: bold;
font-style: italic;
}
footer.css
