From c1ebda663f5e7c64d8bee25e38d3c5819a6d3bba Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 17 Oct 2021 22:08:32 +0900 Subject: CSS 画像の文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/16 時点の英語版に同期 --- files/ja/web/css/cross-fade()/br.png | Bin 0 -> 394 bytes files/ja/web/css/cross-fade()/index.md | 199 +++-- files/ja/web/css/cross-fade()/tr.png | Bin 0 -> 395 bytes .../implementing_image_sprites_in_css/index.md | 56 +- files/ja/web/css/css_images/index.md | 124 +--- .../css/css_images/using_css_gradients/index.md | 808 +++++++++++---------- files/ja/web/css/element()/index.md | 116 ++- .../ja/web/css/gradient/conic-gradient()/index.md | 2 +- files/ja/web/css/gradient/index.md | 6 +- files/ja/web/css/image-orientation/index.md | 142 ++-- files/ja/web/css/image-orientation/mdn.svg | 1 + files/ja/web/css/image-rendering/blumen.jpg | Bin 0 -> 2288 bytes files/ja/web/css/image-rendering/index.md | 141 ++-- files/ja/web/css/image-resolution/index.md | 29 +- files/ja/web/css/image/image()/index.md | 12 +- files/ja/web/css/image/index.md | 8 +- files/ja/web/css/object-fit/index.md | 181 +++-- .../ja/web/css/object-fit/mdn_logo_only_color.png | Bin 0 -> 9558 bytes files/ja/web/css/object-position/index.md | 128 ++-- files/ja/web/css/object-position/mdn.svg | 1 + files/ja/web/css/url()/index.md | 235 +++--- files/ja/web/css/url()/star.gif | Bin 0 -> 396 bytes 22 files changed, 1068 insertions(+), 1121 deletions(-) create mode 100644 files/ja/web/css/cross-fade()/br.png create mode 100644 files/ja/web/css/cross-fade()/tr.png create mode 100644 files/ja/web/css/image-orientation/mdn.svg create mode 100644 files/ja/web/css/image-rendering/blumen.jpg create mode 100644 files/ja/web/css/object-fit/mdn_logo_only_color.png create mode 100644 files/ja/web/css/object-position/mdn.svg create mode 100644 files/ja/web/css/url()/star.gif diff --git a/files/ja/web/css/cross-fade()/br.png b/files/ja/web/css/cross-fade()/br.png new file mode 100644 index 0000000000..99477b2318 Binary files /dev/null and b/files/ja/web/css/cross-fade()/br.png differ diff --git a/files/ja/web/css/cross-fade()/index.md b/files/ja/web/css/cross-fade()/index.md index 5cf8359073..86e21e9c97 100644 --- a/files/ja/web/css/cross-fade()/index.md +++ b/files/ja/web/css/cross-fade()/index.md @@ -3,149 +3,144 @@ title: cross-fade() slug: Web/CSS/cross-fade() tags: - CSS - - CSS Function - - CSS-4 Images - - Experimental - - Function + - CSS 関数 + - CSS-4 画像 + - 実験的 + - 関数 - Reference - - Web + - ウェブ +browser-compat: css.types.image.cross-fade translation_of: Web/CSS/cross-fade() --- -

{{CSSRef}}

+{{CSSRef}} -

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

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

構文

+## 構文 -

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

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

仕様書上の構文

+## 仕様書上の構文 -

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

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

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

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

cross-fade のパーセント値

+#### 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.

