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/gradient/index.html | 186 +++++++++++++++++++++++++++++++++++ 1 file changed, 186 insertions(+) create mode 100644 files/ja/web/css/gradient/index.html (limited to 'files/ja/web/css/gradient') diff --git a/files/ja/web/css/gradient/index.html b/files/ja/web/css/gradient/index.html new file mode 100644 index 0000000000..67259799d1 --- /dev/null +++ b/files/ja/web/css/gradient/index.html @@ -0,0 +1,186 @@ +--- +title: +slug: Web/CSS/gradient +tags: + - CSS + - CSS Data Type + - CSS Images + - Data Type + - Graphics + - Layout + - Reference +translation_of: Web/CSS/gradient +--- +
{{CSSRef}}
+ +

<gradient> は CSS のデータ型で、2色以上の連続的な色の変化で構成される特殊な型の {{cssxref("<image>")}} です。

+ +
{{EmbedInteractiveExample("pages/css/type-gradient.html")}}
+ + + +

CSS グラデーションは固有の寸法を持ちません。つまり、自然又は推奨される寸法や、推奨される縦横比を持ちません。実際の寸法は適用される要素に一致します。

+ +

構文

+ +

<gradient> データ型は、以下のリストにある関数型のうちの一つによって定義します。

+ +
+

線形 (linear) グラデーション

+ +

色が仮想の直線に沿って変化します。 {{cssxref("linear-gradient", "linear-gradient()")}} 関数で生成されます。

+
+ +
+

放射 (radical) グラデーション

+ +

色が中央点 (origin) から連続的に変化します。 {{cssxref("radial-gradient", "radial-gradient()")}} 関数で生成されます。

+
+ +
+

反復 (repeating) グラデーション

+ +

要素全体を埋めるのに必要なだけ、グラデーションを繰り返します。 {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}} 及び {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}} 関数で生成されます。

+
+ +
+

扇形 (conic) グラデーション

+ +

色が円を描くように連続的に変化します。 {{cssxref("conic-gradient", "conic-gradient()")}} 関数で生成されます。

+
+ +

補間

+ +

色に関する他の補間操作と同様、グラデーションはアルファ乗算済み色空間で計算されます。これは、色と透過性が同時に変化するときに、予期しない灰色が現れるのを避けるためです。 (古いブラウザーは、 transparent キーワードを使用するとこれを使用しないことがあるので注意してください。)

+ +

例

+ +

線形グラデーションの例

+ +

単純な線形グラデーションです。

+ + + +
.linear-gradient {
+  background: linear-gradient(to right,
+      red, orange, yellow, green, blue, indigo, violet);
+}
+ +

{{EmbedLiveSample('Linear_gradient_example', 240, 80)}}

+ +

放射グラデーションの例

+ +

単純な放射グラデーションです。

+ + + +
.radial-gradient {
+  background: radial-gradient(red, yellow, rgb(30, 144, 255));
+}
+
+ +

{{EmbedLiveSample('Radial_gradient_example', 240, 80)}}

+ +

反復グラデーションの例

+ +

単純な線形および放射の反復グラデーションの例です。

+ + + +
.linear-repeat {
+  background: repeating-linear-gradient(to top left,
+      lightpink, lightpink 5px, white 5px, white 10px);
+}
+
+.radial-repeat {
+  background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px);
+}
+ +

{{EmbedLiveSample('Repeating_gradient_examples', 240, 180)}}

+ +

扇形グラデーションの例

+ +

単純な扇形グラデーションの例です。なお、まだこれはブラウザーの間で十分に対応されていません。

+ + + +
.conic-gradient {
+  background: conic-gradient(lightpink, white, powderblue);
+}
+
+ +

{{EmbedLiveSample('Conic_gradient_example', 240, 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Images', '#gradients', '<gradient>')}}{{Spec2('CSS4 Images')}}conic-gradient を追加
{{SpecName('CSS3 Images', '#gradients', '<gradient>')}}{{Spec2('CSS3 Images')}}初回定義
+ +

ブラウザーの互換性

+ + + +
{{Compat("css.types.image.gradient")}}
+ +

関連情報

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