CSS辞典 colorプロパティの解説
文字の色を指定する「colorプロパティ」の使用方法を記載
対応バージョン:CSS3/2.1
対応ブラウザ






初期値 | ブラウザーに依存 |
適用される要素 | すべての要素 |
モジュール | CSS Color ModuleLevel3及びLevel4 |
継承 | あり |
概要・使用方法
{ color: 色;}
「colorプロパティ」は、文字に色を指定します。
Webコンテンツアクシビリティガイドライン(Web Content Accessibility Guidelines)では、文字と背景の色のコントラスト比は4.5:1以上が推奨されています。
※見出しのような少し大きな文字は3:1以上
色
色 | 色をキーワードまたはカラーコードで指定します。 |
currentcolor | color:inherit;として扱われます。 |
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<title>colorプロパティ CSSフォントサンプルページ</title>
<meta charset="uft-8">
<style>
.sample1{color:red;}
.sample2{color:rgb(128,0,128);}
.sample3{color:#008000;}
</style>
</head>
<body>
<p>「竹」と一口に言ってもたくさんあり世界には1200種類の丈があるとも考えられています。
日本ではそのうち600種類が生息していると言われて、なかでもよく見るのは
<span class="sample1">真竹</span>、
<span class="sample2">孟宗竹</span>、
<span class="sample3">淡竹</span>の3種類です。</p>
</body>
</html>
「竹」と一口に言ってもたくさんあり世界には1200種類の丈があるとも考えられています。日本ではそのうち600種類が生息していると言われて、なかでもよく見るのは真竹、孟宗竹、淡竹の3種類です。
chromeブラウザ実行結果

Firefox ブラウザ実行結果

edgeブラウザ実行結果

operaブラウザ実行結果