+子のパーセント値は、それぞれの画像の混合率の値と考えてください。つまり、0% の値は画像が完全に透明であり、100% の値は完全に不透明になります。 -
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% */
+```css +cross-fade( url(white.png) 0%, url(black.png) 100%); /* 完全に黒 */ +cross-fade( url(white.png) 25%, url(black.png) 75%); /* 黒 25%、白 75% */ +cross-fade( url(white.png) 50%, url(black.png) 50%); /* 黒 50%、白 50% */ +cross-fade( url(white.png) 75%, url(black.png) 25%); /* 白 75%、黒 25% */ +cross-fade( url(white.png) 100%, url(black.png) 0%); /* 完全に白 */ +cross-fade( url(green.png) 75%, url(red.png) 75%); /* 緑と赤がともに 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.

+パーセント値が省略された場合は、指定されたすべてのパーセント値が合計され、`100%` から減算されます。その結果が `0%` より大きい場合は、パーセント値が省略されているすべての画像で均等に分割されます。 -

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%.

+最も単純なケースは、2 つの画像を互いにフェードアウトさせる場合です。そのためには、パーセント値を設定する必要があるのは片方の画像だけで、もう片方の画像はそれに応じてフェードされます。例えば、1 枚目の画像に 0% の値を設定すると 2 枚目の画像のみが表示され、100% の値を設定すると 1 枚目の画像のみが表示されます。25% の値を設定すると、1 枚目の画像は 25%、2 枚目の画像は 75% で表示されます。75% の場合はその逆で、1 枚目が 75%、2 枚目が 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% */
+```css +cross-fade( url(white.png) 0%, url(black.png)); /* 完全に黒 */ +cross-fade( url(white.png) 25%, url(black.png)); /* 黒 25%、白 75% */ +cross-fade( url(white.png), url(black.png)); /* 白 50%、白 50% */ +cross-fade( url(white.png) 75%, url(black.png)); /* 白 75%、黒 25% */ +cross-fade( url(white.png) 100%, url(black.png)); /* 完全に白 */ +cross-fade( url(green.png) 75%, url(red.png) 75%); /* 緑と赤がともに 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.

+パーセント値が宣言されていない場合は、両方の画像が 50% の混合率となり、cross-fade では両方の画像が均等に合成されたように描画されます。上述の 50%/50% の例では、パーセント値を記載する必要はありませんでした。パーセント値が省略された場合、含まれるパーセント値が合計され、100% から差し引かれます。その結果、0 より大きい場合は、パーセント値が省略されたすべての画像で均等に分割されます。 -

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

+最後の例では、両方のパーセント値の合計が 100% ではないため、両方の画像にそれぞれの混合率が含まれています。 -

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

+パーセント値が宣言されておらず、3 つの画像が含まれている場合、それぞれの画像は 33.33% の混合率になります。以下の 2 つは (ほぼ) 同じ線です。 -
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%);
+```css +cross-fade( url(red.png), url(yellow.png), url(blue.png)); /* 3 つとも 33.3333% の混合率となる */ +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> )
+```css +cross-fade( , , ) +``` -

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()` 関数の仕様では、複数の画像を指定し、それぞれの画像に他の値とは独立した透明度の値を持たせることができます。これは必ずしもそうではありませんでした。一部のブラウザーで実装されている元の構文では、2 つの画像しか使用できず、その 2 つの画像の透明度の合計がちょうど 100% になります。オリジナルの構文は Safari が対応しており、`-webkit-` の接頭辞付きのものは Chrome、Opera、その他の blink ベースのブラウザーで対応しています。 -
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 */
-
+```css +cross-fade(url(white.png), url(black.png), 0%); /* 完全に黒 */ +cross-fade(url(white.png), url(black.png), 25%); /* 黒 25%、白 75% */ +cross-fade(url(white.png), url(black.png), 50%); /* 白 50%、白 50% */ +cross-fade(url(white.png), url(black.png), 75%); /* 白 75%、黒 25% */ +cross-fade(url(white.png), url(black.png), 100%); /* 完全に白 */ +``` -

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.

+実装されている構文では、カンマで区切られた 2 つの画像を最初に宣言し、その後にカンマと必要なパーセント値を宣言します。カンマやパーセント値を省略すると、その値は無効になります。パーセント値は、最初に宣言された画像の混合率です。含まれるパーセントは 100% から差し引かれ、その差が 2 番目の画像の混合率になります。 -

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.

+仕様書の構文の項にある緑/赤の例 (パーセント値の合計が 150%) と黄/赤/青の例 (3 つの画像を使用) は、この実装では不可能です。 -

アクセシビリティの考慮

+## アクセシビリティの考慮 -

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

+ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。背景画像を使用する場合は、色のコントラストを大きくして、画像がない場合と同様に、画像の上にどのような文字も読み取れるようにしてください。 - +- [MDN "WCAG を理解する ― ガイドライン 1.1 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

cross-fade の古い構文

+

cross-fade の古い構文

-

HTML

+#### HTML -
<div class="crossfade"></div>
+```html +
+``` -

CSS

+#### CSS -
.crossfade {
+```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'),
+        url('br.png'),
+        url('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'),
+        url('br.png'),
+        url('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")}}

- -

関連情報

- - +} +``` + +#### Result + +{{EmbedLiveSample("Older_syntax_for_cross-fade", "330", "330")}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("image")}} +- {{cssxref("url()")}} +- {{cssxref("image/image()", "image()")}} +- {{cssxref("image/image-set()", "image-set()")}} +- {{cssxref("element()")}} +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- グラデーション関数: {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} diff --git a/files/ja/web/css/cross-fade()/tr.png b/files/ja/web/css/cross-fade()/tr.png new file mode 100644 index 0000000000..a6e0f81eaf Binary files /dev/null and b/files/ja/web/css/cross-fade()/tr.png differ 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 index acef249aad..267326417c 100644 --- 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 @@ -2,55 +2,57 @@ title: CSS での画像スプライトの実装 slug: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS tags: - - Advanced + - 上級者 - CSS - - CSS Images - - Graphics - - Guide + - CSS 画像 + - グラフィック + - ガイド - NeedsContent - - Sprites - - Web + - スプライト + - ウェブ translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS --- -

{{cssRef}}

+{{CSSRef}} -

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

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

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

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

実装

+## 実装 -

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

+例えば、 `toolbtn` クラスを持つすべてのアイテムに画像が与えられたとします。 -
.toolbtn {
+```css
+.toolbtn {
   background: url(myfile.png);
   display: inline-block;
   height: 20px;
   width: 20px;
-}
+} +``` -

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

+背景の位置は、 background の中で {{cssxref("url()")}} の後に x と y の 2 つの値として、または {{cssxref("background-position")}} として追加できます。 -
#btn1 {
+```css
+#btn1 {
   background-position: -20px 0px;
 }
 
 #btn2 {
   background-position: -40px 0px;
-}
+} +``` -

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

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

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

+同様に、ホバー状態にすることもできます。 -
#btn:hover {
-  background-position: <右方向へずらすピクセル数>px <下方向へずらすピクセル数>px;
-}
+```css +#btn:hover { + background-position: <右方向へずらすピクセル数>px <下方向へずらすピクセル数>px; +} +``` -

関連記事

