zukucode
主にWEB関連の情報を技術メモとして発信しています。

CSS 文字(テキスト)の色を変更する

CSSで文字(テキスト)の色を変更する方法を紹介します。

以下のように、color: 色;の形式で指定します。

<div>
  <span style="color: red;">テキスト</span>
</div>
<div>
  <span style="color: blue;">テキスト2</span>
</div>
<div>
  <span style="color: #336699;">テキスト3</span>
</div>

文字の色はredblueのようにすでに定義された色かもしくは、色コードで指定します。

色コードとは#AB3F7Cのように、先頭の#のあとに16進数の文字を6桁指定します。

先頭から2文字が赤、真ん中の2文字が緑、末尾の2文字が青の値に対応しています。

赤緑青をそれぞれ00(暗)〜FF(明)の値で指定します。

<div>
  <span style="color: #000000;">テキスト</span>
</div>
<div>
  <span style="color: #FF0000;">テキスト2</span>
</div>
<div>
  <span style="color: #00FF00;">テキスト3</span>
</div>
<div>
  <span style="color: #0000FF;">テキスト4</span>
</div>
<div>
  <span style="color: #FF00FF;">テキスト5</span>
</div>
<div>
  <span style="color: #FFFF00;">テキスト6</span>
</div>

#334455のように、赤緑青のそれぞれの値の1桁目と2桁目が同じ場合は#345のように省略することも可能です。

<div>
  <span style="color: #9900FF;">テキスト</span>
</div>
<div>
  <span style="color: #90F;">テキスト2</span>
</div>

関連記事