From f1fb98fc3f8d40a86cb6be0e185d0ba5a2b6eefa Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 30 Oct 2021 01:13:42 +0900 Subject: CSS Color モジュールの文書を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/color-adjust/index.html | 123 - files/ja/web/css/color-adjust/index.md | 123 + files/ja/web/css/color/index.html | 158 - files/ja/web/css/color/index.md | 158 + files/ja/web/css/color_value/index.html | 1537 ---------- files/ja/web/css/color_value/index.md | 1537 ++++++++++ files/ja/web/css/css_color/index.html | 111 - files/ja/web/css/css_color/index.md | 111 + .../css/css_colors/color_picker_tool/index.html | 3241 -------------------- .../web/css/css_colors/color_picker_tool/index.md | 3241 ++++++++++++++++++++ files/ja/web/css/opacity/index.html | 152 - files/ja/web/css/opacity/index.md | 152 + files/ja/web/html/applying_color/index.html | 516 ---- files/ja/web/html/applying_color/index.md | 516 ++++ 14 files changed, 5838 insertions(+), 5838 deletions(-) delete mode 100644 files/ja/web/css/color-adjust/index.html create mode 100644 files/ja/web/css/color-adjust/index.md delete mode 100644 files/ja/web/css/color/index.html create mode 100644 files/ja/web/css/color/index.md delete mode 100644 files/ja/web/css/color_value/index.html create mode 100644 files/ja/web/css/color_value/index.md delete mode 100644 files/ja/web/css/css_color/index.html create mode 100644 files/ja/web/css/css_color/index.md delete mode 100644 files/ja/web/css/css_colors/color_picker_tool/index.html create mode 100644 files/ja/web/css/css_colors/color_picker_tool/index.md delete mode 100644 files/ja/web/css/opacity/index.html create mode 100644 files/ja/web/css/opacity/index.md delete mode 100644 files/ja/web/html/applying_color/index.html create mode 100644 files/ja/web/html/applying_color/index.md (limited to 'files') diff --git a/files/ja/web/css/color-adjust/index.html b/files/ja/web/css/color-adjust/index.html deleted file mode 100644 index bbc74dba8d..0000000000 --- a/files/ja/web/css/color-adjust/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: color-adjust -slug: Web/CSS/color-adjust -tags: - - Adjusting Colors - - CSS - - CSS Colors - - CSS Property - - HTML Colors - - HTML Styles - - Layout - - Non-standard - - Reference - - Styling HTML - - Styling text - - Web - - color-adjust - - 'recipe:css-property' -translation_of: Web/CSS/color-adjust ---- -
{{CSSRef}}
- -

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

- -

構文

- -
color-adjust: economy;
-color-adjust: exact;
- -

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

- -

値

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

使用上の注意

- -

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

- - - -

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

- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

低コントラストの維持

- -

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

- -

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

- -
<div class="my-box">
-  <p>Need more contrast!</p>
-</div>
- -

結果

- -

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

- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/color-adjust/index.md b/files/ja/web/css/color-adjust/index.md new file mode 100644 index 0000000000..bbc74dba8d --- /dev/null +++ b/files/ja/web/css/color-adjust/index.md @@ -0,0 +1,123 @@ +--- +title: color-adjust +slug: Web/CSS/color-adjust +tags: + - Adjusting Colors + - CSS + - CSS Colors + - CSS Property + - HTML Colors + - HTML Styles + - Layout + - Non-standard + - Reference + - Styling HTML + - Styling text + - Web + - color-adjust + - 'recipe:css-property' +translation_of: Web/CSS/color-adjust +--- +
{{CSSRef}}
+ +

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

+ +

構文

+ +
color-adjust: economy;
+color-adjust: exact;
+ +

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

+ +

値

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

使用上の注意

+ +

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

+ + + +

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

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

低コントラストの維持

+ +

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

+ +

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

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

結果

+ +

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

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/color/index.html b/files/ja/web/css/color/index.html deleted file mode 100644 index a97a3e0f78..0000000000 --- a/files/ja/web/css/color/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: color -slug: Web/CSS/color -tags: - - CSS - - CSS Property - - CSS テキスト - - CSS プロパティ - - CSS 色 - - HTML 整形 - - Layout - - Reference - - Web -translation_of: Web/CSS/color ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/color.html")}}
- - - -

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

