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>「竹」と一口に言ってもたくさんあり世界には１２００種類の丈があるとも考えられています。
          日本ではそのうち600種類が生息していると言われて、なかでもよく見るのは
          <span class="sample1">真竹</span>、
          <span class="sample2">孟宗竹</span>、
          <span class="sample3">淡竹</span>の3種類です。</p>
  </body>
</html>

実行結果

「竹」と一口に言ってもたくさんあり世界には１２００種類の丈があるとも考えられています。日本ではそのうち600種類が生息していると言われて、なかでもよく見るのは真竹、孟宗竹、淡竹の3種類です。

chrome 実行サンプル