ばぼびぃのおへや

掲示板で、カラフルな書き込みを見たり、ホームページのカラフルな文字を見たりしたこと、ありますよね。大小さまざまな文字も使ってあったりで、なんか、妙にかっこよく見えたりしません？
自分もあんな書き込みしてみたいとか、あんなページを作ってみたいなんて、思っちゃいません？

思い立ったが吉日です！

少し、どんなのか、見てみましょう。で、コピーして貼付けしてもいいから、やってみましょう！

まずは、色の変え方。
っと、その前に、このページは初めから、オレンジっぽい色で書かれています。これは、無視しちゃってください（笑）このやり方は、ページの作り方を説明した後で、行います。
オレンジっぽい色以外のものが、実際に色を変えて見せたものです。
例えば、

青い文字

これが、色を変えたものです。青くなってるでしょ？
いや、私は青くなってませんよ。ちょっと慌てましたけど。
で。
上のものは、

青い文字

と書いてあります。
これは、タグで書かれています。
タグは、「文字を書きます」といった感じの意味かな。
このタグがなくても文字が書けます。
そう、つまり、タグだけでは、何の役にも立ちません。
そこで、タグに、属性を与えてやります。
平たく言えば、どう修飾するかを、追加してやるってことですね。

FONTが、タグ名で、その後のcolorが属性名、イクオールの後が、属性値です。
タグ名と属性名の間には必ず、半角スペースを入れてください。これがないと、全てがタグ名になってしまい、ブラウザが認識できなくなります。

半角スペースは、日本語入力ソフトによって設定が異なります。MS-IMEの場合、「入力モードに従う」「常に全角」「常に半角」の3つの選択肢があります。できるだけ、「入力モードに従う」を選択しておきましょう。こうしておけば、日本語入力のときは全角スペース、英語入力（半角英数文字）入力のときは半角スペースに、自動的に切り替わります。

さて、いきなり、難しくなりましたね。
単純に説明すると、

＜文字を書きますよ　色は＝青で＞

と、命令してるんですね。
つまり、blueのところをgreenにすれば、緑色になります。
終了タグを忘れると、終わりまでずっと、その色になりますから、気をつけて。
なお、タグ名を大文字、属性名を小文字で書いてありますが、全て小文字でも、全て大文字でも、かまいません。見た目で分かりやすいように、分けただけですので。

色の話に戻りますが、英語で色を指定する場合、ブラウザにその単語が登録されていないとき、違う色になることがあります。このような、ブラウザに頼る使い方を「ブラウザに依存する」とか何とか言うらしいです。
それはさておき、どのようなブラウザでも表示できる色は、以下のとおりです。

色	英語名	カラーコード	色	英語名	カラーコード	色	英語名	カラーコード	色	英語名	カラーコード
	black	#000000		maroon	#800000		green	#008000		navy	#000080
	gray	#808080		red	#FF0000		lime	#00FF00		blue	#0000FF
	silver	#C0C0C0		olive	#808000		teal	#008080		purple	#800080
	gray	#FFFFFF		yellow	#FFFF00		aqua	#00FFFF		fuchsia	#FF00FF

この他にも英語で設定できますが、ブラウザによっては表示できない場合がありますので、ここには載せません。

ところで、また、新しい単語が出てきましたね。
カラーコードとは、赤色（red）、緑色（green）、青色（blue）のそれぞれの明るさを、0～255の数値で表現し、16進数で表記したものです。
こう書くと、難しく聞こえますね（笑）
光の三原色というものは、ご存知ですね？
赤・青・緑の三色で、すべての色が表現きるっていうやつです。
絵の具だと、三色を混ぜると黒になりますが、光では、白になります。また、光がないときは、黒になります。
三色の光の強さを0～255で表したものが、RGB値などと呼ばれるものです。
この0～255の数字を、16進数で表すと、00～FFとなります。
ちなみに、16進数は、

0 1 2 3 4 5 6 7 8 9 A B C D E F

の16個の数字とアルファベットの並びです。10進数が0～9の10個の数字で一塊なのに対し、16進数は0～Fの16個の数字を一塊とします。

ここからが、ちょっと複雑。読み飛ばしてもけっこうです。
10進数の場合、9の次は位が一つあがって10となります。
16進数の場合、Fの次から位が一つあがって10となります。
混乱しそうですね。16進数の10は、16ってことなんです。
ほ～ら、混乱した（笑）
何で17じゃないのかって、思ったでしょ。
普段、数字は1から数えています。1から10数えれば、10ですね。
ところが、プログラムの世界では、0から数えるんです。だから、16進数は16個の数字があっても、16数えると10なんです。10進数も、0から10数えると9になります。
説明になってない？
では、手っ取り早く比較しましょう。

10進数	0	10	16	20	30	50	100	128	150	192	255
16進数	00	0A	10	14	1E	32	64	80	96	C0	FF

比較してみても、分かり難いかも（笑）
適当に読み流して良いですよ。

カラーコードの説明に戻ります。
カラーコードが、33CC99といった数字ですね。この数字、二桁ごとにRGBの数字を示しています。
最初の33がR（赤）の明るさ。次のCCがG（緑）の明るさ。最後の99がB（青）の明るさを、それぞれ示しています。
RGBのRだけがもっとも強い場合、FF0000というコードになります。
そう。赤ですね。
同じようにBだけが最も強い場合は緑、Gが最も強い場合は青となります。
FONTの色にこのコードを使うときには、コードの前に必ず、#をつけます。カラーコードを書きますよって言う合図だと、思ってください。
ですので、カラーコードが33CC99の場合、#33CC99と書きます。
#33cc99でもかまいません。大文字小文字は関係ありません。
実際に、書いてみましょう。

何色でしょ？

こう書けば、結果は、

何色でしょ？

となります。

少しは、ご理解いただけたでしょうか？
やっぱり、無理ですか？
ま、当然ですね（笑）
私だって、16進数は分かりますが、RGBの数字を言われたところで、どの色になるかなんて、分かりません。
そこで、フリーソフトの登場と相成ります。
MKTさんの提供情報より、RGB表示ソフトを利用します。いっぱいありすぎて、私には選べません。めんどくさくて（笑）

http://www.vector.co.jp/soft/win95/net/se115797.html

ビクターのソフトウェアライブラリより、フリーソフトをダウンロードしてください。上のリンクにあるソフトのほかにも、いっぱいあります。好きなものをダウンロードしてください。
それらのソフトを使って視覚的に色を選ぶと、カラーコードが得られるようになっています。
得られたカラーコードを、属性値の場所に書き込めば、その色にできます。

さてさて。
長くなってしまいました。文字の大きさを変える方法は、次の講座にします。
説明が多くて、理解できていないかもしれませんね。
でも、大丈夫！
第5講で、おさらいをします。そこで、自分のパソコンで確認する方法も書きますので、そこで、しっかりと練習して使い方を覚えてください。

もし、この説明の間違い（誤字脱字も含む）や、分からないところがありましたら、掲示板で指摘してください。

では、次の講座で…。