第三回目「<BODY>タグの設定と、文字の色･大きさ｣

簡単なホームページの作り方第三回目
「<BODY>タグの設定と、文字の色･大きさ｣

　前回までの講座では、最低限必要な事をやりました。
　今回は、少しだけ発展させましょう。

<BODY>タグの設定
　さて、「<BODY>タグの設定って、なんだ？」と言うかもしれませんが･･･
　前回の講座で、
　・<BODY></BODY>タグで、背景の色などの設定が出来る。
と、書いておいたのを覚えているでしょうか？
　いろいろなホームページに飛んでみると、背景に画像が使われていたり、字の色が黒じゃなかったり･･･
・・・などと言うのを経験した事があると思います。
　背景の画像の設定などは、この<BODY></BODY>タグで設定する事が出来るのです。
　試しに、第一回の「test.html」を利用してみましょう。

まずは、背景の色
　ブラウザの背景の色を変えてみようと思います。
　背景の色を、青くしてみましょう。
・<BODY>を、<BODY BGCOLOR="#0000FF">に変更。保存。
　さて、保存したら、ブラウザに表示させてみましょう。これで、背景の色が青になるはずです。

　ここで追加した、「BGCOLOR="#0000FF"」について。
　「BGCOLOR」というのが、ブラウザの背景の色を指定する事を意味します。
　また、「"#0000FF"」というのは、「Ｒ・Ｇ・Ｂ」を意味しています。（Ｒ：ＲｅｄＧ：ＧｒｅｅｎＢ：Ｂｌｕｅ）
　「Ｒ・Ｇ・Ｂ」は、光の三原色ですね？
　この値を変える事によって、色を表すようになるわけですが･･･
　・Ｒ＝００～ＦＦ（０～２５５の２５６色）
　・Ｇ＝００～ＦＦ（０～２５５の２５６色）
　・Ｂ＝００～ＦＦ（０～２５５の２５６色）
　Ｒ×Ｇ×Ｂ＝２５６×２５６×２５６＝１６７７７２１６色
・・・と、１６万色の色を表現する事が出来るわけです。
　ためしに、「"#0000FF"」の値をいろいろと変えてみてください。（"#FFFFFF"で白、"#000000"で黒）
　いろいろな背景色に出来るはずです。

文字の色
　さて、そのうち、文字の色を変えたくなった事でしょう。
　標準の文字の色を指定する事も出来ます。
　さきほどの、「BGCOLOR」を、「"#000000"」にすると、そのページの文字は何も表示されなかったはずです。
　それもそのはず、大抵のブラウザは、標準の文字の色は「黒｣に設定されています。
　黒の背景の上に黒い文字･･･
　見えませんね(^^;;;;
　そこで、「標準の文字の色｣を指定してみようと思います。
　・<BODY BGCOLOR="#0000FF">を、<BODY BGCOLOR="#0000FF" TEXT="#FFFFFF">に変更。保存。
　さあ、表示させてみてください。青い背景に、白い文字で表示されるはずです。
　この「TEXT="#FFFFFF"」で、文字の色を変更する事が出来ます。（値は、「BGCOLOR」の時と同じ)

背景画像
　さて、そろそろ、「背景一色というのは嫌だよ～！！｣と思い始めるのでは･･･？
　そういう時は、「画像｣を背景に使ってみましょう。
　画像を使えば、少しはメリハリがあるようになる･･･かな？
　使える画像は、
　・「ジフ・フォーマット（拡張子がgif）」
　・「ジェイペグ・フォーマット(拡張子がjpg、jpeg)」
の画像です。
　試しに、水の画像と、壁の画像を使ってみましょう。
　この二つの画像を、「test.html」と同じディレクトリに保存してください。そして、
　・<BODY BGCOLOR="#0000FF" TEXT="#FFFFFF">を、
　　<BODY BGCOLOR="#0000FF" TEXT="#000000" BACKGROUND="water001.gif">に変更。保存。
　まず、これで表示させてみてください。
　背景に水の画像が表示されるはずです。
　次に、
　・<BODY BGCOLOR="#0000FF" TEXT="#000000" BACKGROUND="water001.gif">を、
　　<BODY BGCOLOR="#0000FF" TEXT="#000000" BACKGROUND="001.gif">に変更。保存。
　今度は、背景に壁の画像が表示されるはずです。
　いかがでしょうか？

その他の設定
　ここまででほとんどの設定は終わっています。
　残りは、
　・未参照リンクの文字の色
　・参照済みリンクの文字の色
　・リンクを選んだ時の文字の色
の三つです。
　今までのがわかっていれば、すぐに出来ると思います。
　ちなみに、上から順番に「LINK="#FFFFFF"」「VLINK="#FFFFFF"」「ALINK="#FFFFFF"」です。
　「"#FFFFFF"」を、自分なりに変更して使ってみてください。
　（・・・でも、まだリンクはやっていないから、意味ないかも･･･)

お待たせしました！文字の色と大きさ
　長らくお待たせしました。
　やっと、「文字の色｣と、「文字の大きさ」を変える方法にきました。(^^;;;;;
　ここのページでも、何度も、字の大きさが変わったり、色が変わったりしています。
　これは、「タグ」を使っているのです。

文字の大きさ
　試しに、字の大きさを変えてみましょう。
　今度は、
　・簡単なホームページです。を、簡単なホームページです。に変更。保存。
　さあ、表示させてみてください。今までよりも大きな文字になるはずです。
　ここでつかった、「」で囲まれたところの字の大きさが変わっているはずです。
　ためしに、「」の位置を、「簡単」のすぐ後ろに変更してみてください。
　「簡単｣だけが大きくなるはずです。
　字の大きさを変えるには、「」の、数字の部分を変えればいいわけです。
　数字は、大きいほど字の大きさが大きくなります。
　標準の大きさは、「３」で、最小が「１」、最大が「７」になります。

文字の色
　文字の色を変更してみましょう。
　・簡単なホームページです。を、
　　簡単なホームページです。に変更。保存。
　さあ、表示させてみてください。
　おそらく、「簡単｣という字だけ赤くなるはずです。
　色を変える方法は、<BODY>タグでもやったようにすればいいだけです。
　これで、文字を好きなように色を変える事が出来るはずです。

複合の文字
　さて、最後に。
　今までのを複合して自分でやってみましょう。
　・背景の色を、水色（"#80FFFF"）
　・標準の文字の色を黒
　・「簡単」という字を、赤く（"#FF0000"）して、大きな文字（大きさ６）に
　・「ホームページ」という字を青（"#0000FF"）に
　・「です。」のあとに、「テストです。」と付けて、「テスト」だけを大きな字（大きさ５）に
　さあ、頑張ってください。

　次回は、「文字の修飾」と「リンク」です。

第二回目に戻る　　講座トップページに戻る　　第四回目に行く

blog SEO