From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/image-rendering/index.html | 129 ++++++++++++++++++++++++++++ 1 file changed, 129 insertions(+) create mode 100644 files/ja/web/css/image-rendering/index.html (limited to 'files/ja/web/css/image-rendering') diff --git a/files/ja/web/css/image-rendering/index.html b/files/ja/web/css/image-rendering/index.html new file mode 100644 index 0000000000..bf4a1c5162 --- /dev/null +++ b/files/ja/web/css/image-rendering/index.html @@ -0,0 +1,129 @@ +--- +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() をそれぞれ参照してください。

+
+ +

関連情報

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