【CSS】文字・テキストの色を変える方法(color)

2022年6月9日2023年7月9日

本記事では、HTMLで表示されている文字・テキストの色を変える方法について解説しています。

HTML/CSSの学習におすすめ書籍

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

総合評価

( 5 )

メリット

HTMLとCSSの基本が体系的に学べる
Webデザインの基本が学べる
1つのWebサイトを作りながら学べる

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ]

楽天ブックス

¥2,486 （2024/11/18 14:59時点 | 楽天市場調べ）

Amazonで探す

楽天市場で探す

Yahoo!ショッピングで探す

ポチップ

先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

Amazon Kindle Unlimited

全プログラマー必見！
変数名/関数名にもう悩まない！

リーダブルコード

総合評価

( 5 )

メリット

美しいコードが書けるが自然と書けるようになる
他の開発者が理解しやすいコードになる

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤功平, 翻訳:角征典

¥2,640 （2023/07/23 02:48時点 | Amazon調べ）

Amazonで探す

楽天市場で探す

Yahoo!ショッピングで探す

ポチップ

文字の色を変える

HTMLで表示しているテキストの色を変更する場合、CSSのcolorプロパティを使います。

p{
  color:値;
}

colorプロパティに設定できる値について見ていきましょう。

色の指定方法①：キーワード

カラーを指定する1つ目の方法、キーワードについて解説します。

p{
  color:black;
}

キーワードでは、あらかじめ決められた色を「black」や「white」などの名詞で指定します。直感的で分かりやすいですが、キーワードでは表現できない微妙な色合いを指定することができないため、実務ではあまり使われることが少ないです。キーワードで指定できる色名はMDNに記載されています。

キーワードを使用して文字の色を変更したサンプルコードと実行結果は以下のとおりです。

<p class="red">赤</p>
<p class="green">緑</p>
<p class="blue">青</p>

.red{
  color:red;
}

.green{
  color:green;
}

.blue{
  color:blue;
}

色の指定方法②：16進数

カラーを指定する2つ目の方法、16進数について解説します。

p{
  color:#ff0000;
}

16進数は「# + カラーコード」という形式で記述します。記述する桁数は6桁で「最初の2文字が赤」「次の2文字が緑」「最後の2文字が青」を表しています。

「#ff0000」や「#881144」などの同じ英数字が連続している場合は「#f00」「#814」に省略することが出来ます。

最初は見慣れない形で戸惑い敬遠しがちですが、Photoshopなどのデザインツールでは16進数でカラーコードを指定するのが当たり前なので、実務では一番使われるカラー指定の方法です。また、Webで「薄い緑 CSS」などで調べてヒットするものは基本的に16進数やRGBで数値が書かれていることがほとんどです。

16進数を使用して文字の色を変更したサンプルコードと実行結果は以下のとおりです。

<p class="red">赤</p>
<p class="green">緑</p>
<p class="blue">青</p>

.red{
  color:#ff0000;
}

.green{
  color:#00ff00;
}

.blue{
  color:#0000ff;
}

色の指定方法③：RGB

カラーを指定する3つ目の方法、RGBについて解説します。

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

RGBは3つの引数に色を指定します。16進数と色の配置は同じで「第1引数に赤色」「第2引数に緑色」「第3引数に青色」を表しています。

また、RGBには透明度を付けることできます。透明度を付けるにはrgbではなく「rgba」を使い第4引数に不透明度を表す数値を指定します。数値は0〜1の間にある数値を指定することができ、数値が0に近づくほど透明になり1に近づくほど不透明になります。

p{
  color:rgba(255, 0, 0, 0.5);
}

RGBを使用して文字の色を変更したサンプルコードと実行結果は以下のとおりです。

<div>
  <p class="red">赤</p>
  <p class="green">緑</p>
  <p class="blue">青</p>
</div>
<div>
  <p class="red-a">半透明の赤</p>
  <p class="green-a">半透明の赤</p>
  <p class="blue-a">半透明の赤</p>
</div>

.red{
  color:rgb(255, 0, 0);
}

.green{
  color:rgb(0, 255, 0);
}

.blue{
  color:rgb(0, 0, 255);
}


.red-a{
  color:rgb(255, 0, 0, 0.7);
}

.green-a{
  color:rgb(0, 255, 0, 0.5);
}

.blue-a{
  color:rgb(0, 0, 255, 0.3);
}

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！