colorプロパティの説明
CSSのcolorプロパティは、文字の色やテキストの装飾に関わる前景色を指定します。ここで指定された値は、currentcolorの色として採用されます。例えば、他のプロパティの色の既定値がcurrentcolorだった場合に、その値を省略すると文字と同じ色で表示されます。
文字色を変更する場合は、文字の視認性が下がらないように、背景色とのコントラストに配慮しましょう。
colorに指定できる値
<color>- CSSで使用できる色を表すデータ型の値です。使用できる形式は、キーワード、16進数、RBG値、HSL値などがあります。
colorの使い方とサンプルコード
colorプロパティの構文は以下の通りです。
/* キーワード値 */
color: red;
color: green;
color: blue;
/* 16進数 */
color: #f00;
color: #ff0000;
/* RBG値 */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
/* HSL値 */
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5);
/* グローバル値 */
color: initial;
color: inherit;
color: revert;
color: unset;
colorの実例
それでは実際にcolorプロパティの書き方を見ていきましょう。文字の色は子要素にも継承するので、一部の文字色だけを変更したい場合は、個別に範囲を定めましょう。
<div class="color_samp1">color: red;</div>
<div class="color_samp2"><span>color</span>: <span>#0066FF;</span></div>
.color_samp1 {
color: red;
}
.color_samp2 {
color: #0066FF;
}
.color_samp2 span:first-child {
color: rgb(99, 99, 99);
}