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 +- files/ja/web/html/applying_color/index.md | 614 ++-- 7 files changed, 2021 insertions(+), 5402 deletions(-) (limited to 'files/ja') 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}} diff --git a/files/ja/web/html/applying_color/index.md b/files/ja/web/html/applying_color/index.md index 3e49ec608c..b08409d00c 100644 --- a/files/ja/web/html/applying_color/index.md +++ b/files/ja/web/html/applying_color/index.md @@ -4,174 +4,159 @@ slug: Web/HTML/Applying_color tags: - Beginner - CSS - - CSS Colors + - CSS 色 - Guide - HTML - - HTML Colors - - HTML Styles + - HTML 色 + - HTML スタイル - Styling HTML - color translation_of: Web/HTML/Applying_color --- -
{{HTMLRef}}
-

色使いは人間の表現の基本形です。子どもは絵がうまくなる前から色に触れています。恐らくこれこそが、人がウェブサイト開発を学ぶときにまず色を触る理由でしょう。CSS では、HTML 要素に色を追加し好みの見た目にする方法が多岐に渡ります。この記事では CSS の色を HTML の中で利用できる各方法の基本をご案内します。

+{{HTMLRef}} -

幸いなことに HTML での着色は本当に簡単で、ほぼ全ての要素に色をつけられます。

+この記事は、HTML での CSS の色を使用するそれぞれの方法を紹介する入門編です。 -

{{anch("Things that can have color", "色付けできる物の一覧とそのための CSS プロパティ")}}、{{anch("How to describe a color", "色の記述方法")}}、{{anch("Using color", "スタイルシートとスクリプトでの色の利用")}}など、色使いにおいて知っておくべき数多のことに触れていきます。{{anch("Letting the user picka color", "ユーザーに色を選択させる")}}方法にも触れます。

+色使いは人間の表現の基本形です。子どもは絵がうまくなる前から色に触れています。恐らくこれこそが、人がウェブサイト開発を学ぶときにまず色を触る理由でしょう。[CSS](/ja/docs/Web/CSS) では、[HTML](/ja/docs/Web/HTML) [要素](/ja/docs/Web/HTML/Element)に色を追加し好みの見た目にする方法が多岐に渡ります。 -

それから、{{anch("Using color wisely", "賢い色の使い方")}}について短い論述をします。これは、様々な視覚の人がいることを意識した、適切な色の選択方法です。

