タイトル画像
サイトタイトル画像

背景、文字の色の変更

スポンサードリンク

背景、文字の色の変更

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" 」とは一体何なのでしょうか。

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

disc 配色構成は「光の3 原則」を用いています。 disc 色の指定には「16 進数」を用いています。

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

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

10進数16進数
11
22
33
44
55
66
77
88
99
10A
11B
12C
13D
14E
15F
1611
1712

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

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

16進数

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>

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

文字の色を変える

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

また「文字の色」を変更するためにはcolor 属性を追加します。
<font color="色彩名">文字の色を変化させる</font>

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

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

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

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

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

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

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

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

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

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

スポンサードリンク

オススメ書籍

HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。

始めるための基礎知識

タグを覚えよう(非推奨タグ含む)

入門者を卒業した方へ

HTML5を覚えよう

スタイルシートを覚えよう

アクセス数増加、収入を得る仕組み

サイト運営にあたって

HTML 以外も知っておこう

スクリプト・プログラム言語も知ろう

リファレンス

付録

このページの人気コンテンツ

    全ページの人気コンテンツ

    Copyright ©2014 .(since 2000/08/10)