今回のポイント
色の3大構成要素
色指定の記述方法

　今回から配色について学びます。配色とはページ背景やフォントも含めて，ページ全体を色分けしていく作業を指します。ここで最初の疑問です。どうして色を付けなければならないのでしょうか。この問題から考えてみましょう。

　色を付ける作業にはふたつの目的があります。

  1. 読みやすくする
  2. 飾り立てる

　デザインに不慣れな人ほど，色を使うことでページを飾り立てる意識が強くなるかと思います。しかし本来配色の目的はページを読みやすくすることにあります。読みやすいというのは，文字が背景に沈み込み過ぎていないことだけでなく，例えば長時間読んでいても目が疲れないことも含みます。飾るという視点はいったん置いておいて，まずは読みやすい配色について，サンプルを作りながら考えてみることにします。

　最初にベースとなるHTMLを作っておきます（リスト1）。読みやすさを考えるために，文章は適度に長いものを用意してください。h1タグとpタグだけの構成です。CSSでbodyの背景色と余白，h1とpのフォント色を設定します。この最初のサンプルは白背景に黒文字です。特に何も指定していない状態と同じです（図1）。

リスト1●配色を考えるベースとなるサンプル。白背景に黒文字を指定 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>ページタイトル</title>
<style type="text/css">
/*ページ背景色*/
body{
  /*白*/
  background-color:#ffffff;
  margin:1em 3em 1em 3em;
}

/*フォント色*/
h1{
  /*黒*/
  color:#000000;
}

/*フォント色*/
p{
  /*黒*/
  color:#000000;
}
</style>
</head>
<body>
<h1>配色と読みやすさ</h1>
<p>　画面一杯に文字があるというのは，
  :
   中略（適度にボリュームのあるテキストを用意してください）
  :
なってしまっているわけですね。</p>
</body>
</html>

図1●リスト1のブラウザ表示
図1●リスト1のブラウザ表示