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 + 12 files changed, 5322 insertions(+), 5322 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 (limited to 'files/ja/web/css') 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)}}

+ +

関連情報

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