色・背景

「color」プロパティ

「color」プロパティは、文字の色(フォントのカラー)を指定するCSSプロパティです。
文字の色(フォントのカラー)やテキストの装飾に関わる色の指定ができます。

「color」プロパティの値

文字の色の単位は「カラー名」「16進数カラーコード」「RGB」「HSL」などの値を指定することができます。
見出しタイトルや強調文字などの文字の色を変更してページを見やすくするために指定します。
※ブラウザの種類により、小数点以下の数値は切り上げされる場合がありますので小数点での指定は推奨できません。

CSSで文字や背景や枠線に色を指定する4つの指定方法

「color」プロパティの指定方法

文字の色(フォントのカラー)を指定する場合は、「color」プロパティを使い適応する値を指定することで実装できます。

「color」プロパティ
セレクタ{
color;文文字の色;
}
値例
/* カラー名値 */
color: red;/* 赤 */
color: orange;/* オレンジ */
color: black;/* 黒 */
color: blue;/* 青 */
color: green;/* 緑 */

/* 16進数カラー値 */
color: #FF0000;/* 赤 */
color: #ff7200;/* オレンジ */
color: #000000;/* 黒 */
color: #0000FF;/* 青 */
color: #008000;/* 緑 */

/* rgb値 */
color: rgb(34, 12, 64);/* 赤 */
color: rgb(255, 114, 64);/* オレンジ */
color: rgb(0, 0, 0);/* 黒 */
color: rgb(0, 0, 255);/* 青 */
color: rgb(0, 128, 0);/* 緑 */

/* hsl値 */
color: hsl(30, 100%, 50%);/* 赤 */
color: hsl(30, 100%, 50%);/* オレンジ */
color: hsl(0, 0%, 0%);/* 黒 */
color: hsl(240, 100%, 50%);/* 青 */
color: hsl(120, 100%, 25%);/* 緑 */
表示例

文字の色(赤)

文字の色(オレンジ)

文字の色(黒)

文字の色(青)

文字の色(緑)