ホームページの作り方

◆その２◆

色のついたホームページ

1	いつのまにか色の付け方を知っていた

うちの娘（あやこ）は、前回の見本を使って、自分のを作ったのですが、なんと、色がついていました。

あやこは、インターネットでチャットしたりしているのですが、そこに書きこむ場合に、HTMLのタグを入れることができる場合もあります。そうすれば、字を大きくしたり、色をつけたりすることもできるわけです。ようするに、目立つ書き込みになるわけ。(^^)

あやこは、普段から、チャットする時に、色をつけたりしています。
私が教えたわけでもないので、遊んでいるうちに自然に覚えたのか、兄のを見たのか、それともチャット仲間に教えてもらったのか．．．
そんなわけで、「その１」の見本をみて、すぐにピンときたようです。

2	色のついたHTML文書

あやこの作ったファイルは、こんなのでした

<HTML>

<HEAD>
<TITLE>
初めてのホームページ
</TITLE>
</HEAD>

<BODY>
<H1> 私 の は じ め て の
ホ ー ム ペ ー ジ </H1>

今日、初めてホームページを作りました 
ちゃんと自分で作ったんだぞ 
なあるほど 
わーい 
わぁ★ミ 
あそびましょ・・？ 

</BODY>
</HTML>

これを、test02.html という名前で保存してください。

ごちゃごちゃしていて複雑に見えますが、新しいタグは、
私という類のものだけですよね。

3	今回使ったタグの解説

あやこは小文字を使っていましたが、大文字でも小文字でも同じなので、ここでは見やすいように大文字で表記します。



は、との間の文字の表示に、どんなフォントを使うかを指定するタグです。
色を指定する場合は のようにすればいいわけです。

色の表示には、英語で書く方法と、数字で書く方法があります。

英語の場合は、いろいろな色の名前が使えます。

 なら red
なら skyblue
ならturkishblue

などなど。

あなたのブラウザでも、ちゃんと色が変わっているでしょうか。

知っている英単語をどんどん試してみましょう。

数値で色を表す

この項は、ちょっとめんどうなので、読み飛ばしてもOKです

数値は、光の三原色、すなわちRGB(red,green,blue）で指定します。
16進数6桁表記なので、なんか難しそうですが...

のように6桁の数値で書いて、2桁ごとに、赤、緑、青を表します。
こうすれば、どんな色でも表示することができます。

16進数は、私たちが普段使っている「0123456789」の10個の文字のほかに、「ABCDEF」の6文字を加えて表示します。
ここで、A=10, B=11、C=12, D=13, E=14, F=15をあらわしています.
00が一番小さい数値(10進法でも0）
FFが一番大きな数値(10進法では255）になります。
B6ならば16の位がB（＝11）、1の位が6なので、
（11 ｘ 16） + （6 ｘ 1）＝ 182 です。

人間の目には、文字の色程度でしたら、そんなに細かい差は理解できませんから、おおざっぱに考えてだいじょうぶです。

は光がまったくないので、黒
は赤い光が一番強い状態で他の色はないので、赤。これは、と、同じです。
は緑が一番強い状態で他の色はないので、緑
は全部の色があるから、白になります。

同じように

は赤い光が強く、緑、青が入ってもう少し明るくなるからピンクになります。
は白が全体に暗くなったから灰色です。

タグでの指定	16進数でRGBに分ける			10進数で表記			こんな色です
タグでの指定	R(赤)	G(緑)	B(青)	Ｒ	Ｇ	Ｂ	こんな色です
#000000	00	00	00	0	0	0	●	要するに黒ですね
#FF0000	FF	00	00	255	0	0	●	赤
#B00000	B0	00	00	192	0	0	●	少し暗い赤
#800000	80	00	00	128	0	0	●	暗い赤
#400000	40	00	00	64	0	0	●	とっても暗い赤？
#FF8080	FF	80	80	255	128	128	●	明るい赤
#FFB0B0	FF	B0	B0	255	192	192	●	もう、ピンク
#00FF00	00	FF	00	0	255	0	●	緑というより黄緑
#00B000	00	B0	00	0	192	0	●	明るめの緑
#008000	00	80	00	0	128	0	●	このへんが緑かな？
#004000	00	40	00	0	64	0	●	暗い緑？
#FFFF00	FF	FF	00	255	255	0	●	赤と緑で黄色になります
#FFB000	FF	B0	00	255	192	0	●	緑が少なめならオレンジ
#B0FF00	B0	FF	00	192	255	0	●	赤が少なめなら黄緑
#00FFFF	00	FF	FF	0	255	255	●	緑と青なら水色(シアン)
#00FF80	00	FF	80	0	255	128	●	青を弱めれば...
#0080FF	00	80	FF	0	128	255	●	緑を弱めれば...
#FFFFFF	FF	FF	FF	255	255	255	●	白
#B0B0B0	B0	B0	B0	192	192	192	●	灰色
#808080	80	80	80	128	128	128	●	暗い灰色

あとは、自分で光の調合をしてみましょう。

見てみる

ここをクリックして、test02.htmlをみてみましょう。

自分でためしてみると、いろいろな色が使えて楽しいですよ。
子どもと一緒に遊びながら、いろいろな色を試してみたほうが楽しいですし、
きっといいのができると思います。

おまけ

ページの背景（BackGround)にも色が使えます。
<BODY>のところに指定すれば全体の背景色が指定できます。
たとえば、
<BODY BGCOLOR=pink>
とすれば、バックがピンクになります。
もちろん、数値でも指定できますから
<BODY BGCOLOR=#F0F0FF>
とすると、ごく薄い水色になります。

ご意見、ご感想は、こちら（io@itoh.org）へ！！

[Io - Index] [ホームページの作り方Toppage]
[第1回へ] [第3回へ]

ホームページの作り方

◆その２◆

色のついたホームページ

<FONT>