HTMLやCSSを学んでいる際、序盤に学ぶcolorプロパティ。
colorプロパティはテキストの文字色を変更するプロパティでWEB制作の現場では必ず使用するプロパティになります。
今回の記事ではこのcolorプロパティについてご紹介したいと思います。

この記事で使用するHTMLの構造は以下となります。

<p class="red">【CSS】文字色を変えるcolorプロパティの使い方</p>
<p class="green">【CSS】文字色を変えるcolorプロパティの使い方</p>
<p class="blue">【CSS】文字色を変えるcolorプロパティの使い方</p>

colorプロパティの基本

colorプロパティの基本的な使い方は以下の通りです。

セレクタ {
    color: 色;
}

この指定方法をもとに以下のように指定します。

.red {
    color: red;
}
.green {
    color: green;
}
.blue {
    color: blue;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

色の指定方法

色の指定方法は様々あります。どんなものがあるのか順番に見てみましょう。

キーワードで色を指定する

色はキーワードで指定することが出来ます。「赤色」なら「red」、青色なら「blue」のように英単語で指定します。
具体的には以下のように指定します。

.red {
    color: red;
}
.green {
    color: green;
}
.blue {
    color: blue;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

こちらは一例です。この他にも様々な色をキーワードで指定することが出来ます。

カラーコードで色を指定する

次に色を6桁の16進数のカラーコードで指定する方法をご紹介します。
このカラーコードは「#000000」（黒）から「#ffffff」（白）まで、1677万7216色を表現することが出来ます。
具体的には以下のように指定します。

.red {
    color: #ff0000;
}
.green {
    color: #00ff00;
}
.blue {
    color: #0000ff;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

RGB値で色を指定する

次に色をRGB値で指定する方法をご紹介します。

color: rgb(赤の割合,緑の割合,青の割合);

上の通り、赤色「r」、緑色「g」、青色「b」としてそれぞれの色の割合を0～255の間の数値で指定することで様々な色を表現することが出来ます。
具体的には以下のように指定します。

.red {
    color: rgb(255,0,0);
}
.green {
    color: rgb(0,255,0);
}
.blue {
    color: rgb(0,0,255);
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

RGB値で不透明度を指定する

RGB値で指定する場合、不透明度を表現することも出来ます。
不透明度を表現する場合は以下のように指定します。

color: rgba(赤の割合,緑の割合,青の割合,不透明度);

第4の値に不透明度を指定します。不透明度の指定は0～1までの値を指定します。
具体的には以下のように指定します。

.red {
    color: rgba(255,0,0,0.25);
}
.green {
    color: rgba(0,255,0,0.75);
}
.blue {
    color: rgba(0,0,255,0.5);
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

colorプロパティの応用

続いて、colorプロパティを応用して使用する方法を見てみましょう。

1文字目だけ色を変える

１文字だけ文字色を変える場合は以下のように指定します。

.red:first-letter {
    color: red;
}
.green:first-letter {
    color: rgb(0,255,0);
}
.blue:first-letter {
    color: #0000ff;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

特定の部分だけ色を変える

特定の部分だけ色を変える場合はCSSだけでは再現することが出来ないため、HTMLの構造を少し変更します。

<p class="red"><span>【CSS】</span>文字色を変えるcolorプロパティの使い方</p>
<p class="blue">【CSS】<span>文字色を変える</span>colorプロパティの使い方</p>
<p class="green">【CSS】文字色を変える<span>colorプロパティの使い方</span></p>

上のように文字色を変えたい部分のみ<span>タグで囲い、colorプロパティは以下のように指定します。

.red span{
    color: red;
}
.green span {
    color: rgb(0,255,0);
}
.blue span {
    color: #0000ff;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

このようにすることで特定の部分のみ文字色を変えることが出来ます。

まとめ

今回の記事ではcolorプロパティの使い方をご紹介しました。使用方法は限られるため応用した使用方法はあまりありませんが基礎となるプロパティとなるので確実に使いこなしていきたいですね。