色をつけよう

あれ,この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で定められている色の名前の一覧です:

aqua (#00FFFF)
black (#000000)
blue (#0000FF)
fuchsia (#FF00FF)
gray (#808080)
green (#008000)
lime (#00FF00)
maroon (#800000)
navy (#000080)
olive (#808000)
orange (#FFA500) *
purple (#800080)
red (#FF0000)
silver (#C0C0C0)
teal (#008080)
white (#FFFFFF)
yellow (#FFFF00)

* 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色しか扱えない画面がよくありました。 そこで,各成分を 00336699CCFF の6通りに限って,6×6×6 = 216 通りの色だけを使うことがよく行われていました。 このように制限した色をWebセーフカラーと呼びます。

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

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

#000000 #000033 #000066 #000099 #0000CC #0000FF
#003300 #003333 #003366 #003399 #0033CC #0033FF
#006600 #006633 #006666 #006699 #0066CC #0066FF
#009900 #009933 #009966 #009999 #0099CC #0099FF
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF
#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF
#330000 #330033 #330066 #330099 #3300CC #3300FF
#333300 #333333 #333366 #333399 #3333CC #3333FF
#336600 #336633 #336666 #336699 #3366CC #3366FF
#339900 #339933 #339966 #339999 #3399CC #3399FF
#33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF
#33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF
#660000 #660033 #660066 #660099 #6600CC #6600FF
#663300 #663333 #663366 #663399 #6633CC #6633FF
#666600 #666633 #666666 #666699 #6666CC #6666FF
#669900 #669933 #669966 #669999 #6699CC #6699FF
#66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF
#66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF
#990000 #990033 #990066 #990099 #9900CC #9900FF
#993300 #993333 #993366 #993399 #9933CC #9933FF
#996600 #996633 #996666 #996699 #9966CC #9966FF
#999900 #999933 #999966 #999999 #9999CC #9999FF
#99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF
#99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF
#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF
#CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF
#CC6600 #CC6633 #CC6666 #CC6699 #CC66CC #CC66FF
#CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF
#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF
#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF
#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF
#FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF
#FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF
#FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF
#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF
#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF

参考


奥村晴彦

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