色をつけよう

あれ，このh2には色がない？

<h2>あれ，このh2には色がない？</h2>

他のページのh2要素にはスタイルシートで背景色を着けていましたが，ここではいったん外してみました。 h2に色を付けるためにはどうすればいいのでしょうか。

背景を青に

このh2には

h2 {
  background-color: #99F;
}

というスタイルを指定してみました。 この #99F は薄めの青を指定するコードです（後で説明します）。

ちょっと文字が大きいでしょうか。 小さめにしてみましょう。

これでどうかな

このh2には

h2 {
  font-size: 1.2em;
  background-color: #99F;
}

というスタイルを指定してみました。 h2のデフォルトの大きさは 1.5em（本文の標準文字サイズの1.5倍）ですので，1.2em 程度にしてみました。 文字の位置をもうちょっと工夫してみましょう。

これでどうかな

このh2には

h2 {
  font-size: 1.2em;
  padding: 0.2em 0.5em;
  background-color: #99F;
}

というスタイルを指定してみました。 もうちょっと工夫してみましょう。

これでどうかな

このh2には

h2 {
  font-size: 1.2em;
  margin: 2em 0em 0em 0em;
  padding: 0.2em 0.5em;
  background-color: #99F;
}

というスタイルを指定してみました。 かなり良くなりました。

なお，実際の他のページでは，Netscape 4.x にも対応するように，次のようにしています。

h2 {
  font-size: 1.2em;
  margin: 2em 0em 0em 0em;
  padding: 0.2em 0.5em;
  border-width: thin;
  border-color: white;
  background-color: #99F;
}

もっと別の色にしてみましょう。

これはどうかな

このh2には

h2 {
  font-size: 1.2em;
  margin: 2em 0em 0em 0em;
  padding: 0.2em 0.5em;
  background-color: navy;
  color: white;
}

というスタイルを指定してみました。 背景色はさきほどより暗い navy で，文字色は白です。 もっといろいろやってみましょう。

ではこれはどうかな

h2 {
  font-size: 1.2em;
  border-left: 1em solid navy;
  margin: 2em 0em 0em 0em;
  padding: 0.2em 0.5em;
  background-color: #99F;
}

ではこれはどうかな

h2 {
  font-size: 1.2em;
  border-left: 1em solid navy;
  border-bottom: 0.2em solid #99F;
  margin: 2em 0em 0em 0em;
  padding: 0.2em 0.5em;
}

色の名前

CSS 2.1で定められている色の名前の一覧です：

* orangeはCSS 2.1で付け加わりました。 CSS 3ではもっとたくさんの色が加わります（W3Cの CSS3 Color Module 参照）。 ブラウザはすでにこれら多くの色名を知っているはずです。

なお，次の16進RGB表記を知っている人は，green は #00FF00 ではないかと思われたかもしれませんが，RGBのG（green）を全開にした色 #00FF00 と一般的な色名の green (#008000) とでは違いがあります。

16進RGB表記による色指定

色は赤（red），緑（green），青（blue）の3原色に分けられます。 これら3原色の各成分の強さを，0123456789ABCDEF の文字を二つ連ねて表すことがよくあります。 これが16進RGB表記です。

各成分ごとに，最も暗い状態が 00 で，最も明るい状態が FF です。 #000000 は3原色とも最も暗い状態ですので，黒を表します。 逆に #FFFFFF は3原色とも最も明るい状態ですので，白を表します。 また #FF0000 は赤だけが最も明るい状態ですので，純粋な赤を表します。

00 から FF までで 16×16 = 256 通りの状態が表せます。 3成分が組み合わされば，256×256×256 通りの色が表せることになります。 しかし，昔は256色しか扱えない画面がよくありました。 そこで，各成分を 00，33，66，99，CC，FF の6通りに限って，6×6×6 = 216 通りの色だけを使うことがよく行われていました。 このように制限した色をWebセーフカラーと呼びます。

なお，たとえば #99CCFF は #9CF と略記することができます。

Webセーフカラーの表です：

参考

• WEB色見本 原色大辞典 - HTML Color Names

奥村晴彦

Last modified: 2011-11-23 21:48:27