From 7e6441ff570f21d62937045a7366effe282323da Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 17 Oct 2021 00:20:03 +0900 Subject: CSS_Images の各ファイルの .html → .md 変換 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/cross-fade()/index.html | 151 ----- files/ja/web/css/cross-fade()/index.md | 151 +++++ .../implementing_image_sprites_in_css/index.html | 56 -- .../implementing_image_sprites_in_css/index.md | 56 ++ .../css/css_images/using_css_gradients/index.html | 750 --------------------- .../css/css_images/using_css_gradients/index.md | 750 +++++++++++++++++++++ files/ja/web/css/element()/index.html | 101 --- files/ja/web/css/element()/index.md | 101 +++ files/ja/web/css/image-orientation/index.html | 129 ---- files/ja/web/css/image-orientation/index.md | 129 ++++ files/ja/web/css/image-rendering/index.html | 127 ---- files/ja/web/css/image-rendering/index.md | 127 ++++ files/ja/web/css/image-resolution/index.md | 88 +++ files/ja/web/css/object-fit/index.html | 167 ----- files/ja/web/css/object-fit/index.md | 167 +++++ files/ja/web/css/object-position/index.html | 119 ---- files/ja/web/css/object-position/index.md | 119 ++++ files/ja/web/css/url()/index.html | 214 ------ files/ja/web/css/url()/index.md | 214 ++++++ 19 files changed, 1902 insertions(+), 1814 deletions(-) delete mode 100644 files/ja/web/css/cross-fade()/index.html create mode 100644 files/ja/web/css/cross-fade()/index.md delete mode 100644 files/ja/web/css/css_images/implementing_image_sprites_in_css/index.html create mode 100644 files/ja/web/css/css_images/implementing_image_sprites_in_css/index.md delete mode 100644 files/ja/web/css/css_images/using_css_gradients/index.html create mode 100644 files/ja/web/css/css_images/using_css_gradients/index.md delete mode 100644 files/ja/web/css/element()/index.html create mode 100644 files/ja/web/css/element()/index.md delete mode 100644 files/ja/web/css/image-orientation/index.html create mode 100644 files/ja/web/css/image-orientation/index.md delete mode 100644 files/ja/web/css/image-rendering/index.html create mode 100644 files/ja/web/css/image-rendering/index.md create mode 100644 files/ja/web/css/image-resolution/index.md delete mode 100644 files/ja/web/css/object-fit/index.html create mode 100644 files/ja/web/css/object-fit/index.md delete mode 100644 files/ja/web/css/object-position/index.html create mode 100644 files/ja/web/css/object-position/index.md delete mode 100644 files/ja/web/css/url()/index.html create mode 100644 files/ja/web/css/url()/index.md (limited to 'files') diff --git a/files/ja/web/css/cross-fade()/index.html b/files/ja/web/css/cross-fade()/index.html deleted file mode 100644 index 5cf8359073..0000000000 --- a/files/ja/web/css/cross-fade()/index.html +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: cross-fade() -slug: Web/CSS/cross-fade() -tags: - - CSS - - CSS Function - - CSS-4 Images - - Experimental - - Function - - Reference - - Web -translation_of: Web/CSS/cross-fade() ---- -

{{CSSRef}}

- -

CSS の cross-fade() 関数は、2枚以上の画像を所定の透過度で合成するために使用することができます。これは単色で色を薄めたり、放射状グラデーションとの組み合わせでページの特定の領域を強調させたりするような、数多くの単純な画像加工に使用することができます。

- -

構文

- -

重要: 仕様書と現在の実装とで構文が異なっています。仕様書の構文を先に説明します。

- -

仕様書上の構文

- -

cross-fade() 関数は、画像と、他の画像と合成したときにそれぞれの画像が占める割合を定義したパーセント値のリストを取ります。パーセント値は引用符なしで記述し、 “%” 記号を含め、 0% から 100% までの間である必要があります。

- -

この関数は CSS の中で、通常の画像の参照が利用できるところならばどこでも利用できます。

- -

cross-fade のパーセント値

- -

Think of the percentage as an opacity value for each image. This means a value of 0% means the image is fully transparent while a value of 100% makes the image fully opaque.

- -
cross-fade( url(white.png) 0%, url(black.png) 100%); /* fully black */
-cross-fade( url(white.png) 25%, url(black.png) 75%); /* 25% white, 75% black */
-cross-fade( url(white.png) 50%, url(black.png) 50%); /* 50% white, 50% black */
-cross-fade( url(white.png) 75%, url(black.png) 25%); /* 75% white, 25% black */
-cross-fade( url(white.png) 100%, url(black.png) 0%); /* fully white */
-cross-fade( url(green.png) 75%, url(red.png) 75%); /* both green and red at 75% */
- -

If any percentages are omitted, all the specified percentages are summed together and subtracted from 100%. If the result is greater than 0%, the result is then divided equally between all images with omitted percentages.

- -

In the simplest case, two images are faded between each other. To do that, only one of the images needs to have a percentage, the other one will be faded accordingly. For example, a value of 0% defined for the first image yields only the second image, while 100% yields only the first. A 25% value renders the first image at 25% and the second at 75%. The 75% value is the inverse, showing the first image at 75% and the second at 25%.

- -

The above could also have been written as:

- -
cross-fade( url(white.png) 0%,   url(black.png)); /* fully black */
-cross-fade( url(white.png) 25%,  url(black.png)); /* 25% white, 75% black */
-cross-fade( url(white.png),      url(black.png)); /* 50% white, 50% black */
-cross-fade( url(white.png) 75%,  url(black.png)); /* 75% white, 25% black */
-cross-fade( url(white.png) 100%, url(black.png)); /* fully white */
-cross-fade( url(green.png) 75%, url(red.png) 75%); /* both green and red at 75% */
- -

If no percentages are declared, both the images will be 50% opaque, with a cross-fade rendering as an even merge of both images. The 50%/50% example seen above did not need to have the percentages listed, as when a percentage value is omitted, the included percentages are added together and subtracted from 100%. The result, if greater than 0, is then divided equally between all images with omitted percentages.

- -

In the last example, the sum of both percentages is not 100%, and therefore both images include their respective opacities.

- -

If no percentages are declared and three images are included, each image will be 33.33% opaque. The two following are lines (almost) identical:

- -
cross-fade( url(red.png), url(yellow.png), url(blue.png)); /* all three will be 33.3333% opaque */
-cross-fade( url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%);
- -

Older, implemented syntax

- -
cross-fade( <image, <image>, <percentage> )
- -

The specification for the cross-fade() function allows for multiple images and for each image to have transparency values independent of the other values. This was not always the case. The original syntax, which has been implemented in some browsers, only allowed for two images, with the sum of the transparency of those two images being exactly 100%. The original syntax is supported in Safari and supported with the -webkit- prefix in Chrome, Opera, and other blink-based browsers.

- -
cross-fade(url(white.png), url(black.png), 0%);   /* fully black */
-cross-fade(url(white.png), url(black.png), 25%);  /* 25% white, 75% black */
-cross-fade(url(white.png), url(black.png), 50%);  /* 50% white, 50% black */
-cross-fade(url(white.png), url(black.png), 75%);  /* 75% white, 25% black */
-cross-fade(url(white.png), url(black.png), 100%); /* fully white */
-
- -

In the implemented syntax, the two comma-separated images are declared first, followed by a comma and required percent value. Omitting the comma or percent invalidates the value. The percent is the opacity of the first declared image. The included percentage is subtracted from 100%, with the difference being the opacity of the second image.

- -

The green/red example (with the percentages totalling 150%) and the yellow/red/blue example (with three images) from the specification syntax section, are not possible in this implementation.

- -

アクセシビリティの考慮

- -

ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。背景画像を使用する場合は、色のコントラストを大きくして、画像がない場合と同様に、画像の上にどのような文字も読み取れるようにしてください。

- - - -

形式文法

- -{{csssyntax}} - -

例

- -

cross-fade の古い構文

- -

HTML

- -
<div class="crossfade"></div>
- -

CSS

- -
.crossfade {
-    width: 300px;
-    height: 300px;
-    background-image: -webkit-cross-fade(
-        url('https://mdn.mozillademos.org/files/8543/br.png'),
-        url('https://mdn.mozillademos.org/files/8545/tr.png'),
-        75%);
-    background-image: cross-fade(
-        url('https://mdn.mozillademos.org/files/8543/br.png'),
-        url('https://mdn.mozillademos.org/files/8545/tr.png'),
-        75%);
-}
- -

結果

- -

{{EmbedLiveSample("Older_syntax_for_cross-fade", "330", "330")}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Images', '#cross-fade-function', 'cross-fade()')}}{{Spec2('CSS4 Images')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.types.image.cross-fade")}}

- -

関連情報

- - diff --git a/files/ja/web/css/cross-fade()/index.md b/files/ja/web/css/cross-fade()/index.md new file mode 100644 index 0000000000..5cf8359073 --- /dev/null +++ b/files/ja/web/css/cross-fade()/index.md @@ -0,0 +1,151 @@ +--- +title: cross-fade() +slug: Web/CSS/cross-fade() +tags: + - CSS + - CSS Function + - CSS-4 Images + - Experimental + - Function + - Reference + - Web +translation_of: Web/CSS/cross-fade() +--- +

{{CSSRef}}

+ +

CSS の cross-fade() 関数は、2枚以上の画像を所定の透過度で合成するために使用することができます。これは単色で色を薄めたり、放射状グラデーションとの組み合わせでページの特定の領域を強調させたりするような、数多くの単純な画像加工に使用することができます。

+ +

構文

+ +

重要: 仕様書と現在の実装とで構文が異なっています。仕様書の構文を先に説明します。

+ +

仕様書上の構文

+ +

cross-fade() 関数は、画像と、他の画像と合成したときにそれぞれの画像が占める割合を定義したパーセント値のリストを取ります。パーセント値は引用符なしで記述し、 “%” 記号を含め、 0% から 100% までの間である必要があります。

+ +

この関数は CSS の中で、通常の画像の参照が利用できるところならばどこでも利用できます。

+ +

cross-fade のパーセント値

+ +

Think of the percentage as an opacity value for each image. This means a value of 0% means the image is fully transparent while a value of 100% makes the image fully opaque.

+ +
cross-fade( url(white.png) 0%, url(black.png) 100%); /* fully black */
+cross-fade( url(white.png) 25%, url(black.png) 75%); /* 25% white, 75% black */
+cross-fade( url(white.png) 50%, url(black.png) 50%); /* 50% white, 50% black */
+cross-fade( url(white.png) 75%, url(black.png) 25%); /* 75% white, 25% black */
+cross-fade( url(white.png) 100%, url(black.png) 0%); /* fully white */
+cross-fade( url(green.png) 75%, url(red.png) 75%); /* both green and red at 75% */
+ +

If any percentages are omitted, all the specified percentages are summed together and subtracted from 100%. If the result is greater than 0%, the result is then divided equally between all images with omitted percentages.

+ +

In the simplest case, two images are faded between each other. To do that, only one of the images needs to have a percentage, the other one will be faded accordingly. For example, a value of 0% defined for the first image yields only the second image, while 100% yields only the first. A 25% value renders the first image at 25% and the second at 75%. The 75% value is the inverse, showing the first image at 75% and the second at 25%.

+ +

The above could also have been written as:

+ +
cross-fade( url(white.png) 0%,   url(black.png)); /* fully black */
+cross-fade( url(white.png) 25%,  url(black.png)); /* 25% white, 75% black */
+cross-fade( url(white.png),      url(black.png)); /* 50% white, 50% black */
+cross-fade( url(white.png) 75%,  url(black.png)); /* 75% white, 25% black */
+cross-fade( url(white.png) 100%, url(black.png)); /* fully white */
+cross-fade( url(green.png) 75%, url(red.png) 75%); /* both green and red at 75% */
+ +

If no percentages are declared, both the images will be 50% opaque, with a cross-fade rendering as an even merge of both images. The 50%/50% example seen above did not need to have the percentages listed, as when a percentage value is omitted, the included percentages are added together and subtracted from 100%. The result, if greater than 0, is then divided equally between all images with omitted percentages.

+ +

In the last example, the sum of both percentages is not 100%, and therefore both images include their respective opacities.

+ +

If no percentages are declared and three images are included, each image will be 33.33% opaque. The two following are lines (almost) identical:

+ +
cross-fade( url(red.png), url(yellow.png), url(blue.png)); /* all three will be 33.3333% opaque */
+cross-fade( url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%);
+ +

Older, implemented syntax

+ +
cross-fade( <image, <image>, <percentage> )
+ +

The specification for the cross-fade() function allows for multiple images and for each image to have transparency values independent of the other values. This was not always the case. The original syntax, which has been implemented in some browsers, only allowed for two images, with the sum of the transparency of those two images being exactly 100%. The original syntax is supported in Safari and supported with the -webkit- prefix in Chrome, Opera, and other blink-based browsers.

+ +
cross-fade(url(white.png), url(black.png), 0%);   /* fully black */
+cross-fade(url(white.png), url(black.png), 25%);  /* 25% white, 75% black */
+cross-fade(url(white.png), url(black.png), 50%);  /* 50% white, 50% black */
+cross-fade(url(white.png), url(black.png), 75%);  /* 75% white, 25% black */
+cross-fade(url(white.png), url(black.png), 100%); /* fully white */
+
+ +

In the implemented syntax, the two comma-separated images are declared first, followed by a comma and required percent value. Omitting the comma or percent invalidates the value. The percent is the opacity of the first declared image. The included percentage is subtracted from 100%, with the difference being the opacity of the second image.

+ +

The green/red example (with the percentages totalling 150%) and the yellow/red/blue example (with three images) from the specification syntax section, are not possible in this implementation.

+ +

アクセシビリティの考慮

+ +

ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。背景画像を使用する場合は、色のコントラストを大きくして、画像がない場合と同様に、画像の上にどのような文字も読み取れるようにしてください。

+ + + +

形式文法

+ +{{csssyntax}} + +

例

+ +

cross-fade の古い構文

+ +

HTML

+ +
<div class="crossfade"></div>
+ +

CSS

+ +
.crossfade {
+    width: 300px;
+    height: 300px;
+    background-image: -webkit-cross-fade(
+        url('https://mdn.mozillademos.org/files/8543/br.png'),
+        url('https://mdn.mozillademos.org/files/8545/tr.png'),
+        75%);
+    background-image: cross-fade(
+        url('https://mdn.mozillademos.org/files/8543/br.png'),
+        url('https://mdn.mozillademos.org/files/8545/tr.png'),
+        75%);
+}
+ +

結果

+ +

{{EmbedLiveSample("Older_syntax_for_cross-fade", "330", "330")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Images', '#cross-fade-function', 'cross-fade()')}}{{Spec2('CSS4 Images')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.types.image.cross-fade")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/css_images/implementing_image_sprites_in_css/index.html b/files/ja/web/css/css_images/implementing_image_sprites_in_css/index.html deleted file mode 100644 index acef249aad..0000000000 --- a/files/ja/web/css/css_images/implementing_image_sprites_in_css/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: CSS での画像スプライトの実装 -slug: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS -tags: - - Advanced - - CSS - - CSS Images - - Graphics - - Guide - - NeedsContent - - Sprites - - Web -translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS ---- -

{{cssRef}}

- -

画像スプライトは、複数の画像を使用する多くのウェブアプリで使用されています。それぞれの画像を個別の画像ファイルとして含めるのではなく、1枚の画像として送信した方が、メモリや帯域幅の面ではるかに有利です。同じ画像ファイル内の個々の画像を区別する方法として背景の位置を使用することで、 HTTP リクエストの数を減らすことができます。

- -
-

注: HTTP/2 を使用する場合は、複数の小さなリクエストを使用する方が、実際には帯域幅に負荷を掛けない可能性があります。

-
- -

実装

- -

例えば、 toolbtn クラスを持つすべてのアイテムに画像が与えられるとします。

- -
.toolbtn {
-  background: url(myfile.png);
-  display: inline-block;
-  height: 20px;
-  width: 20px;
-}
- -

背景の位置は、 background の中で {{cssxref("url()")}} の後に x と y の2つの値として、または {{cssxref("background-position")}} として追加できます。

- -
#btn1 {
-  background-position: -20px 0px;
-}
-
-#btn2 {
-  background-position: -40px 0px;
-}
- -

これは ID が 'btn1' の要素を左に20ピクセル、 ID が 'btn2' の要素を左に40ピクセル移動します (これらの要素には toolbtn クラスが割り当てられており、上記の画像ルールの影響を受けているとします)。

- -

同様に、ホバー状態にすることもできます。

- -
#btn:hover {
-  background-position: <右方向へずらすピクセル数>px <下方向へずらすピクセル数>px;
-}
- -

