CSS辞典 colorプロパティの解説

文字の色を指定する「colorプロパティ」の使用方法を記載

対応バージョン:CSS3/2.1

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera
初期値ブラウザーに依存
適用される要素すべての要素
モジュールCSS Color ModuleLevel3及びLevel4
継承あり

概要・使用方法

{ color: 色;}

colorプロパティ」は、文字に色を指定します。

Webコンテンツアクシビリティガイドライン(Web Content Accessibility Guidelines)では、文字と背景の色のコントラスト比は4.5:1以上が推奨されています。

※見出しのような少し大きな文字は3:1以上

色をキーワードまたはカラーコードで指定します。
currentcolorcolor: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ブラウザ実行結果

chrome

Firefox ブラウザ実行結果

Firefox

edgeブラウザ実行結果

edge

operaブラウザ実行結果

opera