狼読

 
2020/05/25

[css]フォントの色を変えてみよう

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

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

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

2020/05/14

[Linuxコマンド]2つ以上のファイルを横に並べて表示させる方法

投稿カレンダー

2024年3月
 123
45678910
11121314151617
18192021222324
25262728293031

Technology

category

©狼読