第4章 CSSで文字スタイルを指定する
| 文字色の指定
|
一般的なブラウザでは、特に色を指定しなければ背景色は白、文字色は黒で表示されることが多いですが、CSSでそれ以外の色を指定することもできます。
このチュートリアルで作成しているサンプルサイトでは、文字色を濃い目のグレーにしてみましょう。 文字色を指定する際には、colorプロパティを使用します。 base.cssに以下の記述を追加してください。
CSSソース（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などの使用頻度の高い色や、カラーネームが決まっている色のなかに自分のイメージに近いものがあれば、覚えてしまうと便利でしょう。
|
まとめ
- 文字色は、colorプロパティで指定する
- 色の値は、16進法、0-255の数値、カラーネームのいずれかで指定する
- 16進法では、color:#RRGGBB; の書式で指定する
