From 8f07bc236313e803336dadfc35c26fe05b72864a Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 1 Nov 2021 00:15:06 +0900 Subject: CSS Color モジュールの文書を更新 (color value の関数を除く) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/30 時点の英語版に同期 --- files/ja/web/css/color-adjust/index.md | 152 +- files/ja/web/css/color/index.md | 161 +- files/ja/web/css/color_value/index.md | 2882 +++++++++-------- files/ja/web/css/css_color/index.md | 157 +- .../web/css/css_colors/color_picker_tool/index.md | 3239 +------------------- files/ja/web/css/opacity/index.md | 218 +- 6 files changed, 1727 insertions(+), 5082 deletions(-) (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/color-adjust/index.md b/files/ja/web/css/color-adjust/index.md index bbc74dba8d..5dd07edb2a 100644 --- a/files/ja/web/css/color-adjust/index.md +++ b/files/ja/web/css/color-adjust/index.md @@ -4,120 +4,112 @@ slug: Web/CSS/color-adjust tags: - Adjusting Colors - CSS - - CSS Colors - - CSS Property - - HTML Colors - - HTML Styles - - Layout - - Non-standard - - Reference + - CSS 色 + - CSS プロパティ + - HTML 色 + - HTML スタイル + - レイアウト + - 標準外 + - リファレンス - Styling HTML - Styling text - - Web + - ウェブ - color-adjust - - 'recipe:css-property' + - recipe:css-property +browser-compat: css.properties.color-adjust translation_of: Web/CSS/color-adjust --- -
{{CSSRef}}
+{{CSSRef}} -

color-adjust は CSS のプロパティで、{{Glossary("user agent", "ユーザーエージェント")}}が出力端末への要素の表示方法を最適化するために何をするかをウェブ作者が制御することができるものです。既定では、ブラウザーは出力端末の種類と機能を考慮して、要素の外観を必要に応じて慎重に調整することが許可されています。

+**`color-adjust`** は CSS のプロパティで、{{Glossary("user agent", "ユーザーエージェント")}}が出力端末への要素の表示方法を最適化するために何をするかをウェブ作者が制御することができるものです。既定では、ブラウザーは出力端末の種類と機能を考慮して、要素の外観を必要に応じて慎重に調整することが許可されています。 -

構文

+## 構文 -
color-adjust: economy;
-color-adjust: exact;
+```css +color-adjust: economy; +color-adjust: exact; -

color-adjust プロパティの値は、以下のキーワードのうちの一つでなければなりません。

+/* グローバル値 */ +color-adjust: inherit; +color-adjust: initial; +color-adjust: revert; +color-adjust: unset; +``` -

値

+`color-adjust` プロパティの値は、以下のキーワードのうちの一つでなければなりません。 -
-
economy
-
ユーザーエージェントは、それがレンダリングされているデバイスのために出力を最適化するために、適切かつ慎重に要素に調整を加えることが許されています。例えば、印刷するときに、ブラウザは背景画像をすべて削除して、白い紙で読むときにコントラストが最適化されるようにテキストの色を調整することを選ぶかもしれません。これがデフォルトです。
-
exact
-
要素の内容は、ブラウザによって変更されると、実際には良くなるどころか悪くなるかもしれないような、思慮深い重要な方法で色や画像やスタイルを使用するように、特別に慎重に作られています。コンテンツの外観は、ユーザーの要求がない限り変更されるべきではありません。例えば、あるページでは、背景色が白と薄い灰色の間で交互に変化する行を持つ情報のリストが含まれているかもしれません。背景色を削除すると、コンテンツの読みやすさが低下します。
-
+### 値 -

使用上の注意

+- `economy` + - : ユーザーエージェントは、描画する機器に合わせて出力を最適化するために、適切かつ賢明と思われるように要素に調整を行うことができます。例えば印刷時に、ブラウザーは背景画像をすべて削除し、白い紙で読むのに最適なコントラストになるようにテキストの色を調整することができます。これが既定値です。 +- **`exact`** + - : その要素の内容物は、色、画像、スタイルを思慮深く、または重要な方法で使用するために、特別に注意深く作られたものであり、ブラウザーによって変更されると、事態が改善されるどころか、むしろ悪化する可能性があります。内容物の外観は、ユーザーの要求以外で変更してはいけません。例えば、ページに背景色が白と薄い灰色の間で交互に変化する行を持つ情報のリストがあるとします。背景色を削除すると、内容物の読みやすさが損なわれます。 -

ブラウザーが指定された外観から逸脱したいと思う理由はいくつかあります。

+## 使用上の注意 - +ブラウザーが指定された外観から外したいと思う理由はいくつかあります。 -

ユーザーが色や画像の使用を制御するためにユーザーエージェントが提供しているオプションは、 color-adjust の値よりも優先されます。言い換えれば、 color-adjust が何かをするという保証はありません。ユーザーが動作を上書きすることができるだけでなく、各ユーザエージェントは、与えられた状況で color-adjust をどのように扱うかをそれ自身で決定することが許されています。

+- 内容物が、その出力機器上ではテキストと背景の色が似たような色になってしまう場合に、読みやすくするため。 +- 出力機器がプリンターの場合、インクを節約するために、暗い背景画像や非常に濃い背景画像が削除されることがあります。 +- ページを印刷するとき、ブラウザーは、暗い背景と明るい色のテキストを、白い背景と濃い色のテキストに置き換えようとするかもしれません。 -

公式定義

+色や画像の使用を制御するために、ユーザーエージェントがユーザーに提供しているオプションは、`color-adjust` の値よりも優先されます。言い換えれば、`color-adjust` が何かをするという保証はありません。ユーザーが動作を上書きできるだけでなく、各ユーザーエージェントは、与えられた状況で `color-adjust` をどのように扱うかを自分で決定することができます。 -

{{cssinfo}}

+## 公式定義 -

形式文法

+{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 -

低コントラストの維持

+

低コントラストの維持

-

この例では、黒の背景色の上に {{cssxref("background-image")}} と半透明の {{cssxref("linear-gradient()")}} 関数を使用して、中程度の赤のテキストの後ろに濃い青のグラデーションを持つボックスが表示されています。理由はどうあれ、これは紙の上を含めたあらゆるレンダリング環境で望ましい外観ですので、 color-adjust: exact を使用して、レンダリング時にボックスの色やスタイルを調整しないように指示します。

+この例では、黒の背景色の上に {{cssxref("background-image")}} と半透明の {{cssxref("gradient/linear-gradient()", "linear-gradient()")}} 関数を使用して、中程度の赤のテキストの後ろに濃い青のグラデーションを持つボックスが表示されています。理由はどうあれ、これは紙の上を含めたあらゆるレンダリング環境で望ましい外観ですので、`color-adjust: exact` を使用して、レンダリング時にボックスの色やスタイルを調整しないように指示します。 -

CSS

+#### CSS -
.my-box {
-  background-color: black;
-  background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5));
-  color: #900;
-  width: 15rem;
-  height: 6rem;
-  text-align: center;
-  font: 24px "Helvetica", sans-serif;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+```css
+.my-box {
+  background-color: black;
+  background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5));
+  color: #900;
+  width: 15rem;
+  height: 6rem;
+  text-align: center;
+  font: 24px "Helvetica", sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color-adjust: exact;
 }
-
+``` -

HTML

+#### HTML -
<div class="my-box">
-  <p>Need more contrast!</p>
-</div>
+```html +
+

Need more contrast!

+
+``` -

結果

+#### 結果 -

{{EmbedLiveSample("Preserving_low_contrast", 640, 120)}}

+{{EmbedLiveSample("Preserving_low_contrast", 640, 120)}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Color Adjust', '#propdef-color-adjust', 'color-adjust')}}{{Spec2('CSS Color Adjust')}}初回定義
+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

{{Compat("css.properties.color-adjust")}}

+{{Compat}} -

関連情報

+## 関連情報 - +- [CSS を使った HTML の要素への色の適用](/ja/docs/Web/HTML/Applying_color) +- その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}} +- {{cssxref("background-image")}} +- {{cssxref("-webkit-print-color-adjust")}} diff --git a/files/ja/web/css/color/index.md b/files/ja/web/css/color/index.md index a97a3e0f78..6f5b701126 100644 --- a/files/ja/web/css/color/index.md +++ b/files/ja/web/css/color/index.md @@ -3,44 +3,48 @@ title: color slug: Web/CSS/color tags: - CSS - - CSS Property - - CSS テキスト - - CSS プロパティ - CSS 色 - - HTML 整形 - - Layout - - Reference - - Web + - CSS プロパティ + - CSS テキスト + - HTML 色 + - HTML + - レイアウト + - リファレンス + - Styling HTML + - Styling text + - ウェブ + - color + - recipe:css-property +browser-compat: css.properties.color translation_of: Web/CSS/color --- -
{{CSSRef}}
- -

CSS の color プロパティは、要素のテキストやテキスト装飾における前景色の色の値を設定し、 {{cssxref("currentcolor")}} の値を設定します。 currentcolor は他のプロパティの間接的な値として使用される可能性があり、 {{cssxref("border-color")}} のような他の色に関するプロパティの既定値にもなったりします。

+{{CSSRef}} -
{{EmbedInteractiveExample("pages/css/color.html")}}
+CSS の **`color`** プロパティは、要素のテキストや[テキスト装飾](/ja/docs/Web/CSS/text-decoration)における前景色の[色の値](/ja/docs/Web/CSS/color_value)を設定し、 {{cssxref("color_value#currentcolor_keyword", "currentcolor")}} の値を設定します。`currentcolor` は*他の*プロパティの間接的な値として使用される可能性があり、 {{cssxref("border-color")}} のような他の色に関するプロパティの既定値にもなったりします。 - +{{EmbedInteractiveExample("pages/css/color.html")}} -

HTML における色の使用の概要については、CSS を使用した HTML 要素への色の適用をご覧ください。

+HTML における色の使用の概要については、[CSS を使用した HTML 要素への色の適用](/ja/docs/Web/HTML/Applying_color)をご覧ください。 -

構文

+## 構文 -
/* キーワード値 */
+```css
+/* キーワード値 */
 color: currentcolor;
 
-/* <named-color> 値 */
+/*  値 */
 color: red;
 color: orange;
 color: tan;
 color: rebeccapurple;
 
-/* <hex-color> 値 */
+/*  値 */
 color: #090;
 color: #009900;
 color: #090a;
 color: #009900aa;
 
-/* <rgb()> 値 */
+/*  値 */
 color: rgb(34, 12, 64, 0.6);
 color: rgba(34, 12, 64, 0.6);
 color: rgb(34 12 64 / 0.6);
@@ -48,7 +52,7 @@ color: rgba(34 12 64 / 0.3);
 color: rgb(34.0 12 64 / 60%);
 color: rgba(34.6 12 64 / 30%);
 
-/* <hsl()> 値 */
+/*  値 */
 color: hsl(30, 100%, 50%, 0.6);
 color: hsla(30, 100%, 50%, 0.6);
 color: hsl(30 100% 50% / 0.6);
@@ -59,29 +63,45 @@ color: hsla(30.2 100% 50% / 60%);
 /* グローバル値 */
 color: inherit;
 color: initial;
+color: revert;
 color: unset;
-
+``` + +`color` プロパティは単一の {{cssxref("<color>")}} 値で指定します。 + +なお、値は {{cssxref("color")}} の形でなければなりません。 {{cssxref("<gradient>")}} は実際の型が {{cssxref("<image>")}} であるため使用できません。 + +### 値 + +- {{cssxref("<color>")}} + - : 要素のテキストや装飾部分の色を設定します。 -

color プロパティは単一の {{cssxref("<color>")}} 値で指定します。

+## アクセシビリティの考慮 -

なお、値は {{cssxref("color")}} の形でなければなりません。 {{cssxref("<gradient>")}} は実際の型が {{cssxref("<image>")}} であるため使用できません。

+背景色とその上に配置されたテキストの色のコントラスト比が、弱視の人がページのコンテンツを読むことができる程度に高いことを確認することが重要です。 -

値

+色のコントラスト比は、テキストおよび背景色の明度の値を比較することで決定されます。現在の[ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG)](https://www.w3.org/WAI/intro/wcag) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、[太字](/ja/docs/Web/CSS/font-weight)ならば 18.66px 以上、または 24px 以上と定義されています。 -
-
{{cssxref("<color>")}}
-
要素のテキストや装飾部分の色を設定します。
-
+- [WebAIM: Color Contrast Checker](https://webaim.org/resources/contrastchecker/) +- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) -

形式文法

+## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 + +### テキストを赤くする -

以下の例はすべて、要素のテキストを赤色にします。

+以下の例はすべて、要素のテキストを赤色にします。 -
p { color: red; }
+```css
+p { color: red; }
 p { color: #f00; }
 p { color: #ff0000; }
 p { color: rgb(255,0,0); }
@@ -92,67 +112,18 @@ p { color: hsl(0, 100%, 50%); }
 p { color: #ff000080; }
 p { color: rgba(255, 0, 0, 0.5); }
 p { color: hsla(0, 100%, 50%, 0.5); }
-
- -

アクセシビリティの考慮事項

- -

背景色とその上に配置されたテキストの色のコントラスト比が、弱視の人がページのコンテンツを読むことができる程度に高いことを確認することが重要です。

- -

色のコントラスト比は、テキストおよび背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

- - - -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Colors', '#the-color-property', 'color')}}{{Spec2('CSS4 Colors')}}rgb(), rgba(), hsl(), hsla() に関数記法にカンマがない構文を追加。 rgb(), hsl() にアルファ値を含めることを許可して、 rgba() および hsla() をそれらの (非推奨な) 別名に変更。
- rebeccapurple キーワードを追加。
- 最後の桁がアルファ値を表す、 4 桁および 8 桁の 16 進数による色の値を追加。
- hwb(), device-cmyk(), color() 関数を追加。
{{SpecName('CSS3 Colors', '#color', 'color')}}{{Spec2('CSS3 Colors')}}system-color を非推奨化。 SVG color を追加。 rgba(), hsl(), hsla() の関数記法を追加
{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}{{Spec2('CSS2.1')}}orange color と system-color を追加
{{SpecName('CSS1', '#color', 'color')}}{{Spec2('CSS1')}}初回定義
- -
{{cssinfo}}
- -

ブラウザーの互換性

- -

{{Compat("css.properties.color")}}

- -

関連情報

- - +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<color>")}} データ型 +- 他の色に関するプロパティ: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}, {{cssxref("color-adjust")}} +- [CSS を使用した HTML 要素への色の適用](/ja/docs/Web/HTML/Applying_color) diff --git a/files/ja/web/css/color_value/index.md b/files/ja/web/css/color_value/index.md index 6d4e75edb4..1944312673 100644 --- a/files/ja/web/css/color_value/index.md +++ b/files/ja/web/css/color_value/index.md @@ -4,1534 +4,1462 @@ slug: Web/CSS/color_value tags: - CSS - CSS データ型 - - Reference - - Web + - データ型 + - レイアウト + - リファレンス + - ウェブ + - 色 - hsl - hsla - rgb - rgba - - レイアウト - 単位 - - 色 + - lch + - lab +browser-compat: css.types.color translation_of: Web/CSS/color_value --- -
{{CSSRef}}
- -

<color> は CSS のデータ型で、 sRGB 色空間にある一つの色を表します。 <color> は アルファチャネル透過値を含むこともでき、背景とどのように合成するかを示すこともできます。

- -

<color> は以下の何れかの方法で定義することができます。

- - - -
-

メモ: この記事は <color> データ型の詳細を説明しています。 HTML での色の使い方について詳しくは、 CSS を使用した HTML 要素への色の適用を参照してください。

-
- -

構文

- -

<color> データ型は以下のいずれか1つの方法を使って指定されます。

- -
-

メモ: <color> の色は詳細に定義されていますが、出力端末によって (時には著しく) 違って見えるかもしれません。出力端末の大半は色補正がされておらず、ブラウザーによっては出力端末の色プロファイルに対応していないからです。

-
- -

色キーワード

- -

色キーワードは大文字と小文字の区別をしない識別子で、特定の色を表します。例えば red, blue, black, lightseagreen といったものです。色名は多少なりとそれぞれの色を説明していますが、ほとんどは基本的に人工的であり、名前の仕様について強い根拠はありません。

- -

キーワードを使うとき、考慮すべき点がいくつかあります。

- - - -
-

メモ: 利用可能なキーワードの一覧は、様々な CSS の仕様書によって異なります。

- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +{{CSSRef}} + +**``** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、一つの色を表します。 +`` は[アルファチャネル](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%AB%E3%83%95%E3%82%A1%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB)*透過値*を含むことがあり、この色を背景とどれだけ合成するかを示すこともできます。 + +`` は以下の何れかの方法で定義することができます。 + +- キーワードを使用すること (`blue` や `transparent` など)。既存のキーワードはすべて、[sRGB 色空間](https://en.wikipedia.org/wiki/SRGB)内の色で定められています。 +- [RGB 立方体座標方式](https://en.wikipedia.org/wiki/RGB_color_model#Geometric_representation)の使用 (# + 16 進数値や、`rgb()` や `rgba()` の関数表記による)。 + これらは常に[sRGB 色空間](https://en.wikipedia.org/wiki/SRGB)内の色で定められます。 +- [HSL 円筒座標系](https://ja.wikipedia.org/wiki/HSV%E8%89%B2%E7%A9%BA%E9%96%93) の使用 ({{cssxref("color_value/hsl()","hsl()")}} や {{cssxref("color_value/hsla()","hsla()")}} の関数表記による) + これらは常に[sRGB 色空間](https://en.wikipedia.org/wiki/SRGB)内の色で定められます。 +- [LCH 円筒座標系](https://ja.wikipedia.org/wiki/CIE_Luv%E8%89%B2%E7%A9%BA%E9%96%93#%E5%86%86%E7%AD%92%E5%BA%A7%E6%A8%99%E7%B3%BB%E3%81%AB%E3%82%88%E3%82%8B%E8%A1%A8%E7%8F%BE_(CIELCH))の使用 ({{cssxref("color_value/lch()","lch()")}} 関数表記による) + これは任意の視覚可能な色を指定することができます。 +- [Lab 座標系](https://ja.wikipedia.org/wiki/Lab%E8%89%B2%E7%A9%BA%E9%96%93) ({{cssxref("color_value/lab()","lab()")}} 関数表記による) + これは任意の視覚可能な色を指定することができます。 +- {{cssxref("color_value/color()","color()")}} 関数表記を使用して、様々な定義済みまたは独自の色空間で色を指定することができます。 + +> **Note:** この記事は `` データ型の詳細を説明しています。 HTML での色の使い方について詳しくは、 [CSS を使用した HTML 要素への色の適用](/ja/docs/Web/HTML/Applying_color)を参照してください。 + +## 構文 + +`` データ型は以下のいずれか1つの方法を使って指定されます。 + +> **Note:** `` の色は詳細に定義されていますが、出力機器によって (時には著しく) 違って見えるかもしれません。出力機器の大半は色補正がされておらず、ブラウザーによっては出力機器の[色プロファイル](https://ja.wikipedia.org/wiki/ICC%E3%83%97%E3%83%AD%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB)に対応していないからです。 + +### 色キーワード + +色キーワードは大文字と小文字の区別をしない識別子で、特定の色を表します。例えば `red`, `blue`, `black`, `lightseagreen` といったものです。色名は多少なりとそれぞれの色を説明していますが、ほとんどは基本的に人工的であり、名前の仕様について強い根拠はありません。 + +キーワードを使うとき、考慮すべき点がいくつかあります。 + +- [HTML](/ja/docs/Web/HTML) は CSS1 に見られる基本 16 色のみを解釈し、解釈できない値を (ふつう完全に違う色に) 変換する際は特定のアルゴリズムを使用します。その他の色キーワードは CSS および [SVG](/ja/docs/Web/SVG) のみで使用してください。 +- HTML とは異なり、 CSS では未知のキーワードは完全に無視されます。 +- CSS のキーワード定義された色はどれも透明度を持たず、完全に不透明な色です。 +- 同じ色を表すキーワードがいくつかあります。 + + - `aqua` / `cyan` + - `fuchsia` / `magenta` + - `darkgray` / `darkgrey` + - `darkslategray` / `darkslategrey` + - `dimgray` / `dimgrey` + - `lightgray` / `lightgrey` + - `lightslategray` / `lightslategrey` + - `gray` / `grey` + - `slategray` / `slategrey` + +- キーワードは [X11](https://ja.wikipedia.org/wiki/X_Window_System) の色名からとられたものですが、メーカーが X11 の色を特定のハードウェアに合わせて変えていることがあるので、 RGB 値は X11 システムでの色とは異なる可能性があります。 + +> **Note:** 利用可能なキーワードの一覧は、様々な CSS の仕様書によって異なります。 +> +> - CSS Level 1 では基本的な 16 色だけを受け付けていました。これは *VGA 色*と呼ばれ、[VGA](https://ja.wikipedia.org/wiki/Video_Graphics_Array) グラフィックカードで表示可能な色です。 +> - CSS Level 2 では `orange` キーワードが追加されました。 +> - 初期のブラウザーでは仕様にない様々な色 (主に X11 色リストからの転用) に対応していましたが、正式に定義されたのは SVG 1.0 と CSS Colors Level 3 からでした。これらはよく*拡張色キーワード*、*X11 色*、*SVG 色*と呼ばれます。 +> - CSS Colors Level 4 では [ウェブのパイオニア、エリック・メイヤーに敬意を表して](https://codepen.io/trezy/post/honoring-a-great-man) `rebeccapurple` のキーワードを追加しました。 + +
仕様書キーワードRGB 16 進表記例
{{SpecName("CSS1")}}black#000000
silver#c0c0c0
gray#808080
white#ffffff
maroon#800000
red#ff0000
purple#800080
fuchsia#ff00ff
green#008000
lime#00ff00
olive#808000
yellow#ffff00
navy#000080
blue#0000ff
teal#008080
aqua#00ffff
{{SpecName("CSS2.1")}}orange#ffa500
{{SpecName("CSS3 Colors")}}aliceblue#f0f8ff
antiquewhite#faebd7
aquamarine#7fffd4
azure#f0ffff
beige#f5f5dc
bisque#ffe4c4
blanchedalmond#ffebcd
blueviolet#8a2be2
brown#a52a2a
burlywood#deb887
cadetblue#5f9ea0
chartreuse#7fff00
chocolate#d2691e
coral#ff7f50
cornflowerblue#6495ed
cornsilk#fff8dc
crimson#dc143c
cyan
- (synonym of aqua)		#00ffff
darkblue#00008b
darkcyan#008b8b
darkgoldenrod#b8860b
darkgray#a9a9a9
darkgreen#006400
darkgrey#a9a9a9
darkkhaki#bdb76b
darkmagenta#8b008b
darkolivegreen#556b2f
darkorange#ff8c00
darkorchid#9932cc
darkred#8b0000
darksalmon#e9967a
darkseagreen#8fbc8f
darkslateblue#483d8b
darkslategray#2f4f4f
darkslategrey#2f4f4f
darkturquoise#00ced1
darkviolet#9400d3
deeppink#ff1493
deepskyblue#00bfff
dimgray#696969
dimgrey#696969
dodgerblue#1e90ff
firebrick#b22222
floralwhite#fffaf0
forestgreen#228b22
gainsboro#dcdcdc
ghostwhite#f8f8ff
gold#ffd700
goldenrod#daa520
greenyellow#adff2f
grey#808080
honeydew#f0fff0
hotpink#ff69b4
indianred#cd5c5c
indigo#4b0082
ivory#fffff0
khaki#f0e68c
lavender#e6e6fa
lavenderblush#fff0f5
lawngreen#7cfc00
lemonchiffon#fffacd
lightblue#add8e6
lightcoral#f08080
lightcyan#e0ffff
lightgoldenrodyellow#fafad2
lightgray#d3d3d3
lightgreen#90ee90
lightgrey#d3d3d3
lightpink#ffb6c1
lightsalmon#ffa07a
lightseagreen#20b2aa
lightskyblue#87cefa
lightslategray#778899
lightslategrey#778899
lightsteelblue#b0c4de
lightyellow#ffffe0
limegreen#32cd32
linen#faf0e6
magenta
- (synonym of fuchsia)		#ff00ff
mediumaquamarine#66cdaa
mediumblue#0000cd
mediumorchid#ba55d3
mediumpurple#9370db
mediumseagreen#3cb371
mediumslateblue#7b68ee
mediumspringgreen#00fa9a
mediumturquoise#48d1cc
mediumvioletred#c71585
midnightblue#191970
mintcream#f5fffa
mistyrose#ffe4e1
moccasin#ffe4b5
navajowhite#ffdead
oldlace#fdf5e6
olivedrab#6b8e23
orangered#ff4500
orchid#da70d6
palegoldenrod#eee8aa
palegreen#98fb98
paleturquoise#afeeee
palevioletred#db7093
papayawhip#ffefd5
peachpuff#ffdab9
peru#cd853f
pink#ffc0cb
plum#dda0dd
powderblue#b0e0e6
rosybrown#bc8f8f
royalblue#4169e1
saddlebrown#8b4513
salmon#fa8072
sandybrown#f4a460
seagreen#2e8b57
seashell#fff5ee
sienna#a0522d
skyblue#87ceeb
slateblue#6a5acd
slategray#708090
slategrey#708090
snow#fffafa
springgreen#00ff7f
steelblue#4682b4
tan#d2b48c
thistle#d8bfd8
tomato#ff6347
turquoise#40e0d0
violet#ee82ee
wheat#f5deb3
whitesmoke#f5f5f5
yellowgreen#9acd32
{{SpecName("CSS4 Colors")}}rebeccapurple#663399
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書キーワードRGB 16 進表記例
{{SpecName("CSS1")}}black#000000
silver#c0c0c0
gray#808080
white#ffffff
maroon#800000
red#ff0000
purple#800080
fuchsia#ff00ff
green#008000
lime#00ff00
olive#808000
yellow#ffff00
navy#000080
blue#0000ff
teal#008080
aqua#00ffff
{{SpecName("CSS2.1")}}orange#ffa500
{{SpecName("CSS3 Colors")}}aliceblue#f0f8ff
antiquewhite#faebd7
aquamarine#7fffd4
azure#f0ffff
beige#f5f5dc
bisque#ffe4c4
blanchedalmond#ffebcd
blueviolet#8a2be2
brown#a52a2a
burlywood#deb887
cadetblue#5f9ea0
chartreuse#7fff00
chocolate#d2691e
coral#ff7f50
cornflowerblue#6495ed
cornsilk#fff8dc
crimson#dc143c
+ cyan
(aqua の同義語) + 		#00ffff
darkblue#00008b
darkcyan#008b8b
darkgoldenrod#b8860b
darkgray#a9a9a9
darkgreen#006400
darkgrey#a9a9a9
darkkhaki#bdb76b
darkmagenta#8b008b
darkolivegreen#556b2f
darkorange#ff8c00
darkorchid#9932cc
darkred#8b0000
darksalmon#e9967a
darkseagreen#8fbc8f
darkslateblue#483d8b
darkslategray#2f4f4f
darkslategrey#2f4f4f
darkturquoise#00ced1
darkviolet#9400d3
deeppink#ff1493
deepskyblue#00bfff
dimgray#696969
dimgrey#696969
dodgerblue#1e90ff
firebrick#b22222
floralwhite#fffaf0
forestgreen#228b22
gainsboro#dcdcdc
ghostwhite#f8f8ff
gold#ffd700
goldenrod#daa520
greenyellow#adff2f
grey#808080
honeydew#f0fff0
hotpink#ff69b4
indianred#cd5c5c
indigo#4b0082
ivory#fffff0
khaki#f0e68c
lavender#e6e6fa
lavenderblush#fff0f5
lawngreen#7cfc00
lemonchiffon#fffacd
lightblue#add8e6
lightcoral#f08080
lightcyan#e0ffff
lightgoldenrodyellow#fafad2
lightgray#d3d3d3
lightgreen#90ee90
lightgrey#d3d3d3
lightpink#ffb6c1
lightsalmon#ffa07a
lightseagreen#20b2aa
lightskyblue#87cefa
lightslategray#778899
lightslategrey#778899
lightsteelblue#b0c4de
lightyellow#ffffe0
limegreen#32cd32
linen#faf0e6
+ magenta
(fuchsia の同義語) + 		#ff00ff
mediumaquamarine#66cdaa
mediumblue#0000cd
mediumorchid#ba55d3
mediumpurple#9370db
mediumseagreen#3cb371
mediumslateblue#7b68ee
mediumspringgreen#00fa9a
mediumturquoise#48d1cc
mediumvioletred#c71585
midnightblue#191970
mintcream#f5fffa
mistyrose#ffe4e1
moccasin#ffe4b5
navajowhite#ffdead
oldlace#fdf5e6
olivedrab#6b8e23
orangered#ff4500
orchid#da70d6
palegoldenrod#eee8aa
palegreen#98fb98
paleturquoise#afeeee
palevioletred#db7093
papayawhip#ffefd5
peachpuff#ffdab9
peru#cd853f
pink#ffc0cb
plum#dda0dd
powderblue#b0e0e6
rosybrown#bc8f8f
royalblue#4169e1
saddlebrown#8b4513
salmon#fa8072
sandybrown#f4a460
seagreen#2e8b57
seashell#fff5ee
sienna#a0522d
skyblue#87ceeb
slateblue#6a5acd
slategray#708090
slategrey#708090
snow#fffafa
springgreen#00ff7f
steelblue#4682b4
tan#d2b48c
thistle#d8bfd8
tomato#ff6347
turquoise#40e0d0
violet#ee82ee
wheat#f5deb3
whitesmoke#f5f5f5
yellowgreen#9acd32
{{SpecName("CSS4 Colors")}} + rebeccapurple + #663399
-

transparent キーワード

+### `transparent` キーワード -

transparent は完全な透明色を表すキーワードです。この色が付いた項目の背後の背景は完全に見えます。厳密にはこれはアルファチャンネルに最大値を持つ黒色で、計算値 rgba(0,0,0,0) へのショートカットです。

+`transparent` は完全な透明色を表すキーワードです。この色が付いた項目の背後の背景は完全に見えます。厳密には、`transparent` は `rgba(0,0,0,0)` のショートカットです。 -
-

互換性のメモ: {{cssxref("gradient","グラデーション")}}の場合の同様、予期しない動きを避けるために、現在の CSS の仕様書は transparent をアルファ乗算色空間で計算するように定めています。しかし、古いブラウザーはアルファ―チャンネルが 0 の値である黒として扱うかもしれません。

-
+> **Note:** {{cssxref("gradient","グラデーション")}}の場合の同様、予期しない動きを避けるために、現在の CSS の仕様書は `transparent` を[アルファ乗算色空間](https://www.w3.org/TR/2012/CR-css3-images-20120417/#color-stop-syntax)で計算するように定めています。しかし、古いブラウザーはアルファチャンネルが `0` の値である黒として扱うかもしれません。 -
-

歴史的なメモ: transparent キーワードは CSS Level 2 (Revision 1) では色ではありませんでした。これは {{Cssxref("background")}} プロパティと {{Cssxref("border")}} プロパティの2つにおいて、通常の <color> の代わりに使用することができた特殊なキーワードでした。基本的に、継承された色を開発者が上書きすることができるように追加されたものです。 CSS Colors Level 3 でアルファチャンネルが出現し、 transparent は色として再定義されました。 <color> の値を使用することができる場所ならば、どこでも使用することができるようになりました。

-
+> **Note:** `transparent` キーワードは CSS Level 2 (Revision 1) では色ではありませんでした。これは {{Cssxref("background")}} プロパティと {{Cssxref("border")}} プロパティの 2 つにおいて、通常の `` の代わりに使用することができた特殊なキーワードでした。基本的に、継承された色を開発者が上書きすることができるように追加されたものです。 CSS Colors Level 3 でアルファチャンネルが出現し、 `transparent` は色として再定義されました。 `` の値を使用することができる場所ならば、どこでも使用することができるようになりました。 -

currentcolor キーワード

+### `currentColor` キーワード -

currentcolor キーワードは、要素の {{Cssxref("color")}} プロパティの値を表します。これで color の値をプロパティが既定で受け取らなくても利用することができます。

+`currentColor` キーワードは、要素の {{Cssxref("color")}} プロパティの値を表します。これで `color` の値をプロパティが既定で受け取らなくても利用することができます。 -

currentcolor が color プロパティの値として使用された場合、 color プロパティが継承した値が使用されます。

+`currentColor` が `color` プロパティの値として使用された場合、 `color` プロパティが継承した値が使用されます。 -

currentcolor の例

+

currentcolor の例

-
HTML
- -
<div style="color:blue; border: 1px dashed currentcolor;">
+```html
+

   この文字列の色は青です。
-  <div style="background:currentcolor; height:9px;"></div>
+  

   このブロックは青い境界線で囲まれています。
-</div>
- -
結果
- -

{{EmbedLiveSample('currentcolor_example')}}

- -

RGB 色

- -

RGB 色モデルは赤、緑、青の成分によって指定された色を定義します。任意のアルファ成分は色の透過性を表します。

- -

構文

- -

RGB 色は16進表記 (# の接頭辞つき) と関数表記 (rgb(), rgba()) の両方で表すことができます。

- -
-

メモ: CSS Colors Level 4 では、 rgba() は rgb() の別名です。 Level 4 標準を実装するブラウザーでは、同じ引数を受け取り同じ挙動をします。

+``` -
-
16進表記: #RRGGBB[AA]
-
R (赤)、 G (緑)、 B (青) と A (アルファ) は16進数の文字 (0–9, A–F) です。 A は任意です。例えば、 #ff0000 は #ff0000ff と同等です。
-
16進表記: #RGB[A]
-
R (赤)、 G (緑)、 B (青) と A (アルファ) は16進数の文字 (0–9, A–F) です。 A は任意です。3桁表記 (#RGB) は6桁形式 (#RRGGBB) を短縮したものです。例えば、 #f09 は #ff0099 と同じ色です。同様に、4桁の RGB 表記 (#RGBA) は8桁形式 (#RRGGBBAA) を短縮したものです。例えば、 #0f38 は #00ff3388 と同じ色です。
-
関数表記: rgb[a](R, G, B[, A])
-
R (赤)、 G (緑)、 B (青) は {{cssxref("<number>", "数値")}}または{{cssxref("<percentage>", "パーセント表記")}}のどちらかで、255が100%に対応します。 A (アルファ)は0と1の間の{{cssxref("<number>", "数値")}}、または{{cssxref("<percentage>", "パーセント表記")}}で、数値1が100% (不透明) です。
-
関数表記: rgb[a](R G B[ / A])
-
CSS Colors Level 4 では、関数表記で空白区切りの値の対応が追加されます。
-
- -

例

- -
様々な RGB 構文
+{{EmbedLiveSample('currentColor_example', 600, 80)}} -

この例は、一つの色を RGB 色構文で生成することができる様々な方法を示しています。

+### RGB 色 -
/* これらの様々な構文は、すべて同じ色、不透明な濃いピンク色を指定します。 */
+RGB 色モデルは赤、緑、青の成分によって指定された[sRGB 色空間](https://en.wikipedia.org/wiki/SRGB)内の色を定義します。アルファ成分は任意で、色の透過性を表します。
+
+#### 構文
+
+RGB 色は 16 進表記 (`#` の接頭辞つき) と関数表記 (`rgb()`, `rgba()`) の両方で表現することができます。
+
+> **Note:** CSS Colors Level 4 では、 `rgba()` は `rgb()` の別名です。 Level 4 標準を実装するブラウザーでは、同じ引数を受け取り同じ挙動をします。
+
+- 16 進表記: `#RRGGBB[AA]`
+  - : `R` (赤)、 `G` (緑)、 `B` (青) と `A` (アルファ) は 16 進数の文字 (0–9, A–F) です。 `A` は任意です。例えば、 `#ff0000` は `#ff0000ff` と同等です。
+- 16 進表記: `#RGB[A]`
+  - : `R` (赤)、 `G` (緑)、 `B` (青) と `A` (アルファ) は 16 進数の文字 (0–9, A–F) です。 `A` は任意です。3 桁表記 (`#RGB`) は 6 桁形式 (`#RRGGBB`) を短縮したものです。例えば、 `#f09` は `#ff0099` と同じ色です。同様に、4 桁の RGB 表記 (`#RGBA`) は8桁形式 (`#RRGGBBAA`) を短縮したものです。例えば、 `#0f38` は `#00ff3388` と同じ色です。
+- 関数表記: `rgb[a](R, G, B[, A])`
+  - : `R` (赤)、 `G` (緑)、 `B` (青) は {{cssxref("<number>")}} または {{cssxref("<percentage>")}} のどちらかで、`255` が `100%` に対応します。 `A` (アルファ) は `0` と `1` の間の {{cssxref("<number>")}} 、または {{cssxref("<percentage>")}} で、数値 `1` が `100%` (不透明) です。
+- 関数表記: `rgb[a](R G B[ / A])`
+  - : CSS Colors Level 4 では、関数表記で空白区切りの値の対応が追加されます。
+
+### HSL 色
+
+HSL 色モデルは色相 (H)、彩度 (S)、明度 (L) の各成分によって与えられた[sRGB 色空間](https://en.wikipedia.org/wiki/SRGB)内の色を定義します。アルファ成分は任意で、色の透過性を表します。
+
+HSL は、色相、彩度、明度をそれぞれ独立して調整できるため、RGB よりも直感的であると感じるデザイナーが多いようです。また、HSL を使用することで、同じ色のセットを簡単に作成することができます (同じ色相で複数の影を作成する場合など)。
+しかし、HSL を使用して色のバリエーションを作成すると、[知覚的に均一ではない](https://ja.wikipedia.org/wiki/%E8%89%B2%E5%B7%AE#%E8%A8%B1%E5%AE%B9%E5%80%A4)ため、驚くような結果になることがあります。たとえば、 `hsl(240 100% 50%)` と `hsl(60 100% 50%)` は、明度が同じであるにもかかわらず、前者が後者よりもはるかに暗くなります。
+
+#### 構文
+
+HSL 色は関数表記の `hsl()` および `hsla()` を通して表現されます。
+
+> **Note:** CSS Colors Level 4 では、 `hsla()` は `hsl()` の別名です。 Level 4 標準を実装するブラウザーでは、同じ引数を受け取り同じ挙動をします。
+
+- 関数表記: `hsl[a](H, S, L[, A])`
+
+  - : `H` (色相) は色相環の{{cssxref("<angle>", "角度")}}を {{SpecName("CSS4 Colors","#the-hsl-notation")}} で定義されている `deg`、 `rad`、 `grad`、 `turn` の単位で与えます。単位のない{{cssxref("<number>", "数値")}}の場合は、 {{SpecName("CSS3 Colors", "#hsl-color")}} で定められている通り deg (度) として扱われます。定義では、赤=0deg=360deg であり、他の色は、緑=120deg、 青=240deg、 などのように色相環を回ります。 `` は暗黙的に周回するので、 -120deg=240deg、 480deg=120deg、 -1turn=1turn のようになります。
+
+    `S` (彩度) と `L` (明度) はパーセント表記です。**彩度**`100%`は完全に鮮やかな色で、彩度`0%`は完全に薄い色 (灰色) です。**明度**`100%`は白で、明度`0%`は黒で、明度`50%`は「普通」です。
+
+    `A` (アルファ)は`0`と`1`の間の{{cssxref("<number>")}}、または{{cssxref("<percentage>")}}で、数値`1`が`100%` (不透明) です。
+
+- 関数表記: `hsl[a](H S L[ / A])`
+  - : CSS Colors Level 4 では、関数表記で空白区切りの値の対応が追加されます。
+
+### システム色
+
+*色強制モード* ([forced-colors](/ja/docs/Web/CSS/@media/forced-colors) メディアクエリーで検出可能) では、多くの色がユーザーまたはブラウザーが定義したパレットに制約されます。これらのシステム色は以下のキーワードで公開されており、ページの残りの部分が制限されたパレットにうまく合わせられることを保証するために使用することができます。これらの値は他のコンテキストでも使用できますが、ブラウザーの対応は限定的です。
+
+以下のリストにあるキーワードは、 CSS Color Module Level 4 仕様書で定義されています。
+
+> **Note:** なお、これらのキーワードは*大文字小文字を区別しません*が、読みやすさのために大文字小文字を交ぜて表記しています。
+
+- ActiveText
+  - : アクティブなリンクのテキスト
+- ButtonFace
+  - : プッシュボタンの背景
+- ButtonText
+  - : プッシュボタンのテキスト
+- Canvas
+  - : アプリケーションのコンテンツや文書の背景
+- CanvasText
+  - : アプリケーションのコンテンツや文書のテキスト
+- Field
+  - : 入力フィールドの背景
+- FieldText
+  - : 入力フィールドのテキスト
+- GrayText
+  - : 無効なテキスト
+- Highlight
+  - : コントロールの中で選択されているアイテムの背景
+- HighlightText
+  - : コントロールの中で選択されているアイテムのテキスト
+- LinkText
+  - : アクティブではない、訪問していないリンクのテキスト
+- Mark
+  - : (HTML の `mark` 要素のように) 特別なマークが付けられたテキストの背景
+- MarkText
+  - : (HTML の `mark` 要素のように) 特別にマークされたテキスト
+- VisitedText
+  - : 訪問済みのリンクのテキスト
+
+#### 非推奨のシステム色のキーワード
+
+以下のキーワードは、 CSS Color モジュールの初期の版で定義されていました。これらは非推奨になりました。公開ウェブページでの使用は {{deprecated_inline}} です。
+
+- ActiveBorder
+  - : アクティブウィンドウの境界線。
+- ActiveCaption
+  - : アクティブウィンドウのキャプション。 `CaptionText` を前景色として使用してください。
+- AppWorkspace
+  - : 複数文書インターフェイス (MDI) の背景色。
+- Background
+  - : デスクトップの背景です。
+- ButtonHighlight
+  - : 周囲の境界線の層によって立体的に見える 3D 要素の、光源に面した境界線の色です。
+- ButtonShadow
+  - : 周囲の境界線の層によって立体的に見える 3D 要素の、光源から離れた境界線の色です。
+- CaptionText
+  - : キャプションの文字列、サイズ変更ボックス、スクロールバーの矢印ボックスの文字列です。 `ActiveCaption` を背景色として使用してください。
+- InactiveBorder
+  - : 非アクティブウィンドウの境界線です。
+- InactiveCaption
+  - : 非アクティブウィンドウのキャプションです。 `InactiveCaptionText` を前景色に使用してください。
+- InactiveCaptionText
+  - : 非アクティブなキャプションの文字列の色です。 `InactiveCaption` を背景色に使用してください。
+- InfoBackground
+  - : ツールチップコントロールの背景色です。 `InfoText` を前景色に使用してください。
+- InfoText
+  - : ツールチップコントロールの文字色です。 `InfoBackground` を背景色に使用してください。
+- Menu
+  - : メニューの背景。 `MenuText` または `-moz-MenuBarText` を前景色に使用してください。
+- MenuText
+  - : メニュー内の文字列。 `Menu` を背景色に使用してください。
+- Scrollbar
+  - : スクロールバーの背景色。
+- ThreeDDarkShadow
+  - : 連続した 2 つの境界線によって立体的に見える 3D 要素の、光源から離れた 2 つの境界線のうち、暗い方 (一般的には外側) の境界線の色。
+- ThreeDFace
+  - : 連続した 2 つの境界線によって立体的に見える 3D 要素の表面の色。前景色には `ButtonText` を使用してください。
+- ThreeDHighlight
+  - : 連続した 2 つの境界線によって立体的に見える 3D 要素の、光源に向いた 2 つの境界線のうち、明るい方 (一般的には外側) の色。
+- ThreeDLightShadow
+  - : 連続した 2 つの境界線によって立体的に見える 3D 要素の、光源に向いた 2 つの境界線のうち、暗い方 (一般的には内側) の色。
+- ThreeDShadow
+  - : 連続した 2 つの境界線によって立体的に見える 3D 要素の、光源から離れた 2 つの境界線のうち、明るい方 (一般的には内側) の色。
+- Window
+  - : ウィンドウの背景。 `WindowText` を前景色に使用してください。
+- WindowFrame
+  - : ウィンドウの枠。
+- WindowText
+  - : ウィンドウ内の文字列。 `Window` を背景色に使用してください。
+
+### Mozilla システム色拡張
+
+- \-moz-ButtonDefault
+  - : ダイアログボックスの既定の動作を表すボタンの周りを囲む境界線の色です。
+- \-moz-ButtonHoverFace
+  - : マウスポインターが上にある時のボタンの背景色 (マウスポインターが上にない場合は `ThreeDFace` または `ButtonFace`)。 `-moz-ButtonHoverText` の前景色と一緒に使う必要があります。
+- \-moz-ButtonHoverText
+  - : マウスポインタが上にあるボタンのテキスト色 (マウスポインタが上にない場合は `ButtonText`)。 `-moz-ButtonHoverFace background` の背景色と一緒に使う必要があります。
+- \-moz-CellHighlight
+  - : ツリーウィジェットで選択された項目の背景色。 `-moz-CellHighlightText` の前景色と一緒に使用する必要があります。 `-moz-html-CellHighlight` も参照。
+- \-moz-CellHighlightText
+  - : ツリー内で選択された項目のテキスト色。 `-moz-CellHighlight background` の背景色と一緒に使う必要があります。 `-moz-html-CellHighlightText` も参照。
+- \-moz-Combobox
+  - : コンボボックスの背景色。 `-moz-ComboboxText` の前景色と一緒に使う必要があります。 1.9.2 以前のバージョンでは、代わりに `-moz-Field` を使用してください。
+- \-moz-ComboboxText
+  - : コンボボックスのテキスト色。 `-moz-Combobox` の背景色と一緒に使う必要があります。 1.9.2 以前のバージョンでは、代わりに `-moz-FieldText` を使用してください。
+- \-moz-Dialog
+  - : ダイアログボックスの背景色。moz-DialogTextの前景色と一緒に使う必要があります。
+- \-moz-DialogText
+  - : ダイアログボックスのテキスト色。 `-moz-DialogText` の背景色と一緒に使う必要があります。
+- \-moz-dragtargetzone, -moz-EvenTreeRow
+  - : ツリー内の偶数行の背景色。 `-moz-FieldText` の前景色と一緒に使う必要があります。 Gecko のバージョン 1.9 より前のバージョンでは、 `-moz-Field` を使用してください。 `-moz-OddTreeRow` も参照してください。
+- \-moz-html-CellHighlight
+  - : HTML の {{HTMLElement("select")}} における強調表示されたアイテムの背景色。前景色には `-moz-html-CellHighlightText` を使用します。 Gecko 1.9 以前では、 `-moz-CellHighlight` を使用してください。
+- \-moz-html-CellHighlightText
+  - : HTML の {{HTMLElement("select")}} における強調表示されたアイテムのテキストの色。背景色には `-moz-html-CellHighlight` を使用します。 Gecko 1.9 以前では、 `-moz-CellHighlightText` を使用してください。
+- \-moz-mac-accentdarkestshadow, -moz-mac-accentdarkshadow, -moz-mac-accentface, -moz-mac-accentlightesthighlight, -moz-mac-accentlightshadow, -moz-mac-accentregularhighlight, -moz-mac-accentregularshadow
+  - : アクセント色です。
+- \-moz-mac-chrome-active, -moz-mac-chrome-inactive
+  - : 非アクティブおよびアクティブなブラウザーのクロームの色です。
+- \-moz-mac-focusring, -moz-mac-menuselect, -moz-mac-menushadow, -moz-mac-menutextselect, -moz-MenuHover
+  - : ホバーされたメニュー項目の背景色。 `Highlight` によく似ています。 `-moz-MenuHoverText` や `-moz-MenuBarHoverText` の前景色と一緒に使う必要があります。
+- \-moz-MenuHoverText
+  - : ホバーされたメニュー項目のテキスト色。 `HighlightText` によく似ています。 `-moz-MenuHover` の背景色と一緒に使う必要があります。
+- \-moz-MenuBarText
+  - : メニューバーのテキスト色。 `MenuText` によく似ています。 `Menu` の背景の上に使用します。
+- \-moz-MenuBarHoverText
+  - : メニューバーのホバーされたテキストの色。多くの場合、 `-moz-MenuHoverText` に似ています。 `-moz-MenuHover` 背景の上に使用する必要があります。
+- \-moz-nativehyperlinktext
+  - : 既定のプラットフォームのハイパーリンク色です。
+- \-moz-OddTreeRow
+  - : ツリー内の奇数行の背景色。 `-moz-FieldText` の前景色と一緒に使う必要があります。 Gecko のバージョン 1.9 より前のバージョンでは、 `-moz-Field` を使用してください。 `-moz-EvenTreeRow` も参照してください。
+- \-moz-win-communicationstext
+  - : `{{cssxref("appearance", "-moz-appearance")}}: -moz-win-communications-toolbox;` を持つオブジェクトのテキストに使用する必要があります。
+- \-moz-win-mediatext
+  - : `{{cssxref("appearance", "-moz-appearance")}}: -moz-win-media-toolbox` を持つオブj稀有とのテキストに使用する必要があります。
+- \-moz-win-accentcolor
+  - : スタートメニューやタスクバー、タイトルバーなどに設定できる Windows 10 のカスタムアクセント色にアクセスするために使用します。
+- \-moz-win-accentcolortext
+  - : スタートメニュー、タスクバー、タイトルバーなどの Windows 10 のカスタムアクセント色の上に配置されたテキストの色にアクセスするために使用します。
+
+### Mozilla 色設定拡張
+
+- \-moz-activehyperlinktext
+  - : アクティブ化されたリンクの文字色のユーザー設定です。既定の文書の背景色と共に使用されます。
+- \-moz-default-background-color
+  - : 文書の背景色のユーザー設定です。
+- \-moz-default-color
+  - : 文字色のユーザー設定です。
+- \-moz-hyperlinktext
+  - : 未訪問のリンクにおける文字色のユーザー設定です。既定の文書の背景色と共に使用されます。
+- \-moz-visitedhyperlinktext
+  - : 訪問済みのリンクにおける文字色のユーザー設定です。既定の文書の背景色と共に使用されます。
+
+### Lab 色
+
+CSS Color 4 で Lab 色が導入されました。
+Lab 色は、{{cssxref("color_value/lab()","lab()")}} 関数表記で指定します。
+Lab 色は、特定の色空間に限定されず、人間の視覚の全領域を表現することができます。
+
+### LCH 色
+
+CSS Color 4 で LCH 色が導入されました。
+LCH 色は、{{cssxref("color_value/lch()","lch()")}} という関数記法で指定します。
+特定の色空間に限定されず、人間の視覚の全領域を表現することができます。
+
+実は、LCH は Lab の極致です。彩度と色相の構成要素が、混合ではなく、目的の色の質を指定する点で、Lab よりも人間に優しいものです。
+この点では HSL と似ていますが、知覚的な均一性ははるかに高いと言えます。
+HSL が `hsl(60 100% 50%)` と `hsl(240 100% 50%)` の両方を同じ明るさと表現するのに対し、LCH (および Lab) は、前者 (黄) の L は 97.6、後者 (青) の L は 29.6 と、それぞれ異なる明るさを正しく表現します。
+そのため、LCH を使ってまったく異なる色のパレットを作成しても、予測可能な結果が得られます。
+なお、LCH の色相は HSL の色相とは異なり、LCH の彩度は HSL の彩度とは異なりますが、概念的には類似していますのでご注意ください。
+
+### color() 色
+
+CSS Color 4 でこの表記が導入されました。
+{{cssxref("color_value/color()","color()")}} 関数で指定された色は、定義済みの色空間のほか、[`@color-profile`](/en-US/docs/Web/CSS/@color-profile) ルールで定義されたカスタム色空間でも色を指定できます。
+
+## 補間
+
+アニメーションや[グラデーション](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)において、 `` の値は赤、緑、青の成分ごとに補間されます。それぞれの成分は浮動小数点の実数として補間されます。なお、予期しない灰色が現れるのを避けるため、色の補間は[アルファ乗算済み sRGBA 色空間](https://www.gimp.org/docs/plug-in/appendix-alpha.html)で行われます。アニメーションでは補間の速度はアニメーションと関連づけられた[タイミング関数](/ja/docs/Web/CSS/easing-function)によって決められます。
+
+## アクセシビリティの考慮
+
+色を見分けることが難しい人がいます。[WCAG 2.0](https://www.w3.org/TR/WCAG/#visual-audio-contrast) 勧告では、色を特定のメッセージ、動作、結果を伝える唯一の手段として使用することを避けるよう強く勧告しています。詳しくは[色と色のコントラスト](/ja/docs/Learn/Accessibility/CSS_and_JavaScript#color_and_color_contrast)をご覧ください。
+
+## 例
+
+
色の値のテスター

+
+この例では、`
` とテキスト入力を用意しています。入力欄に有効な色を入力すると、`
` にその色が採用され、色の値をテストすることができます。
+
+#### HTML
+
+```html
+

+

+
+
+```
+
+#### CSS
+
+```css
+div {
+  width: 100%;
+  height: 200px;
+}
+```
+
+```js hidden
+const inputElem = document.querySelector('input');
+const divElem = document.querySelector('div');
+
+function validTextColor(stringToTest) {
+  if (stringToTest === "") { return false; }
+  if (stringToTest === "inherit") { return false; }
+  if (stringToTest === "transparent") { return false; }
+
+  const image = document.createElement("img");
+  image.style.color = "rgb(0, 0, 0)";
+  image.style.color = stringToTest;
+  if (image.style.color !== "rgb(0, 0, 0)") { return true; }
+  image.style.color = "rgb(255, 255, 255)";
+  image.style.color = stringToTest;
+  return image.style.color !== "rgb(255, 255, 255)";
+}
+
+inputElem.addEventListener('change', () => {
+  if(validTextColor(inputElem.value)) {
+    divElem.style.backgroundColor = inputElem.value;
+    divElem.textContent = '';
+  } else {
+    divElem.style.backgroundColor = 'white';
+    divElem.textContent = 'Invalid color value';
+  }
+});
+```
+
+#### 結果
 
-/* 16進表記 */
-#f09
-#F09
-#ff0099
-#FF0099
+{{EmbedLiveSample('Color_value_tester','100%', 300)}}
+
+### 様々な RGB 構文
+
+この例は、一つの色を RGB 色構文で生成することができる様々な方法を示しています。
+
+    /* これらの様々な構文は、すべて同じ色、不透明な濃いピンク色を指定します。 */
 
-/* 関数表記 */
-rgb(255,0,153)
-rgb(255, 0, 153)
-rgb(255, 0, 153.0)
-rgb(100%,0%,60%)
-rgb(100%, 0%, 60%)
-rgb(100%, 0, 60%) /* ERROR! 数値とパーセントを混ぜないでください */
-rgb(255 0 153)
+    /* 16進表記 */
+    #f09
+    #F09
+    #ff0099
+    #FF0099
 
-/* アルファ値付き16進表記 */
-#f09f
-#F09F
-#ff0099ff
-#FF0099FF
+    /* 関数表記 */
+    rgb(255,0,153)
+    rgb(255, 0, 153)
+    rgb(255, 0, 153.0)
+    rgb(100%,0%,60%)
+    rgb(100%, 0%, 60%)
+    rgb(100%, 0, 60%) /* ERROR! 数値とパーセントを混ぜないでください */
+    rgb(255 0 153)
 
-/* アルファ値付き関数表記 */
-rgb(255, 0, 153, 1)
-rgb(255, 0, 153, 100%)
+    /* アルファ値付き16進表記 */
+    #f09f
+    #F09F
+    #ff0099ff
+    #FF0099FF
 
-/* 空白区切りの構文 */
-rgb(255 0 153 / 1)
-rgb(255 0 153 / 100%)
+    /* アルファ値付き関数表記 */
+    rgb(255, 0, 153, 1)
+    rgb(255, 0, 153, 100%)
 
-/* 浮動小数点値による実数表記 */
-rgb(255, 0, 153.6, 1)
-rgb(1e2, .5e1, .5e0, +.25e2%)
-
+ /* 空白区切りの構文 */ + rgb(255 0 153 / 1) + rgb(255 0 153 / 100%) -
RGB の様々な透過性
- -
/* 16進表記 */
-#3a30                    /* 透明な緑 */ 
-#3A3F                    /* 不透明な緑 */ 
-#33aa3300                /* 完全に透明な緑 */ 
-#33AA3388                /*  50%半透明の緑 */ 
-
-/* 関数表記 */
-rgba(51, 170, 51, .1)    /*  10%半透明の緑 */ 
-rgba(51, 170, 51, .4)    /*  40%半透明の緑 */ 
-rgba(51, 170, 51, .7)    /*  70%半透明の緑 */ 
-rgba(51, 170, 51,  1)    /* 完全に不透明な緑 */ 
-
-/* ホワイトスペース区切りの構文 */
-rgba(51 170 51 / 0.4)    /*  40%半透明の緑 */ 
-rgba(51 170 51 / 40%)    /*  40%半透明の緑 */ 
-
-/* 実数値の関数構文 */
-rgba(255, 0, 153.6, 1)
-rgba(1e2, .5e1, .5e0, +.25e2%)
-
- -

HSL 色

- -

HSL 色モデルは色相 (H)、彩度 (S)、明度 (L) の各成分によって与えられた色を定義します。任意のアルファ成分は色の透過性を表します。

- -

多くのデザイナーは、 HSL は色相、彩度、明度をそれぞれ個別に調整できるので、 RGB より直感的であると考えています。 HSL は一連の合う色の組み合わせ (例えば、同じ色相で、明暗や彩度が異なる色など) をより簡単に作成することもできます。

- -

構文

- -

HSL 色は関数表記の hsl() および hsla() を通して説明されます。

- -
-

メモ: CSS Colors Level 4 では、 hsla() は hsl() の別名です。 Level 4 標準を実装するブラウザーでは、同じ引数を受け取り同じ挙動をします。

-
- -
-
関数表記: hsl[a](H, S, L[, A])
-
H (色相) は色相環の{{cssxref("<angle>", "角度")}}を {{SpecName("CSS4 Colors","#the-hsl-notation")}} で定義されている deg、 rad、 grad、 turn の単位で与えます。単位のない{{cssxref("<number>", "数値")}}の場合は、 {{SpecName("CSS3 Colors", "#hsl-color")}} で定められている通り deg (度) として扱われます。定義では、赤=0deg=360deg であり、他の色は、緑=120deg、 青=240deg、 などのように色相環を回ります。 <angle> は暗黙的に周回するので、 -120deg=240deg、 480deg=120deg、 -1turn=1turn のようになります。
-
S (彩度) と L (明度) はパーセント表記です。彩度100%は完全に鮮やかな色で、彩度0%は完全に薄い色 (灰色) です。明度100%は白で、明度0%は黒で、明度50%は「普通」です。
-
A (アルファ)は0と1の間の{{cssxref("<number>", "数値")}}、または{{cssxref("<percentage>", "パーセント表記")}}で、数値1が100% (不透明) です。
-
関数表記: hsl[a](H S L[ / A])
-
CSS Colors Level 4 では、関数表記で空白区切りの値の対応が追加されます。
-
- -

例

- -
様々な HSL の構文
- -
/* これらの例はすべて同じ色、ラベンダーを指定します。 */
-hsl(270,60%,70%)
-hsl(270, 60%, 70%)
-hsl(270 60% 70%)
-hsl(270deg, 60%, 70%)
-hsl(4.71239rad, 60%, 70%)
-hsl(.75turn, 60%, 70%)
-
-/* これらの例はすべて同じ色、15%半透明のラベンダーを指定します。 */
-hsl(270, 60%, 50%, .15)
-hsl(270, 60%, 50%, 15%)
-hsl(270 60% 50% / .15)
-hsl(270 60% 50% / 15%)
-
- -
彩度100%の色
+ /* 浮動小数点値による実数表記 */ + rgb(255, 0, 153.6, 1) + rgb(1e2, .5e1, .5e0, +.25e2%) + +### RGB の様々な透過性 + + /* 16進表記 */ + #3a30 /* 完全に透明な緑 */ + #3A3F /* 完全に不透明な緑 */ + #33aa3300 /* 完全に透明な緑 */ + #33AA3380 /* 50% 半透明な緑 */ + + /* 関数表記 */ + rgba(51, 170, 51, .1) /* 10% 半透明の緑 */ + rgba(51, 170, 51, .4) /* 40% 半透明の緑 */ + rgba(51, 170, 51, .7) /* 70% 半透明の緑 */ + rgba(51, 170, 51, 1) /* 完全に不透明の緑 */ + + /* ホワイトスペース区切りの構文 */ + rgba(51 170 51 / 0.4) /* 40% 半透明の緑 */ + rgba(51 170 51 / 40%) /* 40% 半透明の緑 */ + + /* 実数値の関数構文 */ + rgba(51, 170, 51.6, 1) + rgba(5.1e1, 1.7e2, 5.1e1, 1e2%) + +### 様々な HSL の構文 + + /* これらの例はすべて同じ色、ラベンダーを指定します。 */ + hsl(270,60%,70%) + hsl(270, 60%, 70%) + hsl(270 60% 70%) + hsl(270deg, 60%, 70%) + hsl(4.71239rad, 60%, 70%) + hsl(.75turn, 60%, 70%) + + /* これらの例はすべて同じ色、15%半透明のラベンダーを指定します。 */ + hsl(270, 60%, 50%, .15) + hsl(270, 60%, 50%, 15%) + hsl(270 60% 50% / .15) + hsl(270 60% 50% / 15%) + +### 彩度100%の色 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
表記説明例
hsl(0, 100%, 50%)red
hsl(30, 100%, 50%)orange
hsl(60, 100%, 50%)yellow
hsl(90, 100%, 50%)lime green
hsl(120, 100%, 50%)green
hsl(150, 100%, 50%)blue-green
hsl(180, 100%, 50%)cyan
hsl(210, 100%, 50%)sky blue
hsl(240, 100%, 50%)blue
hsl(270, 100%, 50%)purple
hsl(300, 100%, 50%)magenta
hsl(330, 100%, 50%)pink
hsl(360, 100%, 50%)red
表記説明例
hsl(0, 100%, 50%)red
hsl(30, 100%, 50%)orange
hsl(60, 100%, 50%)yellow
hsl(90, 100%, 50%)lime green
hsl(120, 100%, 50%)green
hsl(150, 100%, 50%)blue-green
hsl(180, 100%, 50%)cyan
hsl(210, 100%, 50%)sky blue
hsl(240, 100%, 50%)blue
hsl(270, 100%, 50%)purple
hsl(300, 100%, 50%)magenta
hsl(330, 100%, 50%)pink
hsl(360, 100%, 50%)red
-
緑の明度の変化
+### 様々な明度の緑 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
表記説明例
hsl(120, 100%, 0%)black
hsl(120, 100%, 20%)
hsl(120, 100%, 40%)
hsl(120, 100%, 60%)
hsl(120, 100%, 80%)
hsl(120, 100%, 100%)white
表記説明例
hsl(120, 100%, 0%)black
hsl(120, 100%, 20%)
hsl(120, 100%, 40%)
hsl(120, 100%, 60%)
hsl(120, 100%, 80%)
hsl(120, 100%, 100%)white
-
緑の彩度の変化
+### 様々な彩度の緑 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
表記説明例
hsl(120, 100%, 50%)green
hsl(120, 80%, 50%)
hsl(120, 60%, 50%)
hsl(120, 40%, 50%)
hsl(120, 20%, 50%)
hsl(120, 0%, 50%)gray
表記説明例
hsl(120, 100%, 50%)green
hsl(120, 80%, 50%)
hsl(120, 60%, 50%)
hsl(120, 40%, 50%)
hsl(120, 20%, 50%)
hsl(120, 0%, 50%)gray
-
HSL の様々な透過性
- -
hsla(240, 100%, 50%, .05)     /*   5%半透明の青 */ 
-hsla(240, 100%, 50%, .4)      /*  40%半透明の青 */ 
-hsla(240, 100%, 50%, .7)      /*  70%半透明の青 */ 
-hsla(240, 100%, 50%, 1)       /* 不透明な青 */ 
-
-/* 空白表記 */
-hsla(240 100% 50% / .05)      /*   5%半透明の青 */ 
-
-/* アルファのパーセント表記 */
-hsla(240 100% 50% / 5%)       /*   5%半透明の青 */ 
-
- -

システム色

+### HSL の様々な透過性 -

色強制モード (forced-colors メディアクエリで検出可能) では、多くの色がユーザーまたはブラウザーが定義したパレットに制約されます。これらのシステム色は以下のキーワードで公開されており、ページの残りの部分が制限されたパレットにうまく合わせられることを保証するために使用することができます。これらの値は他のコンテキストでも使用できますが、ブラウザーの対応は限定的です。

+ hsla(240, 100%, 50%, .05) /* 5% 半透明の青 */ + hsla(240, 100%, 50%, .4) /* 40% 半透明の青 */ + hsla(240, 100%, 50%, .7) /* 70% 半透明の青 */ + hsla(240, 100%, 50%, 1) /* 完全に不透明の青 */ -

以下のリストにあるキーワードは、 CSS Color Module Level 4 仕様書で定義されています。

- -
-

なお、これらのキーワードは大文字小文字を区別しませんが、読みやすさのために大文字小文字を交ぜて表記しています。

-
- -
-
ActiveText
-
-

アクティブなリンクのテキスト

-
-
ButtonFace
-
-

プッシュボタンの背景

-
-
ButtonText
-
-

プッシュボタンのテキスト

-
-
Canvas
-
-

アプリケーションのコンテンツや文書の背景

-
-
CanvasText
-
-

アプリケーションのコンテンツや文書のテキスト

-
-
Field
-
-

入力フィールドの背景

-
-
FieldText
-
-

入力フィールドのテキスト

-
-
GrayText
-
-

無効なテキスト

-
-
Highlight
-
-

コントロールの中で選択されているアイテムの背景

-
-
HighlightText
-
-

コントロールの中で選択されているアイテムのテキスト

-
-
LinkText
-
-

アクティブではない、訪問していないリンクのテキスト

-
-
VisitedText
-
-

訪問したリンクのテキスト

-
-
- -

非推奨のシステム色のキーワード

- -

以下のキーワードは、 CSS Color モジュールの早期の版で定義されていました。これらは非推奨になりました。公開ウェブページでの使用は {{deprecated_inline}} です。

- -
-
-
ActiveBorder
-
-

アクティブウィンドウの境界線。

-
-
ActiveCaption
-
-

アクティブウィンドウのキャプション。 CaptionText を前景色として使用してください。

-
-
AppWorkspace
-
-

複数文書インターフェイス (MDI) の背景色。

-
-
Background
-
-

デスクトップの背景です。

-
-
ButtonHighlight
-
-

周囲の境界線で1つの平面を作って3Dになっている3D要素の光源に向いている境界線です。

-
-
ButtonShadow
-
-

周囲の境界線で1つの平面を作って3Dになっている3D要素の光源から離れている境界線です。

-
-
CaptionText
-
-

キャプションの文字列、サイズ変更ボックス、スクロールバーの矢印ボックスの文字列です。 ActiveCaption を背景色として使用してください。

-
-
InactiveBorder
-
-

非アクティブウィンドウの境界線です。

-
-
InactiveCaption
-
-

非アクティブウィンドウのキャプションです。 InactiveCaptionText を前景色に使用してください。

-
-
InactiveCaptionText
-
-

非アクティブなキャプションの文字列の色です。 InactiveCaption を背景色に使用してください。

-
-
InfoBackground
-
-

ツールチップコントロールの背景色です。 InfoText を前景色に使用してください。

-
-
InfoText
-
-

ツールチップコントロールの文字色です。 InfoBackground を背景色に使用してください。

-
-
Menu
-
-

メニューの背景。 MenuText または -moz-MenuBarText を前景色に使用してください。

-
-
MenuText
-
-

メニュー内の文字列。 Menu を背景色に使用してください。

-
-
Scrollbar
-
-

スクロールバーの背景色。

-
-
ThreeDDarkShadow
-
-

囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の、光源から遠い2辺の暗い方 (ふつうは外側) の色。

-
-
ThreeDFace
-
-

囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の表面の色。前景色には ButtonText を使用してください。

-
-
ThreeDHighlight
-
-

囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の、光源に向いた2辺の明るい方 (ふつうは外側) の色。

-
-
ThreeDLightShadow
-
-

囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の、光源に向いた2辺のっ暗い方 (ふつうは内側) の色。

-
-
ThreeDShadow
-
-

囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の、光源から遠い2辺の明るい方 (ふつうは内側) の色。

-
-
Window
-
-

ウィンドウの背景。 WindowText を前景色に使用してください。

-
-
WindowFrame
-
-

ウィンドウの枠。

-
-
WindowText
-
-

ウィンドウ内の文字列。 Window を背景色に使用してください。

-
-
-
- -

Mozilla システム色拡張

- -
-
-
-moz-ButtonDefault
-
-

ダイアログボックスの既定の動作を表すボタンの周りを囲む境界線の色です。

-
-
-moz-ButtonHoverFace
-
-

マウスポインターが上にある時のボタンの背景色 (マウスポインターが上にない場合は ThreeDFace または ButtonFace)。 -moz-ButtonHoverText の前景色と一緒に使う必要があります。

-
-
-moz-ButtonHoverText
-
-

マウスポインタが上にあるボタンのテキスト色 (マウスポインタが上にない場合は ButtonText)。 -moz-ButtonHoverFace background の背景色と一緒に使う必要があります。

-
-
-moz-CellHighlight
-
-

ツリーウィジェットで選択された項目の背景色。 -moz-CellHighlightText の前景色と一緒に使用する必要があります。 -moz-html-CellHighlight も参照。

-
-
-moz-CellHighlightText
-
-

ツリー内で選択された項目のテキスト色。 -moz-CellHighlight background の背景色と一緒に使う必要があります。 -moz-html-CellHighlightText も参照。

-
-
-moz-Combobox
-
-

{{Gecko_minversion_inline("1.9.2")}} コンボボックスの背景色。 -moz-ComboboxText の前景色と一緒に使う必要があります。 1.9.2 以前のバージョンでは、代わりに -moz-Field を使用してください。

-
-
-moz-ComboboxText
-
-

{{Gecko_minversion_inline("1.9.2")}} コンボボックスのテキスト色。 -moz-Combobox の背景色と一緒に使う必要があります。 1.9.2 以前のバージョンでは、代わりに -moz-FieldText を使用してください。

-
-
-moz-Dialog
-
-

ダイアログボックスの背景色。moz-DialogTextの前景色と一緒に使う必要があります。

-
-
-moz-DialogText
-
-

ダイアログボックスのテキスト色。 -moz-DialogText の背景色と一緒に使う必要があります。

-
-
-moz-dragtargetzone
-
-moz-EvenTreeRow
-
-

{{gecko_minversion_inline("1.9")}} ツリー内の偶数行の背景色。 -moz-FieldText の前景色と一緒に使う必要があります。 Gecko のバージョン 1.9 より前のバージョンでは、 -moz-Field を使用してください。 -moz-OddTreeRow も参照してください。

-
-
-moz-html-CellHighlight
-
-

{{gecko_minversion_inline("1.9")}} HTML の {{HTMLElement("select")}} における強調表示されたアイテムの背景色。前景色には -moz-html-CellHighlightText を使用します。 Gecko 1.9 以前では、 -moz-CellHighlight を使用してください。

-
-
-moz-html-CellHighlightText
-
-

{{gecko_minversion_inline("1.9")}} HTML の {{HTMLElement("select")}} における強調表示されたアイテムのテキストの色。背景色には -moz-html-CellHighlight を使用します。 Gecko 1.9 以前では、 -moz-CellHighlightText を使用してください。

-
-
-moz-mac-accentdarkestshadow
-
-moz-mac-accentdarkshadow
-
-moz-mac-accentface
-
-moz-mac-accentlightesthighlight
-
-moz-mac-accentlightshadow
-
-moz-mac-accentregularhighlight
-
-moz-mac-accentregularshadow
-
-moz-mac-chrome-active
-
-

{{Gecko_minversion_inline("1.9.1")}}

-
-
-moz-mac-chrome-inactive
-
-

{{Gecko_minversion_inline("1.9.1")}}

-
-
-moz-mac-focusring
-
-moz-mac-menuselect
-
-moz-mac-menushadow
-
-moz-mac-menutextselect
-
-moz-MenuHover
-
-

ホバーされたメニュー項目の背景色。 Highlight によく似ています。 -moz-MenuHoverText や -moz-MenuBarHoverText の前景色と一緒に使う必要があります。

-
-
-moz-MenuHoverText
-
-

ホバーされたメニュー項目のテキスト色。 HighlightText によく似ています。 -moz-MenuHover の背景色と一緒に使う必要があります。

-
-
-moz-MenuBarText
-
-

{{Gecko_minversion_inline("1.9.2")}} メニューバーのテキスト色。 MenuText によく似ています。 Menu の背景の上に使用します。

-
-
-moz-MenuBarHoverText
-
-

メニューバーのホバーされたテキストの色。多くの場合、 -moz-MenuHoverText に似ています。 -moz-MenuHover 背景の上に使用する必要があります。

-
-
-moz-nativehyperlinktext
-
-

{{Gecko_minversion_inline("1.9.1")}} 既定のプラットフォームのハイパーリンク色

-
-
-moz-OddTreeRow
-
-

{{gecko_minversion_inline("1.9")}} ツリー内の奇数行の背景色。 -moz-FieldText の前景色と一緒に使う必要があります。 Gecko のバージョン 1.9 より前のバージョンでは、 -moz-Field を使用してください。 -moz-EvenTreeRow も参照してください。

-
-
-moz-win-communicationstext
-
-

{{gecko_minversion_inline("1.9")}} {{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox; を持つオブジェクトのテキストに使用する必要があります。

-
-
-moz-win-mediatext
-
-

{{gecko_minversion_inline("1.9")}} {{cssxref("-moz-appearance")}}: -moz-win-media-toolbox を持つオブj稀有とのテキストに使用する必要があります。

-
-
-moz-win-accentcolor
-
-

{{gecko_minversion_inline("56")}}
- スタートメニューやタスクバー、タイトルバーなどに設定できる Windows 10 のカスタムアクセントカラーにアクセスするために使用します。

-
-
-moz-win-accentcolortext
-
-

{{gecko_minversion_inline("56")}}
- スタートメニュー、タスクバー、タイトルバーなどの Windows 10 のカスタムアクセントカラーの上に配置されたテキストの色にアクセスするために使用します。

-
-
-
+ /* ホワイトスペース構文 */ + hsla(240 100% 50% / .05) /* 5% 半透明の青 */ -

Mozilla 色設定拡張

- -
-
-moz-activehyperlinktext
-
-

アクティブ化されたリンクの文字色のユーザー設定です。既定の文書の背景色と共に使用されます。

-
-
-moz-default-background-color
-
-

{{Gecko_minversion_inline("5.0")}} 文書の背景色のユーザー設定です。

-
-
-moz-default-color
-
-

{{Gecko_minversion_inline("5.0")}} 文字色のユーザー設定です。

-
-
-moz-hyperlinktext
-
-

未訪問のリンクにおける文字色のユーザー設定です。既定の文書の背景色と共に使用されます。

-
-
-moz-visitedhyperlinktext
-
-

訪問済みのリンクにおける文字色のユーザー設定です。既定の文書の背景色と共に使用されます。

-
-
- -

補間

- -

アニメーションやグラデーションにおいて、 <color> の値は赤、緑、青の成分ごとに補間されます。それぞれの成分は浮動小数点の実数として補間されます。なお、予期しない灰色が現れるのを避けるため、色の補間はアルファ乗算済み sRGBA 色空間で行われます。アニメーションでは補間の速度はアニメーションと関連づけられたタイミング関数によって決められます。

- -

アクセシビリティの考慮事項

- -

色を見分けることが難しい人がいます。 WCAG 2.0 勧告は、色を特定のメッセージ、動作、結果を伝える唯一の手段として使用することを避けるよう強く勧告しています。詳しくは Color and color contrast をご覧ください。

+ /* アルファのパーセント表記 */ + hsla(240 100% 50% / 5%) /* 5% 半透明の青 */

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Colors', '#colorunits', '<color>')}}{{Spec2('CSS4 Colors')}}rebeccapurple、4 桁 (#RGBA) および 8 桁 (#RRGGBBAA) の 16 進記法、rgb() および hsl() の別名である rgba() および hsla() (どちらも引数の構文が同じ)、関数の引数をカンマの代わりに空白で区切るこおｔ、アルファ値のパーセント値表記、hsl() 色の色相の角度表記を追加。
{{SpecName('CSS3 Colors', '#colorunits', '<color>')}}{{Spec2('CSS3 Colors')}}システム色を非推奨化。 SVG 色を追加。rgba(), hsl(), hsla() 関数記法を追加
{{SpecName('CSS2.1', 'syndata.html#value-def-color', '<color>')}}{{Spec2('CSS2.1')}}orange キーワードとシステム色を追加
{{SpecName('CSS1', '#color-units', '<color>')}}{{Spec2('CSS1')}}初回定義。基本16色のキーワードを含む。
仕様書状態備考
{{SpecName('CSS4 Colors', '#changes-from-3')}}{{Spec2('CSS4 Colors')}} + LCH および Lab の色、color() 関数表記、rebeccapurple、4 桁 (#RGBA) および 8 桁 (#RRGGBBAA) の 16 進表記を追加し、rgba() および hsla() を rgb() および hsl() の別名とし (引数の構文を共通化)、関数の空白区切りの引数をカンマの代替とし、アルファ値にパーセント値を追加し、hsl() 色の色相の角度表記を追加。 +
+ {{SpecName('CSS3 Colors', '#colorunits', '<color>')}} + {{Spec2('CSS3 Colors')}} + システム色を非推奨化。 SVG 色を追加。rgba(), hsl(), hsla() 関数表記を追加。 +
+ {{SpecName('CSS2.1', 'syndata.html#value-def-color', '<color>')}} + {{Spec2('CSS2.1')}} + orange キーワードとシステム色を追加。 +
+ {{SpecName('CSS1', '#color-units', '<color>')}} + {{Spec2('CSS1')}} + 初回定義。基本 16 色のキーワードを含む。 +
-

ブラウザーの互換性

+## ブラウザーの互換性 -

{{Compat("css.types.color")}}

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • {{Cssxref("opacity")}} プロパティは要素レベルで色の透明度を定義できます。
    • -
  • このデータ型を使用するよく使われるプロパティ: {{Cssxref("color")}}, {{Cssxref("background-color")}}, {{Cssxref("border-color")}}, {{Cssxref("outline-color")}}, {{Cssxref("text-shadow")}}, {{Cssxref("box-shadow")}}
    • -
  • CSS を使った HTML の要素への色の適用
    • -
+- {{Cssxref("opacity")}} プロパティは要素レベルで色の透明度を定義できます。 +- このデータ型を使用するよく使われるプロパティ: {{Cssxref("color")}}, {{Cssxref("background-color")}}, {{Cssxref("border-color")}}, {{Cssxref("box-shadow")}}, {{Cssxref("outline-color")}}, {{Cssxref("text-shadow")}} +- [CSS を使った HTML の要素への色の適用](/ja/docs/Web/HTML/Applying_color) diff --git a/files/ja/web/css/css_color/index.md b/files/ja/web/css/css_color/index.md index 83d5bcadac..36962c578b 100644 --- a/files/ja/web/css/css_color/index.md +++ b/files/ja/web/css/css_color/index.md @@ -4,108 +4,65 @@ slug: Web/CSS/CSS_Color tags: - CSS - CSS 色 + - ガイド - HTML 色 - - Reference - - スタイル - 概要 + - リファレンス + - スタイル + - Styling HTML - 色 translation_of: Web/CSS/CSS_Color --- -
{{CSSRef}}
- -

CSS 色 (CSS Color) は、色、色の種類、色の混合、透過性、そしてどのようにこれらの色や効果を HTML コンテンツに適用するかを扱う CSS のモジュールです。 {{cssxref("<color>")}} を値として取る CSS プロパティがすべてこのモジュールの一部であるとは限りませんが、このモジュールに依存することがあります。

- -

リファレンス

- -

プロパティ

- -
-
    -
  • {{cssxref("color")}}
    • -
  • {{cssxref("color-adjust")}}
    • -
  • {{cssxref("opacity")}}
    • -
-
- -

データ型

- -
-
    -
  • {{cssxref("<color>")}}
    • -
-
- -

ガイド

- -
-
CSS を使った HTML 要素への色の適用
-
様々な種類のコンテンツに CSS を使って色を適用するためのガイドです。色に関するすべての CSS プロパティが関係します。
-
- -

ツール

- -
-
色選択ツール
-
このツールは独自の色を簡単に作成、調整、実験することができます。
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Colors')}}{{Spec2('CSS4 Colors')}} 
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザーの対応

- -

color プロパティ

- -
-

{{Compat("css.properties.color")}}

-
- -

color-adjust プロパティ

- -
-

{{Compat("css.properties.color-adjust")}}

-
- -

opacity プロパティ

- -
-

{{Compat("css.properties.opacity")}}

-
- -

関連情報

- -
    -
  • 他の仕様書で定義されている色に関するプロパティ: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}
    • -
  • CSS では、グラデーションは色ではなく画像です。
    • -
+{{CSSRef}} + +**CSS 色** (CSS Color) は CSS のモジュールで、色、色の種類、色の混合、透過性、そしてどのようにこれらの色や効果を HTML コンテンツに適用するかを扱います。{{cssxref("<color>")}} を値として取る CSS プロパティがすべてこのモジュールの一部であるとは限りませんが、このモジュールに依存することがあります。 + +## リファレンス + +### プロパティ + +- {{cssxref("color")}} +- {{cssxref("color-adjust")}} +- {{cssxref("opacity")}} + +### データ型 + +- {{cssxref("<color>")}} + +## ガイド + +- [CSS を使った HTML 要素への色の適用](/ja/docs/Web/HTML/Applying_color) + - : 様々な種類のコンテンツに CSS を使って色を適用するためのガイドです。色に関するすべての CSS プロパティが関係します。 + +## ツール + +- [色選択ツール](/ja/docs/Web/CSS/CSS_Colors/Color_picker_tool) + - : このツールは独自の色を簡単に作成、調整、実験することができます。 + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ------------------------------------- | ------------------------ | -------- | +| {{SpecName('CSS4 Colors')}} | {{Spec2('CSS4 Colors')}} | | +| {{SpecName('CSS3 Colors')}} | {{Spec2('CSS3 Colors')}} | | +| {{SpecName('CSS2.1', 'colors.html')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS1')}} | {{Spec2('CSS1')}} | 初回定義 | + +## ブラウザーの互換性 + +### `color` プロパティ + +{{Compat("css.properties.color")}} + +### `color-adjust` プロパティ + +{{Compat("css.properties.color-adjust")}} + +### `opacity` プロパティ + +{{Compat("css.properties.opacity")}} + +## 関連情報 + +- 他の仕様書で定義されている色に関するプロパティ: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}} +- CSS では、グラデーションは色ではなく[画像](/ja/docs/Web/CSS/CSS_Images)です。 diff --git a/files/ja/web/css/css_colors/color_picker_tool/index.md b/files/ja/web/css/css_colors/color_picker_tool/index.md index 5fb090a903..5c68c1677c 100644 --- a/files/ja/web/css/css_colors/color_picker_tool/index.md +++ b/files/ja/web/css/css_colors/color_picker_tool/index.md @@ -3,3239 +3,36 @@ title: 色選択ツール slug: Web/CSS/CSS_Colors/Color_picker_tool tags: - CSS - - CSS 色 - CSS 色選択 - CSS 色選択ツール - - HTML 色 + - CSS 色 + - 色選択 - HTML 色選択 - HTML 色選択ツール - - color + - HTML 色 - ツール - - 色選択 + - color + - colors translation_of: Web/CSS/CSS_Colors/Color_picker_tool --- - - -

{{CSSRef}}

+{{CSSRef}} -

このツールは、ウェブの独自の色を簡単に作成、調整、実験することができます。 HEXA 色, RGB (Red/Green/Blue), HSL (Hue/Saturation/Lightness) RGB など、 CSS で対応している様々な色形式に変換することもできます。アルファチャネルの制御も、 RGB (rgba) 及び HSL (hsla) 形式で対応しています。

+このツールは、ウェブの独自の色を簡単に作成、調整、実験することができます。 HEXA 色, RGB (Red/Green/Blue), HSL (Hue/Saturation/Lightness) RGB など、 [CSS](/ja/docs/Web/CSS) で対応している様々な[色形式](/ja/docs/Web/CSS/color_value)に変換することもできます。アルファチャネルの制御も、 RGB (rgba) および HSL (hsla) 形式で対応しています。 -

色を定義するパラメーターを調整すると、３つの標準ウェブ CSS 形式すべてが表示されます。さらに、現在選択されている色に基づいて、 HSL および HSV のパレット、およびアルファが生成されます。「スポイト」スタイルのカラーピッカーボックスは、 HSL または HSV 形式の間で切り替えることができます。また、ツールの下部にあるボックスに色をドラッグし、色を重ね合わせることで、色とその重なり具合をテストすることもできます。 相対 Z インデックス値を調整して、前後に移動させることができます。

+色を定義するパラメーターを調整すると、3 つの標準ウェブ CSS 形式すべてが表示されます。さらに、現在選択されている色に基づいて、 HSL および HSV のパレット、およびアルファが生成されます。「スポイト」スタイルのカラーピッカーボックスは、 HSL または HSV 形式の間で切り替えることができます。また、ツールの下部にあるボックスに色をドラッグし、色を重ね合わせることで、色とその重なり具合をテストすることもできます。 相対 Z インデックス値を調整して、前後に移動させることができます。 -

このツールは HTML に適用する完全な CSS 色を識別するのに役立ちます。

+このツールは [HTML](/ja/docs/Web/HTML) に適用する完全な CSS 色を識別するのに役立ちます。 -
{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}
+{{EmbedGHLiveSample("css-examples/tools/color-picker/", '100%', 900)}} -

上記で作成した色は、特に注意書きがない限り、 CSS や HTML のどこの色でも使用することができます。

+上記で作成した色は、特に注意書きがない限り、 CSS や HTML のどこの色でも使用することができます。 -

関連情報

+## 関連情報 -

色の使用について詳しくは、以下を参照してください。

+色の使用について詳しくは、以下を参照してください。 - +- [CSS を使った HTML の要素への色の適用](/ja/docs/Web/HTML/Applying_color) +- [基本的なテキストとフォントの装飾](/ja/docs/Learn/CSS/Styling_text/Fundamentals) +- [CSS を使用した境界のスタイル付け](/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +- [CSS を使用した背景スタイルの変更](/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +- [色とそのコントラスト](/ja/docs/Learn/Accessibility/CSS_and_JavaScript#color_and_color_contrast) diff --git a/files/ja/web/css/opacity/index.md b/files/ja/web/css/opacity/index.md index 48781e619b..5e7760a7ef 100644 --- a/files/ja/web/css/opacity/index.md +++ b/files/ja/web/css/opacity/index.md @@ -4,66 +4,91 @@ slug: Web/CSS/opacity tags: - CSS - CSS プロパティ - - Opacity - - Reference - 不透明度 + - リファレンス + - recipe:css-property +browser-compat: css.properties.opacity translation_of: Web/CSS/opacity --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の opacity プロパティは、要素の不透明度を設定します。不透明度は要素の裏にあるコンテンツが隠れる度合いであり、透明度の逆です。

+**`opacity`** は CSS のプロパティで、要素の不透明度を設定します。不透明度は要素の裏にあるコンテンツが隠れる度合いであり、透明度の逆です。 -
{{EmbedInteractiveExample("pages/css/opacity.html")}}
+{{EmbedInteractiveExample("pages/css/opacity.html")}} - +## 構文 -

この値は子要素に継承されませんが、その効果は当該要素の内容を含む全体に及びます。すなわち、要素とそれに含まれる子要素は、互いに透明度が異なっていても、その要素の背景に対しては同程度の透明度となります。

+```css +opacity: 0.9 +opacity: 90% -

このプロパティを 1 以外の値で用いると、その要素は新しい重ね合わせコンテキストを作ります。

+/* グローバル値 */ +opacity: inherit; +opacity: initial; +opacity: revert; +opacity: unset; +``` -

もし、子要素に透明度を適用したくない場合は、以下のように代わりに {{cssxref("background")}} プロパティを使用してください。

+### 値 -
background: rgba(0, 0, 0, 0.4);
+- `` -

構文

+ - : {{cssxref("number")}} を `0.0` 以上 `1.0` 以下で、また {{cssxref("percentage")}} を `0%` 以上 `100%` 以下で、チャネルの不透明度 (つまり、アルファチャネルの値) を表します。範囲外の数値も有効ですが、近い方の限界値に丸められます。 -

値

+ | 値 | 意味 | + | ----------------------------------------------------- | ------------------------------------------------------------- | + | `0` | 要素は完全に透明です (つまり、不可視です)。 | + | `0` と `1` の中間にある何れかの {{cssxref("number")}} | 要素は半透明です (つまり、要素の背後のコンテンツが見えます)。 | + | `1` (既定値) | 要素は完全に不透明です (中身が詰まって見えます)。 | -
-
<alpha-value>
-
{{cssxref("number")}} を 0.0 以上 1.0 以下で、また {{cssxref("percentage")}} を 0% 以上 100% 以下で、チャネルの不透明度 (つまり、アルファチャネルの値) を表します。範囲外の数値も有効ですが、近い方の限界値におさめられます。 - - - - - - - - - - - - - - - - - - - -
値意味
0要素は完全に透明です (つまり、不可視です)
{{cssxref("number")}} が 0 より大きく 1 未満の何れかの値要素は半透明です (つまり、要素の背後のコンテンツが見えます)。
1 (既定値)要素は完全に不透明です (中身が詰まって見えます)
-
-
+## 解説 -

形式文法

+`opacity` の値は子要素に継承されませんが、要素のコンテンツを含む全体に適用されます。すなわち、ある要素とその子の不透明度が互いに異なっていたとしても、その要素の背景に対してはすべて同じ不透明度になります。 + +このプロパティを `1` 以外の値で用いると、その要素は新しい[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)を作ります。 + +背景の不透明度のみを変更したい場合は、{{cssxref("background")}} プロパティでアルファチャネルを使用できる[色の値](/ja/docs/Web/CSS/color_value)を使用してください。 + +```css +background: rgba(0, 0, 0, 0.4); +``` + +## アクセシビリティの考慮 + +文字列の opacity を調整した場合、テキストの色と、テキストが配置されている背景の色とのコントラスト比が、弱視の人がページの内容を読むことができる程度に十分高くなるよう確認することが重要です。 + +色のコントラスト比は、透明度を調整したテキストと背景色の明度の値を比較することで決定されます。現在の[ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG)](https://www.w3.org/WAI/intro/wcag) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。 + +- [WebAIM: Color Contrast Checker](https://webaim.org/resources/contrastchecker/) +- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 + +

基本的な例

+ +次の例では、`opacity` プロパティで要素とその内容全体の不透明度を変更することで、テキストを非常に読みにくくしています。 + +#### HTML + +```html +
何とか見える程度でしょう。
+
簡単に見えるでしょう。
+
とても見やすいでしょう。
+``` -

基本的な例

+#### CSS -
div { background-color: yellow; }
+```css
+div { background-color: yellow; font-weight: bold; font-size: 130%; }
 .light {
   opacity: 0.2; /* Barely see the text over the background */
 }
@@ -73,80 +98,55 @@ translation_of: Web/CSS/opacity
 .heavy {
   opacity: 0.9; /* See the text very clearly over the background */
 }
-
+``` -
<div class="light">You can barely see this.</div>
-<div class="medium">This is easier to see.</div>
-<div class="heavy">This is very easy to see.</div>
-
+#### 結果 -

{{EmbedLiveSample('Basic_example', '640', '64')}}

+{{EmbedLiveSample('Setting_opacity', '640', '105')}} -

:hover を使った透明度の変化

+

ホバー時の透明度の設定

-
img.opacity {
+次の例では、ホバー時に不透明度を変更し、親要素の縞模様の背景画像が透けて見えるようにしています。
+
+#### HTML
+
+```html
+

+  MDN Dino
+

+```
+
+#### CSS
+
+```css
+img.opacity {
   opacity: 1;
-  filter: alpha(opacity=100); /* IE8 and lower */
-  zoom: 1; /* Triggers "hasLayout" in IE 7 and lower */
 }
 
 img.opacity:hover {
   opacity: 0.5;
-  filter: alpha(opacity=50);
-  zoom: 1;
-}
- -
<img src="//developer.mozilla.org/static/img/opengraph-logo.png"
-  alt="MDN ロゴ" width="128" height="146"
-  class="opacity">
-
- -

{{EmbedLiveSample('Different_opacity_with_hover', '150', '175')}}

- -

アクセシビリティの考慮事項

- -

文字列の opacity を調整した場合、テキストの色と、テキストが配置されている背景の色とのコントラスト比が、弱視の人がページの内容を読むことができる程度に十分高くなるよう確認することが重要です。

- -

色のコントラスト比は、透明度を調整したテキストと背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

- - - -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Colors', '#transparency', 'opacity')}}{{Spec2('CSS4 Colors')}}opacity の値にパーセント値を定義。
{{SpecName('CSS3 Colors', '#opacity', 'opacity')}}{{Spec2('CSS3 Colors')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

{{Compat("css.properties.opacity", 2)}}

- -

関連情報

- - +} + +.wrapper { + width: 200px; + height: 160px; + background-color: #f03cc3; + background-image: linear-gradient(90deg, transparent 50%, + rgba(255,255,255,.5) 50%); + background-size: 20px 20px; +} +``` + +#### 結果 + +{{EmbedLiveSample('Setting_opacity_on_hover', '150', '200')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} -- cgit v1.2.3-54-g00ecf