+ここでは、色を使用する際に必要なことのほとんどに触れていきます。[色をつけることができるものと、それに関係する CSS プロパティの一覧](#色を付けることができるもの)、[色の記述方法](#色の記述方法)、実際に[スタイルシートとスクリプトの両方で色を使用する方法](#色の活用)などです。また、ユーザーに色を選んでもらう方法についても見ていきます。 -

色付けできる物

+それから、[賢い色の使い方](#賢い色の使い方)について短い論述をします。これは、様々な視覚の人がいることを意識した、適切な色の選択方法です。 -

要素レベルでは、HTML 内のすべての物に色を付けられます。そこで、テキストや境界線などの要素として描画されるものの種類ごとに、色を付ける CSS プロパティのリストを見ていきます。

+## 色を付けることができるもの -

基礎的なレベルでならば、 {{cssxref("color")}} プロパティは HTML 要素の手前側の色を定義し、{{cssxref("background-color")}} は HTML 要素の背景色を定義すると言えます。これらのプロパティはほぼ全ての要素で使用できます。

+要素レベルでは、HTML のすべてのものに色を適用することができます。それよりも、テキストや境界線など、要素の中に描かれているものの種類で見てみましょう。それぞれについて、色を適用する CSS プロパティの一覧を見てみましょう。 -

テキスト

+基礎的なレベルでならば、{{cssxref("color")}} プロパティは HTML 要素の内容物の色を定義し、{{cssxref("background-color")}} は HTML 要素の背景色を定義すると言えます。これらのプロパティはほぼすべての要素で使用できます。 -

この要素を描画するときは、以下のプロパティに基づいてテキストの色、背景色、テキストの装飾を決定します。

+### テキスト -
-
{{cssxref("color")}}
-
テキストとテキストの装飾 (下線や上線、打ち消し線などを付加するもの) に使用する色です。
-
{{cssxref("background-color")}}
-
テキストの背景色です。
-
{{cssxref("text-shadow")}}
-
テキストに適用する影の効果を設定します。影の設定には、影のベース色 (他のパラメータに基づいて背景をぼかして混色する色) があります。より詳しくは{{SectionOnPage("/ja/docs/Learn/CSS/Styling_text/Fundamentals", "テキストのドロップシャドウ")}}を参照してください。
-
{{cssxref("text-decoration-color")}}
-
デフォルトでは、テキストの装飾 (下線、打ち消し線など) の色には color プロパティを使用します。しかし、text-decoration-color プロパティを用いることで、この挙動をオーバーライドして異なる色を使用できます。
-
{{cssxref("text-emphasis-color")}}
-
文章中の各文字に隣接した圏点の描画に使用する色です。主に東アジア言語の文字描画で使用します。
-
{{cssxref("caret-color")}}
-
要素の {{Glossary("caret", "キャレット")}} (テキスト入力カーソルとも表現されるもの) の描画に使用する色です。これは編集可能な要素では有用で、{{HTMLElement("input")}} や {{HTMLElement("textarea")}} または HTML {{htmlattrxref("contenteditable")}} 属性がセットされた要素に使用されます。
-
+要素がレンダリングされるたびに、テキスト、その背景、およびテキストの装飾の色を決定するために以下のプロパティが使用されます。 -

ボックス

+- {{cssxref("color")}} + - : テキストと[テキスト装飾](/ja/docs/Learn/CSS/Styling_text/Fundamentals#font_style_font_weight_text_transform_and_text_decoration) (下線や上線、打ち消し線などを付加するもの) に使用する色です。 +- {{cssxref("background-color")}} + - : テキストの背景色です。 +- {{cssxref("text-shadow")}} + - : テキストに適用する影の効果を設定します。影の設定には、影のベース色 (他のパラメータに基づいて背景をぼかして混色する色) があります。より詳しくは基本的な[テキストとフォントの装飾](/ja/docs/Learn/CSS/Styling_text/Fundamentals)の[テキストのドロップシャドウ](/ja/docs/Learn/CSS/Styling_text/Fundamentals#text_drop_shadows)を参照してください。 +- {{cssxref("text-decoration-color")}} + - : 既定では、テキストの装飾 (下線、打ち消し線など) の色には `color` プロパティを使用します。しかし、`text-decoration-color` プロパティを用いると、この挙動を上書きして異なる色を使用できます。 +- {{cssxref("text-emphasis-color")}} + - : テキストの各文字に隣接した圏点の描画に使用する色です。主に東アジア言語の文字描画で使用します。 +- {{cssxref("caret-color")}} + - : 要素の {{Glossary("caret", "キャレット")}} (テキスト入力カーソルとも表現されるもの) の描画に使用する色です。これは編集可能な要素でのみ有用であり、{{HTMLElement("input")}} や {{HTMLElement("textarea")}} または HTML の {{htmlattrxref("contenteditable")}} 属性が設定された要素に使用されます。 -

すべての要素は中身があるボックスであり、そのボックスの内容に加えて、背景と境界線もあります。

+### ボックス -
-
{{anch("Borders", "境界線")}}
-
ボックスの境界線の色を設定できる CSS プロパティ一覧は、{{anch("Borders", "境界線")}} の章を参照してください。
-
{{cssxref("background-color")}}
-
要素の前面を除いて、その要素の領域で使われる背景色です。
-
{{cssxref("column-rule-color")}}
-
テキストの列を区切る線に使う色です。
-
{{cssxref("outline-color")}}
-
要素の外側に輪郭線を描くときに使う色です。この輪郭線は境界線とは異なり、ドキュメント内でそのスペースを確保しません (そのため他のコンテンツと重なる可能性があります)。一般的には、入力イベントを受け取る要素を示したフォーカスインジケーターに使用されます。
-
+すべての要素は中身があるボックスであり、そのボックスの内容に加えて、背景と境界線もあります。 -

境界線

+- [境界線](#境界線) + - : ボックスの境界線の色を設定できる CSS プロパティ一覧は、[境界線](#境界線)の節を参照してください。 +- {{cssxref("background-color")}} + - : 要素の内容がない領域で使用される背景色です。 +- {{cssxref("column-rule-color")}} + - : テキストの列を区切る線に使う色です。 +- {{cssxref("outline-color")}} + - : 要素の外側に輪郭線を描くときに使う色です。この輪郭線は境界線とは異なり、文書内でその空間を確保しません (そのため他のコンテンツと重なる可能性があります)。一般的には、入力イベントを受け取る要素を示すフォーカスインジケーターに使用されます。 -

あらゆる要素には、周りに境界線が存在します。基本的な要素の境界は、要素の内容の端に描かれている線です。要素とその境界線の関係性については {{SectionOnPage("/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model", "ボックスのプロパティ")}} を、より詳しい境界線へのスタイルの適用については CSS での境界線のスタイル付け をご参照ください。

+### 境界線 -

{{cssxref("border")}} 短縮プロパティを使用することもできます。これは、境界線に関する (色に関しない線幅、線の種類 (実線、破線など) のような境界線の機能も含んだ) すべての設定をこれ一つで行えます。

+あらゆる要素で、周囲に[境界線](/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)を描画することができます。基本的な要素の境界線は、要素の内容物の辺を囲むように描かれた線です。 +基本的な要素の境界は、要素の内容の端に描かれている線です。要素とその境界線の関係性については、[ボックスモデル](/ja/docs/Learn/CSS/Building_blocks/The_box_model)の[ボックスのプロパティ](/ja/docs/Learn/CSS/Building_blocks/The_box_model#ボックスのプロパティ)を、より詳しい境界線へのスタイルの適用については [CSS での境界線のスタイル付け](/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) を参照してください。 -
-
{{cssxref("border-color")}}
-
要素の境界線の各辺に使用する単色を指定します。
-
{{cssxref("border-left-color")}} と {{cssxref("border-right-color")}} と {{cssxref("border-top-color")}} と {{cssxref("border-bottom-color")}}
-
要素の境界線の各辺に対応する色を指定できます。
-
{{cssxref("border-block-start-color")}} と {{cssxref("border-block-end-color")}}
-
これらは、境界線が囲むブロックの始点と終点に最も近い境界線の描画色を設定することができます。左から右への書き方 (英語の書き方など) では、ブロック開始の境界線は上端、ブロック終了の境界線は下端になります。これは、インライン開始とインライン終了である左右の (ボックス内の各行のテキストの開始と終了の位置に対応する) 端とは異なります。
-
{{cssxref("border-inline-start-color")}} と {{cssxref("border-inline-end-color")}}
-
これらは、ボックス内のテキスト行の先頭と末尾に最も近い境界線の縁に色を付けられます。これは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} プロパティに依存しますが、どちら側になるかは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} プロパティによって異なります。例えば、ボックスのテキストが右から左に描画される場合、border-inline-start-color は境界線の右側に適用されます。
-
+{{cssxref("border")}} 一括指定プロパティを使用することもできます。これは、境界線に関する (色以外の[線幅](/ja/docs/Web/CSS/border-width)、[線種](/ja/docs/Web/CSS/border-style) (実線、破線など) などの特性も含んだ) すべての設定をこれ一つで行えます。 -

色をつける他の方法

+- {{cssxref("border-color")}} + - : 要素の境界線の各辺に使用する単一の色を指定します。 +- {{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, {{cssxref("border-bottom-color")}} + - : 要素の境界線の各辺に対応する色を指定できます。 +- {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}} + - : これらは、境界線が囲むブロックの先頭と末尾に最も近い境界線の描画色を設定することができます。左から右への書き方 (英語の書き方など) では、ブロック先頭の境界線は上端、ブロック末尾の境界線は下端になります。これは、インラインの先頭とインラインの末尾である左右の (ボックス内の各行のテキストの先頭と末尾の位置に対応する) 端とは異なります。 +- {{cssxref("border-inline-start-color")}}, {{cssxref("border-inline-end-color")}} + - : これらは、ボックス内のテキスト行の先頭と末尾に最も近い境界線の縁に色を付けられます。これは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} プロパティに依存しますが、どちら側になるかは {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}} プロパティによって異なります。例えば、ボックスのテキストが右から左に描画される場合、`border-inline-start-color` は境界線の右側に適用されます。 -

CSS が唯一の色を付けるためのウェブ技術ではありません。色もサポートしている、ウェブで使用可能なグラフィック技術があります。

+### 色をつける他の方法 -
-
HTML Canvas API
-
Canvas API では、2D のビットマップ画像を {{HTMLElement("canvas")}} 要素の中に描画できます。より詳しくは Canvas チュートリアルをご参照ください。
-
SVG (Scalable Vector Graphics)
-
SVG ならば、特定の形状、パターン、線を描くコマンドで画像を描画できます。 SVG のコマンドは XML の形式となっており、直接ウェブページに埋め込めます。また、img 要素を使うと他の画像と同じような配置もできます。
-
WebGL
-
Web Graphics Library は Open GL ES を基にした API で、ウェブ上に 2D や 3D のハイパフォーマンスなグラフィックを描画できます。より詳しくは WebGL チュートリアルをご参照ください。
-
+CSS が唯一の色を付けるためのウェブ技術ではありません。色に対応している、ウェブで使用可能なグラフィック技術があります。 -

色の指定方法

+- HTML [Canvas API](/ja/docs/Web/API/Canvas_API) + - : Canvas API では、2D のビットマップ画像を {{HTMLElement("canvas")}} 要素の中に描画できます。より詳しくは [Canvas チュートリアル](/ja/docs/Web/API/Canvas_API/Tutorial)を参照してください。 +- [SVG](/ja/docs/Web/SVG) (Scalable Vector Graphics) + - : SVG ならば、特定の形状、パターン、線を描くコマンドで画像を描画できます。 SVG のコマンドは XML の形式となっており、直接ウェブページに埋め込めます。また、img 要素を使うと他の画像と同じような配置もできます。 +- [WebGL](/ja/docs/Web/API/WebGL_API) + - : Web Graphics Library は Open GL ES を基にした API で、ウェブ上に 2D や 3D のハイパフォーマンスなグラフィックを描画できます。より詳しくは [WebGL チュートリアル](/ja/docs/Web/API/WebGL_API/Tutorial)を参照してください。 -

CSS で色を表現するには、アナログの概念である「色」の概念を、コンピュータが解釈できるようなデジタル形式に翻訳する方法が必要です。これは通常、原色の集合それぞれをどのくらい混ぜるか、どのくらいの明るさにするかなど、色を構成要素に分解することで行います。ここでは、CSS で色を表現するいくつかの方法を示します。

+## 色の記述方法 -

色の値型の詳細は、CSS {{cssxref("<color>")}} 単位のリファレンスをご参照ください。

+CSS で色を表現するには、アナログの概念である「色」の概念を、コンピュータが解釈できるようなデジタル形式に翻訳する方法が必要です。これは通常、原色の集合それぞれをどのくらい混ぜるか、どのくらいの明るさにするかなど、色を構成要素に分解することで行います。ここでは、CSS で色を表現するいくつかの方法を示します。 -

キーワード

+色の値型の詳細は、CSS の {{cssxref("<color>")}} 単位のリファレンスを参照してください。 -

標準の色名がいくつか定義されており、色の数値表現の代わりにこれらのキーワードを使用できます。色キーワードには原色と副色 (red、blue、orange など)、灰色 (black から white までの darkgray や lightgrey といった色を含む)、これらを混ぜた色である lightseagreen、cornflowerblue、rebeccapurple が含まれます。

+### キーワード -

利用可能な全ての色キーワードの一覧は、{{SectionOnPage("/ja/docs/Web/CSS/color_value", "色キーワード")}}をご参照ください。

+標準的な色名が定義されており、使用したい色を表すキーワードがあれば、色の数値表現の代わりにこれらのキーワードを使用することができます。色キーワードには原色と副色 (`red`、`blue`、`orange` など)、灰色 (`black` から `white` までの `darkgray` や `lightgrey` といった色を含む)、これらを混ぜた色である `lightseagreen`、`cornflowerblue`、`rebeccapurple` が含まれます。 -

RGB 値

+利用可能な全ての色キーワードの一覧は、[](/ja/docs/Web/CSS/color_value) の[色キーワード](/ja/docs/Web/CSS/color_value#色キーワード)を参照してください。 -

CSS での RGB の色表現は 3 通りあります。

+### RGB 値 -

16 進数文字列表記

+CSS での RGB の色表現は 3 通りあります。 -

16 進数文字列表記は、色の各要素 (赤、緑、青) を表すために 16 進数の数字で色を表します。また、4 つ目の要素のアルファチャネル (または不透明度) を含められます。各色要素は、0 〜 255 (0x00 と 0xFF) の間の数値、または任意で 0 ～ 15 (0x0 と 0xF) の間の数値として表せます。全要素は同じ桁数で指定する必要があります。1 桁の表記を使用した場合、描画時の最終的な色は "#D" が "#DD" になるように各構成要素の桁を 2 回繰り返して計算します。

+#### 16 進数文字列表記 -

16 進数文字列表記の色は、常に文字 "#" で始まります。その後にカラーコードの 16 進数が来ます。文字列の大文字小文字は区別されません。

+16 進数文字列表記は、色の各要素 (赤、緑、青) を表すために 16 進数の数字で色を表します。また、4 つ目の要素のアルファチャネル (または不透明度) を含められます。各色要素は、0 〜 255 (0x00 と 0xFF) の間の数値、または任意で 0 ～ 15 (0x0 と 0xF) の間の数値として表せます。全要素は同じ桁数で指定する必要があります。1 桁の表記を使用した場合、描画時の最終的な色は `"#D"` が `"#DD"` になるように各構成要素の桁を 2 回繰り返して計算します。 -
-
"#rrggbb"
-
16 進数の完全不透明色を指定します。赤色成分が 0xrr、緑色成分がが 0xgg、青色成分が 0xbb です。
-
"#rrggbbaa"
-
16 進数の色を指定します。赤色成分が 0xrr、緑色成分がが 0xgg、青色成分が 0xbb です。アルファチャンネルは 0xaa で指定します。この値が小さいほど透明に近づきます。
-
"#rgb"
-
16 進数の完全不透明色を指定します。赤色成分が 0xrr、緑色成分がが 0xgg、青色成分が 0xbb です。
-
"#rgba"
-
16 進数の色を指定します。赤色成分が 0xrr、緑色成分がが 0xgg、青色成分が 0xbb です。アルファチャンネルは 0xaa で指定します。この値が小さいほど透明に近づきます。
-
+16 進数文字列表記の色は、常に文字 `"#"` で始まります。その後にカラーコードの 16 進数が来ます。文字列の大文字小文字は区別されません。 -

例として、明るい青の不透明色は "#0000ff" や "#00f" で表現できます。25% 不透明にするには、"#0000ff44" や "#00f4" のようにします。

+- `"#rrggbb"` + - : 16 進数の完全不透明色を指定します。赤色成分が `0xrr`、緑色成分が `0xgg`、青色成分が `0xbb` です。 +- `"#rrggbbaa"` + - : 16 進数の色を指定します。赤色成分が `0xrr`、緑色成分が `0xgg`、青色成分が `0xbb` です。アルファチャンネルは `0xaa` で指定します。この値が小さいほど透明に近づきます。 +- `"#rgb"` + - : 16 進数の完全不透明色を指定します。赤色成分が `0xrr`、緑色成分が `0xgg`、青色成分が `0xbb` です。 +- `"#rgba"` + - : 16 進数の色を指定します。赤色成分が `0xrr`、緑色成分が `0xgg`、青色成分が `0xbb` です。アルファチャンネルは `0xaa` で指定します。この値が小さいほど透明に近づきます。 -

RGB 関数表記

+例として、明るい青の不透明色は `"#0000ff"` や `"#00f"` で表現できます。25% 不透明にするには、`"#0000ff44"` や `"#00f4"` のようにします。 -

RGB (赤/緑/青) 関数表記法は、16 進文字列表記法と同様に赤、緑、青の各成分 (任意では不透明度のアルファチャンネル成分) を用いて色を表現しますが、文字列ではなく CSS 関数 {{cssxref("color_value", "rgb()", "#rgb()")}} で色を定義します。この関数は、入力パラメータとして赤、緑、青の各成分の値と、任意の第 4 引数のアルファチャンネル値を受け取ります。

+#### RGB 関数表記 -

これらの引数の正常値は以下の通りです。

+RGB (赤/緑/青) 関数表記法は、16 進文字列表記法と同様に赤、緑、青の各成分 (任意では不透明度のアルファチャンネル成分) を用いて色を表現しますが、文字列ではなく CSS 関数 {{cssxref("color_value", "rgb()", "#rgb()")}} で色を定義します。この関数は、入力引数として赤、緑、青の各成分の値と、任意の第 4 引数のアルファチャンネル値を受け取ります。 -
-
red、green、blue
-
0 以上 255 以下の {{cssxref("<integer>")}} 型の値か、0% から 100% の {{cssxref("<percentage>")}} 型の値です。
-
alpha
-
アルファチャンネルは、0.0 (完全透過) から 1.0 (完全不透明) の間の数値です。また、 パーセントも指定でき、これは 0% が 0.0 と同じで 100% が 1.0 と同じです。
-
+これらの引数の正常値は以下の通りです。 -

例えば、不透明度 50% の明るい赤は rgb(255, 0, 0, 0.5) や rgb(100%, 0, 0, 50%) のように表現できます。

+- `red`、`green`、`blue` + - : 0 以上 255 以下の {{cssxref("<integer>")}} 型の値か、0% から 100% の {{cssxref("<percentage>")}} 型の値です。 +- `alpha` + - : アルファチャンネルは、0.0 (完全透過) から 1.0 (完全不透明) の間の数値です。また、 パーセントも指定でき、これは 0% が 0.0 と同じで 100% が 1.0 と同じです。 -

HSL 関数表記

+例えば、不透明度 50% の明るい赤は `rgb(255, 0, 0, 0.5)` や `rgb(100%, 0, 0, 50%)` のように表現できます。 -

デザイナーやアーティストは {{interwiki("wikipedia", "HSL and HSV", "HSL")}} (Hue/Saturation/Luminosity) で作業しようとすることがあります。ウェブにおける HSL 色は、HSL 関数表記で表現します。CSS の hsl() 関数の表現方法は、rgb() 関数とよく似ています。

+

HSL 関数表記

-
-
HSL 色円柱 -
図 1. HSL 色円柱 色相は、可視スペクトルの色を表す円形の色相環に沿った位置に基づいて実際の色を定義します。彩度は、灰色の強さ、もしくはその色相で取りうる最も濃い色に対する割合です。輝度 (または明度) の値が高くなると、色は最も暗い色から最も明るい色 (黒から白) へと変化します。画像提供は Wikipedia の SharkD さんより、CC BY-SA 3.0 ライセンスで配布されているものです。
-
-
+デザイナーやアーティストは {{interwiki("wikipedia", "HSL and HSV", "HSL")}} (Hue/Saturation/Luminosity) で作業しようとすることがあります。ウェブにおける HSL 色は、HSL 関数表記で表現します。CSS の `hsl()` 関数の表現方法は、`rgb()` 関数とよく似ています。 + +以下の図は HSL 色円筒を表しています。色相 (Hue) は、可視スペクトルの色を表す円形の色相環に沿った位置に基づいて実際の色を定義します。彩度 (Saturation) は、灰色の強さ、もしくはその色相で取りうる最も濃い色に対する割合です。輝度 (または明度) の値が高くなると、色は最も暗い色から最も明るい色 (黒から白) へと変化します。画像の提供元は、[Wikipedia](https://www.wikipedia.org/) の [SharkD](http://commons.wikimedia.org/wiki/User:SharkD) さんより、[CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0) ライセンスで配布されているものです。 -

HSL カラーの色相 (H) 成分の値は、赤から黄、緑、水、青、マゼンタ (そして 360° で再び赤に戻る) までの角度で、ベースの色を特定します。度 (deg)、ラジアン (rad)、グラジアン (grad)、回転 (turn) など、CSS がサポートする任意の {{cssxref("<angle>")}} 単位で値を指定できます。しかしこれでは、鮮やかさや濁り、色の明るさや暗さを制御できません。

+![HSL 色円筒](640px-hsl_color_solid_cylinder.png) -

色の彩度 (S) 成分は、最終的な色を指定の色相が構成する割合を指定します。残りの輝度 (L) 成分は、灰色の強さを定義します。

+HSL カラーの色相 (H) 成分の値は、赤から黄、緑、水、青、マゼンタ (そして 360° で再び赤に戻る) までの角度で、ベースの色を特定します。度 (`deg`)、ラジアン (`rad`)、グラジアン (`grad`)、回転 (`turn`) など、CSS がサポートする任意の {{cssxref("<angle>")}} 単位で値を指定できます。しかしこれでは、鮮やかさや濁り、色の明るさや暗さを制御できません。 -

以下のように、完璧な絵の具の色を作るかのように考えてみましょう。

+色の彩度 (S) 成分は、最終的な色を指定の色相が構成する割合を指定します。残りの輝度 (L) 成分は、灰色の強さを定義します。 -
    -
  1. ユーザーの画面で表現できる最も強い青など、その色で最も強いベースの絵の具から始めます。これが色相 (H) 要素で、ベースとして使用したい鮮やかな色相環の周りの角度を表す値です。
    2. -
  2. 次に、欲しい色の明るさに対応するグレースケールの絵の具を選びます。非常に明るくて白に近い色にしたいのか、それとも非常に暗くて黒に近い色にしたいのか、それともその中間のどこかにしたいのか。これはパーセンテージで指定し、0% が完全な黒、100% が完全な白となります。(彩度や色相に関係なく)。この値の間には文字通り灰色の領域があります。
    3. -
  3. 灰色の絵の具と完全に鮮やかな色が手に入ったので、これらを混ぜ合わせる必要があります。色の彩度 (S) 成分は、最終的な色のうち完全に鮮やかな色が構成するパーセントを示します。残りは、彩度を表すグレーの絵の具となります。
    4. -
+以下のように、完璧な絵の具の色を作るかのように考えてみましょう。 -

任意でアルファチャンネルを追加して、色を 100% 以下の不透明度にすることもできます。

+1. ユーザーの画面で表現できる最も強い青など、その色で最も強いベースの絵の具から始めます。これが**色相** (H) 要素で、ベースとして使用したい鮮やかな色相環の周りの角度を表す値です。 +2. 次に、欲しい色の明るさに対応するグレースケールの絵の具を選びます。非常に明るくて白に近い色にしたいのか、それとも非常に暗くて黒に近い色にしたいのか、それともその中間のどこかにしたいのか。これはパーセンテージで指定し、0% が完全な黒、100% が完全な白となります。(彩度や色相に関係なく)。この値の間には文字通り灰色の領域があります。 +3. 灰色の絵の具と完全に鮮やかな色が手に入ったので、これらを混ぜ合わせる必要があります。色の彩度 (S) 成分は、最終的な色のうち完全に鮮やかな色が構成するパーセントを示します。残りは、彩度を表すグレーの絵の具となります。 -

こちらは、HSL 表記のサンプル色です。

+任意でアルファチャンネルを追加して、色を 100% 以下の不透明度にすることもできます。 -
- - -

{{EmbedLiveSample("hsl-swatches", 300, 260)}}

-
- -
-

注意として、色相の単位を省略した場合は度 (deg) と見なされます。

-
- -

色の活用

- -

要素に色を適用する CSS プロパティの存在と、色の記述に使用可能な形式が分かったので、これをまとめて色を活用し始めてみましょう。{{anch("着色できる物")}}のリストを見て把握できたと思いますが、CSS で色を付けられる物はたくさんあります。ここでは、{{Glossary("stylesheet", "スタイルシート")}}内で色を使う場合と、{{Glossary("JavaScript")}} コードで要素のスタイルを変更するために色を追加したり変更したりする場合の、2 つの側面から見ていきます。

- -

スタイルシートでの色指定

- -

要素に色を適用する最も簡単な方法は、要素の描画に使用する CSS で色を指定することです。前述のプロパティをすべて使用するわけではありませんが、いくつかの例を見てみましょう。色を使う場所によらず、考え方は同じです。

- -

先にこれからやることの結果を見てから、サンプルを見ていきます。

- -
{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 150)}}
- -

HTML

- -

上記の例を作成するための HTML は、この通りです。

- -
<div class="wrapper">
-  <div class="box boxLeft">
-    <p>
+}
+```
+
+```html
+
+ 
+  
+   
+   
+  
+ 
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
Color in HSL notationExample
hsl(90deg, 100%, 50%) 
hsl(90, 100%, 50%) 
hsl(0.15turn, 50%, 75%) 
hsl(0.15turn, 90%, 75%) 
hsl(0.15turn, 90%, 50%) 
hsl(270deg, 90%, 50%) 

+```
+
+{{EmbedLiveSample("HSL_functional_notation", 300, 260)}}
+
+> **Note:** 色相の単位を省略した場合は度 (`deg`) と見なされます。
+
+## 色の活用
+
+要素に色を適用する CSS プロパティの存在と、色の記述に使用可能な形式が分かったので、これをまとめて色を活用し始めてみましょう。{{anch("着色できる物")}}のリストを見て把握できたと思いますが、CSS で色を付けられる物はたくさんあります。ここでは、{{Glossary("stylesheet", "スタイルシート")}}内で色を使う場合と、{{Glossary("JavaScript")}} コードで要素のスタイルを変更するために色を追加したり変更したりする場合の、2 つの側面から見ていきます。
+
+
スタイルシートでの色指定

+
+要素に色を適用する最も簡単な方法は、要素の描画に使用する CSS で色を指定することです。前述のプロパティをすべて使用するわけではありませんが、いくつかの例を見てみましょう。色を使う場所によらず、考え方は同じです。
+
+先にこれからやることの結果を見てから、サンプルを見ていきます。
+
+{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 150)}}
+
+#### HTML
+
+上記の例を作成するための HTML は、この通りです。
+
+```html
+

+  

+    

       This is the first box.
-    </p>
-  </div>
-  <div class="box boxRight">
-    <p>
+    

+  

+  

+    

       This is the second box.
-    </p>
-  </div>
-</div>
+

+ + +``` -

これは非常にシンプルで、{{HTMLElement("div")}} をコンテンツのラッパーとして使用し、さらに 2 つの <div> で構成しています。

+これはとてもシンプルで、{{HTMLElement("div")}} をコンテンツのラッパーとして使用し、さらに 2 つの `
` で構成しています。 -

魔法はいつも、CSS で起こります。上記の HTML で定義したレイアウトに、色を適用していきます。

+魔法はいつも、CSS で起こります。上記の HTML で定義したレイアウトに、色を適用していきます。 -

CSS

+#### CSS -

上記の結果を作り出す CSS を一つずつ見ていけば、面白い部分も一つずつ見られるでしょう。

+上記の結果を作り出す CSS を一つずつ見ていけば、面白い部分も一つずつ見られるでしょう。 -
.wrapper {
+```css
+.wrapper {
   width: 620px;
   height: 110px;
   margin: 0;
   padding: 10px;
   border: 6px solid mediumturquoise;
-}
+} +``` -

.wrapper クラスは、他のすべてのコンテンツを囲む {{HTMLElement("div")}} にスタイルを割り当てるために使っています。これは {{cssxref("width")}} と {{cssxref("height")}} を使ってコンテナのサイズを決定し、さらに {{cssxref("margin")}} と {{cssxref("padding")}} を使っています。

+`.wrapper` クラスは、他のすべてのコンテンツを囲む {{HTMLElement("div")}} にスタイルを割り当てるために使っています。これは {{cssxref("width")}} と {{cssxref("height")}} を使ってコンテナのサイズを決定し、さらに {{cssxref("margin")}} と {{cssxref("padding")}} を使っています。 -

ここでの論述でさらに興味深いのは、{{cssxref("border")}} プロパティで要素の縁に境界線を設定していることです。この境界線は幅 6 ピクセルの実線で、色は mediumturquoise です。

+ここでの論述でさらに興味深いのは、{{cssxref("border")}} プロパティで要素の縁に境界線を設定していることです。この境界線は幅 6 ピクセルの実線で、色は `mediumturquoise` です。 -

2 つの色付きボックスには共通のプロパティがいくつかありますので、そのプロパティを定義するクラス .box を作成します。

+2 つの色付きボックスには共通のプロパティがいくつかありますので、そのプロパティを定義するクラス `.box` を作成します。 -
.box {
+```css
+.box {
   width: 290px;
   height: 100px;
   margin: 0;
@@ -291,90 +280,92 @@ th {
   display: flex;
   justify-content: center;
   align-items: center;
-}
+} +``` -

簡単に言えば、.box は各ボックスのサイズとその中で使用するフォントの構成を確立しています。また、CSS フレックスボックスも利用して簡単に各ボックスのコンテンツを中央揃えしています。{{cssxref("display", "display: flex")}} で flex モードを有効にし、{{cssxref("justify-content")}} と {{cssxref("align-items")}} を center に設定しています。あとは、2 つのボックスそれぞれに異なるプロパティを定義するクラスを作るだけです。

+簡単に言えば、`.box` は各ボックスのサイズとその中で使用するフォントの構成を確立しています。また、[CSS フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout)も利用して簡単に各ボックスのコンテンツを中央揃えしています。{{cssxref("display", "display: flex")}} で `flex` モードを有効にし、{{cssxref("justify-content")}} と {{cssxref("align-items")}} を `center` に設定しています。あとは、2 つのボックスそれぞれに異なるプロパティを定義するクラスを作るだけです。 -
.boxLeft {
+```css
+.boxLeft {
   float: left;
   background-color: rgb(245, 130, 130);
   outline: 2px solid darkred;
-}
+} +``` -

.boxLeft クラスは、左側のボックスのスタイルとして巧みに使われ、以下のようにボックスを左側に浮かせて色を設定しています。

+`.boxLeft` クラスは、左側のボックスのスタイルとして巧みに使われ、以下のようにボックスを左側に浮かせて色を設定しています。 -
    -
  • CSS {{cssxref("background-color")}} プロパティを rgb(245, 130, 130) の値に変更することで、ボックスの背景色を設定しています。
    • -
  • ボックスに輪郭線を定義しています。一般的によく使われる border とは異なり、{{cssxref("outline")}} はレイアウトに全く影響しません。この輪郭線は、2 ピクセルの太さの、濃い赤色の実線です。色の指定に darkred キーワードを使用していることにご注意ください。
    • -
  • 注意として、テキストの色は明示的に設定していません。この場合 {{cssxref("color")}} の値はそれを含んだ最も近い要素から継承されます。すなわち、デフォルトである黒色です。
    • -
+- CSS {{cssxref("background-color")}} プロパティを `rgb(245, 130, 130)` の値に変更することで、ボックスの背景色を設定しています。 +- ボックスに輪郭線を定義しています。一般的によく使われる `border` とは異なり、{{cssxref("outline")}} はレイアウトに全く影響しません。この輪郭線は、2 ピクセルの太さの、濃い赤色の実線です。色の指定に `darkred` キーワードを使用していることにご注意ください。 +- 注意として、テキストの色は明示的に設定していません。この場合 {{cssxref("color")}} の値はそれを含んだ最も近い要素から継承されます。すなわち、既定である黒色です。 -
.boxRight {
+```css
+.boxRight {
   float: right;
   background-color: hsl(270deg, 50%, 75%);
   outline: 4px dashed rgb(110, 20, 120);
   color: hsl(0deg, 100%, 100%);
   text-decoration: underline wavy #88ff88;
   text-shadow: 2px 2px 3px black;
-}
+} +``` -
-

こちらを Safari で表示しようとしても、正常に表示されません。なぜなら、Safari は text-decoration: underline wavy #88ff88 をサポートしていないからです。

-
+> **Note:** こちらを Safari で表示しようとしても、正常に表示されません。なぜなら、Safari は `text-decoration: underline wavy #88ff88` をサポートしていないからです。 -

