【初心者必見】CSSでtextの色を変えるcolorプロパティを解説

テキストは、WEBサイトにとってなくてはならないものです。ページの内容を伝える役割の大半は、テキストが担っています。

そのためテキストの見せ方というのは、WEBサイト制作において非常に重要なことです。

テキストの装飾のポイントの1つに色があります。

読みやすいテキストを表示させるには、周囲の色との関係性を考えなければなりません。

特定のテキストを強調するために、他のテキストとは色を変えて表示させるということも少なくありません。

WEBサイトを作る際、色を指定するという機会は必ず訪れます。

この記事ではテキストの色を指定するプロパティ、colorについて解説しているので、ぜひ参考にしてください。

CSSにおけるcolorプロパティとは

テキスト要素の色を指定できるCSSプロパティです。

colorプロパティを使うことによって、要素のテキストの色を自由に変更できます。

例えば、以下のように記述します。

HTML
<p>文字の色を赤にする</p>

CSS
p {
color:red;
}

これで、p要素のテキストの色が赤くなります。

pの他にも、テキストであればすべてのHTML要素に適用可能です。

WEBサイトに表示されているテキストの色は、colorプロパティで指定されているのです。

colorプロパティの値の指定方法

色の値の指定方法には、いくつかのパターンがあります。

上記4つの指定方法を紹介します。

カラーネームで指定する

colorの解説でも使用した、色の名前を指定する方法です。

以下に、再度記述します。

HTML
<p>文字の色を青にする</p>

CSS
p{
  color:blue;
}

これでp要素のテキストの色が青くなりました。

他、black（黒）、white（白）などの定番の色はもちろん、royalblue（ロイヤルブルー）、springgreen（スプリンググリーン）など微妙な色合いも数多くあり、多彩な表現が可能です。

色の名前で指定できるというのは非常に簡単で、感覚的に作業を進められます。最もシンプルで、初心者にも使いやすい指定方法です。

しかし、実際の作業においてカラーネームの指定方法が使われることはほとんどありません。厳密な指定ができないからです。

WEBサイトを作成する場合、まずphotoshopなどのツールを使用してデザインを行います。そして、そのデザインを元にコーディングを行うのです。

コーディングでは、デザインを忠実に再現することが求められます。それは、感覚的な指定とは相反するものです。

ひとえにredやblueといっても、さまざまな色合いがあり、CSSのカラーネームで指定した色と合致することはまずありません。

カラーネームには微妙な色合いもたくさんあるというのは先に述べた通りですが、実際のデザインで使われる色は無限ともいうべきもので、カラーネームの色だけではとてもフォローしきれません。

カラーネームに対応している色だけでデザインするとしたら、逆に数が多過ぎて名前を覚えるのが大変です。

カラーネーム指定は、そういう方法もあるという知識だけを持っていれば問題ありません。

16進数カラーコードで指定する

#のあとに続く6つの文字で記す16進数を用いた指定方法です。

下記のように記述します。

HTML
<p>#ff0000は赤色</p>

CSS
p{
  color:#ff0000;
}

このように、数字とアルファベットで色が表されます。

使用できるのは0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、Fです。この6桁、16種類の文字の組み合わせが色となって表示されるのです。

カラーコードの色指定との表現力の差は明らかでしょう。

なお、白は#ffffffで、黒は#000000です。このfと0の間で、すべての色が表現されます。

CSS
p {
color:#eb0c70;
}

これは紫がかった赤です。

CSS
p {
color:#f51700;
}

これはオレンジがかった赤です。

無限大の組み合わせを持つ6桁によって、言葉では言い表せない無数の色が表現されます。

6桁は2桁ずつが一塊になっていて、最初の2桁が赤、真ん中の2桁が緑、最後の2桁が青を表しています。

この3つの色が合わさり、1つの色となって表示されるのです。光の3原色と呼ばれるもので、モニターが色を表示するのに採用されている方式です。

Red、Green、Blueの頭文字をとってRGBと呼ばれています。

それぞれの色を担当する文字が同じ場合は、記述を省略することが可能です。

#ff0000なら以下のようになります。

CSS
p {
color:#f00;
}

赤はff、緑は00、青は00と3色すべて同じ文字なので、赤はf、緑は0、青が0と短くすることができるのです。

省略できるのは、3色がそれぞれ、すべて同じ場合のみです。

CSS
p {
color:#ff0001;
}

上記のような場合、#f001というように4桁に省略することはできません。

16進数カラーコードはCSSで色を指定する際、もっともよく使われている方法です。最大の理由は、photoshopで表現された色を忠実に再現できるからです。

