color

CSSでは、テキストの色を変えることができます。

本ページでは、colorプロパティについて説明します。

colorプロパティとは

colorプロパティを使うと、テキストの色を変えることができます。また、デフォルトではcolorプロパティと同じ色になるtext-decorationやborderの色も変わります。

colorの定義は、以下のとおりです。

色の指定方法は、「CSSでの色の指定方法」をご参照ください。

colorの利用例は、以下のとおりです。

【colorのbody要素への適用例】

body {
  color: #808080;
}

上記のようにbodyに適用すると、以下のようにページ全体でテキストの色が灰色(#808080)になります。

もう1つの例です。

【colorのクラスへの適用例】

.test {
  color: red;
}

上記を、以下のようにspan要素などでクラスtestを適用すると、段落の一部だけ文字を赤色にできます。

【span要素で一部だけ色を変える例】

<p>段落の一部だけが、<span class="test">赤色</span>になります。</p>

上記は、以下のように表示されます。

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目	IE	Ed	Fx	Ch	Sa	Op
color	〇	〇	〇	〇	〇	〇

【スマートフォン】
項目	Sa	An	Op	Ch	Fx	Sm
color	〇	〇	〇	〇	〇	〇

※スマートフォンのFirefoxとChromeは、Android版です。