背景、文字の色の変更

Web ページを華やかにするために、「背景」や「文字」をカラフルにしてみましょう。

【注意】
「HTML」の規格を策定している World Wide Web Consortium（W3C）によると、「font要素」や「body要素の属性」は廃止予定です。これらの要素・属性はスタイルシートで代価することが推奨されています。

Web ページの背景の色を変える方法

何も設定しなければ「 Internet Explorer 」を利用している方は、ブラウザの背景色が「白」になっていると思います。

このブラウザの背景色を「黄」に変えてみましょう。まずは、以下のHTMLソースに書き換えて下さい。
ファイル名：index.html

<html>
<head>
<title>背景の変更</title>
</head>
<body bgcolor="#ffff00">

背景が黄色になります。

</body>
</html>

書き換えが終ったら、「ブラウザ」の「更新」ボタンをクリックして確認してみましょう。ブラウザ背景色が「黄」になったのが確認できますか？

HTML文書の中でブラウザ背景色を指定していたのは<body>タグの属性である次の命令です。

「 bgcolor 」は「キャンバスの背景色を設定する」する属性です。ではその後の「 "#ffff00" 」とは一体何なのでしょうか。

ここで知っておかねばならないことがあります。

配色構成は「光の3 原則」を用いています。

色の指定には「16 進数」を用いています。

「光の3 原則」とは「赤」「緑」「青」と言う 3 つの色で「白」から「黒」まで全ての色を表現することを言います。

また我々が日常利用している数字は「10 進数」ですが、これを「16 進数」に書き換えると次のようになります。

10進数	16進数
1	1
2	2
3	3
4	4
5	5
6	6
7	7
8	8
9	9
10	A
11	B
12	C
13	D
14	E
15	F
16	11
17	12

また HTML では2桁で16 進数を表しています。このため、00 から始まり「00、01、02…99、A0、A1、A2…A9、B0、B1…FD、FE、FF」までの256 通りの配色が表現できます。

図にすると次のようになります。

16 進数で表す場合は「#」は必ずつけてください。

少し分かりにくいと思います。そのような方には、次の次節の色の指定方法を覚えてください。

文字の色を変える方法

続いて文字の色を変える方法を説明します。先ほどと同様に、まず以下のソースに書き換えてください。
ファイル名：index.html

<html>
<head>
<title>文字の色の変更</title>
</head>
<body>

<font color="blue">これは青色。</font><br><br>
<font color="red">これは赤色。</font><br><br>
<font color="magenta">これはマゼンタ。</font>

</body>
</html>

書き換えたら「ブラウザ」の「更新」ボタンをクリックして確認してみましょう。文字の色が変化していると思います。

は｢テキストのサイズや色を変更｣するタグです。このタグで「文字のサイズ」を変更するためは、size 属性を追加します。
文字の大きさ

また「文字の色」を変更するためにはcolor 属性を追加します。
文字の色を変化させる

【注意】
「HTML」の規格を策定している World Wide Web Consortium（W3C）によると、font要素は廃止される要素となっています。

ただしブラウザは互換性を持たせるため、font要素をサポートしており利用可能です。
興味がある方や、学術目的の方は「スタイルシートを覚えよう」も合わせて参照ください。

「色彩名」には、「red」「green」「blue」のように、指定することで可能です。ただし、色彩名を知らなければ、指定することができません。

「16 進数」と「色彩名」どちらが良いか？

前節のように、配色方法は「16 進数」でも「色彩名」でもどちらでも構いません。また「大文字」「小文字」どちらで指定しても問題ありません。

一体どちらが良いのでしょうか？それぞれ一長一短があります。

「16 進数」の場合: 値を変えるだけで色を簡単に変更できるが、思った色を作るのは難しい
「色彩名」の場合: 分かりやすいが、色彩名を知っておかなければならない

「どちらも分からない」という方のために、次の2つのツールを作成しました。

「配色一覧表」: 138 色の「色彩名」と「セーフカラー」を掲載しています。
「色取見鳥」: バーを調節して、好きな色を作成することができます。

以上の2 つツールを用いれば、簡単に色を作ることができると思います。

背景、文字の色の変更