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>
文字の色はred
やblue
のようにすでに定義された色かもしくは、色コードで指定します。
色コードとは#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>