最後に、.boxRight クラスで右に描画されるボックス固有のプロパティを記述します。これは、先のボックスの隣に表示されるように、ボックスを右に浮かす設定をしています。そして、以下のように色を設定しています。

+最後に、`.boxRight` クラスで右に描画されるボックス固有のプロパティを記述します。これは、先のボックスの隣に表示されるように、ボックスを右に浮かす設定をしています。そして、以下のように色を設定しています。 -
    -
  • background-color は hsl(270deg, 50%, 75%) で指定した HSL 値を設定しています。この色は中くらいの紫色です。
    • -
  • ボックスの outline は、 ボックスを太さ 4 ピクセルの破線で囲み、色はやや濃い紫色 (rgb(110, 20, 120)) となるように指定しています。
    • -
  • 前景 (テキスト) の色は、{{cssxref("color")}} プロパティを hsl(0deg, 100%, 100%) にすることで指定してあります。これは白色を指定する方法のうちの一つです。
    • -
  • {{cssxref("text-decoration")}} でテキストの下に緑の波線を引いています。
    • -
  • 最後に、{{cssxref("text-shadow")}} を使用してテキストに少しだけ影をつけています。この color 引数は black にしています。
    • -
+- `background-color` は `hsl(270deg, 50%, 75%)` で指定した HSL 値を設定しています。この色は中くらいの紫色です。 +- ボックスの `outline` は、 ボックスを太さ 4 ピクセルの破線で囲み、色はやや濃い紫色 (`rgb(110, 20, 120)`) となるように指定しています。 +- 前景 (テキスト) の色は、{{cssxref("color")}} プロパティを `hsl(0deg, 100%, 100%)` にすることで指定してあります。これは白色を指定する方法のうちの一つです。 +- {{cssxref("text-decoration")}} でテキストの下に緑の波線を引いています。 +- 最後に、{{cssxref("text-shadow")}} を使用してテキストに少しだけ影をつけています。この `color` 引数は `black` にしています。 -

