From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/color/index.html | 160 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 160 insertions(+) create mode 100644 files/ja/web/css/color/index.html (limited to 'files/ja/web/css/color') diff --git a/files/ja/web/css/color/index.html b/files/ja/web/css/color/index.html new file mode 100644 index 0000000000..77a3ad9077 --- /dev/null +++ b/files/ja/web/css/color/index.html @@ -0,0 +1,160 @@ +--- +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")}}

+ +

関連情報

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