+## 関連記事 - +- [Full working demo at CSS Tricks](https://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/) diff --git a/files/ja/web/css/css_images/index.md b/files/ja/web/css/css_images/index.md index a55ff99d7d..1b2f8d66e4 100644 --- a/files/ja/web/css/css_images/index.md +++ b/files/ja/web/css/css_images/index.md @@ -4,103 +4,57 @@ slug: Web/CSS/CSS_Images tags: - CSS - CSS 画像 - - Reference + - ガイド - 概要 + - Reference translation_of: Web/CSS/CSS_Images --- -
{{CSSRef}}
+{{CSSRef}} -

CSS 画像 (CSS Images) は CSS のモジュールの一つで、どのような種類の画像が利用できるか ({{CSSxRef("<image>")}} 型、その中の URL、グラデーション、その他の種類の画像)、どのように大きさを変更するか、様々なレイアウトモデルで画像やその他の置換コンテンツが応答するかを定義します。

+**CSS 画像** (CSS Images) は CSS のモジュールの一つで、どのような種類の画像が利用できるか ({{CSSxRef("<image>")}} 型、その中の URL、グラデーション、その他の種類の画像)、どのように大きさを変更するか、様々なレイアウトモデルで画像やその他の置換コンテンツが応答するかを定義します。 -

リファレンス

+## リファレンス -

プロパティ

+### プロパティ -
-
    -
  • {{CSSxRef("image-orientation")}}
    • -
  • {{CSSxRef("image-rendering")}}
    • -
  • {{CSSxRef("image-resolution")}}
    • -
  • {{CSSxRef("object-fit")}}
    • -
  • {{CSSxRef("object-position")}}
    • -
-
+- {{CSSxRef("image-orientation")}} +- {{CSSxRef("image-rendering")}} +- {{CSSxRef("image-resolution")}} +- {{CSSxRef("object-fit")}} +- {{CSSxRef("object-position")}} -

関数

+### 関数 -
-
    -
  • {{CSSxRef("linear-gradient", "linear-gradient()")}}
    • -
  • {{CSSxRef("radial-gradient", "radial-gradient()")}}
    • -
  • {{CSSxRef("repeating-linear-gradient", "repeating-linear-gradient()")}}
    • -
  • {{CSSxRef("repeating-radial-gradient", "repeating-radial-gradient()")}}
    • -
  • {{CSSxRef("conic-gradient")}}
    • -
  • {{CSSxRef("repeating-conic-gradient", "repeating-conic-gradient()")}}
    • -
  • {{CSSxRef("url", "url()")}}
    • -
  • {{CSSxRef("element", "element()")}}
    • -
  • {{CSSxRef("_image", "image()")}}
    • -
  • {{CSSxRef("cross-fade", "cross-fade()")}}
    • -