ユーザーに色を選択させる

+

ユーザーに色を選択させる

-

ウェブサイト上では、ユーザーに色を選択させる必要がある場合があります。カスタマイズ可能なユーザーインターフェースがある場合や、お絵かきアプリを実装している場合などが考えられるでしょう。編集可能なテキストがあってユーザーにテキストの色を選択させる、あるいはアプリでフォルダやアイテムに色を割り当てることができる場合があるかもしれません。古くは、独自の{{interwiki("wikipedia", "カラーピッカー")}}を実装する必要がありましたが、HTML では {{HTMLElement("input")}} 要素を通じて {{htmlattrxref("type", "input")}} 属性の値を "color" にすれば、ブラウザが色選択を提供できるようになりました。

+ウェブサイト上では、ユーザーに色を選択させる必要がある場合があります。カスタマイズ可能なユーザーインターフェースがある場合や、お絵かきアプリを実装している場合などが考えられるでしょう。編集可能なテキストがあってユーザーにテキストの色を選択させる、あるいはアプリでフォルダーやアイテムに色を割り当てることができる場合があるかもしれません。古くは、独自の{{interwiki("wikipedia", "カラーピッカー")}}を実装する必要がありましたが、HTML では {{HTMLElement("input")}} 要素を通じて {{htmlattrxref("type", "input")}} 属性の値を `"color"` にすれば、ブラウザーがカラーピッカーを提供できるようになりました。 -

