【初心者向け】CSSで文字の色を変えるには？colorプロパティの使い方を解説

Webサイトの文字の色を変えたいときがありますよね。

CSSを使ってどう指定すればいいのか分からない、という方もいるのではないでしょうか？

今回は、CSSで文字の色を変える方法を知りたい、という方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、CSSで文字の色を変更する方法が分かるようになりますよ。

ぜひ最後まで読んでくださいね！

colorプロパティの使い方と値

ブラウザに表示させる文字の色を変更したい場合、CSSのcolorプロパティを使用します。

具体的には以下のように記述します。

p {
  color: red;
}

これは、p要素の中の文字の色を赤くする指定です。

「red」の部分はcolorプロパティの値を表します。

値は上記コードのように、直接カラーネームを指定することもできますが、他の方法でも指定が可能です。

colorプロパティの値

colorプロパティで指定できる値は、主に以下の4つです。

それぞれ詳しく説明していきましょう。

カラーネームについて

カラーネームは、色の指定を「color: white」というように、色の名前で指定します。

カラーコードのように数値を覚えたり、メモをしたりする必要が無いので、分かりやすくて便利ですね。

ただし、色の種類が限定され、細かい修正も難しくなります。

多くのサイトでは、カラーコードが主に使用されていますね。

複数人で作業する商用サイトなども、カラーコードで指定した方が都合が良いでしょう。

カラーコードについて

カラーコードは、「color: #3cb371」というように、16進数のコードで指定します。

カラーコードを取得したいときには、色見本サイトを活用してみてください。

「カラーコード」や「色見本サイト」で検索すると多くのサイトが出てきますので、自分に合ったものをブックマークしておくと良いかもしれませんね。

RGBについて

RGBは、「color: rgb(29, 130, 43)」というように、赤と緑と青の強さを数値で指定します。

数値は0~255の範囲になります。使用しているサイトはあまり見かけないですが、0~100%で指定することも可能です。

RGBAについて

RGBAは、RGBに加え、透明度の指定ができます。

0が透明、1が完全に不透明となり、その間の数値で指定することができます。

様々な文字の色を変えるサンプルコード

colorプロパティを指定することで、文字の色を変えられることが分かりましたね

ここでは、応用編として、以下の方法を解説していきます。

一部だけ色を変える

文字の一部だけ色を変えたいときがありますよね。

インライン要素を使用することで一部だけ色を変えることができます。

<p>文章の中の<span>一部だけ</span>色を変更することができます。<span>大事な箇所</span>に指定してみましょう。</p>

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

p {
  color: #ccc;
}
span {
  color: red;
}

インライン要素のspanを使って、文章の一部だけを赤くしています。

リンクの文字の色を変える

リンクで使用するa要素もインライン要素であるため、文章の中に入れて一部だけ色を変えることができます。

<p>別ページを開くことができる<a href="sample.html">リンク</a>も色を変更することができます。</p>

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

p {
  color: #ccc;
}
a {
  color: red;
}

リンクの文字の色を変えると、下線の色も指定の色に変化します。

さらに、リンクでは疑似クラスを使用する場面が多いです。疑似クラスを付けて文字の色を変える方法を紹介しましょう。

:link擬似クラス

:link擬似クラスは、リンクをクリックしていない未訪問の状態での表示を指定します。

a:link {
  color: #3cb371;
}

:visited擬似クラス

:visited擬似クラスは、リンク先をクリックした訪問済みの状態での表示を指定します。

a:visited {
  color: #ba55d3;
}

ブラウザのキャッシュを削除すると、「:link擬似クラス」の色に戻ります。

:hover擬似クラス

:hover擬似クラスは、リンクの上にカーソルが乗った状態での表示を指定します。

a:hover {
  color: #00fa9a;
}

ボタンの形をしたリンクが、カーソルを乗せると押し込まれたような表示に変わる動きも、この指定で実装することができますよ。

「:visited擬似クラス」を指定している場合には、:hover擬似クラスは、後ろに記述する必要があります。

順序を逆にしてしまうと、visitedが優先されてしまい、指定が効かなくなります。

:active擬似クラス

:active擬似クラスは、クリックしてアクティブ状態になったときの表示を指定しています。

a:active {
  color: #ffd700;
}

こちらも「:hover擬似クラス」を指定している場合、:active擬似クラスは、後ろに記述しなくてはいけません

順序を逆にしてしまうと、hoverが優先されてしまいます。

まとめ：CSSの基本、文字の色の指定をマスターしよう

今回は、CSSを使って文字の色を指定する方法を解説してきました。

一部だけ文字の色を変更したり、リンクの状態によって文字の色を変えたりする方法も紹介しましたね。

文字の色を変えることは、CSSの基本中の基本ですので、ぜひ覚えておきましょう。

CSSを指定するときには、「;」や「}」のつけ忘れなど、記述ミスに注意してくださいね。

HTML・CSSを勉強する際に、今回の記事が参考になれば幸いです。