知りたい箇所の色を抽出し、カラーコードをCSSにコピーアンドペーストするだけでよいのです。

それで寸分の狂いもなく、デザインと同じ色がページに表示されます。

RGBで指定する

16進数カラーコードの段落でも説明しましたが、RGBとは赤、緑、青の組み合わせで光の3原色と呼ばれています。

この3つの色の組み合わせが1つとなって、モニターに映る色として表示されています。

16進数カラーコードはこの3つの色を、6桁の文字に変えて表していました。一方、RGB方式は3つの色をそのまま数値化しています。

HTML
<p>rgb(255, 0, 0)は赤色</p>

CSS
p{
  color:rgb(255, 0, 0);
}

このように最初にrgbと記述し、その後に3つの数値が並びます。

最初の数値が赤、真ん中の数値が緑、最後の数値が青です。この並びは16進数カラーコードと変わりません。

使用可能なのは0～255までで、3つの色の割合を示しています。

もっとも明るい白がrgb(255,255,255)です。色が強い方が暗くなると思われがちですが、RGBでは逆で、もっとも暗い黒がrgb(0,0,0)となります。

CSS
p {
rgb(245,0,0)
}

これは少し暗くなった赤です。

CSS
p {
rgb(255,10,10)
}

これは少し緑と青が混じった赤です。

このように3つの数値で、濃淡や色合いを表現しています。

この方法も16進数カラーコードと同様、photoshopのデザインの色を忠実に再現できます。しかし16進数カラーコードに比べると、使われる機会は多くありません。

理由の1つが手間です。

16進数カラーコードでphotoshopの色を抽出する場合、6桁を1度コピーアンドペーストするだけでした。しかし、RGBでは3つの数値を1回ずつコピーアンドペーストしなければなりません。

1度コピーアンドペーストして先頭に#をつけるだけの16進数カラーコードの方が、遥かに手軽です。

しかし、RGBには16進数カラーコードには無い特徴があります。テキストの透過が可能なのです。RGBにAlpha（透明度）を加えたもので、RGBAと呼ばれています。

記述法は以下の通りです。

CSS
p {
rgba(255,0,0,0.5)
}

先頭のrgbの後にaを足し、数値も1つ増やします。この数値は0～255ではなく0～1です。

透明度を示しています。0が完全な透明で、1は完全な不透明です。0.5は透明度50％ということになります。

RGBAはテキスト以外に、背景色の指定などでよく使われています。

HSLで指定する

色相、彩度、輝度の3つの組み合わせで色を表現する方法です。

以下のように記述します。

HTML
<p>hsl(0, 100%, 50%)も赤色</p>

CSS
p{
  color:hsl(0, 100%, 50%);
}

hがhue（色相）、sがsaturation（彩度）、lがlightness（輝度）を表しています。

hは0～360の数値が有効です。色相は円で表されていて、角度が色を示していると考えると分かりやすくなります。

0が赤、90が黄緑、180が水色、270が紫というように徐々に変わっていきます。そして、360で赤に戻ります。

この4つの色を基準として考えると、数値だけでどんな色なのか、想像できるようになります。45なら黄色、225なら青といった具合です。

saturationは0%～100%で指定します。100%で色相の純色で、0%で色相に関係なくグレーになります。

llightnessの指定も0%～100%です。こちらは100%の場合、色相に関係なく白で、0%の場合は黒になります。純色は50%です。

上記の赤の指定は、sもlも色相の純色を表しているということです。

落ち着いた色合いにしたいときはsを下げる、弱めにしたいときはlを上げるなど、数値で直感的に色を指定できます。

HSLにも、Alpha（透明度）が使えます。記述方はRGBと同様です。

CSS
p {
hsla(0, 100%, 50%,0.5)
}

このようにhslの後にaを加え、最後に透明度の数値を記述します。

分かりやすい指定法ではありますが、photoshopから色を抽出できないという難点があります。

デザインの色を忠実に再現したい場合はジェネレーターなどを使用して、16進数カラーコードやRGBの色を変換しなければなりません。

厳密にデザインされたページのコーディングを行う際は、あまり使う機会はないでしょう。

しかし、テスト用のページなど、色に厳格な指定がない場合は手早くコーディングできます。色の名前を憶える必要がないので、キーワードよりも直感的な色の指定が可能です。

CSSのcolorプロパティの使用例

ここからは、実際にページをコーディングするときの、実戦的なcolorプロパティの使い方についての解説です。

なお色指定は、もっとも使われる機会が多い16進数カラーコードを使用します。

全体にcolorを指定する