<input> 要素は、先で取り上げた {{anch("Hexadecimal string notation", "16進数文字列表記")}} でのみ色を表します。

+`` 要素は、先で取り上げた [16 進数文字列表記](#16_進数文字列表記)でのみ色を表します。 -

例: 色の選択

+

例: 色の選択

-

ユーザーが色を選択できる簡単な例を見てみましょう。ユーザーが色を調整すると、サンプルの周囲の境界線が新しい色を反映するように変化します。色を選び終えると、カラーピッカーの値が表示されます。

+ユーザーが色を選択できる簡単な例を見てみましょう。ユーザーが色を調整すると、サンプルの周囲の境界線が新しい色を反映するように変化します。色を選び終えると、カラーピッカーの値が表示されます。 -

{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}

+{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}} -
-

macOS では、カラーピッカーウインドウを閉じると色の選択が完了したことになります。

-
+> **Note:** macOS では、カラーピッカーウインドウを閉じると色の選択が完了したことになります。 -

HTML

+#### HTML -

この HTML は、({{HTMLElement("label")}} 要素で作成したラベル付きの) カラーピッカーコントロールと、空の段落要素 ({{HTMLElement("p")}}) を含むボックスを作成します。この段落要素に JavaScript コードからテキストを出力する予定です。

+この HTML は、({{HTMLElement("label")}} 要素で作成したラベル付きの) カラーピッカーコントロールと、空の段落要素 ({{HTMLElement("p")}}) を含むボックスを作成します。この段落要素に JavaScript コードからテキストを出力する予定です。 -
<div id="box">
-  <label for="colorPicker">Border color:</label>
-  <input type="color" value="#8888ff" id="colorPicker">
-  <p id="output"></p>
-</div>
+```html +
+ + +

+
+``` -