- -

構文

- -
/* キーワード値 */
-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);
-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);
-color: hsla(30 100% 50% / 0.6);
-color: hsl(30.0 100% 50% / 60%);
-color: hsla(30.2 100% 50% / 60%);
-
-/* グローバル値 */
-color: inherit;
-color: initial;
-color: unset;
-
- -

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

- -

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

- -

値

- -
-
{{cssxref("<color>")}}
-
要素のテキストや装飾部分の色を設定します。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

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

- -
p { color: red; }
-p { color: #f00; }
-p { color: #ff0000; }
-p { color: rgb(255,0,0); }
-p { color: rgb(100%, 0%, 0%); }
-p { color: hsl(0, 100%, 50%); }
-
-/* 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")}}

- -

関連情報

- - diff --git a/files/ja/web/css/color/index.md b/files/ja/web/css/color/index.md new file mode 100644 index 0000000000..a97a3e0f78 --- /dev/null +++ b/files/ja/web/css/color/index.md @@ -0,0 +1,158 @@ +--- +title: color +slug: Web/CSS/color +tags: + - CSS + - CSS Property + - CSS テキスト + - CSS プロパティ + - CSS 色 + - HTML 整形 + - Layout + - Reference + - Web +translation_of: Web/CSS/color +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/color.html")}}
+ + + +

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

+ +

構文

+ +
/* キーワード値 */
+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);
+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);
+color: hsla(30 100% 50% / 0.6);
+color: hsl(30.0 100% 50% / 60%);
+color: hsla(30.2 100% 50% / 60%);
+
+/* グローバル値 */
+color: inherit;
+color: initial;
+color: unset;
+
+ +

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

+ +

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

+ +

値

+ +
+
{{cssxref("<color>")}}
+
要素のテキストや装飾部分の色を設定します。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

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