関連記事

- - diff --git a/files/ja/web/css/css_images/implementing_image_sprites_in_css/index.md b/files/ja/web/css/css_images/implementing_image_sprites_in_css/index.md new file mode 100644 index 0000000000..acef249aad --- /dev/null +++ b/files/ja/web/css/css_images/implementing_image_sprites_in_css/index.md @@ -0,0 +1,56 @@ +--- +title: CSS での画像スプライトの実装 +slug: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS +tags: + - Advanced + - CSS + - CSS Images + - Graphics + - Guide + - NeedsContent + - Sprites + - Web +translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS +--- +

{{cssRef}}

+ +

画像スプライトは、複数の画像を使用する多くのウェブアプリで使用されています。それぞれの画像を個別の画像ファイルとして含めるのではなく、1枚の画像として送信した方が、メモリや帯域幅の面ではるかに有利です。同じ画像ファイル内の個々の画像を区別する方法として背景の位置を使用することで、 HTTP リクエストの数を減らすことができます。

+ +
+

注: HTTP/2 を使用する場合は、複数の小さなリクエストを使用する方が、実際には帯域幅に負荷を掛けない可能性があります。

+
+ +

実装

+ +

例えば、 toolbtn クラスを持つすべてのアイテムに画像が与えられるとします。

+ +
.toolbtn {
+  background: url(myfile.png);
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+}
+ +

背景の位置は、 background の中で {{cssxref("url()")}} の後に x と y の2つの値として、または {{cssxref("background-position")}} として追加できます。

+ +
#btn1 {
+  background-position: -20px 0px;
+}
+
+#btn2 {
+  background-position: -40px 0px;
+}
+ +

これは ID が 'btn1' の要素を左に20ピクセル、 ID が 'btn2' の要素を左に40ピクセル移動します (これらの要素には toolbtn クラスが割り当てられており、上記の画像ルールの影響を受けているとします)。

+ +

同様に、ホバー状態にすることもできます。

+ +
#btn:hover {
+  background-position: <右方向へずらすピクセル数>px <下方向へずらすピクセル数>px;
+}
+ +

関連記事

+ + diff --git a/files/ja/web/css/css_images/using_css_gradients/index.html b/files/ja/web/css/css_images/using_css_gradients/index.html deleted file mode 100644 index bb810f605e..0000000000 --- a/files/ja/web/css/css_images/using_css_gradients/index.html +++ /dev/null @@ -1,750 +0,0 @@ ---- -title: CSS グラデーションの使用 -slug: Web/CSS/CSS_Images/Using_CSS_gradients -tags: - - Advanced - - CSS - - CSS Images - - Example - - Gradients - - Guide - - Web -translation_of: Web/CSS/CSS_Images/Using_CSS_gradients ---- -
{{CSSRef}}
- -

CSS グラデーションは {{cssxref("<gradient>")}} データ型で表現され、2つ以上の色の間の連続的な変化から成る {{cssxref("<image>")}} の特殊型です。グラデーションは3種類から選択することができます。線形 (linear) ({{cssxref("linear-gradient")}} 関数によって生成)、放射 (radial) ({{cssxref("radial-gradient")}} 関数によって生成)、扇形 (conic) ({{cssxref("conic-gradient")}} 関数によって生成) の3種類です。 {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}} の各関数によって、反復グラデーションを生成することもできます。

- -

グラデーションは、例えば背景など、 <image> が使えるところならば、どこでも利用できます。グラデーションは動的に生成されるため、従来は同様の効果を実現するために使用されていたラスタ画像ファイルを必要としません。加えて、グラデーションはブラウザーによって生成されるため、拡大した際に見栄えがより良く、その場で大きさを変更することもできます。

- -

最初に線形グラデーションの紹介から始め、次にすべてのグラデーション型で対応している機能を、線形グラデーションを例として紹介し、それから放射グラデーション、扇形グラデーション、反復グラデーションへと移ります。

- -

線形グラデーションの使用

- -

線形グラデーションは、直線に沿った色の帯の変化を生成します。

- -
-

基本的な線形グラデーション

- -

グラデーションの最も基本的な形を作成するために必要なことは、2つの色を指定することです。これらは色経由点 (color stops) と呼ばれています。少なくとも2つ必要ですが、必要なだけの数を設定することができます。

- - - -
.simple-linear {
-  background: linear-gradient(blue, pink);
-}
- -

{{ EmbedLiveSample('A_basic_linear_gradient', 120, 120) }}

-
- -
-

方向の変更

- -

既定では、線形グラデーションは上から下へ向けて変化します。方向を指定することで向きを変更することができます。

- - - -
.horizontal-gradient {
-  background: linear-gradient(to right, blue, pink);
-}
-
- -

{{ EmbedLiveSample('Changing_the_direction', 120, 120) }}

-
- -
-

対角グラデーション

- -

グラデーションを角から角へ、対角に作成することもできます。

- - - -
.diagonal-gradient {
-  background: linear-gradient(to bottom right, blue, pink);
-}
-
- -

{{ EmbedLiveSample('Diagonal_gradients', 200, 100) }}

-
- -
-

角度の指定

- -

方向についてもっと制御したい場合は、グラデーションに特定の角度を設定することができます。

- - - -
.angled-gradient {
-  background: linear-gradient(70deg, blue, pink);
-}
-
- -

{{ EmbedLiveSample('Using_angles', 120, 120) }}

- -

角度を指定した場合、 0deg は下から上への垂直グラデーションを生成し、 90deg は左から右への水平グラデーションを生成し、同様に、時計回りに回転します。負の数の角度を指定すると、反時計回りになります。

- -

linear_redangles.png

-
- -

色の宣言と効果の生成

- -

すべてのCSS グラデーション型は位置に依存した色の範囲です。 CSS グラデーションで生成される色は、位置によって連続的に変化し、円滑な色の遷移を生み出します。単色の帯や、二つの色の間の急な遷移を生成することもできます。以下のことはすべてのグラデーション関数に言えます。

- -
-

3つ以上の色の使用

- -

2つの色に限定する必要はありません — 好きなだけ使うことができます。既定では、各色はグラデーション内で等分の幅になります。

- - - -
.auto-spaced-linear-gradient {
-  background: linear-gradient(red, yellow, blue, orange);
-}
-
- -

{{ EmbedLiveSample('Using_more_than_two_colors', 120, 120) }}

-
- -
-

色経由点の配置

- -

色経由点は既定の位置から動かすこともできます。位置を細かく調整するには、それぞれの色経由点に0～2個のパーセント値、または放射・線形グラデーションの場合は絶対的な長さの値を指定することができます。一をパーセント値で指定する場合は、 0% が開始点を示し、 100% が終了点を示します。但し、実現したい効果を得るために必要であれば、この範囲外の値を使用することもできます。位置を指定しないままにした場合は、その色経由点の位置は自動的に計算され、最初の色経由点は 0% に、最後の色経由点は 100% になり、他の色経由点は隣の色経由点の間の中間点になります。

- - - -
.multicolor-linear {
-   background: linear-gradient(to left, lime 28px, red 77%, cyan);
-}
-
- -

{{ EmbedLiveSample('Positioning_color_stops', 120, 120) }}

-
- -
-

不連続線の生成

- -

2つの色の間に不連続線を生成して、グラデーションの遷移の代わりに縞模様を生成するなら、隣り合う色経由点を同じ位置に設定することができます。この例では、二つの色がグラデーションの中央である 50% の色経由点を共有しています。

- - - -
.striped {
-   background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
-}
- -

{{ EmbedLiveSample('Creating_hard_lines', 120, 120) }}

-
- -
-

グラデーションのヒント

- -

既定では、グラデーションは1つの色から次の色へ均等に変化します。色ヒントを加えることで、変化値の中央点をグラデーションの特定の位置に移動することができます。この例では、変化の中央点を 50% の位置から 10% の位置へ移動します。

- - - -
.color-hint {
-  background: linear-gradient(blue, 10%, pink);
-}
-.simple-linear {
-  background: linear-gradient(blue, pink);
-}
- -

{{ EmbedLiveSample('Gradient_hints', 120, 120) }}

-
- -
-

色の帯と縞の生成

- -

グラデーションの中に単色で遷移しない色の領域を含めるには、色経由点に2つの位置を含めます。色経由点には2つの位置を設定することができ、これは、異なる位置に同じ色を持つ2つの連続した色経由点に相当します。色は、第1の色経由点で完全な彩度に達し、第2の色経由点までその彩度を維持し、隣接する色経由点の第1の位置を介して隣接する色経由点の色に遷移します。

