ページ全体の設定

Lesson：6 ページ全体の設定

ページ全体の設定は、<BODY>タグで決定します。

例えば、「このページで使う文字の色を全て緑色にしたい！」場合、全部の文字に
<FONT　COLOR="green">を付けるのは面倒ですよね？

<BODY TEXT="green">と入れれば、<FONT COLOR>で指定しない限り文字の色は全て
緑になります。

また、背景は何も指定しない限り「白」で表示されますが
<BODY BGCOLOR="～">を使えば、背景の色全体を変える事も可能です。
ページ全体の雰囲気を変化させる事が出来ます。（下図参照）

ページ全体のテキスト色を指定する

<BODY TEXT="～">～</BODY>

ページ全体のテキスト（文字）の色を設定したい場合は<BODY TEXT="～">を使用します。
<FONT COLOR="～">等で指定しない限り、テキスト色は全て<BODY TEXT="～">で指定した色になります。
何も指定しない場合のテキストの色は「黒」です。

記入例

<HTML>
<HEAD>
<TITLE>ホームページ</TITLE>
</HEAD>
<BODY TEXT="red">
テキストは全部赤色になります
</BODY>
</HTML>

ブラウザではこうなります（この画面は縮小してあります）

背景の色を変える

<BODY BGCOLOR="～">～</BODY>

ページ全体の背景色を変えるには、<BODY BGCOLOR="～">を使います。
ＢＧＣＯＬＯＲで何も設定しない場合の背景色は「白」になります。

記入例

<HTML>
<HEAD>
<TITLE>ホームページ</TITLE>
</HEAD>
<BODY BGCOLOR="yellow">
背景は黄色です
</BODY>
</HTML>

ブラウザではこうなります（この画面は縮小してあります）

背景に画像を入れる

<BODY BACKGROUND="～（画像のファイル名）">～</BODY>

背景に画像を入れる場合は、<BODY BACKGROUND="～">を使います。
"～"部分に画像ファイル名を入れます。
勿論、画像ファイルを用意しなければ背景の画像は表示されません、気をつけましょう。

記入例

<HTML>
<HEAD>
<TITLE>ホームページ</TITLE>
</HEAD>
<BODY BACKGROUND="kabegami.gif">
<FONT COLOR="blue" SIZE="5">壁紙を貼ってみました</FONT>
</BODY>
</HTML>

画像ファイル「kabegami.gif」
（ダウンロードして使用する）

ブラウザではこうなります

リンク部分のテキスト色を指定する

リンクを設定した部分のテキスト色を変える事が出来ます。

記入例

<HTML>
<HEAD>
<TITLE>ホームページ</TITLE>
</HEAD>
<BODY LINK="green" ALINK="pink" VLINK="orange">

<A HREF="http://www.yahoo.co.jp">Yahooにリンク</A>

</BODY>
</HTML>

ブラウザではこうなります
（完成したリンクをクリックして、色の変化を確認して下さい）

Lesson:6 まとめ

BODYタグの属性はまとめて設定できます。

また、ページの背景色とテキストの色の組み合わせには気をつけましょう。

とっても見づらい組み合わせ

上のように、背景色とテキストの色の組み合わせによっては、
大変文字が読みにくくなってしまいます。

練習問題（５）

全てのLessonが終わったら、早速練習問題を解いてみましょう！

練習問題（５）へ！