+ +
p { color: red; }
+p { color: #f00; }
+p { color: #ff0000; }
+p { color: rgb(255,0,0); }
+p { color: rgb(100%, 0%, 0%); }
+p { color: hsl(0, 100%, 50%); }
+
+/* 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")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/color_value/index.html b/files/ja/web/css/color_value/index.html deleted file mode 100644 index 6d4e75edb4..0000000000 --- a/files/ja/web/css/color_value/index.html +++ /dev/null @@ -1,1537 +0,0 @@ ---- -title: -slug: Web/CSS/color_value -tags: - - CSS - - CSS データ型 - - Reference - - Web - - hsl - - hsla - - rgb - - rgba - - レイアウト - - 単位 - - 色 -translation_of: Web/CSS/color_value ---- -
{{CSSRef}}
- -

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

- -

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

- - - -
-

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

-
- -

構文

- -

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

- -
-

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

-
- -

色キーワード

- -

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

- -

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

- - - -
-

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

- -
    -
  • CSS Level 1 は基本的な16色だけを受け付けていました。VGA グラフィックカードで表示可能な色の組み合わせという意味で、VGA 色と命名されました。
    • -
  • CSS Level 2 は orange キーワードを追加しました。
    • -
  • 当初から、ブラウザーはその他の色を受け付けていました。初期のブラウザーのいくつかは X11 アプリケーションであったため、ほとんどは X11 色名称でしたが、少しずつ違いがありました。SVG 1.0 は正式にこうしたキーワードを定義した最初の規格でした。CSS Colors Level 3 も正式にこれらのキーワードを定義しました。このリストはよく拡張色キーワード、X11 色、SVG 色と呼ばれます。
    • -
  • CSS Colors Level 4 では ウェブのパイオニア、エリック・メイヤーに敬意を表して 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
- -

transparent キーワード

- -

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

- -
-

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

-
- -
-

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

-
- -

currentcolor キーワード

- -

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

- -

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

- -

currentcolor の例

- -
HTML
- -
<div style="color:blue; border: 1px dashed currentcolor;">
-  この文字列の色は青です。
-  <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 構文
- -

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

- -
/* これらの様々な構文は、すべて同じ色、不透明な濃いピンク色を指定します。 */
-
-/* 16進表記 */
-#f09
-#F09
-#ff0099
-#FF0099
-
-/* 関数表記 */
-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進表記 */
-#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 の様々な透過性
- -
/* 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%の色
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
表記説明例
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%, 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%半透明の青 */ 
-
- -

システム色

- -

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

- -

以下のリストにあるキーワードは、 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 のカスタムアクセントカラーの上に配置されたテキストの色にアクセスするために使用します。

-
-
-
- -

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 をご覧ください。

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{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色のキーワードを含む。
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/color_value/index.md b/files/ja/web/css/color_value/index.md new file mode 100644 index 0000000000..6d4e75edb4 --- /dev/null +++ b/files/ja/web/css/color_value/index.md @@ -0,0 +1,1537 @@ +--- +title: +slug: Web/CSS/color_value +tags: + - CSS + - CSS データ型 + - Reference + - Web + - hsl + - hsla + - rgb + - rgba + - レイアウト + - 単位 + - 色 +translation_of: Web/CSS/color_value +--- +
{{CSSRef}}
+ +

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

+ +

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

+ +
    +
  • キーワードの使用 (blue や transparent など)
    • +
  • RGB 立方体座標方式の使用 (#+16進数値や、rgb() や rgba() の関数記法によって)
    • +
  • HSL 円柱座標方式 の使用 (hsl() や hsla() の関数記法によって)
    • +
+ +
+

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

+
+ +

構文

+ +

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

+ +
+

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

+
+ +

色キーワード

+ +

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

+ +

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

+ +
    +
  • HTML は CSS1 に見られる基本16色のみを解釈し、解釈できない値を (ふつう完全に違う色に) 変換する際は特定のアルゴリズムを使用します。その他の色キーワードは CSS および SVG のみで使用してください。
    • +
  • HTML とは異なり、 CSS では未知のキーワードは完全に無視されます。
    • +
  • CSS のキーワード定義された色はどれも透明度を持たず、完全に不透明な色です。
    • +
  • 同じ色を表すキーワードがいくつかあります。 +
      +
    • aqua / cyan
      • +
    • fuchsia / magenta
      • +
    • darkgray / darkgrey
      • +
    • darkslategray / darkslategrey
      • +
    • dimgray / dimgrey
      • +
    • lightgray / lightgrey
      • +
    • lightslategray / lightslategrey
      • +
    • gray / grey
      • +
    • slategray / slategrey
      • +
    +
    • +
  • キーワードは X11 の色名からとられたものですが、メーカーが X11 の色を特定のハードウェアに合わせて変えていることがあるので、 RGB 値は X11 システムでの色とは異なる可能性があります。
    • +
+ +
+

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

+ +
    +
  • CSS Level 1 は基本的な16色だけを受け付けていました。VGA グラフィックカードで表示可能な色の組み合わせという意味で、VGA 色と命名されました。
    • +
  • CSS Level 2 は orange キーワードを追加しました。
    • +
  • 当初から、ブラウザーはその他の色を受け付けていました。初期のブラウザーのいくつかは X11 アプリケーションであったため、ほとんどは X11 色名称でしたが、少しずつ違いがありました。SVG 1.0 は正式にこうしたキーワードを定義した最初の規格でした。CSS Colors Level 3 も正式にこれらのキーワードを定義しました。このリストはよく拡張色キーワード、X11 色、SVG 色と呼ばれます。
    • +
  • CSS Colors Level 4 では ウェブのパイオニア、エリック・メイヤーに敬意を表して 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
+ +

transparent キーワード

+ +

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

+ +
+

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

+
+ +
+

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

+
+ +

currentcolor キーワード

+ +

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

+ +

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

+ +

currentcolor の例

+ +
HTML
+ +
<div style="color:blue; border: 1px dashed currentcolor;">
+  この文字列の色は青です。
+  <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 構文
+ +

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

+ +
/* これらの様々な構文は、すべて同じ色、不透明な濃いピンク色を指定します。 */
+
+/* 16進表記 */
+#f09
+#F09
+#ff0099
+#FF0099
+
+/* 関数表記 */
+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進表記 */
+#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 の様々な透過性
+ +
/* 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%の色
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
表記説明例
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%, 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%半透明の青 */ 
+
+ +

システム色

+ +

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

+ +

以下のリストにあるキーワードは、 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 のカスタムアクセントカラーの上に配置されたテキストの色にアクセスするために使用します。

+
+
+
+ +

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 をご覧ください。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{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色のキーワードを含む。
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ +
    +
  • {{Cssxref("opacity")}} プロパティは要素レベルで色の透明度を定義できます。
    • +
  • このデータ型を使用するよく使われるプロパティ: {{Cssxref("color")}}, {{Cssxref("background-color")}}, {{Cssxref("border-color")}}, {{Cssxref("outline-color")}}, {{Cssxref("text-shadow")}}, {{Cssxref("box-shadow")}}
    • +
  • CSS を使った HTML の要素への色の適用
    • +
diff --git a/files/ja/web/css/css_color/index.html b/files/ja/web/css/css_color/index.html deleted file mode 100644 index 83d5bcadac..0000000000 --- a/files/ja/web/css/css_color/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: CSS 色 -slug: Web/CSS/CSS_Color -tags: - - CSS - - CSS 色 - - HTML 色 - - Reference - - スタイル - - 概要 - - 色 -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 では、グラデーションは色ではなく画像です。
    • -
diff --git a/files/ja/web/css/css_color/index.md b/files/ja/web/css/css_color/index.md new file mode 100644 index 0000000000..83d5bcadac --- /dev/null +++ b/files/ja/web/css/css_color/index.md @@ -0,0 +1,111 @@ +--- +title: CSS 色 +slug: Web/CSS/CSS_Color +tags: + - CSS + - CSS 色 + - HTML 色 + - Reference + - スタイル + - 概要 + - 色 +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 では、グラデーションは色ではなく画像です。
    • +
diff --git a/files/ja/web/css/css_colors/color_picker_tool/index.html b/files/ja/web/css/css_colors/color_picker_tool/index.html deleted file mode 100644 index 5fb090a903..0000000000 --- a/files/ja/web/css/css_colors/color_picker_tool/index.html +++ /dev/null @@ -1,3241 +0,0 @@ ---- -title: 色選択ツール -slug: Web/CSS/CSS_Colors/Color_picker_tool -tags: - - CSS - - CSS 色 - - CSS 色選択 - - CSS 色選択ツール - - HTML 色 - - HTML 色選択 - - HTML 色選択ツール - - color - - ツール - - 色選択 -translation_of: Web/CSS/CSS_Colors/Color_picker_tool ---- - - -

{{CSSRef}}

- -

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

- -

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

- -

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

- -
{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}
- -

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

- -

関連情報

- -

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

- - 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 new file mode 100644 index 0000000000..5fb090a903 --- /dev/null +++ b/files/ja/web/css/css_colors/color_picker_tool/index.md @@ -0,0 +1,3241 @@ +--- +title: 色選択ツール +slug: Web/CSS/CSS_Colors/Color_picker_tool +tags: + - CSS + - CSS 色 + - CSS 色選択 + - CSS 色選択ツール + - HTML 色 + - HTML 色選択 + - HTML 色選択ツール + - color + - ツール + - 色選択 +translation_of: Web/CSS/CSS_Colors/Color_picker_tool +--- + + +

{{CSSRef}}

+ +

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

+ +

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

+ +

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

+ +
{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}
+ +

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

+ +

関連情報

+ +

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

+ + diff --git a/files/ja/web/css/opacity/index.html b/files/ja/web/css/opacity/index.html deleted file mode 100644 index 48781e619b..0000000000 --- a/files/ja/web/css/opacity/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: opacity -slug: Web/CSS/opacity -tags: - - CSS - - CSS プロパティ - - Opacity - - Reference - - 不透明度 -translation_of: Web/CSS/opacity ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/opacity.html")}}
- - - -

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

- -

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

- -

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

- -
background: rgba(0, 0, 0, 0.4);
- -

構文

- -

値

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

形式文法

- -{{csssyntax}} - -

例

- -

基本的な例

- -
div { background-color: yellow; }
-.light {
-  opacity: 0.2; /* Barely see the text over the background */
-}
-.medium {
-  opacity: 0.5; /* See the text more clearly over the background */
-}
-.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')}}

- -

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

- -
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)}}

- -

関連情報

- - diff --git a/files/ja/web/css/opacity/index.md b/files/ja/web/css/opacity/index.md new file mode 100644 index 0000000000..48781e619b --- /dev/null +++ b/files/ja/web/css/opacity/index.md @@ -0,0 +1,152 @@ +--- +title: opacity +slug: Web/CSS/opacity +tags: + - CSS + - CSS プロパティ + - Opacity + - Reference + - 不透明度 +translation_of: Web/CSS/opacity +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/opacity.html")}}
+ + + +

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

+ +

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

+ +

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

+ +
background: rgba(0, 0, 0, 0.4);
+ +

構文

+ +

値

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

形式文法

+ +{{csssyntax}} + +

例

+ +

基本的な例

+ +
div { background-color: yellow; }
+.light {
+  opacity: 0.2; /* Barely see the text over the background */
+}
+.medium {
+  opacity: 0.5; /* See the text more clearly over the background */
+}
+.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')}}

+ +

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

+ +
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)}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/applying_color/index.html b/files/ja/web/html/applying_color/index.html deleted file mode 100644 index 3e49ec608c..0000000000 --- a/files/ja/web/html/applying_color/index.html +++ /dev/null @@ -1,516 +0,0 @@ ---- -title: CSS を使った HTML の要素への色の適用 -slug: Web/HTML/Applying_color -tags: - - Beginner - - CSS - - CSS Colors - - Guide - - HTML - - HTML Colors - - HTML Styles - - Styling HTML - - color -translation_of: Web/HTML/Applying_color ---- -
{{HTMLRef}}
- -

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