CSS

+#### CSS -

この CSS では、ボックスのサイズと見た目の基本的なスタイルを設定しています。境界線には 2 ピクセルの幅を設定していますが、色は下記の JavaScript のおかげで変化します。

+この CSS では、ボックスのサイズと見た目の基本的なスタイルを設定しています。境界線には 2 ピクセルの幅を設定していますが、色は下記の JavaScript のおかげで変化します。 -
#box {
+```css
+#box {
   width: 500px;
   height: 200px;
   border: 2px solid rgb(245, 220, 225);
   padding: 4px 6px;
   font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
-}
+} +``` -

JavaScript

+#### JavaScript -

このスクリプトは、境界線の開始色をカラーピッカーの値と同じに更新するタスクを処理します。<input type="color"> 要素からの入力をハンドルするために、2 つのイベントハンドラを追加しています。

+このスクリプトは、境界線の開始色をカラーピッカーの値と同じに更新するタスクを処理します。[``](/ja/docs/Web/HTML/Element/input/color) 要素からの入力を処理するために、2 つのイベントハンドラーを追加しています。 -
let colorPicker = document.getElementById("colorPicker");
+```js
+let colorPicker = document.getElementById("colorPicker");
 let box = document.getElementById("box");
 let output = document.getElementById("output");
 
@@ -386,131 +377,114 @@ colorPicker.addEventListener("input", function(event) {
 
 colorPicker.addEventListener("change", function(event) {
   output.innerText = "Color set to " + colorPicker.value + ".";
-}, false);
+}, false); +``` -

この {{event("input")}} イベントは要素の値が変更されるたびに送信されます。このイベントが来るたびに、ボックスの境界線の色をカラーピッカーの現在値に合わせます。

+この {{domxref("HTMLElement/input_event", "input")}} イベントは要素の値が変更されるたびに送信されます。このイベントが来るたびに、ボックスの境界線の色をカラーピッカーの現在値に合わせます。 -

カラーピッカーの値が確定したときに、{{event("change")}} イベントを受信します。ID が "output" の <p> 要素の内容を、最後に選択した色を表す文字列に設定することで応答します。

+カラーピッカーの値が確定したときに、{{domxref("HTMLElement/change_event", "change")}} イベントを受信します。ID が `"output"` である `

` 要素の内容を、最後に選択した色を表す文字列に設定することで応答します。 -

賢く色を使う

+## 賢く色を使う -

ウェブサイトのデザインで正しい色選びをする際には、芸術、デザイン、少なくとも基本的な色理論に精通していないと、格段に複雑な工程となるでしょう。間違った色の選択は、サイトが醜くなったり、さらに悪いことにコントラストや相反する色の問題でコンテンツが読めなくなってしまうことがあります。また、間違った色を使用してしまうことで、特定の視覚的問題、特に色覚異常を持つ人々がコンテンツを全く利用できなくなる恐れがあります。

+ウェブサイトのデザインで正しい色選びをする際には、芸術、デザイン、少なくとも基本的な色理論に精通していないと、格段に複雑な工程となるでしょう。間違った色の選択は、サイトが醜くなったり、さらに悪いことにコントラストや相反する色の問題でコンテンツが読めなくなってしまうことがあります。また、間違った色を使用してしまうことで、特定の視覚的問題、特に色覚異常を持つ人々がコンテンツを全く利用できなくなる恐れがあります。 -

適切な色を見つける

+### 適切な色を見つける -

何らかの芸術やデザインを触れずに、丁度よく正しい色を思い付くことは難しいでしょう。幸いなことに、あなたの手助けになりえる便利なツールがあります。これらは意思決定を助ける良きデザイナーを持つことには代わりませんが、火付け役にはなるでしょう。

+何らかの芸術やデザインを触れずに、丁度よく正しい色を思い付くことは難しいでしょう。幸いなことに、あなたの手助けになりえる便利なツールがあります。これらは意思決定を助ける良きデザイナーを持つことには代わりませんが、火付け役にはなるでしょう。 -

ベースカラー

+#### ベースカラー -

最初のステップは、ベースカラーを選ぶことです。これは、何らかの形であなたのウェブサイトやサイトの主題を定義する色です。緑がお茶を連想させるように、また青は空や海と関係があるように考えるところから、サイトを表すのに適切なベースカラー選びを始めると良いでしょう。ベースカラーを選ぶ方法はたくさんありますが、以下のようないくつかのアイデアがあります。

+最初のステップは、**ベースカラー**を選ぶことです。これは、何らかの形であなたのウェブサイトやサイトの主題を定義する色です。緑がお茶を連想させるように、また青は空や海と関係があるように考えるところから、サイトを表すのに適切なベースカラー選びを始めると良いでしょう。ベースカラーを選ぶ方法はたくさんありますが、以下のようないくつかのアイデアがあります。 -
    -
  • 商品やアイデアで識別される既存の色や、伝えたい感情を代表する色など、コンテンツのトピックに自然に関連する色。
    • -
  • コンテンツが表す物に関連付いたイメージから来る色。特定の項目や製品に関するウェブサイトを作成する場合は、それらに物理的に存在する色を選びます。
    • -
  • ウェブサイトを探して既存のカラーパレットや画像をたくさん見ることで、インスピレーションを得ます。
    • -
+- 商品やアイデアで識別される既存の色や、伝えたい感情を代表する色など、コンテンツのトピックに自然に関連する色。 +- コンテンツが表す物に関連付いたイメージから来る色。特定の項目や製品に関するウェブサイトを作成する場合は、それらに物理的に存在する色を選びます。 +- ウェブサイトを探して既存のカラーパレットや画像をたくさん見ることで、インスピレーションを得ます。 -

ベースカラーを決める際には、ウェブコンテンツから色を選択できるブラウザ拡張機能が特に便利です。拡張機能の中には、こういった作業を支援するために特別に設計されたものもあります。例えば、ウェブサイトの ColorZilla はウェブから色を選ぶためのスポイトツールの拡張機能 (Chrome / Firefox) を提供しています。また、様々なサイズの領域やページの選択すた領域のピクセルの色の平均を取ることもできます。

