トップページ  > ウェブ制作チュートリアル  > 文字色の指定
第4章 CSSで文字スタイルを指定する

★文字色の指定

文字色の指定

広告

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

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

CSSソース(base.css)

@charset "utf-8";
body {
	font-size:95%;
	font-family: "MS ゴシック",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などの使用頻度の高い色や、カラーネームが決まっている色のなかに自分のイメージに近いものがあれば、覚えてしまうと便利でしょう。

まとめ
  1. 文字色は、colorプロパティで指定する
  2. 色の値は、16進法、0-255の数値、カラーネームのいずれかで指定する
  3. 16進法では、color:#RRGGBB; の書式で指定する
<前へ 目次へ 次へ>
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