-
+- {{CSSxRef("gradient/linear-gradient()", "linear-gradient()")}} +- {{CSSxRef("gradient/radial-gradient()", "radial-gradient()")}} +- {{CSSxRef("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}} +- {{CSSxRef("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} +- {{CSSxRef("gradient/conic-gradient()", "conic-gradient()")}} +- {{CSSxRef("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} +- {{CSSxRef("url()", "url()")}} +- {{CSSxRef("element()", "element()")}} +- {{CSSxRef("image/image()", "image()")}} +- {{CSSxRef("cross-fade()", "cross-fade()")}} -

データ型

+### データ型 -
-
    -
  • {{CSSxRef("<gradient>")}}
    • -
  • {{CSSxRef("<image>")}}
    • -
-
+- {{CSSxRef("<gradient>")}} +- {{CSSxRef("<image>")}} -

ガイド

+## ガイド -
-
CSS グラデーションの使用
-
特殊な CSS 画像型であるグラデーションと、その作り方や使い方を紹介します。
-
CSS での画像スプライトの実装
-
単一の文書でいくつかの画像をグループ化して、ダウロードリクエストを節約し、ページのスピードを上げることができる共通のテクニックを説明します。
-
+- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) + - : 特殊な CSS 画像型である*グラデーション*と、その作り方や使い方を紹介します。 +- [CSS での画像スプライトの実装](/ja/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS) + - : 単一の文書でいくつかの画像をグループ化して、ダウロードリクエストを節約し、ページのスピードを上げることができる共通のテクニックを説明します。 -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Images")}}{{Spec2("CSS4 Images")}}{{CSSxRef("image-resolution")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("_image", "image()")}} を追加
{{SpecName("CSS3 Images")}}{{Spec2("CSS3 Images")}}{{CSSxRef("image-orientation")}}, {{CSSxRef("image-rendering")}}, {{CSSxRef("object-fit")}}, {{CSSxRef("object-position")}} を追加
{{SpecName("Compat", "#css-%3Cimage%3E-type", "CSS Gradients")}}{{Spec2("Compat")}}-webkit の接頭辞が付いたグラデーション値の関数を標準化
{{SpecName("CSS3 Values", "#urls", "<url>")}}{{Spec2("CSS3 Values")}} 
{{Specname("CSS2.1", "syndata.html#uri", "<uri>")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1", "#url", "<url>")}}{{Spec2("CSS1")}}初回定義
+| 仕様書 | 状態 | 備考 | +| ---------------------------------------------------------------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName("CSS4 Images")}} | {{Spec2("CSS4 Images")}} | {{CSSxRef("image-resolution")}}, {{CSSxRef("gradient/conic-gradient()", "conic-gradient()")}}, {{CSSxRef("image/image()", "image()")}} を追加 | +| {{SpecName("CSS3 Images")}} | {{Spec2("CSS3 Images")}} | {{CSSxRef("image-orientation")}}, {{CSSxRef("image-rendering")}}, {{CSSxRef("object-fit")}}, {{CSSxRef("object-position")}} を追加 | +| {{SpecName("Compat", "#css-%3Cimage%3E-type", "CSS Gradients")}} | {{Spec2("Compat")}} | `-webkit` の接頭辞が付いたグラデーション値の関数を標準化 | +| {{SpecName("CSS3 Values", "#urls", "<url>")}} | {{Spec2("CSS3 Values")}} | | +| {{Specname("CSS2.1", "syndata.html#uri", "<uri>")}} | {{Spec2("CSS2.1")}} | | +| {{SpecName("CSS1", "#url", "<url>")}} | {{Spec2("CSS1")}} | 初回定義 | 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 index bb810f605e..4c784dafd7 100644 --- a/files/ja/web/css/css_images/using_css_gradients/index.md +++ b/files/ja/web/css/css_images/using_css_gradients/index.md @@ -2,233 +2,242 @@ title: CSS グラデーションの使用 slug: Web/CSS/CSS_Images/Using_CSS_gradients tags: - - Advanced + - 上級者 - CSS - - CSS Images - - Example - - Gradients - - Guide - - Web + - CSS 画像 + - 例 + - グラデーション + - ガイド + - ウェブ translation_of: Web/CSS/CSS_Images/Using_CSS_gradients --- -
{{CSSRef}}
+{{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")}} の各関数によって、反復グラデーションを生成することもできます。

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

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

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

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

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

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

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

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

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

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

+

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

-

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

+グラデーションの最も基本的な形を作成するために必要なことは、2 つの色を指定することです。これらは色経由点 (color stops) と呼ばれています。少なくとも 2 つ必要ですが、必要なだけの数を設定することができます。 - +} +``` -
.simple-linear {
+```css
+.simple-linear {
   background: linear-gradient(blue, pink);
-}
+} +``` -

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

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

方向の変更

+

方向の変更

-

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

+既定では、線形グラデーションは上から下へ向けて変化します。方向を指定することで向きを変更することができます。 - +} +``` -
.horizontal-gradient {
+```css
+.horizontal-gradient {
   background: linear-gradient(to right, blue, pink);
 }
-
+``` -

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

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

対角グラデーション

+

対角グラデーション

-

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

+グラデーションを角から角へ、対角に作成することもできます。 - +} +``` -
.diagonal-gradient {
+```css
+.diagonal-gradient {
   background: linear-gradient(to bottom right, blue, pink);
 }
-
+``` -

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

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

角度の指定

+

角度の指定

-

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

+方向についてもっと制御したい場合は、グラデーションに特定の角度を設定することができます。 - +} +``` -
.angled-gradient {
+```css
+.angled-gradient {
   background: linear-gradient(70deg, blue, pink);
 }
-
+``` -

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

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

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

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

linear_redangles.png

-
+![](linear_red_angles.png) -

色の宣言と効果の生成

+

色の宣言と効果の生成

-

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

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

3つ以上の色の使用

+

3 つ以上の色の使用

-

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

+2 つの色に限定する必要はありません — 好きなだけ使うことができます。既定では、各色はグラデーション内で等分の幅になります。 - +} +``` -
.auto-spaced-linear-gradient {
+```css
+.auto-spaced-linear-gradient {
   background: linear-gradient(red, yellow, blue, orange);
 }
-
+``` -

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

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

色経由点の配置

+

色経由点の配置

-

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

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

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

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

不連続線の生成

+

不連続線の生成

-

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

+2 つの色の間に不連続線を生成して、グラデーションの遷移の代わりに縞模様を生成するなら、隣り合う色経由点を同じ位置に設定することができます。この例では、2 つの色がグラデーションの中心である `50%` の色経由点を共有しています。 - +} +``` -
.striped {
+```css
+.striped {
    background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
-}
+} +``` -

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

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

グラデーションのヒント

+

グラデーションのヒント

-

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

+既定では、グラデーションは 1 つの色から次の色へ均等に変化します。色ヒントを加えることで、変化値の中心点をグラデーションの特定の位置に移動することができます。この例では、変化の中心点を 50% の位置から 10% の位置へ移動します。 - +} +``` -
.color-hint {
+```css
+.color-hint {
   background: linear-gradient(blue, 10%, pink);
 }
 .simple-linear {
   background: linear-gradient(blue, pink);
-}
+} +``` -

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

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

色の帯と縞の生成

+

色の帯と縞の生成

-

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

+グラデーションの中に単色で遷移しない色の領域を含めるには、色経由点に 2 つの位置を含めます。色経由点には 2 つの位置を設定することができ、これは、異なる位置に同じ色を持つ 2 つの連続した色経由点に相当します。色は、第 1 の色経由点で完全な彩度に達し、第 2 の色経由点までその彩度を維持し、隣接する色経由点の第 1 の位置を介して隣接する色経由点の色に遷移します。 - +} +``` -
.multiposition-stops {
+```css
+.multiposition-stops {
    background: linear-gradient(to left,
        lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
    background: linear-gradient(to left,
@@ -240,243 +249,307 @@ translation_of: Web/CSS/CSS_Images/Using_CSS_gradients
    background: linear-gradient(to left,
       lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% );
 }
-
+``` -

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

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

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

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

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

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

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

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

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

+

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

-

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

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

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

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

+

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

-

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

+グラデーションは透明度に対応しているので、複数の背景を重ねて、かなり派手な効果を得ることができます。背景は上から下に重ねられ、最初に指定されたものが上になります。 - +} +``` -
.layered-image {
+```css
+.layered-image {
   background: linear-gradient(to right, transparent, mistyrose),
-      url("https://mdn.mozillademos.org/files/15525/critters.png");
+      url("critters.png");
 }
-
+``` -

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

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

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

+

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

-

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

+グラデーションを他のグラデーションと重ねることもできます。上のグラデーションが完全に不透明でない限り、下のグラデーションは表示されます。 - +} +``` -
.stacked-linear {
+```css
+.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) }}

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

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

+

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

-

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

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

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

+

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

-

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

+線形グラデーションと同様に、放射グラデーションを作成するために必要なのは 2 つの色だけです。既定では、グラデーションの中心は 50% 50% の位置にあり、グラデーションはボックスの縦横比に合わせて楕円形になっています。 - +} +``` -
.simple-radial {
+```css
+.simple-radial {
   background: radial-gradient(red, blue);
 }
-
+``` -

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

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

放射色経由点の配置

+

放射色経由点の配置

-

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

+ここでも線形グラデーションのように、放射の各色経由点をパーセント値または絶対長で配置することができます。 - +} +``` -
.radial-gradient {
+```css
+.radial-gradient {
   background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
 }
-
+``` -

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

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

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

+

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

-

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

+グラデーションの中心の位置は、キーワード、パーセント値、絶対的な長さで配置することができ、長さとパーセント値が 1 つだけの場合は繰り返して用いられ、それ以外の場合は左からの位置と上からの位置の順で用いられます。 - +} +``` -
.radial-gradient {
+```css
+.radial-gradient {
   background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
 }
-
+``` -

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

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

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

+

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

-

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

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

例: 楕円の closest-side

+

例: 楕円の 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.

+この例では大きさに `closest-side` の値を使用しています。つまり、開始点 (中心) からボックスを囲む最近接の辺までの距離で大きさが設定されます。 - +} +``` -
.radial-ellipse-side {
+```css
+.radial-ellipse-side {
   background: radial-gradient(ellipse closest-side,
       red, yellow 10%, #1e90ff 50%, beige);
 }
-
+``` -

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

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

例: 楕円の farthest-corner

+

例: 楕円の 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.

+この例は、大きさが `farthest-corner` と指定されていることを除けば、前の例と似ています。これは、グラデーションの大きさを、出発点から囲んだボックスの出発点から最も遠い角までの距離で設定するものです。 - +} +``` -
.radial-ellipse-far {
+```css
+.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) }}

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

例: 縁の closest-side

+

例: 円の 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.

+この例では `closest-side` を使用しており、円の大きさが開始点 (中心) と最も近い辺との間の距離になります。円の半径は、グラデーションの中心と最も近い辺との間の距離で、上から 25%、下から 25% の位置関係から、この場合は高さが幅よりも狭いので、最も下に近い位置になります。 - +} +``` -
.radial-circle-close {
+```css
+.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) }} + +

例: 楕円の長さまたはパーセント値

+ +楕円のみの場合、長さまたはパーセント値を使って楕円の大きさを決めることができます。最初の値は水平方向の半径、2 番目の値は垂直方向の半径を表し、パーセント値を使用した場合は、その次元でのボックスの大きさに対応します。以下の例では、水平方向の半径にパーセント値を使用しています。 + +```html hidden +
+``` + +```css hidden +div { + width: 240px; + height: 120px; +} +``` + +```css +.radial-ellipse-size { +  background: radial-gradient(ellipse 50% 50px, +      red, yellow 10%, #1e90ff 50%, beige); +} +``` + +{{ EmbedLiveSample('Example_length_or_percentage_for_ellipses', 240, 120) }} + +

例: 円の長さ

+ +円においては大きさを [\](/ja/docs/Web/CSS/length) で指定することができ、これが円の大きさになります。 + +```html hidden +
+``` + +```css hidden +div { + width: 240px; + height: 120px; +} +``` + +```css +.radial-circle-size { + background: radial-gradient(circle 50px, +      red, yellow 10%, #1e90ff 50%, beige); +} +``` -

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

+{{ EmbedLiveSample('Example_length_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 {
+```css
+.stacked-radial {
   background:
       radial-gradient(circle at 50% 0,
         rgba(255,0,0,.5),
@@ -489,134 +562,135 @@ translation_of: Web/CSS/CSS_Images/Using_CSS_gradients
         rgba(0,255,0,0) 70.71%) beige;
   border-radius: 50%;
 }
-
+``` -

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

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

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

+

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

-

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

+**`conic-gradient()`** は [CSS](/ja/docs/Web/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:

+線形グラデーションや放射グラデーションと同様に、扇形グラデーションを作成するのに必要なのは 2 つの色だけです。既定では、グラデーションの中心は 50% 50% の位置で、グラデーションの開始点は上向きです。 - +} +``` -
.simple-conic {
+```css
+.simple-conic {
   background: conic-gradient(red, blue);
 }
-
+``` -

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

-
+{{ 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"

+放射グラデーションのように、扇形グラデーションの中心を配置するには、キーワード、パーセント値、絶対的な長さの何れかをキーワード "at" の後に続けます。 - +} +``` -
.conic-gradient {
+```css
+.conic-gradient {
   background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
 }
-
+``` -

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

-
+{{ 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"

+既定では、指定したそれぞれの色経由点は、円の周囲に等間隔に配置されます。扇形グラデーションの開始角度を指定するには、最初に "from" キーワードを使用し、その後に角度または長さを指定します。また、色経由点の位置を指定するには、それらの後に角度または長さを指定します。 - +} +``` -
.conic-gradient {
-  background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple);
+```css
+.conic-gradient {
+  background: conic-gradient(from 45deg, red, orange 50%, yellow 85%, green);
 }
-
+``` -

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

-
+{{ 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.

+{{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} の各関数は自動的に反復される色経由点に対応していません。しかし、 {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} の各関数はこの機能を提供することができます。 -

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.

+繰り返されるグラデーション線または弧の大きさは、最初の色経由点の位置と最後の色経由点の位置の間の長さです。最初の色経由点が色だけで、色経由点の位置がなかった場合、値は既定で 0 になります。最後の色経由点が色だけで、色経由点の長さがなかった場合、値はデフォルトで100%になります。どちらも宣言されていない場合、グラデーション線は 100% になります。つまり、線形グラデーションと扇形グラデーションの場合は繰り返されず、放射グラデーションの場合は、グラデーションの半径がグラデーションの中心から最も遠い角までの長さよりも小さい場合にのみ繰り返されます。最初の色経由点が宣言されていて、その値が 0 より大きい場合、最初の色経由点と最後の色経由点の差が 100% または 360 度より小さいため、線または円弧の大きさはグラデーションが繰り返されます。 -
-

反復線形グラデーション

+

反復線形グラデーション

-

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.

+この例では、{{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}} を使用して、直線的に繰り返し進行するグラデーションを作成しています。グラデーションが繰り返されることで、色が循環していきます。この例では、グラデーションの線の長さは 10px です。 - +} +``` -
.repeating-linear {
+```css
+.repeating-linear {
   background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
 }
-
+``` -

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

-
+{{ 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.

+通常の線形グラデーションや放射グラデーションと同様に、複数のグラデーションを重ねて表示することができます。これは、グラデーションの一部を透明にして、透明部分から後続のグラデーションが見えるようにしたり、各グラデーション画像に異なる [background-size](/ja/docs/Web/CSS/background-size) や、オプションで異なる [background-position](/ja/docs/Web/CSS/background-position) のプロパティ値を含める場合にのみ意味を持ちます。透過性を利用しています。 -

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

+この例では、グラデーション線の長さは 300px、230px、300px です。 - +} +``` -
.multi-repeating-linear {
+```css
+.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,
@@ -632,25 +706,27 @@ translation_of: Web/CSS/CSS_Images/Using_CSS_gradients
         yellow 150px, green 200px, blue 250px,
         indigo 300px, violet 350px, red 370px);
 }
-
+``` -

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

-
+{{ 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:

+格子模様を作るために、透明度のあるグラデーションをいくつか重ねています。最初の背景宣言では、すべての色経由点を個別にリストアップしています。2 つ目の背景のプロパティ宣言では、複数の位置にある色経由点の構文を使用しています。 - +} +``` -
.plaid-gradient {
+```css
+.plaid-gradient {
   background:
       repeating-linear-gradient(90deg, transparent, transparent 50px,
         rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
@@ -687,44 +763,48 @@ translation_of: Web/CSS/CSS_Images/Using_CSS_gradients
       repeating-linear-gradient(45deg, transparent 0 5px,
         rgba(143, 77, 63, 0.25) 5px 10px);
 }
-
+``` -

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

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

反復放射グラデーション

+

反復放射グラデーション

-

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

+この例は {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} を使用して、中心点から放射状に反復されるグラデーションを生成します。色はグラデーションが反復するたびに周期的に繰り返されます。 - +} +``` -
.repeating-radial {
+```css
+.repeating-radial {
   background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
 }
-
+``` -

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

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

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

+

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

- +} +``` -
.multi-target {
+```css
+.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,
@@ -734,17 +814,15 @@ translation_of: Web/CSS/CSS_Images/Using_CSS_gradients
         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) }}

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

関連記事

+## 関連記事 -
    -
  • グラデーション関数: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}}
    • -
  • グラデーション関連の CSS データ型: {{cssxref("<gradient>")}}, {{cssxref("<image>")}}
    • -
  • グラデーション関連の CSS プロパティ: {{cssxref("background")}}, {{cssxref("background-image")}}
    • -
  • CSS Gradients Patterns Gallery, by Lea Verou
    • -
  • CSS3 Gradients Library, by Estelle Weyl
    • -
  • Gradient CSS Generator
    • -
+- グラデーション関数: {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} +- グラデーション関連の CSS データ型: {{cssxref("<gradient>")}}, {{cssxref("<image>")}} +- グラデーション関連の CSS プロパティ: {{cssxref("background")}}, {{cssxref("background-image")}} +- [CSS Gradients Patterns Gallery, by Lea Verou](https://lea.verou.me/css3patterns/) +- [CSS3 Gradients Library, by Estelle Weyl](http://standardista.com/cssgradients) +- [Gradient CSS Generator](https://cssgenerator.org/gradient-css-generator.html) diff --git a/files/ja/web/css/element()/index.md b/files/ja/web/css/element()/index.md index d8922ccaeb..ae781e3bf0 100644 --- a/files/ja/web/css/element()/index.md +++ b/files/ja/web/css/element()/index.md @@ -5,97 +5,85 @@ tags: - CSS - CSS 関数 - CSS4-images + - 関数 + - レイアウト - Reference - ウェブ - - レイアウト +browser-compat: css.types.image.element translation_of: Web/CSS/element() --- -
{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}}{{SeeCompatTable}} -

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

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

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

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

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

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

構文

+## 構文 -
element(id)
+```css +element(id) +``` -

where:

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

例

+## 例 -

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

+この例を[ライブで見る](https://media.prod.mdn.mozit.cloud/samples/cssref/moz-element.html)には、`-moz-element()` に対応している Firefox が必要です。 -

ある程度現実的な例

+

いくらか現実的な例

-

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

+この例では 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>
+```html
+

+  
This box uses the element with the #myBackground1 ID as its background!

+

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

This text is part of the background. Cool, huh?

+
+
+``` -

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

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

example1.png

+![](example1.png) -

ある程度とっぴな例

+

いくらか突飛な例

-

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

+この例は hidden 状態の {{HTMLElement("button")}} 要素を、背景の繰り返しパターンとして使います。これは、好きな要素を背景として使うことができるという例ですが、すぐれたデザインとはいえないかもしれません。 -
<div style="width:400px; height:100px; background:-moz-element(#myBackground2);">
-</div>
+```html
+

+

 
-<div style="overflow:hidden; height:0;">
-  <button id="myBackground2" type="button">Evil button!</button>
-</div>
-
+
+ +
+``` -

example2.png

+![](example2.png) -

仕様書

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

ブラウザーの対応

+## Browser compatibility -
{{Compat("css.types.image.element")}}
+{{Compat}} -

関連情報

+## See also -
    -
  • {{cssxref("_image", "image()")}}
    • -
  • {{cssxref("image-set", "image-set()")}}
    • -
  • {{cssxref("<image>")}}
    • -
  • {{cssxref("<gradient>")}}
    • -
  • {{cssxref("element()")}}
    • -
  • {{cssxref("cross-fade")}}
    • -
  • {{domxref("document.mozSetImageElement()")}}
    • -
+- {{cssxref("image/image()", "image()")}} +- {{cssxref("image/image-set()", "image-set()")}} +- {{cssxref("<image>")}} +- {{cssxref("<gradient>")}} +- {{cssxref("element()")}} +- {{cssxref("cross-fade()")}} +- {{domxref("document.mozSetImageElement()")}} diff --git a/files/ja/web/css/gradient/conic-gradient()/index.md b/files/ja/web/css/gradient/conic-gradient()/index.md index 7372d1f6bb..d5e01f3ad7 100644 --- a/files/ja/web/css/gradient/conic-gradient()/index.md +++ b/files/ja/web/css/gradient/conic-gradient()/index.md @@ -72,7 +72,7 @@ background: conic-gradient( ### 扇型グラデーションの構成 -

扇形グラデーションの構文は放射グラデーションと似ていますが、色経由点はグラデーションの中心から現れるグラデーション軸上ではなく、グラデーション円弧、すなわち円周上に配置されます。扇形グラデーションでは、色の遷移は円の中心を回るように、上から始まって時計回りに行われます。放射グラデーションでは、色の遷移は楕円の中心から外に向けて、すべての方向に行われます。

+扇形グラデーションの構文は放射グラデーションと似ていますが、色経由点はグラデーションの中心から現れるグラデーション軸上ではなく、グラデーション円弧、すなわち円周上に配置されます。扇形グラデーションでは、色の遷移は円の中心を回るように、上から始まって時計回りに行われます。放射グラデーションでは、色の遷移は楕円の中心から外に向けて、すべての方向に行われます。 ![扇形グラデーションの円周と放射グラデーションの軸に沿った色経由点](screenshot_2018-11-29_21.09.19.png) diff --git a/files/ja/web/css/gradient/index.md b/files/ja/web/css/gradient/index.md index 5123beb559..f3cd62517d 100644 --- a/files/ja/web/css/gradient/index.md +++ b/files/ja/web/css/gradient/index.md @@ -6,7 +6,7 @@ tags: - CSS Data Type - CSS Images - Data Type - - Graphics + - グラフィック - Layout - Reference browser-compat: css.types.image.gradient @@ -14,7 +14,7 @@ translation_of: Web/CSS/gradient --- {{CSSRef}} -The **``** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、 2 色以上の連続的な色の変化で構成される特殊な型の {{cssxref("<image>")}} です。 +**``** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、 2 色以上の連続的な色の変化で構成される特殊な型の {{cssxref("<image>")}} です。 {{EmbedInteractiveExample("pages/css/type-gradient.html")}} @@ -30,7 +30,7 @@ CSS グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS #### 放射グラデーション -放射グラデーション (radical gradient) は、色が中央点 (origin) から連続的に変化します。 {{cssxref("gradient/radial-gradient()", "radial-gradient()")}} 関数で生成されます。 +放射グラデーション (radical gradient) は、色が中心点 (origin) から連続的に変化します。 {{cssxref("gradient/radial-gradient()", "radial-gradient()")}} 関数で生成されます。 #### 反復グラデーション diff --git a/files/ja/web/css/image-orientation/index.md b/files/ja/web/css/image-orientation/index.md index 7366e9755b..bbb8eb4009 100644 --- a/files/ja/web/css/image-orientation/index.md +++ b/files/ja/web/css/image-orientation/index.md @@ -3,127 +3,111 @@ title: image-orientation slug: Web/CSS/image-orientation tags: - CSS - - CSS Image - - CSS Property - - CSS プロパティ - CSS 画像 + - CSS プロパティ - EXIF - - Experimental + - 実験的 + - 画像補正 + - 画像の向き + - Deprecated + - 向き - Reference - image-orientation - - リファレンス - - 画像の向き - - 画像補正 + - recipe:css-property +browser-compat: css.properties.image-orientation translation_of: Web/CSS/image-orientation --- -

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

+**`image-orientation`** は [CSS](/ja/docs/Web/CSS) のプロパティで、画像の向きのレイアウトに依存しない修正を指定します。 -
-

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

-
+> **Note:** `from-image` と `none` 以外の値は、仕様書では非推奨とされています。 -
/* キーワード値 */
+```css
+/* キーワード値 */
 image-orientation: none;
 image-orientation: from-image; /* 画像の EXIF データを使用 */
 
 /* グローバル値 */
 image-orientation: inherit;
 image-orientation: initial;
+image-orientation: revert;
 image-orientation: unset;
 
 /* 廃止された値 {{obsolete_inline(63)}} */
 image-orientation: 90deg; /* 90度回転 */
 image-orientation: 90deg flip; /* 90度回転して、水平方向に反転 */
-image-orientation: flip; /* 回転せず、水平方向の反転のみ適用 */
- -

{{cssinfo}}

+image-orientation: flip; /* 回転せず、水平方向の反転のみ適用 */ +``` -

構文

+## 構文 -

値

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

形式文法

+## 解説 -{{csssyntax}} - -

使用上のメモ

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

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

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

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

+## Formal definition -

例

+{{cssinfo}} -

CSS

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

結果

+#### 結果 -

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

+{{EmbedLiveSample("Orienting_image_from_image_data", "100%", 240)}} -

仕様書

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

ブラウザーの互換性

+## Browser compatibility -

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

+{{Compat}} -

関連情報

+## See also -
    -
  • ほかの画像関連 CSS プロパティ: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}
    • -
  • {{cssxref("transform")}} および {{cssxref("rotate")}}
    • -
+- その他の画像関連 CSS プロパティ: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}} +- {{cssxref("transform")}} および {{cssxref("rotate")}} -
{{CSSRef}}
+{{CSSRef}} diff --git a/files/ja/web/css/image-orientation/mdn.svg b/files/ja/web/css/image-orientation/mdn.svg new file mode 100644 index 0000000000..bbdbacc6fc --- /dev/null +++ b/files/ja/web/css/image-orientation/mdn.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/files/ja/web/css/image-rendering/blumen.jpg b/files/ja/web/css/image-rendering/blumen.jpg new file mode 100644 index 0000000000..1eae597125 Binary files /dev/null and b/files/ja/web/css/image-rendering/blumen.jpg differ diff --git a/files/ja/web/css/image-rendering/index.md b/files/ja/web/css/image-rendering/index.md index c158a3d034..d4bfadd6ac 100644 --- a/files/ja/web/css/image-rendering/index.md +++ b/files/ja/web/css/image-rendering/index.md @@ -3,21 +3,26 @@ title: image-rendering slug: Web/CSS/image-rendering tags: - CSS - - CSS プロパティ - CSS 画像 + - CSS プロパティ - Reference - image-rendering + - recipe:css-property +browser-compat: css.properties.image-rendering translation_of: Web/CSS/image-rendering --- -
{{CSSRef}}
+{{CSSRef}} + +[CSS](/ja/docs/Web/CSS) の **`image-rendering`** プロパティは、画像を拡大縮小するアルゴリズムを設定します。このプロパティは要素自身に適用され、他のプロパティで設定されるあらゆる画像、子孫要素に適用されます。 -

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

+{{EmbedInteractiveExample("pages/css/image-rendering.html")}} -

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

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

構文

+## 構文 -
/* キーワード値 */
+```css
+/* キーワード値 */
 image-rendering: auto;
 image-rendering: crisp-edges;
 image-rendering: pixelated;
@@ -25,50 +30,57 @@ 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 の同義語として定義されていました。

-
+image-rendering: revert; +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](https://en.wikipedia.org/wiki/Hqx) のような[その他のスムーズ化が行われない拡大縮小アルゴリズム](https://en.wikipedia.org/wiki/Pixel-art_scaling_algorithms)などが適しています。この値はブラウザーゲームようなピクセルアート画像を想定しています。 +- `pixelated` + - : 画像を拡大する時は、最近傍 (nearest neighbor) 法が使用され、画像は画像が大きなピクセルで構成されたように表示されます。縮小する時は `auto` と同じになります。 + +> **Note:** `optimizeQuality` および `optimizeSpeed` の値は、初期の草稿で (SVG の仕様 {{SVGAttr("image-rendering")}} に似たものとして) `smooth` および `pixelated` の同義語として定義されていました。 + +## Formal definition + +{{cssinfo}} -

形式文法

+## Formal syntax -{{CSSSyntax}} +{{csssyntax}} -

例

+## Examples -