+ベースカラーを決める際には、ウェブコンテンツから色を選択できるブラウザー拡張機能が特に便利です。拡張機能の中には、こういった作業を支援するために特別に設計されたものもあります。例えば、ウェブサイトの [ColorZilla](https://www.colorzilla.com/) はウェブから色を選ぶためのスポイトツールの拡張機能 ([Chrome](https://www.colorzilla.com/chrome) / [Firefox](https://www.colorzilla.com/firefox)) を提供しています。また、様々なサイズの領域やページの選択すた領域のピクセルの色の平均を取ることもできます。 -
-

色の平均を取る利点は、一見同じ色に見えるものが、実際には驚くほど多様な数の関連色が協調して使用され、目的の効果を生み出すために混色されていることが多いためです。これらのピクセル内から 1 つだけ選んでしまうと、それだけでは非常に場違いな色になることがあります。

-
+> **Note:** 色の平均を取る利点は、一見同じ色に見えるものが、実際には驚くほど多様な数の関連色が協調して使用され、目的の効果を生み出すために混色されていることが多いためです。これらのピクセル内から 1 つだけ選んでしまうと、それだけでは非常に場違いな色になることがあります。 -

パレットを豊かにする

+#### パレットを豊かにする -

ベースカラーが決まれば、ベースカラーに色理論を適用して、ベースカラーと一緒に使用する適切なカラーパレットを構築します。さらなる適切な色の決定に役立つオンラインツールもたくさんあります。これらの多くはフィルターをかけた色表示もサポートしているので、さまざまな色盲の人がどう見えるかを確認できます。これがなぜ重要なのかについては、{{anch("Color and accessibility", "色とアクセシビリティ")}}で簡単に説明しています。

+ベースカラーが決まれば、ベースカラーに色理論を適用して、ベースカラーと一緒に使用する適切なカラーパレットを構築します。さらなる適切な色の決定に役立つオンラインツールもたくさんあります。これらの多くはフィルターをかけた色表示もサポートしているので、さまざまな色盲の人がどう見えるかを確認できます。これがなぜ重要なのかについては、{{anch("Color and accessibility", "色とアクセシビリティ")}}で簡単に説明しています。 -

以下はいくつかの例 (このリストが最終改訂された時点では、すべて無料で使用できるもの) です。

+以下はいくつかの例 (このリストが最終改訂された時点では、すべて無料で使用できるもの) です。 - +- [MDN のカラーピッカーツール](/ja/docs/Web/CSS/CSS_Colors/Color_picker_tool) +- [Paletton](http://paletton.com) +- [Adobe Color CC オンライン色相環](https://color.adobe.com/create/color-wheel) -

パレットをデザインする際には、これらのツールが典型的に生成する色に加えて、白 (またはほぼ白)、黒 (またはほぼ黒)、グレーの濃淡などの中核となる中性的な色を加える必要があることも念頭に置いてください。

+パレットをデザインする際には、これらのツールが典型的に生成する色に加えて、白 (またはほぼ白)、黒 (またはほぼ黒)、グレーの濃淡などの中核となる中性的な色を加える必要があることも念頭に置いてください。 -
-

通常は、可能な限り色の数を少なくした方がはるかに良くなります。ページ上の全てに色を加えるのではなく色をアクセントに使うと、内容が読みやすくなり使った色のインパクトが増します。

-
+> **Note:** 通常は、可能な限り色の数を少なくした方がはるかに良くなります。ページ上の全てに色を加えるのではなく色をアクセントに使うと、内容が読みやすくなり使った色のインパクトが増します。 -

色理論に関する参考文献

+### 色理論に関する参考文献 -

色理論の全面的な履修はこの記事の範囲を超えていますが、色理論に関する記事も豊富に用意されており、最寄りの学校や大学にも講座があるでしょうから、ぜひ参考にしてみてください。色理論に関する有用なリソースをいくつかご紹介します。

+色理論の全面的な履修はこの記事の範囲を超えていますが、色理論に関する記事も豊富に用意されており、最寄りの学校や大学にも講座があるでしょうから、ぜひ参考にしてみてください。色理論に関する有用なリソースをいくつかご紹介します。 -
-
Color Science (カーンアカデミー と ピクサー の共著)
-
色とは何か、色の認識のされ方、色を使ったアイデアの表現方法などの概念を紹介するオンライン講座です。ピクサーのアーティストやデザイナーが講師を務めています。
-
Wikipedia の {{interwiki("wikipedia", "Color theory")}}
-
ウィキペディアの色理論に関する記事で、技術的観点の素晴らしい情報がたくさんあります。色選びの参考にはなりませんが、有用な情報が満載です。
-
+- [Color Science](https://www.khanacademy.org/partner-content/pixar/color) ([カーンアカデミー](https://www.khanacademy.org/) と [ピクサー](https://www.pixar.com/) の共著) + - : 色とは何か、色の認識のされ方、色を使ったアイデアの表現方法などの概念を紹介するオンライン講座です。ピクサーのアーティストやデザイナーが講師を務めています。 +- Wikipedia の {{interwiki("wikipedia", "en:Color theory")}} + - : ウィキペディアの色理論に関する記事で、技術的観点の素晴らしい情報がたくさんあります。色選びの参考にはなりませんが、有用な情報が満載です。 -

色とアクセシビリティ

+### 色とアクセシビリティ -

色が {{Glossary("accessibility", "アクセシビリティ")}} の問題となることがあります。色の不適切及び不注意な使用は、利用者の何割かが適切に使用できないウェブサイトやアプリになり、トラフィックの損失、ビジネスの損失、さらには広報の問題につながる可能性があります。そのため、色の使い方を慎重に検討することは重要です。

+色が{{Glossary("accessibility", "アクセシビリティ")}}の問題となることがあります。色の不適切および不注意な使用は、利用者の何割かが適切に使用できないウェブサイトやアプリになり、トラフィックの損失、ビジネスの損失、さらには広報の問題につながる可能性があります。そのため、色の使い方を慎重に検討することは重要です。 -

少なくとも {{interwiki("wikipedia", "色覚異常")}} についての基礎的な研究はしておいた方が良いでしょう。いくつかの種類がありますが、最も一般的なのは赤緑色覚異常で、赤と緑の色を区別しづらいものです。他にも、特定の色の違いを見分けることができないものから、全く色が見えないものまであります。

+少なくとも{{interwiki("wikipedia", "色覚異常")}}についての基礎的な調査はしておいた方が良いでしょう。いくつかの種類がありますが、最も一般的なのは赤緑色覚異常で、赤と緑の色を区別しづらいものです。他にも、特定の色の違いを見分けることができないものから、全く色が見えないものまであります。 -
-

最も重要なルール: 色だけで情報を知る手段を使ってはいけません。例えば、ある操作の成功や失敗を示すために、図形の色を白から緑、失敗を示すために赤に変えた場合、赤緑の色盲のユーザーはサイトを適切に利用できません。代わりにテキストと色を併用すれば、誰もが起こったことを理解できるようになるでしょう。

-
+> **Note:** 最も重要なルール: 色だけで情報を知る手段を使ってはいけません。例えば、ある操作の成功や失敗を示すために、図形の色を白から緑、失敗を示すために赤に変えた場合、赤緑の色盲のユーザーはサイトを適切に利用できません。代わりにテキストと色を併用すれば、誰もが起こったことを理解できるようになるでしょう。 -

色覚異常については、以下の記事をご覧ください。

+色覚異常については、以下の記事をご覧ください。 - +- [Medline Plus: Color Blindness](https://medlineplus.gov/colorblindness.html) (アメリカ国立衛生研究所) +- [American Academy of Ophthamology: What Is Color Blindness?](https://www.aao.org/eye-health/diseases/what-is-color-blindness) +- [Color Blindness & Web Design](https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html) (Usability.gov: アメリカ保健福祉省) -

パレットデザインの例

+### パレットデザインの例 -

サイトの適切なカラーパレットを選ぶにあたって、簡単な例を考えてみましょう。火星で開かれる新しいゲームのウェブサイトを構築すると想像してみてください。そこで、火星の写真を Google 検索してみましょう。火星のカラーリングの良い例がたくさんあるはずです。私たちは慎重にモックアップや映画の写真を避け、火星で撮影された写真を使うことにしました。そして、このゲームは惑星の表面で行われるため、人類が過去数十年にわたって表面に滞在させている火星着陸機の一つが撮影した写真を使用することにしました。カラーピッカーツールを使って、この選んだ色のサンプルを採ります。

+サイトの適切なカラーパレットを選ぶにあたって、簡単な例を考えてみましょう。火星で開かれる新しいゲームのウェブサイトを構築すると想像してみてください。そこで、[火星の写真を Google 検索](https://www.google.com/search?q=Mars&tbm=isch)してみましょう。火星のカラーリングの良い例がたくさんあるはずです。私たちは慎重にモックアップや映画の写真を避け、火星で撮影された写真を使うことにしました。そして、このゲームは惑星の表面で行われるため、人類が過去数十年にわたって表面に滞在させている火星着陸機の一つが撮影した写真を使用することにしました。カラーピッカーツールを使って、この選んだ色のサンプルを採ります。 -

スポイトツールを使って好みの色を特定し、件の色は #D79C7A であることを確認しました。これは火星表面のステレオタイプな錆びたオレンジレッドの色です。

+スポイトツールを使って好みの色を特定し、件の色は `#D79C7A` であることを確認しました。これは火星表面のステレオタイプな錆びたオレンジレッドの色です。 -

ベースカラーを選択したら、パレットを構築する必要があります。そこで、Paletton を使って他の色を考えてみることにしました。Plaetton を開くと、以下のような画面が出てきます。

+ベースカラーを選択したら、パレットを構築する必要があります。そこで、[Paletton](http://www.paletton.com/) を使って他の色を考えてみることにしました。Paletton を開くと、以下のような画面が出てきます。 -

Right after loading Paletton.

+![Paletton を読み込んだ直後。](paletton1.png) -

次に、ツールの左下隅にある "Base RGB" の欄に色の 16 進数コード (D79C7A) を入力します。

+次に、ツールの左下隅にある "Base RGB" の欄に色の 16 進数コード (`D79C7A`) を入力します。 -

After entering base color

+![ベースカラーの入力後](paletton2.png) -

火星の写真から選んだ色をベースにした単色パレットが出てきました。何らかの理由で関連色がたくさん必要な場合は、そういった色も良い色になる可能性はあります。しかし、私たちが本当に欲しいのはアクセントカラー、ベースカラーに添えて目立つ色です。これを見つけるには、パレットの種類の選択メニューにある "add complementary" のトグル (現在は "Monochromatic") をクリックします。右下のアクセントカラーをクリックすると、補色が #508D7C であることが計算されます。

+火星の写真から選んだ色をベースにした単色パレットが出てきました。何らかの理由で関連色がたくさん必要な場合は、そういった色も良い色になる可能性はあります。しかし、私たちが本当に欲しいのはアクセントカラー、ベースカラーに添えて目立つ色です。これを見つけるには、パレットの種類の選択メニューにある "add complementary" のトグル (現在は "Monochromatic") をクリックします。右下のアクセントカラーをクリックすると、補色が `#508D7C` であることが計算されます。 -

Now with complementary colors included.

+![補色も含まれるようになりました。](paletton3.png) -

提案された色が気に入らない場合は、配色を変更して、もっと良さそうな色を確かめることができます。例えば、提案の緑青色が気に入らない場合、トライアド配色のアイコンをクリックすれば以下のように表示されます。

+提案された色が気に入らない場合は、配色を変更して、もっと良さそうな色を確かめることができます。例えば、提案の緑青色が気に入らない場合、トライアド配色のアイコンをクリックすれば以下のように表示されます。 -

Triad color scheme selected

+![トライアド配色を選択](paletton4.png) -

右上のあの灰色っぽい青はなかなか良さそうですね。クリックすると、#556E8D でした。これをアクセントカラーとして、見出しやタブの強調表示のようにものを目立たせる目的で控えめに使用します。

+右上のあの灰色っぽい青はなかなか良さそうですね。クリックすると、`#556E8D` でした。これをアクセントカラーとして、見出しやタブの強調表示のようにものを目立たせる目的で控えめに使用します。 -

Triad color scheme selected

+![トライアド配色を選択](paletton-color-detail.png) -

これで、ベースカラーとアクセントカラーができました。さらに、グラデーションなどが必要な場合に備えて、それぞれの色の補色をいくつか用意します。これらの色を後から利用できるように、何らかの形式で出力しておきます。

+これで、ベースカラーとアクセントカラーができました。さらに、グラデーションなどが必要な場合に備えて、それぞれの色の補色をいくつか用意します。これらの色を後から利用できるように、何らかの形式で出力しておきます。 -

これらの色を決めてなお、適切な中性的カラーも選択する必要があります。一般的なデザインでは、テキストが鮮明で読みやすい十分なコントラストがありつつ、目に厳しいほどのコントラストではないというスイートスポットを見つけようとします。どちらかの方に行き過ぎてしまいがちなので、色を選んで使用例に着手したら、必ずフィードバックをもらうようにしましょう。コントラストが低すぎるとテキストが背景に洗い流されて読めなくなりがちです。またコントラストが高すぎると、ユーザーはサイトを見ているだけで、見栄えが悪く不愉快に感じるでしょう。

+これらの色を決めてなお、適切な中間的な色も選択する必要があります。一般的なデザインでは、テキストが鮮明で読みやすい十分なコントラストがありつつ、目に厳しいほどのコントラストではないというスイートスポットを見つけようとします。どちらかの方に行き過ぎてしまいがちなので、色を選んで使用例に着手したら、必ずフィードバックをもらうようにしましょう。コントラストが低すぎるとテキストが背景に洗い流されて読めなくなりがちです。またコントラストが高すぎると、ユーザーはサイトを見ているだけで、見栄えが悪く不愉快に感じるでしょう。 -

色、背景、コントラスト、印刷

+### 色、背景、コントラスト、印刷 -

画面上では良いように見えるものが、紙の上では全く違って見えるかもしれません。さらに、往々にしてインクは高価なものです。ユーザーがページを印刷している場合、重要なのはテキストであるにも関わらず、背景すべてが貴重なインクを使い切るわけにはいきません。ほとんどのブラウザはデフォルトで、ドキュメント印刷時に背景画像を除きます。

+画面上では良いように見えるものが、紙の上では全く違って見えるかもしれません。さらに、往々にしてインクは高価なものです。ユーザーがページを印刷している場合、重要なのはテキストであるにも関わらず、背景すべてが貴重なインクを使い切るわけにはいきません。ほとんどのブラウザーは既定で、文書印刷時に背景画像を除きます。 -

背景色や画像が慎重に選択されている場合や、背景がコンテンツの有用性に決定的な影響を与える場合、CSS {{cssxref("color-adjust")}} プロパティを使用して、コンテンツの外観を調整しないようにブラウザに指示できます。

+背景色や画像が慎重に選択されている場合や、背景がコンテンツの有用性に決定的な影響を与える場合、CSS {{cssxref("color-adjust")}} プロパティを使用して、コンテンツの外観を調整しないようにブラウザーに指示できます。 -

color-adjust、economy のデフォルト値は、ブラウザが必要に応じて外観を変更することができるかどうかを示します。ブラウザはドキュメントを描画する出力デバイスの種類に応じて、コンテンツの読みやすさや印刷の経済効率を最適化しようとします。

+`color-adjust`、`economy` の既定値は、ブラウザーが必要に応じて外観を変更することができるかどうかを示します。ブラウザーは文書を描画する出力機器の種類に応じて、コンテンツの読みやすさや印刷の経済効率を最適化しようとします。 -

color-adjust を exact にすると、色や画像があった場合でも、それを使用することで適した動作の要素になる特別なデザインであることを、ブラウザに伝えられます。これを設定すると、ブラウザは要素の外観に手を加えることなく、CSS で指定された通りに要素を描画します。

+`color-adjust` を `exact` にすると、色や画像があった場合でも、それを使用することで適した動作の要素になる特別なデザインであることを、ブラウザーに伝えられます。これを設定すると、ブラウザーは要素の外観に手を加えることなく、CSS で指定された通りに要素を描画します。 -
-

注意: color-adjust: exact を与えても CSS がその通りに使用されるとは限りません。ブラウザ出力を変更するユーザー設定 (印刷ダイアログボックスの「背景をプリントしない」チェックボックスなど) が提供されている場合、color-adjust の値はそれによって上書きされます。

-
+> **Note:** `color-adjust: exact` を与えても CSS がその通りに使用されるとは限りません。ブラウザー出力を変更するユーザー設定 (印刷ダイアログボックスの「背景を印刷しない」チェックボックスなど) が提供されている場合、`color-adjust` の値はそれによって上書きされます。 -

関連情報

+## 関連情報 - +- [グラフィックの描画](/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) +- [ウェブのグラフィック](/ja/docs/Web/Guide/Graphics) +- [MDN のカラーピッカーツール](/ja/docs/Web/CSS/CSS_Colors/Color_picker_tool) -- cgit v1.2.3-54-g00ecf