colorプロパティ

color: 値;

colorプロパティで、文字色(前景色)を指定できます。

色の指定方法)

  • 16進数で表すRGB値
  • 16進数で表すRGB値の省略型
  • カラーネーム
  • rgb( )の括弧内に10進数で表すRGB値を記述します。各色の色の段階は 0~255 の値で表します。
  • rgb( )の括弧内に、パーセンテージ( % )で表すRGB値を記述します。各色の色の段階は 0%~100% の値で表します。

例)

<p style="color: #ff0000;">...</p>
<p style="color: #f00;">...</p>
<p style="color: blue;">...</p>
<p style="color: rgb(0,255,0);">...</p>
<p style="color: rgb(100%,0%,100%);">...</p>

RED COLOR

RED COLOR

BLUE COLOR

GREEN COLOR

MAGENTA COLOR

16進数で表すRGB値

ホームページ作成にあたり使用できる色は、赤、緑、青の原色を256階調とし、その組み合わせで256×256×256=16777216 色が使用できます。

16進数で表すRGB値とは、赤、緑、青の順に16進数( 0123456789abcdef )を各色 2つ 並べ色調を表現する方法です。各色につき16進数が2つありますので、16×16=256 階調が指定できます。

カラーコード / カラーネーム

例)

<p style="color: #ff0000;">...</p>

AAAaaaテキスト


16進数で表すRGB値の省略型

スタイルシートでは、16進数で表すRGB値は、各色 2桁の値が同じであれば、1桁を省略して表記することができます。

例)

<p style="color: #ff0000;">...</p>
<p style="color: #f00;">...</p>

AAAaaaテキスト

AAAaaaテキスト

#ff0000は#f00と同じ赤色を表示します。


10進数で表すRGB値

R(赤)、G(緑)、B(青)を、各色 0~255 の範囲の10進数(0123456789)で指定し色の段階を表します。また、各色の括弧内の値は、カンマ ( , ) で区切ります。

例)

<p style="color: rgb(255,0,0);">...</p>

テキストAAAaaa

rgb(255,0,0)は赤色を表します。


パーセンテージで表すRGB値

R(赤)、G(緑)、B(青)を、各色 0%~100% の範囲のパーセンテージで指定し色の段階を表します。また、各色の括弧内の値は、カンマ ( , ) で区切ります。

例)

<p style="color: rgb(0%,0%,100%)">...</p>

テキストAAAaaa

rgb(0%,0%,100%)は青色を表します。