●文字の色を変えてみよう
　●背景の色を変えてみよう
　●リンクの色を変えてみよう
　●背景に画像をつかってみよう

　


今全部黒い字でしょ？もっとカラフルにしたいんだけど・・・。
　
　
それもタグで指定できるよ。
　
　

<FONT COLOR="#000000">黒の文字</FONT>
<FONT COLOR="#ff0000">赤の文字</FONT>
<FONT COLOR="#0000ff">青の文字</FONT><BR>
<FONT COLOR="#ff00ff">紫の文字</FONT>
<FONT COLOR="#00ff00">緑の文字</FONT>
<FONT COLOR="#00ffff">水色の文字</FONT><BR>
<FONT COLOR="#ffff00">黄の文字</FONT>
<FONT COLOR="#ffffff">白の文字</FONT>
　
（上のタグを表示させると・・・）
黒の文字 赤の文字 青の文字 紫の文字 緑の文字 水色の文字 黄の文字 白の文字

以前に文字の大きさ変えた時のように、今度はのタグの中に「size」でなく、「color」と入れます。サイズは、「size="3"」のように指定しました。色の場合は「red」などのように色名を直接入力する場合もありますが、上記のように英数字で指定するのが普通です。例えば、黒は#000000。白は#ffffffのようになります。この#から始まる6ケタの英数字は、モニターで使われる「R(Red)G(Green)B(Blue)」の3色それぞれの値をを表わした「RGB値」と言います。 もっと詳しく色の設定をしたい場合は以下の色見本を参考にしてください。


000000 330000 660000 990000 CC0000 FF0000
000000 333300 666600 999900 CCCC00 FFFF00
000000 003300 006600 009900 00CC00 00FF00
000000 003333 006666 009999 00CCCC 00FFFF
000000 000033 000066 000099 0000CC 0000FF
000000 330033 660066 990099 CC00CC FF00FF
000000 333333 666666 999999 CCCCCC FFFFFF
000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

※色見本の好きな色の上に書いてある「RGB値」をコピーして「#」のあとに指定します。

★そのページの文字を全て同じ色に指定してしまいたい場合は、<body>タグの中に「text="#RGB値"」を入れます。<body text="#RGB値" >

色見本を使えば簡単だね。
　
　
実際に指定してみよう！
　
　

<b> <font size="6" color="#FF0000">
ノリコのホームページへようこそ！！</font></b><br>

（上のタグを表示させると・・・↓クリックしてみよう）
ノリコのホームページへようこそ！！

おお〜、簡単簡単！
　
　



　


背景の色も変えたいなぁ。
　
　
そうだね、背景に色をつけてみよう。
　
　
何色にしようかな・・・・？
　
　

背景に色を付ける場合は<body>タグの中に、「bgcolor="#RGB値"」と指定します。

<html>
<head>
<title>ノリコのホームページ</title>
</head>
<body bgcolor="#FFCCCC>
<center>
 <br>
 <br>
<b><font size="6" color="#FFCCCC>ノリコのホームページへようこそ！！</font></b><br>
<br>
<img src="noriko.gif" width=100 height=100><br>
<b><font color="#000099">はじめまして！ノリコです。</font></b><br>
<br>
名前：ノリコ<br>
年齢：ヒ・ミ・ツ！<br>
性別：女の子で〜す<br>
住んでいる所：東京<br>
趣味：音楽を聴くこと。ショッピング。寝ること。絵をかくこと。<br>
<br>
みなさんはじめまして、ノリコです！遊びに来てくれてありがとう！<br>
何もわからなかったけど、頑張って作りました。ごゆっくりどうぞ！ <br>
<br>
<br>
<font size="5" color="#FF00CC"><b>★もくじ★</b></font><br>
トップページ <br>
ノリコの日記<br>
ペットの紹介<br>
メール待ってます <br>
<br>
<br>
<b><font size="5" color="#FF6600">★日記★</font></b><br>
○月○日（月曜日）<br>
今日はうちの犬、ゴン太のお見合いをした。相手はご近所のランちゃん。<br>
とってもかわいい犬なので、もし上手く行ったら、きっとかわいい子犬がいっ ぱい生まれるんだろうな。<br>
<br>
○月○日（火曜日）<br>
今日は雨が降ってゆううつだったので、乙女ちっくに読書なんかしてみた。<br>
でもマンガだけどね。一気に3冊読んじゃった。早く続きが読みたいな。<br>
<br>
○月○日（水曜日）<br>
風邪をひいた。熱が37度8分あった。昨日薄着でマンガ読んでたからかなぁ？<br>
病院に行って注射した。痛かった〜！でもおかげで今は熱も下がって、ご飯も いっぱい食べれたよ。<br>
<br>
<br>
<b><font size="5" color="#006600">★ペットの紹介★</font></b><br>
これがうちのゴン太です。<br>
太りぎみだけど、かわいいやつです。<br>
今年で6才。<br>
彼女募集中。<br>
兄弟は親戚のうちにいます。<br>
これでも長男だぞ！ </p>
</center>
</body>
</html>
※よくわからない人は「5.いよいよ作ってみよう」の時と同じ要領で、上のノリコの書いたHTMLをコピーして「エディタ(ワープロ)ソフト」にペーストし、内容を自分に合わせて書き換えてみましょう。 わかってきた人は、ノリコの例を参考に、自分でHTMLを打ってみましょう。

