★文字色の指定

文字色の指定

一般的なブラウザでは、特に色を指定しなければ背景色は白、文字色は黒で表示されることが多いですが、CSSでそれ以外の色を指定することもできます。

このチュートリアルで作成しているサンプルサイトでは、文字色を濃い目のグレーにしてみましょう。
文字色を指定する際には、colorプロパティを使用します。
base.cssに以下の記述を追加してください。

@charset "utf-8";
body {
	font-size:95%;
	font-family: "ＭＳ ゴシック",sans-serif;
	line-height:1.5;
	color:#333333;
}

保存をしたらブラウザで表示してみましょう。
ウェブページ内のすべてのテキストが、黒から濃い目のグレーになって表示されれば成功です。

変更前を確認する

わずかな変化ですが、やや軽やかな印象になったかもしれません。

色が変化しない場合には、値の先頭に#がついているかどうか、半角英数で記述されているかなどを確認してみてください。
先頭に付けるのは、音楽記号のシャープ（ ♯ ）ではなく、ナンバーサイン（ # ）です。

ウェブにおける色の指定方法

ウェブにおける色指定では、RGB各色を16進法、0-255の数値、カラーネームのいずれかで指定します。

16進法による色指定

16進法による色指定の場合、例えば、#fca9a3という具合にナンバーサイン（ # ）に続けて6つの数値で色を表します。
6つの数値と言いながら、aやcやfなどのアルファベットが混じっていますが、これは16進法であるためです。
私たちが日常的に使用している10進法では、0123456789を使用して9を超えたら一桁上がります。
16進法では、0123456789abcdefを使用してfを超えたら一桁上がります。

6つの数値は#RRGGBBを意味しており、R＝赤、G＝緑、B＝青に対応しています。
例えば、白ならば#ffffff、赤の純色ならば#ff0000、緑の純色ならば#00 ff 00、青の純色ならば#0000 ff、黒ならば#000000となります。
これらRGBの三色の組み合わせで色指定することになります。

RGB各色は16進法の2桁で指定しますので、一色当たり16×16＝256諧調に指定し分けることができます。
1色当たり256諧調が3色分あるので、理論上は256×256×256＝16 777 216種類の色を指定し分けることが可能です。

尚、ウェブの色指定では最初に#を書きますが、これはナンバーサイン（番号記号）と呼ばれるもので、一般的なキーボードでは[shift]を押しながら[3]を押すことで入力できます。
なんとなくシャープと呼びたくなりますが、音楽記号のシャープ（ ♯ ）とは異なり、
♯000000などと記述しても色指定ができないので注意してください。
正しくは#000000です。
ナンバーサインは横棒が水平、シャープは横棒が右上がりです。

0-255の数値による色指定

RGB各色を0-255の数値で指定する方法は、各色の最小値が0、最大値が255となります。
0は16進法の場合の00と同じ、255はffと同じです。例えば、白ならば255 255 255、赤の純色ならば255 0 0、緑の純色ならば0 255 0、青の純色ならば0 0 255、黒ならば0 0 0となります。

主にPhotoShopなどのグラフィックソフトで、RGBのカラーパレットを使用している人がそのカラーパレットの値を16進法に変換することなく利用する場合に便利な指定方法でしょう。

カラーネームによる色指定

HTMLやCSSでは、一部の色はカラーネームでも指定できるようになっています。
例えば、赤はred、緑はgreen、青はblueといった具合です。

navy、gray、white、blackなどの使用頻度の高い色や、カラーネームが決まっている色のなかに自分のイメージに近いものがあれば、覚えてしまうと便利でしょう。