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

css辞典 CSS辞典
この記事は約3分で読めます。

文字の色を指定する「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 実行サンプル

colorプロパティのchromeブラウザの実行結果

Firefox 実行サンプル

colorプロパティのfirefoxブラウザの実行結果

edge 実行サンプル

colorプロパティのedgeブラウザの実行結果

opera 実行サンプル

colorプロパティのoperaブラウザの実行結果

コメント

タイトルとURLをコピーしました