第四章【ヘッダー画像を作る】
この四章はホームページの根幹の部分です。結構、覚える事があるので頑張っていきましょう！
では、ホームページのトップにヘッダー画像を配置しましょう。画像は、またまた適当に『GIMP』で作っておきました。これを使ってください。
←壁紙の上で右クリックしてから『名前をつけて画像を保存』を選択。同様に「img」フォルダの中に保存します。ファイル名は「top-photo.png」。
【XHTML】
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>これだけは覚えておきたいXHTML入門！</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="wrap">
<div id="header">
<img src="./img/top-photo.png" width="800" height="300"
alt="これだけは覚えておきたいXHTML入門！" />
</div>
<div id="main">
</div>
<div id="menu">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
はい、設置しました。
が！思いっきりずれてしまっています。
何も設定していないので当然と言えば当然と言えますが…。
では、このヘッダー画像を中心に持っていくことを優先して設定していきましょう。
ブラウザで表示されるテキストや画像を中心（センター）に表示する方法はどんなものがありましたか？
・・・・・・
そうです！『text-align: senter;』ですね。ではCSSのbody要素に設定しましょう。
おっと！その前にちょっとtipsを披露しましょう。
それは、この段階で適当なテキストを記述しておくと言うものです。これが後からじわじわ効いてくるのですね～（笑）
まあ、とにかくやってみましょう！
【XHTML】
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>これだけは覚えておきたいXHTML入門！</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="wrap">
<div id="header">
<img src="./img/top-photo.png" width="800" height="300"
alt="これだけは覚えておきたいXHTML入門！" />
</div>
<div id="main">
<p>あああああああああああああ<br />
あああああああああああああああ</p>
</div>
<div id="menu">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
【CSS】
@charset "utf-8";
/* 全ページ */
* {
margin: 0;
padding: 0;
}
body {
font-size: 0.9em;
line-height: 1.5em;
background: url(./img/bg-sample.png) 50% 0 repeat-y;
color: #333333;
background-color: #E6E6E6;
text-align: center;
}
img {border: 0;}
a:link {color: #6666CC;}
a:visited {color: #CC66CC;}
a:hover {color: #CC6666;}
a:active {color: #CC6666;}
右の図を見て下さい。今度はちゃんと中心に表示されていますね。「画像はテキストでは無いので違うのではないですか？」と質問される方もいらっしゃると思うのですが、確かにその通り正解です。
文法上はテキストを中心にすると言うプロパティなのでテキストに適応するのが筋です。
それに実際に文字を入れてみますと、右図を見て頂くとわかりますが、テキストも一緒にセンター合わせに適応されてしまいます。テキストは左から始めたいですよね。
そうです！ここでちょっとtipsが生きてくるのですね～。やはり、状態が見えていると直しやすいですし、間違いにも気が付きやすいのです。
ではついでにテキストを左揃えにしましょう。それには、どこにどうやってを指定したあげれば良いと思いますか？
結構、難しいですよね。まず、表示部分全体のテキストを左揃えしたいので、bodyにはすでに『text-align: senter;』で指定してしまっているので、他で表示部分全体を網羅している要素は『wrap』ですね。表示部分全体を大きく囲んである枠です。
では、どうやって指定するのかと言いますと、もちろん左揃えですよね？左揃えは『text-align: left;』です。
【CSS】
@charset "utf-8";
/* 全ページ */
* {
margin: 0;
padding: 0;
}
body {
font-size: 0.9em;
line-height: 1.5em;
background: url(./img/bg-sample.png) 50% 0 repeat-y;
color: #333333;
background-color: #E6E6E6;
text-align: center;
}
img {border: 0;}
a:link {color: #6666CC;}
a:visited {color: #CC66CC;}
a:hover {color: #CC6666;}
a:active {color: #CC6666;}
#wrap {
text-align: left;
}
右図を見てください。ありゃりゃ～！今度は全て左揃えになってしまいました（涙）
え？私のはちゃんと真中に表示されているですって！
はい、そう見えている人もいるのです！
その人のブラウザによって中心に見えている人もいるのです。おそらく今の段階で問題なくセンターに見えている人のブラウザは『Internet Explorer 7』だと思います。
何故かと言いうとIE7は『text-align: center;』の指定だけで、ちゃんと文字左揃えで画像を中心に表示してしまうバグがあるのです。
それで、問題なく見えているわけです。私のブラウザはFireFoxなので画像もテキストも左揃えに表示されているのです。
では、FireFoxやGoogle Chromでも中心に表示させるにはどうしたら良いのでしょうか？
その方法は、もう一つの要素を中心にする設定方法である『margin: 0 auto;』を使います。
ここで、ちょっと『margin』プロパティの説明ですが、このよに位置や距離などの指定をするプロパティは指定の方法は以下のように4パターンありあります。
- 一つ指定のパターン：四方全部指定。
- 例）『margin: 20px;』上下左右20px空ける。
- 二つ指定のパターン：上下、左右を指定。
- 例）『margin: 20px 50px;』上下20px、左右50px空ける。
- 三つ指定のパターン：上、左右、下を指定。
- 例）『margin: 20px 50px 30px;』上20px、左右50px、下30px空ける。
- 四つ指定のパターン：上、右、下、左をそれぞれ指定。
- 例）『margin: 20px 30px 20px 30px;』上20px、右30px、下20px、左30px空ける。
なので、今回の『margin: 0 auto;』は上下ゼロで、左右は余白を均等にと言う意味になります。
ただ、『auto』というのは厳密に考えると難しいです。どういう処理をしてるかと言うのは複雑なのでイメージで考えてほしいのですが、『左右の余白を均等にする』には、中身の幅を指定しなければならないと言う事に気がついたでしょうか？
まあ、実際このままでブラウザ表示して頂ければわかると思いますが、何も変わりません（笑）
『wrap』の幅がわからなければ、どれほど余白があるかすらわからないですよね？
なので『wrap』の幅、『width: 800px;』と『margin: 0 auto;』を『wrap』に設定してあげれば解決します。
【CSS】
@charset "utf-8";
/* 全ページ */
* {
margin: 0;
padding: 0;
}
body {
font-size: 0.9em;
line-height: 1.5em;
background: url(./img/bg-sample.png) 50% 0 repeat-y;
color: #333333;
background-color: #E6E6E6;
text-align: center;
}
img {border: 0;}
a:link {color: #6666CC;}
a:visited {color: #CC66CC;}
a:hover {color: #CC6666;}
a:active {color: #CC6666;}
#wrap {
width: 800px;
text-align: left;
margin: 0 auto;
}
これでテキストも左揃えになりましたね！成功しました。
なんか『六日で学ぶXHTML+CSS』で作ったホームページより本格的に見えますね。ごらんの通り結局、画像や装飾でそれなりにプロっぽく見えると言うことなのでしょうね。
ですが、それも基本があってのことなのだとつくづく感じますね。やっていることは『六日で学ぶXHTML+CSS』で作ったホームページとそんなに変わったことは今のところしていませんしね。
まあ、これから2カラムにしたりすると、どれだけのホームページになるか楽しみになってきましたね。
Copyright © XHTML＋CSS超入門 All Rights Reserved.