（上のタグを表示させると・・・↓クリックしてみよう） 　


　
わぁ〜、カワイイページになったね！！
　
　
もう立派なホームページだね！
　
　



　


僕のページは背景が自慢なんだ。
　
　
どれどれ？あ、すごーい、背景が柄になってる！パソくん、私もやりたいな。
　
　
じゃあ、教えてあげるね。
　
　　

<body background="****.gif">

背景に画像を表示するように指定することができます。背景に画像を指定すると、タイル状にパターン化して表示しますので、なるべく小さな画像でうまく模様に見えるように工夫しましょう。 背景の色指定の時と同じように、タグに「background="画像ファイル名"」と指定します。


でもシンジくんの背景は大きいから表示に時間がかかるし、ちょっと色も派手で文字が見にくいねぇ。
　
うん、ほんとだ。チカチカして何だか文字が読みにくいね。
　
　
そ、そうかなぁ？
　
　

★背景の画像を作るときのポイント。

・画像の大きさはなるべく小さくする。（沢山表示するので、負担をかけないように）
・色はあまり使わない。（上にのる文字がチカチカして見にくくなるので）
・色は淡い色同士や、濃い色同士、渋い色同士など、差の少ない組み合わせにする。
（これも上にのる文字を見やすくするため）
　
ポイントにも気をつけて画像を作ったよ。名前は"flower.gif"。指定してみよう。
　
　

　

<html>
<head>
<title>ノリコのホームページ</title>
</head>
<body background="flower.gif">
<center>
 <br>
 <br>
<b><font size="6" color="#FF0000>ノリコのホームページへようこそ！！</font></b><br>
<br>
<img src="noriko.gif" width=100 height=100><br>
<b><font color="#FF0000">はじめまして！ノリコです。</font></b><br>
<br>
名前：ノリコ<br>
年齢：ヒ・ミ・ツ！<br>
性別：女の子で〜す<br>
住んでいる所：東京<br>
趣味：音楽を聴くこと。ショッピング。寝ること。絵をかくこと。<br>
<br>
みなさんはじめまして、ノリコです！遊びに来てくれてありがとう！<br>
何もわからなかったけど、頑張って作りました。ごゆっくりどうぞ！ <br>
<br>
<br>
<font size="5" color="#FF00CC"><b>★もくじ★</b></font><br>
トップページ <br>
ノリコの日記<br>
ペットの紹介<br>
メール待ってます <br>
<br>
<br>
<b><font size="5" color="#FF6600">★日記★</font></b><br>
○月○日（月曜日）<br>
今日はうちの犬、ゴン太のお見合いをした。相手はご近所のランちゃん。<br>
とってもかわいい犬なので、もし上手く行ったら、きっとかわいい子犬がいっ ぱい生まれるんだろうな。<br>
<br>
○月○日（火曜日）<br>
今日は雨が降ってゆううつだったので、乙女ちっくに読書なんかしてみた。<br>
でもマンガだけどね。一気に3冊読んじゃった。早く続きが読みたいな。<br>
<br>
○月○日（水曜日）<br>
風邪をひいた。熱が37度8分あった。昨日薄着でマンガ読んでたからかなぁ？<br>
病院に行って注射した。痛かった〜！でもおかげで今は熱も下がって、ご飯も いっぱい食べれたよ。<br>
<br>
<br>
<b><font size="5" color="#006600">★ペットの紹介★</font></b><br>
これがうちのゴン太です。<br>
太りぎみだけど、かわいいやつです。<br>
今年で6才。<br>
彼女募集中。<br>
兄弟は親戚のうちにいます。<br>
これでも長男だぞ！ </p>
</center>
</body>
</html>
※よくわからない人は「5.いよいよ作ってみよう」の時と同じ要領で、上のノリコの書いたHTMLをコピーして「ワープロソフト」にペーストし、内容を自分に合わせて書き換えてみましょう。 わかってきた人は、ノリコの例を参考に、自分でHTMLを打ってみましょう。

（上のタグを表示させると・・・↓クリックしてみよう） 　


　
できた！やった〜、かわいくなった〜。
　
　
すごく女の子らしくなったね。シンジくんのページに負けず劣らずだよ！
　
　
う〜ん、悔しいけどしょうがない！
　
　

　

COPYRIGHT