CSS color 文字の色を指定するサンプル

CSSのcolorプロパティで、文字の色を指定するサンプルです。

目次

仕様 colorプロパティの仕様
サンプル colorのサンプル
  色に透明度を付ける

colorプロパティの仕様

color : 値

colorプロパティは、文字の色を指定します。

説明
色を指定します。
値を継承する

colorのサンプル

colorのサンプルです。
複数の色の指定の仕方があります。

<style>
#p1 {
	color: red;
}
#p2 {
	color: #008000;
}
#p3 {
	color: rgb(0, 0, 255);
}
</style>
<p id="p1">あいうえお</p>
<p id="p2">あいうえお</p>
<p id="p3">あいうえお</p>

2行目は、英字で色を指定しています。
3行目は、rrggbbの形式で指定しています。
4行目は、rgbの形式で指定しています。

以下のイメージになります。

あいうえお

あいうえお

あいうえお

色に透明度を付ける

色に透明度を付ける場合は、rgbaを指定して4つめの引数を追加します。
4つめの引数は、0から1までを指定でき、0が透明で1が不透明です。

色に透明度を付けるサンプルです。

<style>
#p4 {
	color: rgba(0, 0, 255, 0.7);
}

#p5 {
	color: rgba(0, 0, 255, 0.5);
}

#p6 {
	color: rgba(0, 0, 255, 0.3);
}
</style>
<p id="p4">あいうえお</p>
<p id="p5">あいうえお</p>
<p id="p6">あいうえお</p>

以下のイメージになります。

あいうえお

あいうえお

あいうえお

関連の記事

CSS font-family フォントを指定するサンプル
CSS text-align 文字を左寄せ/右寄せにするサンプル
CSS text-decoration 文字に線を引くサンプル

△上に戻る