HTML/CSS

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

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

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

動画情報
作成者たにぐち まこと
学習時間9時間
受講者数43,706人
レビュー (9,232件)
動画の詳細はこちら

文字の色を変える

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);
}

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村