HTML & CSS - テキストの文字色を変更する
テキストの文字色を変更する
テキストの文字色を変更するには、CSS の color
プロパティで定義します。color
プロパティの値は 6 桁の 16 進数、RGB、または RGBA などで指定します。
<!DOCTYPE html>
<html lang="ja">
...
<p class="hex">
16 進数で文字色を指定した文章です。
</p>
<p class="rgb">
RGB で文字色を指定した文章です。
</p>
<p class="rgba">
RGBA で文字色を指定した文章です。
</p>
...
</html>
テキストの文字色を変更する - HTML
.hex{
color: #1aa7ba;
}
.rgb{
color: rgb(26, 167, 177);
}
.rgba{
color: rgba(26, 167, 177, 0.8);
}
テキストの文字色を変更する - CSS
16 進数で色を指定する方法は、R(赤)、G(緑)、B(青)の3色の強さで表現されます。各色の強さは 256 段階で 10 進数では 0 ~255 ですが、16 進数では 00~FF までの範囲で表されます。そのため、16 進数で色を表すためには #RRGGBB
の書式になります。黒色は #000000
、白色は #FFFFFF
、青色は #0000FF
となります。
RGB で色を指定する方法は、rgb(R, G, B)
の書式で表します。16 進数で表現する方法とは異なり、RGB で指定する方法は各色を 10 進数(0~255)で表現します。
RGBA で色を指定する方法は、rgb(R, G, B, A)
の書式で表します。RGB で表現する方法と似ていますが、最後の A では透明度(アルファ値)を指定できます。透明度は 0~1.0 で表現され、0 が透明であり、1 が不透明となります。例えば、0.5 を指定すると、50 % 透明になります。
フォントについての CSS 設定例は、読みやすいフォントの CSS 設定例を参照してください。