DHC-オンライン講座
文系の人にもわかる HTML入門

Lesson 5 色の指定

前のLessonの最後に、文字の色を指定した例が出てきました。 ウェブページでは文字や背景などの色を指定できます。 画像同様、色も効果的に使うと、わかりやすく見栄えのするページを作ることができます。

背景色の指定

まず、ブラウザウィンドウの背景の色を指定してみましょう。 たとえば、企業のウェブページなら、自社の「コーポレートカラー」で背景色を統一するといったことが考えられます。

背景色の指定も、背景画像と同様文書全体に影響しますので、<body>タグで指定します。 次のように、bgcolor属性を使います。

<body bgcolor="pink">

図5-1は、前に見た蔘鶏湯のページの背景色だけピンクに変えたものです。 また、図5-2は次のコードのように背景色としてsilverを指定したものです。 背景を変えるだけでだいぶ雰囲気が変わります。

<body bgcolor="silver">

図5-1 背景色の指定(pink)
図5-2 背景色の指定(silver)

色のRGB指定

色の指定は上の例のように、主な色についていはpink、silver、blueなどの色名で指定することもできますが、もう少し微妙な色についてはRGB(Red、Green、 Blueの頭文字)という方式で指定します。 どちらかというと、こちらの方が一般的です。 この指定には普通の10進数で使う0-9のほかに、A-Fを含めた合計16文字を使って値を表す「16進数」という(ややこしい)表記法を使いますので、一覧表などを見て、欲しい色を見つけて、その数字をコピーして使うのがよいでしょう。

表5-1に主な色を名称とRGBで指定する場合の文字列をあげておきました たとえば、「オレンジ色」を背景にしたい場合、次のように指定します。

<body bgcolor="#ff7f00"> 

なお、HTMLエディタや画像処理用のソフトなどでは、たとえば図5-3のような「カラーテーブル」から簡単に色を選択できるようになっています。

注釈

※ここにあげた色の名称はほとんどのブラウザが対応していますが、特定のブラウザだけで指定できる色の名称もあります。

図5-3 カラーテーブル

表5-1 色の指定
色名 名称指定 RGB指定
white #ffffff
非常に明るい灰色 #cdcdcd
銀色 silver #c0c0c0
明るい灰色 #a8a8a8
灰色 gray #808080
くすんだ灰色 #545454
black #000000
褐色 #a62a2a
red #ff0000
栗色 maroon #800000
オレンジ色 #ff7f00
黄土色 #8e6b23
yellow #ffff00
オリーブ色 olive #808000
黄緑 #99cc32
ライム lime #00ff00
green #008000
青緑 #238e68
明るい青緑 aqua #00ffff
緑青 teal #008080
青紫 #42426f
#23238e
blue #0000ff
ダークブルー #00009c
濃紺 navy #000080
明るい赤紫 fuchsia #ff00ff
purple #800080

文字色の指定

背景色を暗い色に指定したとき、表示される文字が黒のままでは読めないページになってしまいます。 そこで、文字の色の指定方法も学んでおきましょう。 1文字1文字について色や大きさの指定も可能ですが、それについては後の方のLessonで紹介します。 ここではページ全体の文字の色について見てみましょう。

ページ全体の文字の色を指定するのですから、ここでも<body>タグの属性を用います。 次のコードで背景を黒、文字を白にしたページができあがります。

<body text="white" bgcolor="black">

図5-4は蔘鶏湯の例に、上の指定をした例です。 これまた、雰囲気がだいぶ変わります。

図5-4 背景色を黒、文字色を白に指定

続いて図5-5は次のように指定した例です。

<body text="pink" bgcolor="#e6e8fa">

図5-5 背景色を薄い青、文字色をピンクに指定

この図のように似たような明るさの色を使ってしまうと、文字が読みにくくなってしまいますので、色使いには十分注意しましょう。 目のよく見えない人や、特定の色がうまく判別できないような人が見ても、十分読みやすい色使いを心がけることが大切です。

背景色や文字色を指定したときは、まだ訪問していないリンクや、既に訪問したリンクの文字列の色にも注意する必要があります。 図5-4では背景を黒に指定したため、青く表示されるリンクの文字が読みにくくなってしまいました。 これは、配色を工夫すれば避けられます。

<body text="white" bgcolor="black" link="silver" vlink="gray"  alink="pink">

各属性について説明しましょう。

上のコードを指定すると、蔘鶏湯のページは図5-6のように表示されます。 リンクをマウスでクリックしようとしているときは、図5-7のようにalinkで指定した色になります。

図5-6 リンクの色を指定
図5-7 リンクをクリックした瞬間

色使いは控えめに

ウェブページでは、このほか、ひとつひとつの文字の色、表の升目の色などさまざまな部分で色を指定することができます。 具体的な方法は少しずつ学んでいきますが、色の指定方法はいずれの場合も同じで、色名あるいはRGB(「#」と6桁文字列)で指定します。

いろいろな色を使うのは楽しいのですが、文字が読めないような色使いや人が不快感を覚えるような色使いはは止めましょう。 概して、色は控えめに用いておく方が好ましい結果が得られます。

まとめ

背景色、文字色などページ全体に関わる色の指定方法を学びました。 色使いによってページの印象がだいぶ変わりますので、いろいろと工夫してみましょう。

HTMLのタグなど

DHC-オンライン講座
文系の人にもわかる HTML入門
Lesson 5