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/image-rendering/blumen.jpg | Bin 0 -> 2288 bytes files/ja/web/css/image-rendering/index.md | 141 +++++++++++++--------------- 2 files changed, 65 insertions(+), 76 deletions(-) create mode 100644 files/ja/web/css/image-rendering/blumen.jpg (limited to 'files/ja/web/css/image-rendering') 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 -