cssでフォントの色を変える方法をご紹介したいと思います。
cssで文字の色を変えるとホームページが華やかになりますね。
また、大事な文字は赤文字などで強調したいですね。

文字の色はホームページのイメージを決める大事な要素となっています。

文字の色を変えるためのhtmlを準備しよう

今回は、cssで文字の色を変更する方法をご紹介するためのhtmlを用意したいと思います。今回は基本色である「赤」、「青」、「緑」に変えるためのhtmlを用意しましょう

<p class="font-color-red">文字を赤くしよう</p>
<p class="font-color-blue">文字を青くしよう</p>
<p class="font-color-green">文字を緑にしよう</p>

上記のようにそれぞれの色に対応したクラスを用意しましょう。
次はこちらのクラスに対して、それぞれの色に文字が変更されるようにしてみましょう

文字の色をcssで変えてみよう

上記のHTMLにcssを当てて文字の色を変えていってみましょう。
文字の色を変えるために 「　color　」 を使用します。
赤は#ff0000,またはredと表記することができます。
青は#0000ff,またはblueと表記し、緑は　#00ff00と表記します。

<style>
 .font-color-red{
   color:red;
 }
 .font-color-blue{
   color:blue;
 }
 .font-color-green{
   color:green;
 }
</style>
<p class="font-color-red">文字を赤くしよう</p>
<p class="font-color-blue">文字を青くしよう</p>
<p class="font-color-green">文字を緑にしよう</p>

文字の色を変えたサンプル実装例

文字を赤くしよう

文字を青くしよう

文字を緑にしよう

上記のように colorを設定することで一行ずつ文字の色を変更することができましたね。

まとめ

今回は、文字の色をcssで変える方法をご紹介させていただきました

文字の色をcssで変更することで、ホームページのイメージアップにつながりますね。黒貴重ならシックなイメージ、オレンジ色なら暖かいアットホームなイメージなどを印象つけられるかと思います。

ぜひあなたのサイトにぴったりの色に変えてみてくださいね。