English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS 参考マニュアル

CSS @規則(RULES)

CSS 属性全書

CSS色値

CSSで色値を定義する方法がいくつかあります。

色キーワード

彩色キーワードは大文字小文字を区別しない識別子であり、特定の色を示します。例えば、red、green、blue、yellow、blackなどです。

  h1 {
   color: red;
  }
  p {
   背景-color: yellow;
  }
テストして‹/›

警告:色キーワードのサポートはブラウザによって異なりますので、安全を期して、十六進数または機能シンボルを使用することをお勧めします。

を確認する色キーワードの完全リスト

透明色キーワード

transparentキーワードは完全に透明な色を示します。

このキーワードは、透明黒の短縮形としてrgba(0,0,0,0)と考えられ、それが計算値です。

  h1 {
   color: transparent;
  }
  p {
   背景-color: transparent;
  }
テストして‹/›

注意: CSS 2.1は、ただし2つの属性のみを許可しています。背景-borderを使用するとき、ただし、CSS-bordercolor3transparentキーワードを含む色値を拡張して、それを色値を受け入れるすべての属性と一緒に使用することができます。

RGB色値

RGB(赤緑青)色モデルは、CSSで色値を定義する最も一般的な方法です。RGBモデルを使用して色を以下の2つの方法で定義できます:

十六進表記法

十六進表記法のRGB値#は、その後の3または6つの十六進文字(0-9の文字列で構成されています。

六桁シンボル(#rrggbb)を使用するとき、最初のペア(rr)は赤色値を、次のペア(gg)は緑色値を、最後のペア(bb)は青色値を表します。

  h1 {
   color: #f80;
  }
  p {
   背景-color: #ff8800;
  }
テストして‹/›

ヒント:三位の十六進表記法(#rgb)は、ゼロを加えるのではなく数字をコピーすることで六桁形式(#rrggbb)に変換できます。例えば:#03fは#00に拡張できます33ffまでの整数値(0から

関数表記法

関数表記法でRGB値は指定されます:rgb(red, green, blue)。各パラメータ(red、greenおよびblue)は色の強度を定義し、0から255)または百分比值(0%から100%)。

整数値255対応100%,十六進表記法のfまたはff:例えば、rgb(0,255,255) = rgb(0%,100%,100%) = #0ff、すべての値は同じ色を表す、つまりaquaです。数値の周りには空白があります。

  h1 {
   color: rgb(0,255,255});
  }
  p {
   背景-color: rgb(0%,100%,100%);
  }
テストして‹/›

値0または0%は特定の色値が存在しないことを示し、一方で値255、100%およびfまたはffはその色値が完全に存在することを示します。

注意:範囲外(0-255または0%-10の値は自動的にカットオフまたはデバイスがサポートする範囲内に変更されます(0%)。

関連するCSS3色のチュートリアルで新しい機能シンボル(例えば)rgba()、hsl()およびhsla()を使用して色値を定義する情報を学びましょう。