ページをコーディングする際、まず基本となるCSSを設定するというのは、定番の手法です。

colorプロパティもその1つで、最初にページ全体の文字色が設定されます。

CSS
body {
color:#333333;
}

これでページ全体を囲うbody要素の中のテキストが、#333333（黒に近いグレー）になります。

body要素に基本のCSSを指定するというのは、広く使われている手法です。

他にフォントの種類を指定するfont-family、フォントの大きさを指定するfont-size、行間を指定するline-heightなどがbodyに記述されます。

最初にページ全体のテキストの色を指定したとしても、それですべての色が固定されてしまうというわけではありません。

colorを上書きすればよいのです。

CSS
h1 {
color:#ff0000
}

これをbodyのCSSの後に記述すれば、h1の色は#ff0000（赤）になります。CSSは基本的に、後に書いてある記述が優先されます。

黒の指定に注意

上記のbodyのコードで、テキストの色を#333333（黒に近いグレー）としました。#000000（純粋な黒）としなかったのには理由があります。

#000000 では色が強すぎて、閲覧者の目が疲れてしまうのです。

白かそれに近い背景色のページの場合、colorは#000000ではなく、#333333など少し落としたグレーにするとよいでしょう。

リンクの状態によってcolorを変える

aタグは訪問済みリンクやマウスオーバー時など、状態によって色を変えることができます。

CSS
a:link {
color: #1a0dab;
}

まずは基本の状態です。何もしていない状態のリンクの色を、#1a0dab（青）にしました。

CSS
a:visited {
color:#663366
}

続いて訪問済みリンクです。「:visited」と記述することで、一度訪れたことがあるリンクだけを指定できます。#663366（紫）としました。

このように「:」でセレクターに付加する文字列を疑似クラスといいます。要素の特定の状態だけを指定できるというものです。

linkでは他に、マウスオーバー時の「:hover」、クリック時の「:acitive」が指定できます。

テキストの特定の範囲だけのcolorを変える

colorを指定することで、要素ごとのテキストの色を指定することができます。

しかし、ときには要素の中の特定の範囲だけの色を変えたいということもあるでしょう。

そうしたときは、要素の中に要素を作ってcolorを指定します。

HTML
<p>テキスト<strong>テキスト</strong>テキスト</p>

CSS
strong {
color: #ff0000;
}

pタグの中の一部分を、強調を意味するstrongタグで囲いました。そしてCSSでstrongタグのテキストを#ff0000（赤）にするよう指定しています。

これでpタグの中の、strongタグで囲われた部分だけが赤くなります。strongタグにはデフォルトで太字になる設定がありますが、赤くすることでさらに際立つでしょう。

文章の意味として強調したくないときや、見出しなどすでに強調のタグの中に入っているときには、spanタグを使うのが便利です。

HTML
<h2>テキスト<span>テキスト</span>テキスト</h2>

CSS
span {
color: #ff0000;
}

これもspanで囲われた部分だけが#ff0000（赤）になります。

テキストの最初だけcolorを変える

要素の中の特定の範囲の色を変えるには、変えたい箇所をタグで囲うとい作業が必要でしたが、最初の1文字であれば、CSSだけで指定が可能です。

HTML
<h2>テキスト</h2>

CSS
h2:first-letter {
color: #ff0000;
}

first-letterが、要素の最初の文字という疑似要素です。h2の最初の文字だけが#ff0000（赤）になります。

font-sizeなどと併用し、文章で閲覧者の目を引きたいときなどに使用されます。

「:」でセレクターに付加するというのは疑似クラスと同じですが、性質は少々異なります。疑似要素とは、要素の一部だけにスタイルを指定できるというものです。

inputの入力欄のcolorを変更する

colorで指定できるのは、すでに表示されているテキストだけではありません。

閲覧者が入力する部分にも、色の指定が可能です。

HTML
<input type="text">

CSS
input {
color: #666666;
}

これで1行のテキスト入力欄に閲覧者が入力するテキストの色が、#666666（グレー）になります。

複数行のテキスト入力欄のtextareaタグにも、colorの指定が可能です。

まとめ

colorはコーディングの際、ほぼ間違いなく使用するプロパティです。使い方をしっかりと習得することが、効率的なコーディングに繋がるでしょう。

また、テキストの表示はサイトの良し悪しに直接関わる要素です。

色が持つ役割も大きく、colorがしっかりと指定されていないと、閲覧者にとって見づらいサイトになってしまうかもしれません。

目に優しいか、背景と同化していないか、強調したい部分がしっかりと強調されているかなどを考慮し、適切な配色を心掛けてください。