- -

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

- -

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

- -

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

- -

色付けできる物

- -

要素レベルでは、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")}} 属性がセットされた要素に使用されます。
-
- -

ボックス

- -

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

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

境界線

- -

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

- -

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

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

- -

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

- -

キーワード

- -

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

- -

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

- -

RGB 値

- -

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

- -

16 進数文字列表記

- -

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

- -

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

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

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

- -

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%) のように表現できます。

- -

HSL 関数表記

- -

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

- -
-
HSL 色円柱 -
図 1. HSL 色円柱 色相は、可視スペクトルの色を表す円形の色相環に沿った位置に基づいて実際の色を定義します。彩度は、灰色の強さ、もしくはその色相で取りうる最も濃い色に対する割合です。輝度 (または明度) の値が高くなると、色は最も暗い色から最も明るい色 (黒から白) へと変化します。画像提供は Wikipedia の SharkD さんより、CC BY-SA 3.0 ライセンスで配布されているものです。
-
-
- -

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

- -

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

- -

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

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

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

- -

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

- -
- - -

{{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>
-      This is the first box.
-    </p>
-  </div>
-  <div class="box boxRight">
-    <p>
-      This is the second box.
-    </p>
-  </div>
-</div>
- -

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

- -

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

- -

CSS

- -

上記の結果を作り出す 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")}} を使っています。

- -

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

- -

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

- -
.box {
-  width: 290px;
-  height: 100px;
-  margin: 0;
-  padding: 4px 6px;
-  font: 28px "Marker Felt", "Zapfino", cursive;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
- -

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

- -
.boxLeft {
-  float: left;
-  background-color: rgb(245, 130, 130);
-  outline: 2px solid darkred;
-}
- -

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

- -
    -
  • CSS {{cssxref("background-color")}} プロパティを rgb(245, 130, 130) の値に変更することで、ボックスの背景色を設定しています。
    • -
  • ボックスに輪郭線を定義しています。一般的によく使われる border とは異なり、{{cssxref("outline")}} はレイアウトに全く影響しません。この輪郭線は、2 ピクセルの太さの、濃い赤色の実線です。色の指定に darkred キーワードを使用していることにご注意ください。
    • -
  • 注意として、テキストの色は明示的に設定していません。この場合 {{cssxref("color")}} の値はそれを含んだ最も近い要素から継承されます。すなわち、デフォルトである黒色です。
    • -
- -
.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 をサポートしていないからです。

-
- -

最後に、.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 にしています。
    • -
- -

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

- -

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

- -

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

- -

例: 色の選択

- -

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

- -

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

- -
-

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

-
- -

HTML

- -

この 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>
- -

CSS

- -

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

- -
#box {
-  width: 500px;
-  height: 200px;
-  border: 2px solid rgb(245, 220, 225);
-  padding: 4px 6px;
-  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
-}
- -

JavaScript

- -

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

- -
let colorPicker = document.getElementById("colorPicker");
-let box = document.getElementById("box");
-let output = document.getElementById("output");
-
-box.style.borderColor = colorPicker.value;
-
-colorPicker.addEventListener("input", function(event) {
-  box.style.borderColor = event.target.value;
-}, false);
-
-colorPicker.addEventListener("change", function(event) {
-  output.innerText = "Color set to " + colorPicker.value + ".";
-}, false);
- -

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

- -

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

- -

賢く色を使う

- -

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

- -

適切な色を見つける

- -

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

- -

ベースカラー

- -

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

- -
    -
  • 商品やアイデアで識別される既存の色や、伝えたい感情を代表する色など、コンテンツのトピックに自然に関連する色。
    • -
  • コンテンツが表す物に関連付いたイメージから来る色。特定の項目や製品に関するウェブサイトを作成する場合は、それらに物理的に存在する色を選びます。
    • -
  • ウェブサイトを探して既存のカラーパレットや画像をたくさん見ることで、インスピレーションを得ます。
    • -
- -

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

- -
-

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

-
- -

パレットを豊かにする

- -

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

- -

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

- - - -

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

- -
-

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

-
- -

色理論に関する参考文献

- -

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

- -
-
Color Science (カーンアカデミー と ピクサー の共著)
-
色とは何か、色の認識のされ方、色を使ったアイデアの表現方法などの概念を紹介するオンライン講座です。ピクサーのアーティストやデザイナーが講師を務めています。
-
Wikipedia の {{interwiki("wikipedia", "Color theory")}}
-
ウィキペディアの色理論に関する記事で、技術的観点の素晴らしい情報がたくさんあります。色選びの参考にはなりませんが、有用な情報が満載です。
-
- -

色とアクセシビリティ

- -

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

- -

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

- -
-

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

-
- -

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

- - - -

パレットデザインの例

- -

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

- -

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

- -

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

- -

Right after loading Paletton.

- -

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

- -

After entering base color

- -

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

- -

Now with complementary colors included.

- -

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

- -

Triad color scheme selected

- -

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

- -

Triad color scheme selected

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -
-

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

-
- -

関連情報

- - diff --git a/files/ja/web/html/applying_color/index.md b/files/ja/web/html/applying_color/index.md new file mode 100644 index 0000000000..3e49ec608c --- /dev/null +++ b/files/ja/web/html/applying_color/index.md @@ -0,0 +1,516 @@ +--- +title: CSS を使った HTML の要素への色の適用 +slug: Web/HTML/Applying_color +tags: + - Beginner + - CSS + - CSS Colors + - Guide + - HTML + - HTML Colors + - HTML Styles + - Styling HTML + - color +translation_of: Web/HTML/Applying_color +--- +
{{HTMLRef}}
+ +

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

+ +

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

+ +

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

+ +

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

+ +

色付けできる物

+ +

要素レベルでは、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")}} 属性がセットされた要素に使用されます。
+
+ +

ボックス

+ +

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

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

境界線

+ +

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

+ +

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

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

+ +

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

+ +

キーワード

+ +

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

+ +

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

+ +

RGB 値

+ +

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

+ +

16 進数文字列表記

+ +

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

+ +

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

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

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

+ +

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%) のように表現できます。

+ +

HSL 関数表記

+ +

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

+ +
+
HSL 色円柱 +
図 1. HSL 色円柱 色相は、可視スペクトルの色を表す円形の色相環に沿った位置に基づいて実際の色を定義します。彩度は、灰色の強さ、もしくはその色相で取りうる最も濃い色に対する割合です。輝度 (または明度) の値が高くなると、色は最も暗い色から最も明るい色 (黒から白) へと変化します。画像提供は Wikipedia の SharkD さんより、CC BY-SA 3.0 ライセンスで配布されているものです。
+
+
+ +

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

+ +

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

+ +

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

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

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

+ +

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

+ +
+ + +

{{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>
+      This is the first box.
+    </p>
+  </div>
+  <div class="box boxRight">
+    <p>
+      This is the second box.
+    </p>
+  </div>
+</div>
+ +

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

+ +

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

+ +

CSS

+ +

上記の結果を作り出す 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")}} を使っています。

+ +

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

+ +

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

+ +
.box {
+  width: 290px;
+  height: 100px;
+  margin: 0;
+  padding: 4px 6px;
+  font: 28px "Marker Felt", "Zapfino", cursive;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+ +

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

+ +
.boxLeft {
+  float: left;
+  background-color: rgb(245, 130, 130);
+  outline: 2px solid darkred;
+}
+ +

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

+ +
    +
  • CSS {{cssxref("background-color")}} プロパティを rgb(245, 130, 130) の値に変更することで、ボックスの背景色を設定しています。
    • +
  • ボックスに輪郭線を定義しています。一般的によく使われる border とは異なり、{{cssxref("outline")}} はレイアウトに全く影響しません。この輪郭線は、2 ピクセルの太さの、濃い赤色の実線です。色の指定に darkred キーワードを使用していることにご注意ください。
    • +
  • 注意として、テキストの色は明示的に設定していません。この場合 {{cssxref("color")}} の値はそれを含んだ最も近い要素から継承されます。すなわち、デフォルトである黒色です。
    • +
+ +
.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 をサポートしていないからです。

+
+ +

最後に、.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 にしています。
    • +
+ +

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

+ +

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

+ +

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

+ +

例: 色の選択

+ +

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

+ +

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

+ +
+

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

+
+ +

HTML

+ +

この 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>
+ +

CSS

+ +

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

+ +
#box {
+  width: 500px;
+  height: 200px;
+  border: 2px solid rgb(245, 220, 225);
+  padding: 4px 6px;
+  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
+}
+ +

JavaScript

+ +

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

+ +
let colorPicker = document.getElementById("colorPicker");
+let box = document.getElementById("box");
+let output = document.getElementById("output");
+
+box.style.borderColor = colorPicker.value;
+
+colorPicker.addEventListener("input", function(event) {
+  box.style.borderColor = event.target.value;
+}, false);
+
+colorPicker.addEventListener("change", function(event) {
+  output.innerText = "Color set to " + colorPicker.value + ".";
+}, false);
+ +

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

+ +

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

+ +

賢く色を使う

+ +

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

+ +

適切な色を見つける

+ +

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

+ +

ベースカラー

+ +

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

+ +
    +
  • 商品やアイデアで識別される既存の色や、伝えたい感情を代表する色など、コンテンツのトピックに自然に関連する色。
    • +
  • コンテンツが表す物に関連付いたイメージから来る色。特定の項目や製品に関するウェブサイトを作成する場合は、それらに物理的に存在する色を選びます。
    • +
  • ウェブサイトを探して既存のカラーパレットや画像をたくさん見ることで、インスピレーションを得ます。
    • +
+ +

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

+ +
+

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

+
+ +

パレットを豊かにする

+ +

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

+ +

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

+ + + +

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

+ +
+

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

+
+ +

色理論に関する参考文献

+ +

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

+ +
+
Color Science (カーンアカデミー と ピクサー の共著)
+
色とは何か、色の認識のされ方、色を使ったアイデアの表現方法などの概念を紹介するオンライン講座です。ピクサーのアーティストやデザイナーが講師を務めています。
+
Wikipedia の {{interwiki("wikipedia", "Color theory")}}
+
ウィキペディアの色理論に関する記事で、技術的観点の素晴らしい情報がたくさんあります。色選びの参考にはなりませんが、有用な情報が満載です。
+
+ +

色とアクセシビリティ

+ +

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

+ +

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

+ +
+

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

+
+ +

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

+ + + +

パレットデザインの例

+ +

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

+ +

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

+ +

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

+ +

Right after loading Paletton.

+ +

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

+ +

After entering base color

+ +

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

+ +

Now with complementary colors included.

+ +

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

+ +

Triad color scheme selected

+ +

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

+ +

Triad color scheme selected

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +
+

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

+
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf