今回は、色の作り方についてです。
それでは、早速1限目、色の作り方に入ります。● 画面に表示される色の不思議
画面に表示される色々な色は、実は3色の光によって作られています。それは、赤、緑、青、これらの3色です。
これら3色の色を組み合わせ、それぞれの強さ(明るさ)に変化を付けることで、全ての色が作り出されるのです。
デジカメで撮った味噌汁も、たったこの3色の光の強弱によって描かれているのです(知ってました?)。
そして、これら3色の光が「光の三原色」と呼ばれているものです。それでは、すでにやっている <font> タグで色の作り方を勉強しましょう。次の様にメモ帳で、HPを作ってみましょう。
ファイル名は (好きなファイル名).html というようにして保存しましょう。
<html>
<body><font color="#000000">鈴木辰之</font><p>
<font color="#ff0000">鈴木辰之</font><p>
<font color="#00ff00">鈴木辰之</font><p>
<font color="#0000ff">鈴木辰之</font><p>
</body>
</html>次の様に表示されましたか?
鈴木辰之 鈴木辰之
鈴木辰之
鈴木辰之
さて、この 00ff00 などというのは何なのでしょうか?
実はこれが、光の強さを調節する為のコードなのです。まず左から2桁目が赤い光の調節をするコード
そして、真ん中の2桁が緑色の光を調節するコード
最後に右はしの2桁が青色を調節するためのコードという具合になっています。 そして、数字が大きいほどその色は明るくなるのですが、ここで厄介なのが数字は数字でも、16進数の数字なのです。
言葉は難しいかも知れないですけど、簡単です。それでは、核心に迫ります。準備はいいですか?
普段いつも使っている数の数え方は10進数で、
1, 2, 3, 4, 5, 6, 7, 8, 9, の次が 10 になりますね。
そして、
11, 12, 13, 14‥‥‥ 99, 100, ってなりますよね。 でも、16進数の場合は、
1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f, のつぎが 10 になるのです。
そして、
11, 12, 13, 14, 15, 16, 17, 18, 19, 1a, 1b, 1c, 1d, 1e, 1f, 20,
というようになります。
この16進数の数え方が理解できなくても、実際に、色を作るときには、
赤の場合は、一番暗い赤から順番に110000, 220000, 330000,‥‥ 990000, aa0000 ,bb0000, cc0000, dd0000, ee0000, ff0000,
と書けば、15段階で明るさを調節することができます。
これが、青の場合では、000011, 000022 というように、同じように数字を大きくしていけば明るい色になるという訳です。
このように、赤、緑、青、(RGB)を表示するのは簡単ですが、さて、他の色はどうやって作ればいいでしょうか?
黄色は、赤と緑、FFFF00 で黄色ができます。少し暗くしようと思えば、CCCC00、もっと暗くしたい場合は、666600 などのようにすればいい訳です。また紫は、FF00FF 赤と青が紫色です(これは有名ですね)。
そして、黒は、000000、全ての光を全く出さなければ、光が無いのでそこは真っ暗、また、FFFFFF というように、全ての光を最大限に出すと白になります。
色々、色んな光の混ぜ合わせ方を試して見て下さい。キーンコーンカーンコーン・・・(1限目終了)
2限目 (HP背景の色を変える)
もう説明は付けません。
次の様にまたHPを作って見ましょう!!
そして、bgcolor="#000000" のカラーコードを変えて自分で色々試してみましょう!!
<html>
<body bgcolor="#000000"></body>
</html>これだけでは、もちろん内容は何もないので、何も表示されません。
でも、コードを変えることで、バックの色が変わります。
また、内容は適当に自分の名前などを書いて見ましょう!!もちろんフォントタグを使って。そして、新年には、自己紹介のHPをみんなで作りましょう!!
