color：文字の色を指定する

初期値 canvastext
適用対象 全てのテキスト
継承 する
アニメーション 計算値の型による
対応ブラウザ caniuseで確認

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);
}

colorに関連するCSSプロパティ

フォント・文字色
color 文字の色を指定する
font フォントに関する様々な機能を一括で指定する
font-family 文字フォントの種類を指定する
font-feature-settings OpenTypeフォントの拡張書体の特性を制御する
font-kerning フォントの文字詰め（カーニング）を制御する
font-language-override 文字を表示する祭に使用する言語情報を一時的に変更する
font-size 文字フォントの大きさを指定する
font-size-adjust 現在のフォントサイズを基準に小文字の大きさを相対的に調整する
font-stretch 表示させるフォントの幅広や幅狭のフェイスを指定する
font-style フォントを筆記体や斜体で表示するかどうかを指定する
font-synthesis 太字や斜体に対応していないフォントの加工を制御する
font-variant フォントの表示形式やブラウザの合成規則を一括で指定する
font-variant-alternates 文字フォントの代替字体（グリフ）の選定を制御する
font-variant-caps 文字列に適用されるキャピタライゼーションルールを制御する
font-variant-east-asian 東アジアの言語で使われる字体を制御する
font-variant-ligatures 隣り合った文字フォントの合字（リガチャ）を制御する
font-variant-numeric 数値に関する文字表記を制御する
font-variant-position 上付き文字や下付き文字として配置されるべき字体の使用を制御する
font-weight 文字フォントの太さを指定する
© weblan3.com