- - - -
.multiposition-stops {
-   background: linear-gradient(to left,
-       lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
-   background: linear-gradient(to left,
-       lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
-}
-.multiposition-stop2 {
-   background: linear-gradient(to left,
-      lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% );
-   background: linear-gradient(to left,
-      lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% );
-}
-
- -

{{ EmbedLiveSample('Creating_color_bands_stripes', 120, 120) }}

- -

上記の第1の例では、ライムは、暗黙の 0% の位置から 20% の位置まで進み、グラデーションの幅の次の 10% の間にライムから赤へと変化し、 30% の位置で単色の赤に到達し、グラデーションを通して 45% まで単色の赤のままであり、ここでシアンにフェードアウトし、グラデーションの 15% の間は完全にシアンになる、というようになっています。

- -

第2の例では、各色の2番目の色経由点は、隣接する色の第1の色経由点と同じ位置にあり、縞模様の効果を生み出しています。

- -

いずれの例でも、グラデーションは2回書かれます。第1の例は CSS Images Level 3 の方法で、色経由点ごとに色を繰り返しており、第2の例は CSS Images Level 4 の方法で、それぞれの色経由点の宣言に色経由の長さが2つずつ含まれています。

-
- -
-

グラデーションの進行の制御

- -

既定では、グラデーションは隣接する2つの色経由点の色の間で均等に進行し、それら2つの色経由点の間の中間点が中間の色の値となります。カラーヒントの位置を指定することで、2つの色経由点間の補間、つまり進行を制御することができます。この例では、色はグラデーションの途中でライムとシアンの間の中間点に到達しますが、 50% の割合ではなく、 20% の割合で到達しています。第2の例では、カラーヒントが作ることができる違いをハイライトするためのヒントは含まれていません。

- - - -
.colorhint-gradient {
-  background: linear-gradient(to top, black, 20%, cyan);
-}
-.regular-progression {
-  background: linear-gradient(to top, black, cyan);
-}
-
- -

{{ EmbedLiveSample('Controlling_the_progression_of_a_gradient', 120, 120) }}

-
- -

グラデーションの重ね合わせ

- -

グラデーションは透明度に対応しているので、複数の背景を重ねて、かなり派手な効果を得ることができます。背景は上から下に重ねられ、最初に指定されたものが上になります。

- - - -
.layered-image {
-  background: linear-gradient(to right, transparent, mistyrose),
-      url("https://mdn.mozillademos.org/files/15525/critters.png");
-}
-
- -

{{ EmbedLiveSample('Overlaying_gradients', 300, 150) }}

- -

グラデーションの積み重ね

- -

グラデーションを他のグラデーションと重ねることもできます。上のグラデーションが完全に不透明でない限り、下のグラデーションは表示されます。

- - - -
.stacked-linear {
-  background:
-      linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-      linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-      linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-}
-
- -

{{ EmbedLiveSample('Stacked_gradients', 200, 200) }}

- -

放射グラデーションの使用

- -

放射グラデーションは線形グラデーションと似ていますが、中心点から放射状に広がる点が異なります。中心点をどこに置くかは決めることができます。円形や楕円形を作成することもできます。

- -

基本的な放射グラデーション

- -

線形グラデーションと同様に、放射グラデーションを作成するために必要なのは 2 つの色だけです。既定では、グラデーションの中心は 50% 50% の位置にあり、グラデーションはボックスの縦横比に合わせて楕円形になっています。

- - - -
.simple-radial {
-  background: radial-gradient(red, blue);
-}
-
- -

{{ EmbedLiveSample('A_basic_radial_gradient', 120, 120) }}

- -

放射色経由点の配置

- -

ここでも線形グラデーションのように、放射の各色経由点をパーセント値または絶対長で配置することができます。

- - - -
.radial-gradient {
-  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
-}
-
- -

{{ EmbedLiveSample('Positioning_radial_color_stops', 120, 120) }}

- -

グラデーションの中心の配置

- -

グラデーションの中心の位置は、キーワード、パーセント値、絶対的な長さで配置することができ、長さとパーセント値が1つだけの場合は繰り返して用いられ、それ以外の場合は左からの位置と上からの位置の順で用いられます。

- - - -
.radial-gradient {
-  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
-}
-
- -

{{ EmbedLiveSample('Positioning_the_center_of_the_gradient', 120, 120) }}

- -

放射グラデーションの大きさの変更

- -

線形グラデーションとは異なり、放射グラデーションは大きさを指定することができます。指定可能な値には、 closest-corner, closest-side, farthest-corner, farthest-side があり、 farthest-corner が既定値です。

- -

例: 楕円の closest-side

- -

This example uses the closest-side size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.

- - - -
.radial-ellipse-side {
-  background: radial-gradient(ellipse closest-side,
-      red, yellow 10%, #1e90ff 50%, beige);
-}
-
- -

{{ EmbedLiveSample('Example_closest-side_for_ellipses', 240, 100) }}

- -

例: 楕円の farthest-corner

- -

This example is similar to the previous one, except that its size is specified as farthest-corner, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.

- - - -
.radial-ellipse-far {
-  background: radial-gradient(ellipse farthest-corner at 90% 90%,
-      red, yellow 10%, #1e90ff 50%, beige);
-}
-
- -

{{ EmbedLiveSample('Example_farthest-corner_for_ellipses', 240, 100) }}

- -

例: 縁の closest-side

- -

This example uses closest-side, which makes the circle's size to be the distance between the starting point (the center) and the closest side. The circle's radius is the distance between the center of the gradient and the closest edge, which due to the positioning of the 25% from the top and 25% from the bottom, is closest to the bottom, since the height in this case is narrower than the width.

- - - -
.radial-circle-close {
-  background: radial-gradient(circle closest-side at 25% 75%,
-      red, yellow 10%, #1e90ff 50%, beige);
-}
-
- -

{{ EmbedLiveSample('Example_closest-side_for_circles', 240, 120) }}

- -

放射グラデーションの積み重ね

- -

Just like linear gradients, you can also stack radial gradients. The first specified is on top, the last on the bottom.

- - - -
.stacked-radial {
-  background:
-      radial-gradient(circle at 50% 0,
-        rgba(255,0,0,.5),
-        rgba(255,0,0,0) 70.71%),
-      radial-gradient(circle at 6.7% 75%,
-        rgba(0,0,255,.5),
-        rgba(0,0,255,0) 70.71%),
-      radial-gradient(circle at 93.3% 75%,
-        rgba(0,255,0,.5),
-        rgba(0,255,0,0) 70.71%) beige;
-  border-radius: 50%;
-}
-
- -

{{ EmbedLiveSample('Stacked_radial_gradients', 200, 200) }}

- -

扇形グラデーションの使用

- -

conic-gradient() は CSS の関数で、 (中心から広がるのではなく) 中心点の周りを回りながら色が変化するグラデーションから成る画像を生成します。扇型グラデーションの例としては、円グラフや色相環などがありますが、チェッカーボードやその他の面白い効果を生み出すために使用することもできます。

- -

扇形グラデーションは放射グラデーションの構文と似ていますが、色経由点はグラデーションの中心から現れるグラデーションライン上ではなく、グラデーションアーク、すなわち円周上に配置され、色経由点はパーセント値または角度で表します。絶対的な長さは有効ではありません。

- -

In a radial gradient, the colors transition from the center of an ellipse, outward, in all directions. With conic gradients, the colors transition as as if spun around the center of a circle, starting at the top and going clockwise. Similar to radial gradients, you can position the center of the gradient. Similar to linear gradients, you can change the gradient angle.

- -
-

基本的な扇形グラデーション

- -

As with linear and radial gradients, all you need to create a conic gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, with the start of the gradient facing up:

- - - -
.simple-conic {
-  background: conic-gradient(red, blue);
-}
-
- -

{{ EmbedLiveSample('A_basic_conic_gradient', 120, 120) }}

-
- -
-

扇形の中央の配置

- -

Like radial gradients, you can position the center of the conic gradient with keyterms, percentage, or absolute lengths, with the keyword "at"

- - - -
.conic-gradient {
-  background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
-}
-
- -

{{ EmbedLiveSample('Positioning_the_conic_center', 120, 120) }}

-
- -
-

角度の変更

- -

Like radial gradients, you can position the center of the conic gradient with keyterms, percentage, or absolute lengths, with the keyword "at"

- - - -
.conic-gradient {
-  background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple);
-}
-
- -

{{ EmbedLiveSample('Changing_the_angle', 120, 120) }}

-
- -

反復グラデーションの使用

- -

The {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, and {{cssxref("conic-gradient")}} functions don't support automatically repeated color stops. However, the {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, and {{cssxref("repeating-conic-gradient")}} functions are available to offer this functionality.

- -

The size of the gradient line or arc that repeats is the length between the first color stop value and the last color stop length value. If the first color stop just has a color and no color stop length, the value defaults to 0. If the last color stop has just a color and no color stop length, the value defaults to 100%. If neither is declared, the gradient line is 100% meaning the linear and conic gradients will not repeat and the radial gradient will only repeat if the radius of the gradient is smaller than the length between the center of the gradient and the farthest corner. If the first color stop is declared, and the value is greater than 0, the gradient will repeat, as the size of the line or arc is the difference between the first color stop and last color stop is less than 100% or 360 degrees.

- -
-

反復線形グラデーション

- -

This example uses {{cssxref("repeating-linear-gradient")}} to create a gradient that progresses repeatedly in a straight line. The colors get cycled over again as the gradient repeats. In this case the gradient line is 10px long.

- - - -
.repeating-linear {
-  background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
-}
-
- -

{{ EmbedLiveSample('Repeating_linear_gradients', 120, 120) }}

-
- -
-

複数の反復線形グラデーション

- -

Similar to regular linear and radial gradients, you can include multiple gradients, one on top of the other. This only makes sense if the gradients are partially transparent allowing subsequent gradients to show through the transparent areas, or if you include different background-sizes, optionally with different background-position property values, for each gradient image. We are using transparency.

- -

In this case the gradient lines are 300px, 230px, and 300px long.

- - - -
.multi-repeating-linear {
-  background:
-      repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
-        rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
-        rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
-        rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
-        rgba(255, 0, 0, 0.5) 300px),
-      repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
-        rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
-        rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
-        rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
-        rgba(255, 0, 0, 0.5) 230px),
-      repeating-linear-gradient(23deg, red 50px, orange 100px,
-        yellow 150px, green 200px, blue 250px,
-        indigo 300px, violet 350px, red 370px);
-}
-
- -

{{ EmbedLiveSample('Multiple_repeating_linear_gradients', 600, 400) }}

-
- -

格子縞のグラデーション

- -

To create plaid we include several overlapping gradients with transparency. In the first background declaration we listed every color stop separately. The second background property declaration using the multiple position color stop syntax:

- - - -
.plaid-gradient {
-  background:
-      repeating-linear-gradient(90deg, transparent, transparent 50px,
-        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
-        transparent 56px, transparent 63px,
-        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
-        transparent 69px, transparent 116px,
-        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
-      repeating-linear-gradient(0deg, transparent, transparent 50px,
-        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
-        transparent 56px, transparent 63px,
-        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
-        transparent 69px, transparent 116px,
-        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
-      repeating-linear-gradient(-45deg, transparent, transparent 5px,
-        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
-      repeating-linear-gradient(45deg, transparent, transparent 5px,
-        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
-
-  background:
-      repeating-linear-gradient(90deg, transparent 0 50px,
-        rgba(255, 127, 0, 0.25) 50px 56px,
-        transparent 56px 63px,
-        rgba(255, 127, 0, 0.25) 63px 69px,
-        transparent 69px 116px,
-        rgba(255, 206, 0, 0.25) 116px 166px),
-      repeating-linear-gradient(0deg, transparent 0 50px,
-        rgba(255, 127, 0, 0.25) 50px 56px,
-        transparent 56px 63px,
-        rgba(255, 127, 0, 0.25) 63px 69px,
-        transparent 69px 116px,
-        rgba(255, 206, 0, 0.25) 116px 166px),
-      repeating-linear-gradient(-45deg, transparent 0 5px,
-        rgba(143, 77, 63, 0.25) 5px 10px),
-      repeating-linear-gradient(45deg, transparent 0 5px,
-        rgba(143, 77, 63, 0.25) 5px 10px);
-}
-
- -

{{ EmbedLiveSample('Plaid_gradient', 200, 200) }}

- -

反復放射グラデーション

- -

この例は {{cssxref("repeating-radial-gradient")}} を使用して、中央店から放射状に反復されるグラデーションを生成します。色はグラデーションが反復するたびに周期的に繰り返されます。

- - - -
.repeating-radial {
-  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
-}
-
- -

{{ EmbedLiveSample('Repeating_radial_gradients', 120, 120) }}

- -

複数の反復放射グラデーション

- - - -
.multi-target {
-  background:
-      repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
-        rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
-        rgba(255,255,255,0.5) 30px) top left no-repeat,
-      repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5),
-        rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px,
-        rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
-  background-size: 200px 200px, 150px 150px;
-}
-
- -

{{ EmbedLiveSample('Multiple_repeating_radial_gradients', 250, 150) }}

- -

関連記事

- - diff --git a/files/ja/web/css/css_images/using_css_gradients/index.md b/files/ja/web/css/css_images/using_css_gradients/index.md new file mode 100644 index 0000000000..bb810f605e --- /dev/null +++ b/files/ja/web/css/css_images/using_css_gradients/index.md @@ -0,0 +1,750 @@ +--- +title: CSS グラデーションの使用 +slug: Web/CSS/CSS_Images/Using_CSS_gradients +tags: + - Advanced + - CSS + - CSS Images + - Example + - Gradients + - Guide + - Web +translation_of: Web/CSS/CSS_Images/Using_CSS_gradients +--- +
{{CSSRef}}
+ +

CSS グラデーションは {{cssxref("<gradient>")}} データ型で表現され、2つ以上の色の間の連続的な変化から成る {{cssxref("<image>")}} の特殊型です。グラデーションは3種類から選択することができます。線形 (linear) ({{cssxref("linear-gradient")}} 関数によって生成)、放射 (radial) ({{cssxref("radial-gradient")}} 関数によって生成)、扇形 (conic) ({{cssxref("conic-gradient")}} 関数によって生成) の3種類です。 {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}} の各関数によって、反復グラデーションを生成することもできます。

+ +

グラデーションは、例えば背景など、 <image> が使えるところならば、どこでも利用できます。グラデーションは動的に生成されるため、従来は同様の効果を実現するために使用されていたラスタ画像ファイルを必要としません。加えて、グラデーションはブラウザーによって生成されるため、拡大した際に見栄えがより良く、その場で大きさを変更することもできます。

+ +

最初に線形グラデーションの紹介から始め、次にすべてのグラデーション型で対応している機能を、線形グラデーションを例として紹介し、それから放射グラデーション、扇形グラデーション、反復グラデーションへと移ります。

+ +

線形グラデーションの使用

+ +

線形グラデーションは、直線に沿った色の帯の変化を生成します。

+ +
+

基本的な線形グラデーション

+ +

グラデーションの最も基本的な形を作成するために必要なことは、2つの色を指定することです。これらは色経由点 (color stops) と呼ばれています。少なくとも2つ必要ですが、必要なだけの数を設定することができます。

+ + + +
.simple-linear {
+  background: linear-gradient(blue, pink);
+}
+ +

{{ EmbedLiveSample('A_basic_linear_gradient', 120, 120) }}

+
+ +
+

方向の変更

+ +

既定では、線形グラデーションは上から下へ向けて変化します。方向を指定することで向きを変更することができます。

+ + + +
.horizontal-gradient {
+  background: linear-gradient(to right, blue, pink);
+}
+
+ +

{{ EmbedLiveSample('Changing_the_direction', 120, 120) }}

+
+ +
+

対角グラデーション

+ +

グラデーションを角から角へ、対角に作成することもできます。

+ + + +
.diagonal-gradient {
+  background: linear-gradient(to bottom right, blue, pink);
+}
+
+ +

{{ EmbedLiveSample('Diagonal_gradients', 200, 100) }}

+
+ +
+

角度の指定

+ +

方向についてもっと制御したい場合は、グラデーションに特定の角度を設定することができます。

+ + + +
.angled-gradient {
+  background: linear-gradient(70deg, blue, pink);
+}
+
+ +

{{ EmbedLiveSample('Using_angles', 120, 120) }}

+ +

角度を指定した場合、 0deg は下から上への垂直グラデーションを生成し、 90deg は左から右への水平グラデーションを生成し、同様に、時計回りに回転します。負の数の角度を指定すると、反時計回りになります。

+ +

linear_redangles.png

+
+ +

色の宣言と効果の生成

+ +

すべてのCSS グラデーション型は位置に依存した色の範囲です。 CSS グラデーションで生成される色は、位置によって連続的に変化し、円滑な色の遷移を生み出します。単色の帯や、二つの色の間の急な遷移を生成することもできます。以下のことはすべてのグラデーション関数に言えます。

+ +
+

3つ以上の色の使用

+ +

2つの色に限定する必要はありません — 好きなだけ使うことができます。既定では、各色はグラデーション内で等分の幅になります。

+ + + +
.auto-spaced-linear-gradient {
+  background: linear-gradient(red, yellow, blue, orange);
+}
+
+ +

{{ EmbedLiveSample('Using_more_than_two_colors', 120, 120) }}

+
+ +
+

色経由点の配置

+ +

色経由点は既定の位置から動かすこともできます。位置を細かく調整するには、それぞれの色経由点に0～2個のパーセント値、または放射・線形グラデーションの場合は絶対的な長さの値を指定することができます。一をパーセント値で指定する場合は、 0% が開始点を示し、 100% が終了点を示します。但し、実現したい効果を得るために必要であれば、この範囲外の値を使用することもできます。位置を指定しないままにした場合は、その色経由点の位置は自動的に計算され、最初の色経由点は 0% に、最後の色経由点は 100% になり、他の色経由点は隣の色経由点の間の中間点になります。

+ + + +
.multicolor-linear {
+   background: linear-gradient(to left, lime 28px, red 77%, cyan);
+}
+
+ +

{{ EmbedLiveSample('Positioning_color_stops', 120, 120) }}

+
+ +
+

不連続線の生成

+ +

2つの色の間に不連続線を生成して、グラデーションの遷移の代わりに縞模様を生成するなら、隣り合う色経由点を同じ位置に設定することができます。この例では、二つの色がグラデーションの中央である 50% の色経由点を共有しています。

+ + + +
.striped {
+   background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
+}
+ +

{{ EmbedLiveSample('Creating_hard_lines', 120, 120) }}

+
+ +
+

グラデーションのヒント

+ +

既定では、グラデーションは1つの色から次の色へ均等に変化します。色ヒントを加えることで、変化値の中央点をグラデーションの特定の位置に移動することができます。この例では、変化の中央点を 50% の位置から 10% の位置へ移動します。

+ + + +
.color-hint {
+  background: linear-gradient(blue, 10%, pink);
+}
+.simple-linear {
+  background: linear-gradient(blue, pink);
+}
+ +

{{ EmbedLiveSample('Gradient_hints', 120, 120) }}

+
+ +
+

色の帯と縞の生成

+ +

グラデーションの中に単色で遷移しない色の領域を含めるには、色経由点に2つの位置を含めます。色経由点には2つの位置を設定することができ、これは、異なる位置に同じ色を持つ2つの連続した色経由点に相当します。色は、第1の色経由点で完全な彩度に達し、第2の色経由点までその彩度を維持し、隣接する色経由点の第1の位置を介して隣接する色経由点の色に遷移します。

+ + + +
.multiposition-stops {
+   background: linear-gradient(to left,
+       lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
+   background: linear-gradient(to left,
+       lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
+}
+.multiposition-stop2 {
+   background: linear-gradient(to left,
+      lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% );
+   background: linear-gradient(to left,
+      lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% );
+}
+
+ +

{{ EmbedLiveSample('Creating_color_bands_stripes', 120, 120) }}

+ +

上記の第1の例では、ライムは、暗黙の 0% の位置から 20% の位置まで進み、グラデーションの幅の次の 10% の間にライムから赤へと変化し、 30% の位置で単色の赤に到達し、グラデーションを通して 45% まで単色の赤のままであり、ここでシアンにフェードアウトし、グラデーションの 15% の間は完全にシアンになる、というようになっています。

+ +

第2の例では、各色の2番目の色経由点は、隣接する色の第1の色経由点と同じ位置にあり、縞模様の効果を生み出しています。

+ +

いずれの例でも、グラデーションは2回書かれます。第1の例は CSS Images Level 3 の方法で、色経由点ごとに色を繰り返しており、第2の例は CSS Images Level 4 の方法で、それぞれの色経由点の宣言に色経由の長さが2つずつ含まれています。

+
+ +
+

グラデーションの進行の制御

+ +

既定では、グラデーションは隣接する2つの色経由点の色の間で均等に進行し、それら2つの色経由点の間の中間点が中間の色の値となります。カラーヒントの位置を指定することで、2つの色経由点間の補間、つまり進行を制御することができます。この例では、色はグラデーションの途中でライムとシアンの間の中間点に到達しますが、 50% の割合ではなく、 20% の割合で到達しています。第2の例では、カラーヒントが作ることができる違いをハイライトするためのヒントは含まれていません。

+ + + +
.colorhint-gradient {
+  background: linear-gradient(to top, black, 20%, cyan);
+}
+.regular-progression {
+  background: linear-gradient(to top, black, cyan);
+}
+
+ +

{{ EmbedLiveSample('Controlling_the_progression_of_a_gradient', 120, 120) }}

+
+ +

グラデーションの重ね合わせ

+ +

グラデーションは透明度に対応しているので、複数の背景を重ねて、かなり派手な効果を得ることができます。背景は上から下に重ねられ、最初に指定されたものが上になります。

+ + + +
.layered-image {
+  background: linear-gradient(to right, transparent, mistyrose),
+      url("https://mdn.mozillademos.org/files/15525/critters.png");
+}
+
+ +

{{ EmbedLiveSample('Overlaying_gradients', 300, 150) }}

+ +

グラデーションの積み重ね

+ +

グラデーションを他のグラデーションと重ねることもできます。上のグラデーションが完全に不透明でない限り、下のグラデーションは表示されます。

+ + + +
.stacked-linear {
+  background:
+      linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+      linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+      linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+}
+
+ +

{{ EmbedLiveSample('Stacked_gradients', 200, 200) }}

+ +

放射グラデーションの使用

+ +

放射グラデーションは線形グラデーションと似ていますが、中心点から放射状に広がる点が異なります。中心点をどこに置くかは決めることができます。円形や楕円形を作成することもできます。

+ +

基本的な放射グラデーション

+ +

線形グラデーションと同様に、放射グラデーションを作成するために必要なのは 2 つの色だけです。既定では、グラデーションの中心は 50% 50% の位置にあり、グラデーションはボックスの縦横比に合わせて楕円形になっています。

+ + + +
.simple-radial {
+  background: radial-gradient(red, blue);
+}
+
+ +

{{ EmbedLiveSample('A_basic_radial_gradient', 120, 120) }}

+ +

放射色経由点の配置

+ +

ここでも線形グラデーションのように、放射の各色経由点をパーセント値または絶対長で配置することができます。

+ + + +
.radial-gradient {
+  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
+}
+
+ +

{{ EmbedLiveSample('Positioning_radial_color_stops', 120, 120) }}

+ +

グラデーションの中心の配置

+ +

グラデーションの中心の位置は、キーワード、パーセント値、絶対的な長さで配置することができ、長さとパーセント値が1つだけの場合は繰り返して用いられ、それ以外の場合は左からの位置と上からの位置の順で用いられます。

+ + + +
.radial-gradient {
+  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
+}
+
+ +

{{ EmbedLiveSample('Positioning_the_center_of_the_gradient', 120, 120) }}

+ +

放射グラデーションの大きさの変更

+ +

線形グラデーションとは異なり、放射グラデーションは大きさを指定することができます。指定可能な値には、 closest-corner, closest-side, farthest-corner, farthest-side があり、 farthest-corner が既定値です。

+ +

例: 楕円の closest-side

+ +

This example uses the closest-side size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.

+ + + +
.radial-ellipse-side {
+  background: radial-gradient(ellipse closest-side,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+
+ +

{{ EmbedLiveSample('Example_closest-side_for_ellipses', 240, 100) }}

+ +

例: 楕円の farthest-corner

+ +

This example is similar to the previous one, except that its size is specified as farthest-corner, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.

+ + + +
.radial-ellipse-far {
+  background: radial-gradient(ellipse farthest-corner at 90% 90%,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+
+ +

{{ EmbedLiveSample('Example_farthest-corner_for_ellipses', 240, 100) }}

+ +

例: 縁の closest-side

+ +

This example uses closest-side, which makes the circle's size to be the distance between the starting point (the center) and the closest side. The circle's radius is the distance between the center of the gradient and the closest edge, which due to the positioning of the 25% from the top and 25% from the bottom, is closest to the bottom, since the height in this case is narrower than the width.

+ + + +
.radial-circle-close {
+  background: radial-gradient(circle closest-side at 25% 75%,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+
+ +

{{ EmbedLiveSample('Example_closest-side_for_circles', 240, 120) }}

+ +

放射グラデーションの積み重ね

+ +

Just like linear gradients, you can also stack radial gradients. The first specified is on top, the last on the bottom.

+ + + +
.stacked-radial {
+  background:
+      radial-gradient(circle at 50% 0,
+        rgba(255,0,0,.5),
+        rgba(255,0,0,0) 70.71%),
+      radial-gradient(circle at 6.7% 75%,
+        rgba(0,0,255,.5),
+        rgba(0,0,255,0) 70.71%),
+      radial-gradient(circle at 93.3% 75%,
+        rgba(0,255,0,.5),
+        rgba(0,255,0,0) 70.71%) beige;
+  border-radius: 50%;
+}
+
+ +

{{ EmbedLiveSample('Stacked_radial_gradients', 200, 200) }}

+ +

扇形グラデーションの使用

+ +

conic-gradient() は CSS の関数で、 (中心から広がるのではなく) 中心点の周りを回りながら色が変化するグラデーションから成る画像を生成します。扇型グラデーションの例としては、円グラフや色相環などがありますが、チェッカーボードやその他の面白い効果を生み出すために使用することもできます。

+ +

扇形グラデーションは放射グラデーションの構文と似ていますが、色経由点はグラデーションの中心から現れるグラデーションライン上ではなく、グラデーションアーク、すなわち円周上に配置され、色経由点はパーセント値または角度で表します。絶対的な長さは有効ではありません。

+ +

In a radial gradient, the colors transition from the center of an ellipse, outward, in all directions. With conic gradients, the colors transition as as if spun around the center of a circle, starting at the top and going clockwise. Similar to radial gradients, you can position the center of the gradient. Similar to linear gradients, you can change the gradient angle.

+ +
+

基本的な扇形グラデーション

+ +

As with linear and radial gradients, all you need to create a conic gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, with the start of the gradient facing up:

+ + + +
.simple-conic {
+  background: conic-gradient(red, blue);
+}
+
+ +

{{ EmbedLiveSample('A_basic_conic_gradient', 120, 120) }}

+
+ +
+

扇形の中央の配置

+ +

Like radial gradients, you can position the center of the conic gradient with keyterms, percentage, or absolute lengths, with the keyword "at"

+ + + +
.conic-gradient {
+  background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
+}
+
+ +

{{ EmbedLiveSample('Positioning_the_conic_center', 120, 120) }}

+
+ +
+

角度の変更

+ +

Like radial gradients, you can position the center of the conic gradient with keyterms, percentage, or absolute lengths, with the keyword "at"

+ + + +
.conic-gradient {
+  background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple);
+}
+
+ +

{{ EmbedLiveSample('Changing_the_angle', 120, 120) }}

+
+ +

反復グラデーションの使用

+ +

The {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, and {{cssxref("conic-gradient")}} functions don't support automatically repeated color stops. However, the {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, and {{cssxref("repeating-conic-gradient")}} functions are available to offer this functionality.

+ +

The size of the gradient line or arc that repeats is the length between the first color stop value and the last color stop length value. If the first color stop just has a color and no color stop length, the value defaults to 0. If the last color stop has just a color and no color stop length, the value defaults to 100%. If neither is declared, the gradient line is 100% meaning the linear and conic gradients will not repeat and the radial gradient will only repeat if the radius of the gradient is smaller than the length between the center of the gradient and the farthest corner. If the first color stop is declared, and the value is greater than 0, the gradient will repeat, as the size of the line or arc is the difference between the first color stop and last color stop is less than 100% or 360 degrees.

+ +
+

反復線形グラデーション

+ +

This example uses {{cssxref("repeating-linear-gradient")}} to create a gradient that progresses repeatedly in a straight line. The colors get cycled over again as the gradient repeats. In this case the gradient line is 10px long.

+ + + +
.repeating-linear {
+  background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
+}
+
+ +

{{ EmbedLiveSample('Repeating_linear_gradients', 120, 120) }}

+
+ +
+

複数の反復線形グラデーション

+ +

Similar to regular linear and radial gradients, you can include multiple gradients, one on top of the other. This only makes sense if the gradients are partially transparent allowing subsequent gradients to show through the transparent areas, or if you include different background-sizes, optionally with different background-position property values, for each gradient image. We are using transparency.

+ +

In this case the gradient lines are 300px, 230px, and 300px long.

+ + + +
.multi-repeating-linear {
+  background:
+      repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
+        rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
+        rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
+        rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
+        rgba(255, 0, 0, 0.5) 300px),
+      repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
+        rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
+        rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
+        rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
+        rgba(255, 0, 0, 0.5) 230px),
+      repeating-linear-gradient(23deg, red 50px, orange 100px,
+        yellow 150px, green 200px, blue 250px,
+        indigo 300px, violet 350px, red 370px);
+}
+
+ +

{{ EmbedLiveSample('Multiple_repeating_linear_gradients', 600, 400) }}

+
+ +

格子縞のグラデーション

+ +

To create plaid we include several overlapping gradients with transparency. In the first background declaration we listed every color stop separately. The second background property declaration using the multiple position color stop syntax:

+ + + +
.plaid-gradient {
+  background:
+      repeating-linear-gradient(90deg, transparent, transparent 50px,
+        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
+        transparent 56px, transparent 63px,
+        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
+        transparent 69px, transparent 116px,
+        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+      repeating-linear-gradient(0deg, transparent, transparent 50px,
+        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
+        transparent 56px, transparent 63px,
+        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
+        transparent 69px, transparent 116px,
+        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+      repeating-linear-gradient(-45deg, transparent, transparent 5px,
+        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
+      repeating-linear-gradient(45deg, transparent, transparent 5px,
+        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
+
+  background:
+      repeating-linear-gradient(90deg, transparent 0 50px,
+        rgba(255, 127, 0, 0.25) 50px 56px,
+        transparent 56px 63px,
+        rgba(255, 127, 0, 0.25) 63px 69px,
+        transparent 69px 116px,
+        rgba(255, 206, 0, 0.25) 116px 166px),
+      repeating-linear-gradient(0deg, transparent 0 50px,
+        rgba(255, 127, 0, 0.25) 50px 56px,
+        transparent 56px 63px,
+        rgba(255, 127, 0, 0.25) 63px 69px,
+        transparent 69px 116px,
+        rgba(255, 206, 0, 0.25) 116px 166px),
+      repeating-linear-gradient(-45deg, transparent 0 5px,
+        rgba(143, 77, 63, 0.25) 5px 10px),
+      repeating-linear-gradient(45deg, transparent 0 5px,
+        rgba(143, 77, 63, 0.25) 5px 10px);
+}
+
+ +

{{ EmbedLiveSample('Plaid_gradient', 200, 200) }}

+ +

反復放射グラデーション

+ +

この例は {{cssxref("repeating-radial-gradient")}} を使用して、中央店から放射状に反復されるグラデーションを生成します。色はグラデーションが反復するたびに周期的に繰り返されます。

+ + + +
.repeating-radial {
+  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+}
+
+ +

{{ EmbedLiveSample('Repeating_radial_gradients', 120, 120) }}

+ +

複数の反復放射グラデーション

+ + + +
.multi-target {
+  background:
+      repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
+        rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
+        rgba(255,255,255,0.5) 30px) top left no-repeat,
+      repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5),
+        rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px,
+        rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
+  background-size: 200px 200px, 150px 150px;
+}
+
+ +

{{ EmbedLiveSample('Multiple_repeating_radial_gradients', 250, 150) }}

+ +

関連記事

+ + diff --git a/files/ja/web/css/element()/index.html b/files/ja/web/css/element()/index.html deleted file mode 100644 index d8922ccaeb..0000000000 --- a/files/ja/web/css/element()/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: element() -slug: Web/CSS/element() -tags: - - CSS - - CSS 関数 - - CSS4-images - - Reference - - ウェブ - - レイアウト -translation_of: Web/CSS/element() ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

CSS の element() 関数は、任意の HTML 要素から生成された {{cssxref("<image>")}} 値を定義します。この画像は動的で、HTML 要素が変更されると、この関数の結果を使う CSS プロパティが自動的に更新されます。

- -

特に便利な使い道は、 {{HTMLElement("canvas")}} 要素の画像を背景に使うというものです。

- -

Gecko ブラウザでは、標準外の {{domxref("document.mozSetImageElement()")}} メソッドで背景として使われる要素を既定の CSS の背景要素と取り替えることができます。

- -

構文

- -
element(id)
- -

where:

- -
-
id
-
背景として使う要素の ID です。要素の HTML 属性 #id に定義されているものです。
-
- -

例

- -

この例は -moz-element() に対応している Firefox で実動例を見ることができます。

- -

ある程度現実的な例

- -

この例では hidden 状態の {{HTMLElement("div")}} を背景に使います。背景要素はグラデーションを使うだけでなく、背景の一部として描画されるテキストも含んでいます。

- -
<div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
-  <p>This box uses the element with the #myBackground1 ID as its background!</p>
-</div>
-
-<div style="overflow:hidden; height:0;">
-  <div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
-  <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p>
-  </div>
-</div>
- -

"myBackground1" という ID を持つ {{HTMLElement("div")}} 要素が、"This box uses the element with the #myBackground1 ID as its background!" という段落を含むコンテンツの、背景に使われています。

- -

example1.png

- -

ある程度とっぴな例

- -

この例は hidden 状態の {{HTMLElement("button")}} 要素を、背景の繰り返しパターンとして使います。これは、好きな要素を背景として使うことができるという例ですが、すぐれたデザインとはいえないかもしれません。

- -
<div style="width:400px; height:100px; background:-moz-element(#myBackground2);">
-</div>
-
-<div style="overflow:hidden; height:0;">
-  <button id="myBackground2" type="button">Evil button!</button>
-</div>
-
- -

example2.png

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}}{{Spec2('CSS4 Images')}}CSS3 Images から延期
- -

ブラウザーの対応

- -
{{Compat("css.types.image.element")}}
- -

関連情報

- - diff --git a/files/ja/web/css/element()/index.md b/files/ja/web/css/element()/index.md new file mode 100644 index 0000000000..d8922ccaeb --- /dev/null +++ b/files/ja/web/css/element()/index.md @@ -0,0 +1,101 @@ +--- +title: element() +slug: Web/CSS/element() +tags: + - CSS + - CSS 関数 + - CSS4-images + - Reference + - ウェブ + - レイアウト +translation_of: Web/CSS/element() +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS の element() 関数は、任意の HTML 要素から生成された {{cssxref("<image>")}} 値を定義します。この画像は動的で、HTML 要素が変更されると、この関数の結果を使う CSS プロパティが自動的に更新されます。

+ +

特に便利な使い道は、 {{HTMLElement("canvas")}} 要素の画像を背景に使うというものです。

+ +

Gecko ブラウザでは、標準外の {{domxref("document.mozSetImageElement()")}} メソッドで背景として使われる要素を既定の CSS の背景要素と取り替えることができます。

+ +

構文

+ +
element(id)
+ +

where:

+ +
+
id
+
背景として使う要素の ID です。要素の HTML 属性 #id に定義されているものです。
+
+ +

例

+ +

この例は -moz-element() に対応している Firefox で実動例を見ることができます。

+ +

ある程度現実的な例

+ +

この例では hidden 状態の {{HTMLElement("div")}} を背景に使います。背景要素はグラデーションを使うだけでなく、背景の一部として描画されるテキストも含んでいます。

+ +
<div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
+  <p>This box uses the element with the #myBackground1 ID as its background!</p>
+</div>
+
+<div style="overflow:hidden; height:0;">
+  <div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
+  <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p>
+  </div>
+</div>
+ +

"myBackground1" という ID を持つ {{HTMLElement("div")}} 要素が、"This box uses the element with the #myBackground1 ID as its background!" という段落を含むコンテンツの、背景に使われています。

+ +

example1.png

+ +

ある程度とっぴな例

+ +

この例は hidden 状態の {{HTMLElement("button")}} 要素を、背景の繰り返しパターンとして使います。これは、好きな要素を背景として使うことができるという例ですが、すぐれたデザインとはいえないかもしれません。

+ +
<div style="width:400px; height:100px; background:-moz-element(#myBackground2);">
+</div>
+
+<div style="overflow:hidden; height:0;">
+  <button id="myBackground2" type="button">Evil button!</button>
+</div>
+
+ +

example2.png

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}}{{Spec2('CSS4 Images')}}CSS3 Images から延期
+ +

ブラウザーの対応

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

関連情報

+ + diff --git a/files/ja/web/css/image-orientation/index.html b/files/ja/web/css/image-orientation/index.html deleted file mode 100644 index 7366e9755b..0000000000 --- a/files/ja/web/css/image-orientation/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: image-orientation -slug: Web/CSS/image-orientation -tags: - - CSS - - CSS Image - - CSS Property - - CSS プロパティ - - CSS 画像 - - EXIF - - Experimental - - Reference - - image-orientation - - リファレンス - - 画像の向き - - 画像補正 -translation_of: Web/CSS/image-orientation ---- -

image-orientation は CSS のプロパティで、画像の向きのレイアウトに依存しない修正を指定します。向きの調整以外に使用してはいけません。そのような場合は、 {{cssxref("transform")}} プロパティで rotate {{cssxref("<transform-function>")}} の値を使用してください。

- -
-

警告: このプロパティは仕様書で非推奨となっています。この機能は {{HTMLElement("img")}} や {{HTMLElement("picture")}} 要素のプロパティに、おそらく from-image の例外を除いて移行する可能性があります。 flip および <angle> の値は Firefox 63 で廃止されました。

-
- -
/* キーワード値 */
-image-orientation: none;
-image-orientation: from-image; /* 画像の EXIF データを使用 */
-
-/* グローバル値 */
-image-orientation: inherit;
-image-orientation: initial;
-image-orientation: unset;
-
-/* 廃止された値 {{obsolete_inline(63)}} */
-image-orientation: 90deg; /* 90度回転 */
-image-orientation: 90deg flip; /* 90度回転して、水平方向に反転 */
-image-orientation: flip; /* 回転せず、水平方向の反転のみ適用 */
- -

{{cssinfo}}

- -

構文

- -

値

- -
-
none
-
既定の初期値です。追加の画像の回転を適用しません。画像はエンコードされた方向、または他の CSS プロパティの値で決められた方向になります。
-
from-image
-
画像に含まれている {{interwiki("wikipedia", "EXIF")}} 情報を使用して、画像の向きを適切にします。
-
{{cssxref("<angle>")}} {{non-standard_inline}}{{obsolete_inline(63)}}
-
画像を回転させる {{cssxref("<angle>")}}。 もっとも近い 90deg (0.25turn) 単位の値に丸められます。
-
flip {{non-standard_inline}}{{obsolete_inline(63)}}
-
{{cssxref("<angle>")}} 値に従って回転した後に、画像を水平方向に反転します (つまり鏡像にします)。 {{cssxref("<angle>")}} を指定しない場合は、 0deg を使用します。
-
- -

形式文法

- -{{csssyntax}} - -

使用上のメモ

- -

このプロパティは、回転したカメラで撮影された画像の方向を修正するためだけを目的としています。自由に回転させるために使用するべきではありません。撮影やスキャンで回転してしまった画像の向きを修正する以外の用途の場合は、 {{cssxref("transform")}} プロパティに rotate キーワードを付けて回転を指定してください。これはユーザーによる画像の向きの変更や、印刷時に縦向きと横向きを変更する必要がある場合も含みます。

- -

{{cssxref("<transform-function>")}} などの他の CSS プロパティとの組み合わせで使用された場合、 image-orientation による回転は、常に他の変形が行われる前に適用されます。

- -

例

- -

CSS

- -
#image {
-  image-orientation: from-image; /* ライブ例の中で変更することができます */
-}
-
- - - -

結果

- -

{{EmbedLiveSample("Example", "100%", 240)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Images', '#the-image-orientation', 'image-orientation')}}{{Spec2('CSS3 Images')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.image-orientation")}}

- -

関連情報

- - - -
{{CSSRef}}
diff --git a/files/ja/web/css/image-orientation/index.md b/files/ja/web/css/image-orientation/index.md new file mode 100644 index 0000000000..7366e9755b --- /dev/null +++ b/files/ja/web/css/image-orientation/index.md @@ -0,0 +1,129 @@ +--- +title: image-orientation +slug: Web/CSS/image-orientation +tags: + - CSS + - CSS Image + - CSS Property + - CSS プロパティ + - CSS 画像 + - EXIF + - Experimental + - Reference + - image-orientation + - リファレンス + - 画像の向き + - 画像補正 +translation_of: Web/CSS/image-orientation +--- +

image-orientation は CSS のプロパティで、画像の向きのレイアウトに依存しない修正を指定します。向きの調整以外に使用してはいけません。そのような場合は、 {{cssxref("transform")}} プロパティで rotate {{cssxref("<transform-function>")}} の値を使用してください。

+ +
+

警告: このプロパティは仕様書で非推奨となっています。この機能は {{HTMLElement("img")}} や {{HTMLElement("picture")}} 要素のプロパティに、おそらく from-image の例外を除いて移行する可能性があります。 flip および <angle> の値は Firefox 63 で廃止されました。

+
+ +
/* キーワード値 */
+image-orientation: none;
+image-orientation: from-image; /* 画像の EXIF データを使用 */
+
+/* グローバル値 */
+image-orientation: inherit;
+image-orientation: initial;
+image-orientation: unset;
+
+/* 廃止された値 {{obsolete_inline(63)}} */
+image-orientation: 90deg; /* 90度回転 */
+image-orientation: 90deg flip; /* 90度回転して、水平方向に反転 */
+image-orientation: flip; /* 回転せず、水平方向の反転のみ適用 */
+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
none
+
既定の初期値です。追加の画像の回転を適用しません。画像はエンコードされた方向、または他の CSS プロパティの値で決められた方向になります。
+
from-image
+
画像に含まれている {{interwiki("wikipedia", "EXIF")}} 情報を使用して、画像の向きを適切にします。
+
{{cssxref("<angle>")}} {{non-standard_inline}}{{obsolete_inline(63)}}
+
画像を回転させる {{cssxref("<angle>")}}。 もっとも近い 90deg (0.25turn) 単位の値に丸められます。
+
flip {{non-standard_inline}}{{obsolete_inline(63)}}
+
{{cssxref("<angle>")}} 値に従って回転した後に、画像を水平方向に反転します (つまり鏡像にします)。 {{cssxref("<angle>")}} を指定しない場合は、 0deg を使用します。
+
+ +

形式文法

+ +{{csssyntax}} + +

使用上のメモ

+ +

このプロパティは、回転したカメラで撮影された画像の方向を修正するためだけを目的としています。自由に回転させるために使用するべきではありません。撮影やスキャンで回転してしまった画像の向きを修正する以外の用途の場合は、 {{cssxref("transform")}} プロパティに rotate キーワードを付けて回転を指定してください。これはユーザーによる画像の向きの変更や、印刷時に縦向きと横向きを変更する必要がある場合も含みます。

+ +

{{cssxref("<transform-function>")}} などの他の CSS プロパティとの組み合わせで使用された場合、 image-orientation による回転は、常に他の変形が行われる前に適用されます。

+ +

例

+ +

CSS

+ +
#image {
+  image-orientation: from-image; /* ライブ例の中で変更することができます */
+}
+
+ + + +

結果

+ +

{{EmbedLiveSample("Example", "100%", 240)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Images', '#the-image-orientation', 'image-orientation')}}{{Spec2('CSS3 Images')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.image-orientation")}}

+ +

関連情報

+ + + +
{{CSSRef}}
diff --git a/files/ja/web/css/image-rendering/index.html b/files/ja/web/css/image-rendering/index.html deleted file mode 100644 index c158a3d034..0000000000 --- a/files/ja/web/css/image-rendering/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: image-rendering -slug: Web/CSS/image-rendering -tags: - - CSS - - CSS プロパティ - - CSS 画像 - - Reference - - image-rendering -translation_of: Web/CSS/image-rendering ---- -
{{CSSRef}}
- -

CSS の image-rendering プロパティは、画像を拡大縮小するアルゴリズムを設定します。このプロパティは要素自身に適用され、他のプロパティで設定されるあらゆる画像、子孫要素に適用されます。

- -

{{Glossary("User agent", "ユーザーエージェント")}}は、ページの作者が自然な寸法とは異なる寸法を指定したとき、画像を拡大縮小します。拡大縮小は、ユーザー操作 (ズーム) によって発生することもあります。例えば、画像の自然な寸法が 100×100px であって、実際の寸法が 200×200px (または 50×50px) であるとき、画像は image-rendering で指定されたアルゴリズムを使用して拡大 (または縮小) されます。このプロパティは拡大/縮小されない画像には効果がありません。

- -

構文

- -
/* キーワード値 */
-image-rendering: auto;
-image-rendering: crisp-edges;
-image-rendering: pixelated;
-
-/* グローバル値 */
-image-rendering: inherit;
-image-rendering: initial;
-image-rendering: unset;
- -

値

- -
-
auto
-
拡大縮小のアルゴリズムはユーザーエージェントに依存します。バージョン 1.9 (Firefox 3.0) から、Gecko はバイリニア (bilinear) 再サンプリングを使用します (high-quality)。
-
smooth {{Experimental_Inline}}
-
画像は、画像の外見を最適化するアルゴリズムで拡大縮小されます。具体的には、バイリニア補完などの色の「円滑化」が許容されるアルゴリズムで拡大縮小されます。これは、写真のような画像を想定しています。
-
high-quality {{Experimental_Inline}}
-
smooth と同等ですが、より高品質な設定です。システムのリソースが制約されている場合、どの画像の品質をどの程度低下させるかを検討するとき。 high-quality の画像は他の値よりも優先されます。
-
crisp-edges
-
画像は、画像内のコントラストとエッジを保つアルゴリズムにより拡大縮小されます、画像の処理過程で色の円滑化やぼかしを導入は行いません。最近傍 (nearest neighbor) 法や、 2×SaI や hqx-family のようなその他のスムーズ化が行われない拡大縮小アルゴリズムなどが適しています。この値はブラウザーゲームようなピクセルアート画像を想定しています。
-
pixelated
-
画像を拡大する時は、最近傍 (nearest neighbor) 法が使用され、画像は画像が大きなピクセルで構成されたように表示されます。縮小する時は auto と同じになります。
-
- -
-

メモ: optimizeQuality および optimizeSpeed の値は、初期の草稿で (SVG の仕様 {{SVGAttr("image-rendering")}} に似たものとして) smooth および pixelated の同義語として定義されていました。

-
- -

形式文法

- -{{CSSSyntax}} - -

例

- - - - - -
.auto {
-  image-rendering: auto;
-}
-
-.pixelated {
-  -ms-interpolation-mode: nearest-neighbor;
-  image-rendering: pixelated;
-}
-
-.crisp-edges {
-  image-rendering: -webkit-optimize-contrast;
-  image-rendering: crisp-edges;
-}
-
- -

{{EmbedLiveSample('Examples')}}

- -
-

メモ: 実際の仕様では、 pixelated と crisp-edges の規則を組み合わせることで、お互いにある程度のフォールバックを提供することができます。 (実際の規則にフォールバックを追加するだけです) Canvas API は手動の画像データ操作または imageSmoothingEnabled によって pixelated の代替ソリューション を提供することができます。

-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Images", "#the-image-rendering", "image-rendering")}}{{Spec2("CSS3 Images")}}初回定義
- -

{{CSSInfo}}

- -

ブラウザーの互換性

- -

{{Compat("css.properties.image-rendering")}}

- -
-

メモ: 仕様書の例にあるようなピクセルアートの拡大縮小には crisp-edges を使うことが想定されていますが、実際にはどのブラウザーも (2020年1月時点で) 対応していません。 Firefox では、 pixelated は最近傍法として解釈されますが、 auto と crisp-edges はトリリニア法または線形で補間されます。

- -

Chromium と Safari (WebKit) での動作については、 GetInterpolationQuality 関数と CSSPrimitiveValue::operator ImageRendering() をそれぞれ参照してください。

-
- -

関連情報

- - diff --git a/files/ja/web/css/image-rendering/index.md b/files/ja/web/css/image-rendering/index.md new file mode 100644 index 0000000000..c158a3d034 --- /dev/null +++ b/files/ja/web/css/image-rendering/index.md @@ -0,0 +1,127 @@ +--- +title: image-rendering +slug: Web/CSS/image-rendering +tags: + - CSS + - CSS プロパティ + - CSS 画像 + - Reference + - image-rendering +translation_of: Web/CSS/image-rendering +--- +
{{CSSRef}}
+ +

CSS の image-rendering プロパティは、画像を拡大縮小するアルゴリズムを設定します。このプロパティは要素自身に適用され、他のプロパティで設定されるあらゆる画像、子孫要素に適用されます。

+ +

{{Glossary("User agent", "ユーザーエージェント")}}は、ページの作者が自然な寸法とは異なる寸法を指定したとき、画像を拡大縮小します。拡大縮小は、ユーザー操作 (ズーム) によって発生することもあります。例えば、画像の自然な寸法が 100×100px であって、実際の寸法が 200×200px (または 50×50px) であるとき、画像は image-rendering で指定されたアルゴリズムを使用して拡大 (または縮小) されます。このプロパティは拡大/縮小されない画像には効果がありません。

+ +

構文

+ +
/* キーワード値 */
+image-rendering: auto;
+image-rendering: crisp-edges;
+image-rendering: pixelated;
+
+/* グローバル値 */
+image-rendering: inherit;
+image-rendering: initial;
+image-rendering: unset;
+ +

値

+ +
+
auto
+
拡大縮小のアルゴリズムはユーザーエージェントに依存します。バージョン 1.9 (Firefox 3.0) から、Gecko はバイリニア (bilinear) 再サンプリングを使用します (high-quality)。
+
smooth {{Experimental_Inline}}
+
画像は、画像の外見を最適化するアルゴリズムで拡大縮小されます。具体的には、バイリニア補完などの色の「円滑化」が許容されるアルゴリズムで拡大縮小されます。これは、写真のような画像を想定しています。
+
high-quality {{Experimental_Inline}}
+
smooth と同等ですが、より高品質な設定です。システムのリソースが制約されている場合、どの画像の品質をどの程度低下させるかを検討するとき。 high-quality の画像は他の値よりも優先されます。
+
crisp-edges
+
画像は、画像内のコントラストとエッジを保つアルゴリズムにより拡大縮小されます、画像の処理過程で色の円滑化やぼかしを導入は行いません。最近傍 (nearest neighbor) 法や、 2×SaI や hqx-family のようなその他のスムーズ化が行われない拡大縮小アルゴリズムなどが適しています。この値はブラウザーゲームようなピクセルアート画像を想定しています。
+
pixelated
+
画像を拡大する時は、最近傍 (nearest neighbor) 法が使用され、画像は画像が大きなピクセルで構成されたように表示されます。縮小する時は auto と同じになります。
+
+ +
+

メモ: optimizeQuality および optimizeSpeed の値は、初期の草稿で (SVG の仕様 {{SVGAttr("image-rendering")}} に似たものとして) smooth および pixelated の同義語として定義されていました。

+
+ +

形式文法

+ +{{CSSSyntax}} + +

例

+ + + + + +
.auto {
+  image-rendering: auto;
+}
+
+.pixelated {
+  -ms-interpolation-mode: nearest-neighbor;
+  image-rendering: pixelated;
+}
+
+.crisp-edges {
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: crisp-edges;
+}
+
+ +

{{EmbedLiveSample('Examples')}}

+ +
+

メモ: 実際の仕様では、 pixelated と crisp-edges の規則を組み合わせることで、お互いにある程度のフォールバックを提供することができます。 (実際の規則にフォールバックを追加するだけです) Canvas API は手動の画像データ操作または imageSmoothingEnabled によって pixelated の代替ソリューション を提供することができます。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Images", "#the-image-rendering", "image-rendering")}}{{Spec2("CSS3 Images")}}初回定義
+ +

{{CSSInfo}}

+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.image-rendering")}}

+ +
+

メモ: 仕様書の例にあるようなピクセルアートの拡大縮小には crisp-edges を使うことが想定されていますが、実際にはどのブラウザーも (2020年1月時点で) 対応していません。 Firefox では、 pixelated は最近傍法として解釈されますが、 auto と crisp-edges はトリリニア法または線形で補間されます。

+ +

Chromium と Safari (WebKit) での動作については、 GetInterpolationQuality 関数と CSSPrimitiveValue::operator ImageRendering() をそれぞれ参照してください。

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/image-resolution/index.md b/files/ja/web/css/image-resolution/index.md new file mode 100644 index 0000000000..e82233bdd5 --- /dev/null +++ b/files/ja/web/css/image-resolution/index.md @@ -0,0 +1,88 @@ +--- +title: image-resolution +slug: Web/CSS/image-resolution +tags: + - CSS + - CSS Images + - CSS Property + - Experimental + - Reference + - image-resolution +browser-compat: css.properties.image-resolution +--- +{{CSSRef}}{{SeeCompatTable}} + +The **`image-resolution`** [CSS](/en-US/docs/Web/CSS) property specifies the intrinsic resolution of all raster images used in or on the element. It affects content images such as replaced elements and generated content, and decorative images such as `background-image` images. + +The image resolution is defined as the number of image pixels per unit length, e.g., pixels per inch. By default, CSS assumes a resolution of one image pixel per CSS px unit; however, the `image-resolution` property allows a different resolution to be specified. + +## Syntax + +```css +image-resolution: from-image; +image-resolution: 300dpi; +image-resolution: from-image 300dpi; +image-resolution: 300dpi snap; + +/* Global values */ +image-resolution: inherit; +image-resolution: initial; +image-resolution: revert; +image-resolution: unset; +``` + +### Values + +- `{{cssxref("<resolution>")}}` + - : Specifies the intrinsic resolution explicitly. +- `from-image` + - : Uses the intrinsic resolution as specified by the image format. If the image does not specify its own resolution, the explicitly specified resolution is used (if given), else it defaults to `1dppx` (1 image pixel per CSS px unit). +- `snap` + - : If the `snap` keyword is provided, the computed resolution is the specified resolution rounded to the nearest value that would map one image pixel to an integer number of device pixels. If the resolution is taken from the image, then the used intrinsic resolution is the image's native resolution similarly adjusted. + +> **Note:** As vector formats such as SVG do not have an intrinsic resolution, this property has no effect on vector images. + +## Formal definition + +{{cssinfo}} + +## Formal syntax + +{{csssyntax}} + +## Examples + +### Setting a high dpi for print + +When printing the document, use a higher resolution. + +```css +@media print { + .myimage { + image-resolution: 300dpi; + } +} +``` + +### Use image resolution with fallback + +Uses the resolution from the image. If the image does not have a resolution, use 300dpi rather than the default 1dppx. + +```css +.myimage { + image-resolution: from-image 300dpi; +} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- Other image-related CSS properties: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}. +- [Chromium bug: 1086473](https://bugs.chromium.org/p/chromium/issues/detail?id=1086473). diff --git a/files/ja/web/css/object-fit/index.html b/files/ja/web/css/object-fit/index.html deleted file mode 100644 index f3cd681f5e..0000000000 --- a/files/ja/web/css/object-fit/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: object-fit -slug: Web/CSS/object-fit -tags: - - CSS - - CSS プロパティ - - CSS 画像 - - object-fit - - リファレンス - - レイアウト - - 寸法 -translation_of: Web/CSS/object-fit ---- -
{{CSSRef}}
- -

CSS の object-fit プロパティは、置換要素、例えば {{HTMLElement("img")}} や {{HTMLElement("video")}} などの中身を、コンテナーにどのようにはめ込むかを設定します。

- -

要素のボックス内における置換要素の中身オブジェクトの配置を変更するには、 {{cssxref("object-position")}} プロパティを使用することができます。

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

構文

- -

object-fit プロパティは、以下の一覧の中からキーワードを一つ選んで指定します。

- -

値

- -
-
contain
-
置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小されます。オブジェクト全体がボックス内に表示され、アスペクト比が維持されるので、オブジェクトのアスペクト比とボックスのアスペクト比が合わない場合は、レターボックス表示になります。
-
cover
-
置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小されます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトの方が合うように切り取られます。
-
fill
-
置換コンテンツは、要素のコンテンツボックス全体を埋めるサイズになります。オブジェクト全体が完全にボックスの中を埋めます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトは合うように引き伸ばされます。
-
none
-
置換コンテンツは、拡大縮小されません。
-
scale-down
-
コンテンツは none 又は contain を指定したかのようにサイズが決められ、オブジェクトの実際のサイズが小さいほうを採用します。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<div>
-  <h2>object-fit: fill</h2>
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/>
-
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/>
-
-  <h2>object-fit: contain</h2>
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/>
-
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/>
-
-  <h2>object-fit: cover</h2>
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/>
-
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/>
-
-  <h2>object-fit: none</h2>
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/>
-
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/>
-
-  <h2>object-fit: scale-down</h2>
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/>
-
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/>
-
-</div>
- -

CSS

- -
h2 {
-  font-family: Courier New, monospace;
-  font-size: 1em;
-  margin: 1em 0 0.3em;
-}
-
-div {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  height: 940px;
-}
-
-img {
-  width: 150px;
-  height: 100px;
-  border: 1px solid #000;
-}
-
-.narrow {
-  width: 100px;
-  height: 150px;
-  margin-top: 10px;
-}
-
-.fill {
-  object-fit: fill;
-}
-
-.contain {
-  object-fit: contain;
-}
-
-.cover {
-  object-fit: cover;
-}
-
-.none {
-  object-fit: none;
-}
-
-.scale-down {
-  object-fit: scale-down;
-}
-
- -

出力結果

- -

{{ EmbedLiveSample('Example', 500, 450) }}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS4 Images')}} 
{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS3 Images')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

{{Compat("css.properties.object-fit")}}

- -

関連情報

- - diff --git a/files/ja/web/css/object-fit/index.md b/files/ja/web/css/object-fit/index.md new file mode 100644 index 0000000000..f3cd681f5e --- /dev/null +++ b/files/ja/web/css/object-fit/index.md @@ -0,0 +1,167 @@ +--- +title: object-fit +slug: Web/CSS/object-fit +tags: + - CSS + - CSS プロパティ + - CSS 画像 + - object-fit + - リファレンス + - レイアウト + - 寸法 +translation_of: Web/CSS/object-fit +--- +
{{CSSRef}}
+ +

CSS の object-fit プロパティは、置換要素、例えば {{HTMLElement("img")}} や {{HTMLElement("video")}} などの中身を、コンテナーにどのようにはめ込むかを設定します。

+ +

要素のボックス内における置換要素の中身オブジェクトの配置を変更するには、 {{cssxref("object-position")}} プロパティを使用することができます。

+ +
{{EmbedInteractiveExample("pages/css/object-fit.html")}}
+ + + +

構文

+ +

object-fit プロパティは、以下の一覧の中からキーワードを一つ選んで指定します。

+ +

値

+ +
+
contain
+
置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小されます。オブジェクト全体がボックス内に表示され、アスペクト比が維持されるので、オブジェクトのアスペクト比とボックスのアスペクト比が合わない場合は、レターボックス表示になります。
+
cover
+
置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小されます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトの方が合うように切り取られます。
+
fill
+
置換コンテンツは、要素のコンテンツボックス全体を埋めるサイズになります。オブジェクト全体が完全にボックスの中を埋めます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトは合うように引き伸ばされます。
+
none
+
置換コンテンツは、拡大縮小されません。
+
scale-down
+
コンテンツは none 又は contain を指定したかのようにサイズが決められ、オブジェクトの実際のサイズが小さいほうを採用します。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<div>
+  <h2>object-fit: fill</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/>
+
+  <h2>object-fit: contain</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/>
+
+  <h2>object-fit: cover</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/>
+
+  <h2>object-fit: none</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/>
+
+  <h2>object-fit: scale-down</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/>
+
+</div>
+ +

CSS

+ +
h2 {
+  font-family: Courier New, monospace;
+  font-size: 1em;
+  margin: 1em 0 0.3em;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  height: 940px;
+}
+
+img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.narrow {
+  width: 100px;
+  height: 150px;
+  margin-top: 10px;
+}
+
+.fill {
+  object-fit: fill;
+}
+
+.contain {
+  object-fit: contain;
+}
+
+.cover {
+  object-fit: cover;
+}
+
+.none {
+  object-fit: none;
+}
+
+.scale-down {
+  object-fit: scale-down;
+}
+
+ +

出力結果

+ +

{{ EmbedLiveSample('Example', 500, 450) }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS4 Images')}} 
{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS3 Images')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

{{Compat("css.properties.object-fit")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/object-position/index.html b/files/ja/web/css/object-position/index.html deleted file mode 100644 index 81b998bbc8..0000000000 --- a/files/ja/web/css/object-position/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: object-position -slug: Web/CSS/object-position -tags: - - CSS - - CSS Image - - CSS Property - - Reference -translation_of: Web/CSS/object-position ---- -
{{CSSRef}}
- -

object-position プロパティは、ボックス内における置換要素の配置を指定します。Areas of the box which aren't covered by the replaced element's object will show the element's background.

- -

You can adjust how the replaced element's object's intrinsic size (that is, its natural size) is adjusted to fit within the element's box using the {{cssxref("object-fit")}} property.

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

{{cssinfo}}

- -

構文

- -
/* <position> 値 */
-object-position: center top;
-object-position: 100px 50px;
-
-/* グローバル値 */
-object-position: inherit;
-object-position: initial;
-object-position: unset;
-
- -

値

- -
-
<position>
-
要素のボックスの端に対する 2D 上の位置を表す、1 個から 4 個の値による {{cssxref("<position>")}} です。相対値または絶対値のオフセットを指定できます。また、要素のボックスの外側の位置も指定できます。
-
- -
-

注: 要素がボックス外にはみ出る位置も指定できます。

-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML コンテンツ

- -
<img id="object-position-1" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>
-<img id="object-position-2" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>
-
- -

CSS コンテンツ

- -
img {
-  width: 150px;
-  height: 100px;
-  border: 1px solid #000;
-  background-color: yellow;
-  margin-right: 1em;
-}
-
-#object-position-1 {
-  object-position: 10px;
-}
-
-#object-position-2 {
-  object-position: 20% 10%;
-}
-
- -

The first image is positioned with its left edge inset 10 pixels from the left edge of the element's box. The second image is positioned with its right edge flush against the right edge of the element's box and is located 10% of the way down the height of the element's box.

- -

出力

- -

{{EmbedLiveSample('Example', '100%','300px' )}}

- -

仕様

- - - - - - - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('CSS4 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS4 Images')}}
{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS3 Images')}}最初期の定義
- -

ブラウザ実装状況

- -
- - -

{{Compat("css.properties.object-position")}}

-
- -

関連情報

- - diff --git a/files/ja/web/css/object-position/index.md b/files/ja/web/css/object-position/index.md new file mode 100644 index 0000000000..81b998bbc8 --- /dev/null +++ b/files/ja/web/css/object-position/index.md @@ -0,0 +1,119 @@ +--- +title: object-position +slug: Web/CSS/object-position +tags: + - CSS + - CSS Image + - CSS Property + - Reference +translation_of: Web/CSS/object-position +--- +
{{CSSRef}}
+ +

object-position プロパティは、ボックス内における置換要素の配置を指定します。Areas of the box which aren't covered by the replaced element's object will show the element's background.

+ +

You can adjust how the replaced element's object's intrinsic size (that is, its natural size) is adjusted to fit within the element's box using the {{cssxref("object-fit")}} property.

+ +
{{EmbedInteractiveExample("pages/css/object-position.html")}}
+ + + +

{{cssinfo}}

+ +

構文

+ +
/* <position> 値 */
+object-position: center top;
+object-position: 100px 50px;
+
+/* グローバル値 */
+object-position: inherit;
+object-position: initial;
+object-position: unset;
+
+ +

値

+ +
+
<position>
+
要素のボックスの端に対する 2D 上の位置を表す、1 個から 4 個の値による {{cssxref("<position>")}} です。相対値または絶対値のオフセットを指定できます。また、要素のボックスの外側の位置も指定できます。
+
+ +
+

注: 要素がボックス外にはみ出る位置も指定できます。

+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML コンテンツ

+ +
<img id="object-position-1" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>
+<img id="object-position-2" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>
+
+ +

CSS コンテンツ

+ +
img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+  background-color: yellow;
+  margin-right: 1em;
+}
+
+#object-position-1 {
+  object-position: 10px;
+}
+
+#object-position-2 {
+  object-position: 20% 10%;
+}
+
+ +

The first image is positioned with its left edge inset 10 pixels from the left edge of the element's box. The second image is positioned with its right edge flush against the right edge of the element's box and is located 10% of the way down the height of the element's box.

+ +

出力

+ +

{{EmbedLiveSample('Example', '100%','300px' )}}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('CSS4 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS4 Images')}}
{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS3 Images')}}最初期の定義
+ +

ブラウザ実装状況

+ +
+ + +

{{Compat("css.properties.object-position")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/url()/index.html b/files/ja/web/css/url()/index.html deleted file mode 100644 index b0bbf37393..0000000000 --- a/files/ja/web/css/url()/index.html +++ /dev/null @@ -1,214 +0,0 @@ ---- -title: url() -slug: Web/CSS/url() -tags: - - CSS - - CSS Function - - Function - - Layout - - Reference - - Web - - url() -browser-compat: css.types.url -translation_of: Web/CSS/url() ---- -
{{CSSRef}}
- -

url() は CSS 関数で、ファイルを含めるために使用します。引数は絶対 URL、相対 URL、 データ URI の何れかです url() 関数は {{cssxref('attr()')}} 関数のように、他の CSS 関数に引数として渡すことができます。値を使用するプロパティに応じて、求められるリソースは画像、フォント、スタイルシートの何れかになります。 url() 関数表記は the <url> データ型の値になります。

- -
-

URI か URL か？ {{Glossary("URI")}} と {{Glossary("URL")}} との間には違いがあります。 URI は単純にリソースを識別します。 URL は URI の一種で、リソースの場所を記述します。 URI はリソースの URL または名前 ({{Glossary("URN")}}) であることがあります。

- -

CSS Level 1 では、 url() 関数記法は真に URL のみを記述していました。 CSS Level 2 では、 url() の定義はあらゆる URI、 URL または URN のどちらかを記述するように拡張されました。ややこしいことに、これは url() を CSS の <uri> データ型の生成のために使用することができることを意味していました。この変更は紛らわしいばかりでなく、議論になりやすく、 URN が実際の CSS で使用されることはほぼあり得ないため不必要でした。混乱を軽減するために、 CSS Level 3 ではより狭い初めの定義まで戻りました。現在では、 url() は真に <url> のみを記述します。

-
- -
/* 単純な使い方 */
-url(https://example.com/images/myImg.jpg);
-url(data:image/png;base64,iRxVB0…);
-url(myFont.woff);
-url(#IDofSVGpath);
-
-/* 関連するプロパティ */
-background-image: url("https://mdn.mozillademos.org/files/16761/star.gif");
-list-style-image: url('../images/bullet.jpg');
-content: url("pdficon.jpg");
-cursor: url(mycursor.cur);
-border-image-source: url(/media/diamonds.png);
-src: url('fantasticfont.woff');
-offset-path: url(#path);
-mask-image: url("masks.svg#mask1");
-
-/* 代替付きのプロパティ */
-cursor: url(pointer.cur), pointer;
-
-/* 関連する一括指定プロパティ */
-background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue;
-border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space;
-
-/* 他の CSS 関数の引数として */
-background-image: cross-fade(20% url(first.png), url(second.png));
-mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent);
-
-/* 一括指定ではない複数の値の一部として */
-content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);
-
-/* @-規則 */
-@document url("https://www.example.com/") { ... } {{Experimental_Inline}}
-@import url("https://www.example.com/style.css");
-@namespace url(http://www.w3.org/1999/xhtml);
-
- -

相対 URL が使用された場合は、 (ウェブページの URL からではなく) スタイルシートの URL からの相対となります。

- -

url() 関数は {{cssxref('background')}}, {{cssxref('background-image')}}, {{cssxref('list-style')}}, {{cssxref('list-style-image')}}, {{cssxref('content')}}, {{cssxref('cursor')}}, {{cssxref('border')}}, {{cssxref('border-image')}}, {{cssxref('border-image-source')}}, {{cssxref('mask')}}, {{cssxref('mask-image')}}, @font-face ブロック内での src, @counter-style/symbol 値として使用することができます。

- -

構文

- -

値

- -
-
<string>
-
-
-
<url>
-
含まれるウェブリソースへの相対アドレス、絶対アドレス、ポインターのURL、またはデータ URI であり、任意で単一引用符または二重引用符を使用することができます。 URL に括弧、空白、引用符が含まれている場合で、これらの文字がエスケープされていないか、アドレスに 0x7e 以上の制御文字が含まれている場合、引用符は必須です。二重引用符は二重引用符の中に入れることはできず、単一引用符はエスケープされない限り単一引用符の中に入れることはできません。以下のものはすべて有効であり、同等です。 - 
<css_property>: url("https://example.com/image.png")
-<css_property>: url('https://example.com/image.png')
-<css_property>: url(https://example.com/image.png)
- -

URL を引用符なしで書く場合は、 URL に含まれる括弧、ホワイトスペース文字、単一引用符 (')、二重引用符 (") の前にバックスラッシュを (\) を使用してください。

-
-
パス
-
SVG 図形の ID への参照 -- circle, ellipse, line, path, polygon, polyline, rect -- パスとして図形の形状を使用します。
-
-
-
<url-modifier> {{Experimental_Inline}}
-
将来的に url() 関数は、 URL 文字列の意味を変更する修飾子、識別子、関数記法を指定することに対応するかもしれません。これはまだ対応されておらず、仕様書では完全には定義されていません。
-
- -

形式文法

- -
url( <string> <url-modifier>* )
- -

例

- -

background プロパティで使用される URL

- -
.topbanner {
-  background: url("topbanner.png") #00D no-repeat fixed;
-}
-
- -

リストの先頭記号として使用される画像を読み込む URL

- -
ul {
-  list-style: square url(http://www.example.com/redball.png);
-}
- -

content プロパティの使用

- -

HTML

- -
<ul>
-  <li>Item 1</li>
-  <li>Item 2</li>
-  <li>Item 3</li>
-</ul>
- -

CSS

- -
li::after {
-  content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif);
-}
- -

結果

- -

{{EmbedLiveSample("Usage_in_the_content_property", "100%", 110)}}

- -

data-uri の使用

- -
-

HTML

- -
<div class="background"></div>
- -

CSS

- - - -
.background {
-  background: yellow;
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E");
-}
-
- -

{{EmbedLiveSample("Using_a_data-uri", "100%", 50)}}

- -

フィルターでの使用

- -

URL がフィルターへのパスとして使用される場合、 URL は以下のどちらかでなければなりません。

- -
    -
  1. SVG ファイルへのパスに、追加されるフィルターの ID が付いたもの。
    2. -
  2. SVG がページ内にある場合は、フィルターの ID。
    3. -
- -
.blur {
-  filter: url(my-file.svg#svg-blur); /* the URL of an SVG file used as a filter */
-}
-
-.inline-blur {
-  filter: url(#svg-blur); /* the ID of an SVG that is embedded in the HTML page */
-}
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Values', '#urls', 'url()')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS3 Values', '#urls', 'url()')}}{{Spec2('CSS3 Values')}}CSS 第2水準 (第1稿) から重要な変更なし
{{Specname('CSS2.1', 'syndata.html#uri', 'uri()')}}{{Spec2('CSS2.1')}}CSS 第1水準から重要な変更なし
{{SpecName('CSS1', '#url', 'url()')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザーの互換性

- -
{{Compat}}
- -

関連情報

- - diff --git a/files/ja/web/css/url()/index.md b/files/ja/web/css/url()/index.md new file mode 100644 index 0000000000..b0bbf37393 --- /dev/null +++ b/files/ja/web/css/url()/index.md @@ -0,0 +1,214 @@ +--- +title: url() +slug: Web/CSS/url() +tags: + - CSS + - CSS Function + - Function + - Layout + - Reference + - Web + - url() +browser-compat: css.types.url +translation_of: Web/CSS/url() +--- +
{{CSSRef}}
+ +

url() は CSS 関数で、ファイルを含めるために使用します。引数は絶対 URL、相対 URL、 データ URI の何れかです url() 関数は {{cssxref('attr()')}} 関数のように、他の CSS 関数に引数として渡すことができます。値を使用するプロパティに応じて、求められるリソースは画像、フォント、スタイルシートの何れかになります。 url() 関数表記は the <url> データ型の値になります。

+ +
+

URI か URL か？ {{Glossary("URI")}} と {{Glossary("URL")}} との間には違いがあります。 URI は単純にリソースを識別します。 URL は URI の一種で、リソースの場所を記述します。 URI はリソースの URL または名前 ({{Glossary("URN")}}) であることがあります。

+ +

CSS Level 1 では、 url() 関数記法は真に URL のみを記述していました。 CSS Level 2 では、 url() の定義はあらゆる URI、 URL または URN のどちらかを記述するように拡張されました。ややこしいことに、これは url() を CSS の <uri> データ型の生成のために使用することができることを意味していました。この変更は紛らわしいばかりでなく、議論になりやすく、 URN が実際の CSS で使用されることはほぼあり得ないため不必要でした。混乱を軽減するために、 CSS Level 3 ではより狭い初めの定義まで戻りました。現在では、 url() は真に <url> のみを記述します。

+
+ +
/* 単純な使い方 */
+url(https://example.com/images/myImg.jpg);
+url(data:image/png;base64,iRxVB0…);
+url(myFont.woff);
+url(#IDofSVGpath);
+
+/* 関連するプロパティ */
+background-image: url("https://mdn.mozillademos.org/files/16761/star.gif");
+list-style-image: url('../images/bullet.jpg');
+content: url("pdficon.jpg");
+cursor: url(mycursor.cur);
+border-image-source: url(/media/diamonds.png);
+src: url('fantasticfont.woff');
+offset-path: url(#path);
+mask-image: url("masks.svg#mask1");
+
+/* 代替付きのプロパティ */
+cursor: url(pointer.cur), pointer;
+
+/* 関連する一括指定プロパティ */
+background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue;
+border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space;
+
+/* 他の CSS 関数の引数として */
+background-image: cross-fade(20% url(first.png), url(second.png));
+mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+
+/* 一括指定ではない複数の値の一部として */
+content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);
+
+/* @-規則 */
+@document url("https://www.example.com/") { ... } {{Experimental_Inline}}
+@import url("https://www.example.com/style.css");
+@namespace url(http://www.w3.org/1999/xhtml);
+
+ +

相対 URL が使用された場合は、 (ウェブページの URL からではなく) スタイルシートの URL からの相対となります。

+ +

url() 関数は {{cssxref('background')}}, {{cssxref('background-image')}}, {{cssxref('list-style')}}, {{cssxref('list-style-image')}}, {{cssxref('content')}}, {{cssxref('cursor')}}, {{cssxref('border')}}, {{cssxref('border-image')}}, {{cssxref('border-image-source')}}, {{cssxref('mask')}}, {{cssxref('mask-image')}}, @font-face ブロック内での src, @counter-style/symbol 値として使用することができます。

+ +

構文

+ +

値

+ +
+
<string>
+
+
+
<url>
+
含まれるウェブリソースへの相対アドレス、絶対アドレス、ポインターのURL、またはデータ URI であり、任意で単一引用符または二重引用符を使用することができます。 URL に括弧、空白、引用符が含まれている場合で、これらの文字がエスケープされていないか、アドレスに 0x7e 以上の制御文字が含まれている場合、引用符は必須です。二重引用符は二重引用符の中に入れることはできず、単一引用符はエスケープされない限り単一引用符の中に入れることはできません。以下のものはすべて有効であり、同等です。 + 
<css_property>: url("https://example.com/image.png")
+<css_property>: url('https://example.com/image.png')
+<css_property>: url(https://example.com/image.png)
+ +

URL を引用符なしで書く場合は、 URL に含まれる括弧、ホワイトスペース文字、単一引用符 (')、二重引用符 (") の前にバックスラッシュを (\) を使用してください。

+
+
パス
+
SVG 図形の ID への参照 -- circle, ellipse, line, path, polygon, polyline, rect -- パスとして図形の形状を使用します。
+
+
+
<url-modifier> {{Experimental_Inline}}
+
将来的に url() 関数は、 URL 文字列の意味を変更する修飾子、識別子、関数記法を指定することに対応するかもしれません。これはまだ対応されておらず、仕様書では完全には定義されていません。
+
+ +

形式文法

+ +
url( <string> <url-modifier>* )
+ +

例

+ +

background プロパティで使用される URL

+ +
.topbanner {
+  background: url("topbanner.png") #00D no-repeat fixed;
+}
+
+ +

リストの先頭記号として使用される画像を読み込む URL

+ +
ul {
+  list-style: square url(http://www.example.com/redball.png);
+}
+ +

content プロパティの使用

+ +

HTML

+ +
<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3</li>
+</ul>
+ +

CSS

+ +
li::after {
+  content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif);
+}
+ +

結果

+ +

{{EmbedLiveSample("Usage_in_the_content_property", "100%", 110)}}

+ +

data-uri の使用

+ +
+

HTML

+ +
<div class="background"></div>
+ +

CSS

+ + + +
.background {
+  background: yellow;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E");
+}
+
+ +

{{EmbedLiveSample("Using_a_data-uri", "100%", 50)}}

+ +

フィルターでの使用

+ +

URL がフィルターへのパスとして使用される場合、 URL は以下のどちらかでなければなりません。

+ +
    +
  1. SVG ファイルへのパスに、追加されるフィルターの ID が付いたもの。
    2. +
  2. SVG がページ内にある場合は、フィルターの ID。
    3. +
+ +
.blur {
+  filter: url(my-file.svg#svg-blur); /* the URL of an SVG file used as a filter */
+}
+
+.inline-blur {
+  filter: url(#svg-blur); /* the ID of an SVG that is embedded in the HTML page */
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Values', '#urls', 'url()')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS3 Values', '#urls', 'url()')}}{{Spec2('CSS3 Values')}}CSS 第2水準 (第1稿) から重要な変更なし
{{Specname('CSS2.1', 'syndata.html#uri', 'uri()')}}{{Spec2('CSS2.1')}}CSS 第1水準から重要な変更なし
{{SpecName('CSS1', '#url', 'url()')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ +
{{Compat}}
+ +

関連情報

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