color - 文字色の指定

投稿日:2016/02/22 / 更新日:2016/02/22

スタイルシートのcolorは、文字色を指定するためのプロパティです。

サンプルコード

下記は、文字色に#D36015を指定するサンプルコードです。

div {
	color: #D36015 ;
}

スタイルシートのcolorを指定した例です。上の要素には#D36015、下の要素には#2660A1を指定してみました。文字色が変わっているのを確認して下さいね。

<div id="element-1"> <p>おはようございます。2016年7月2日、今朝もいい天気ですよね。</p> </div> <div id="element-2"> <p>こんにちは。2016年7月2日、今日は太陽が出て気持ちのいい1日ですね。</p> </div>

#element-1 { color: #D36015 ; } #element-2 { color: #2660A1 ; }

値の指定方法は主に下記の通りです。リンクをクリックすると、デモを確認できます。

項目	説明
inherit	親要素の値を引き継ぐ。例の場合、`div`要素の`color`には、`body`に指定された値(`#D36015`)が引き継がれる。
initial	プロパティの初期値が適用される。この場合、`#000000`となる。
transparent	透明。視認できないが存在しているので、選択してコピーすることは可能。
color	CSSで許可された方法で、色の指定ができます。Hex(`#D36015`)、RGB(`rgb( 211, 96, 21 )`)、HSL(`hsl( 24, 82%, 46% )`)、KEYWORD(`brown`)など。

2016年7月現在の、ブラウザのサポート状況は次の通りです。全ての主要ブラウザで、ベンダープレフィクスなど気にすることなく利用できます。