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（青）の３色の強さで表現されます。各色の強さは 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 設定例を参照してください。

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

関連記事