ホームページ作成講座 -入門編-第4講

第4講では、まず「カラーコード」について、その後にHTMLで文字に色を付ける事を解説します。第3講をまだお読みでない方は、先に第3講をお読みください。

文字に色を付けよう

	「カラーコード」って何なんだよ？
	「カラーコード」というのは色を表すための6文字の番号の事で 16進数が用いられるんだ
	16進数？なんじゃそりゃ・・・
	普段オレたちが使っている数の数え方を 10進法と呼ぶんだ 0 1 2 3 ・・・ 8 9 と来たら次は10になって位が上がるだろう？
	そうだね 1の位が0に戻って 10の位が1になるね
	0から9まで 10個の数字を数えたら位が進むだから10進法なんだ
	なるほど
	16進法というの 16個の数字を数えたら位が進むんだ
	でも数字は0から9の10個しかないぜ？
	そうそこで登場するのがアルファベットだ
	アルファベット？！アルファベットって AとかBとかCとかの事だろ？
	そう 0から9の数字では足りない6個をアルファベットから補うんだ用いられるのはアルファベット順の最初の6文字すなわち A B C D E F が使われるんだ
	よくイメージが湧かないなあ・・・ 16進法で表した数を16進数っていうわけだな？
	そういうことだ例えば16進数の F というのを10進数で表すと 15 になる
	どうして？
	10進数の 10 を16進数では A で表すんだ順に 11 は B ・・・と表していくと 15は F になるぞ
	なるほどじゃあ 10進数の16は16進数ではどう表すんだ？
	10 と表すんだ 0からFまで16個の数字を数えたら位が進むから 16進法
	ややこしいな・・・例えば16進数の 59 を10進数で表せって言われてもよく解んないぜ
	そうだな計算で求める事も出来るんだが「カラーコード」を扱う上ではそんな事は気にしなくて大丈夫だぞ 16進数の 84 と C0 はどっちが大きい数だと思う？
	そりゃあ大きい位のが優先されるから C0 の方だろ
	正解だこの程度が解れば全く問題ないぞ
	そうなんだとりあえず一安心だぜ

コンピュータ上で色を扱う時は「カラーコード」を用いる事が多いです。 HTMLでも「カラーコード」を用いてページの様々な色を設定します。「カラーコード」は6文字の16進数で表された番号のようなもので、全部で16777216通りあります。つまり、HTMLで表す事の出来る色は全部で1600万種類以上あるという事です。これを一般に「フルカラー」といいます。ただし、パソコンモニターの色を表示する性能や、肉眼で判別できる色の範囲を考えると、こんなに細かくは区別できません。例えば、●と●はわずかに違う色なのですが、区別はほぼ不可能でしょう。

	実際に「カラーコード」ってどういうやつなんだ？
	例えば「#FFFFFF」だこれは真白の色を表すんだ「#(半角シャープ)」の後の「FFFFFF」が16進数だ
	へえじゃあもしかして真っ黒は「#000000」だったりして？
	その通り！
	よっしゃ！さすがオレだぜ！！でも・・・赤とか黄色とかはどうやるんだ？
	えーとだな・・・

「カラーコード」で色を表す時は「光の三原色」である「赤」「緑」「青」のそれぞれの明るさを表し、組み合わせます。光は強ければ強い程、明るい、つまり「白」に近づき、光が弱ければ弱い程、暗い、つまり「黒」に近づきます。カラーコードは「#(半角シャープ)」に続けて、6文字の16進数を並べますが、この6文字は3つに分ける事ができます。最初の2文字が「赤」、真ん中の2文字が「緑」、最後の2文字が「青」の明るさをそれぞれ表しています。従って、全ての「色」の明るさが最大の場合は「白」となり、カラーコードでは「#FFFFFF」で表します。「赤」は「#FF0000」、「緑」は「#00FF00」、「青」は「#0000FF」、「黒」は「#000000」となります。ただし、ここでいう「緑」は明るめの緑色で、一般に「黄緑」と呼ばれる色になります。黄色は「#FFFF00」、濃い目の緑色は「#008000」と、慣れないとなかなか感覚を掴みづらいかもしれません。基本16色は「カラーコード」の代わりに「カラーネーム」を指定する事も可能です。詳しい「カラーコード」「カラーネーム」は、カラーコード一覧をご覧ください。ちなみに、「カラーコード」は「タグ」同様に大文字でも小文字でも構いません。私は小文字を好んで使っています。

よく間違われやすいのが「色の三原色」との違いです。絵の具などで用いられる原色は「赤」「黄」「青」ですが、光の原色では「黄」ではなく「緑」になります。

	なるほどなあー・・・って HTMLでどうやって文字に色を付けるのか教えてくれなくちゃ試せないジャン！
	ああ・・・わりぃわりぃえっとなさっきもチラッと言ったが <font>～</font> タグを使うんだが「属性」を設定する必要があるんだこれまで紹介した「タグ」は特に「属性」は必要なかったんだがな
	「属性」？
	赤色にするには <font color="#ff0000">～</font>とするんだ
	color="#ff0000" ってのが新しいなこれを「属性」っていうのか？
	そう「属性」を設定すると「タグ」に新しい機能を追加できるんだ
	へえ
	<font> タグには color 属性を設定できるんだ color="*" を追加して「*」の部分に「カラーコード」を設定すれば文字がその色になるぞ「font」と「color」の間には半角スペースを1つ入れる事を忘れずにな
	よーしやってみるぞー！

文字を赤色にするには次のようにします。

<html><body>テストです。</body></html>

～ は文字の色や、大きさ等を設定するための「タグ」です。色を付けるには「color属性」を「color="***"」という形で設定します。「***」の部分は「カラーコード(ネーム)」です。上の例では「#ff0000」となっています。変えたい色の「カラーコード」に変更してみましょう。上書き保存して、ブラウザで開くと次のようになります。

テストです。

文字の大きさを設定するには「size属性」を「size="***"」という形で設定します。「***」の部分は文字サイズを、1～7の数値にします。1が最小、7が最大となります。規定値は3になっています。また、+2や-2のように、現在の大きさからの相対値を設定する事も出来ます。相対値を指定しない時は「"(ダブルクォーテーション)」は省略する事もできます。「bigタグ」や「smallタグ」でも文字サイズは設定可能ですが、「fontタグ」を用いればより細かく設定できます。また、「属性」は次のように、組み合わせる事も可能です。順番はどちらでも構いません。

<html><body>テストです。</body></html>

テストです。

	色々できるようになったな
	ああ！でも色々書き過ぎて1行だと見辛くなってきたな行を変えちゃいけないのか？
	行は変えられるぞ行を変える事は「改行」っていうんだただし改行は「タグ」の途中ではできないぞ
	でも改行したら表示も改行されちゃうんじゃないか？
	それがならないんだな
	ええ？じゃあ表示させる文章を改行させたい時はどうやるんだ？
	説明しよう！