CSS image 配下の関数を整備

- orphaned/Web/CSS/image-set() を Web/CSS/image/image-set() へ移動
- orphaned/Web/CSS/paint() を Web/CSS/image/paint() へ移動
- Web/CSS/image 以下を Markdown 化し 2021/08/13 時点の英語版に同期

2 files changed, 0 insertions, 199 deletions

diff --git a/files/ja/orphaned/web/css/image-set()/index.html b/files/ja/orphaned/web/css/image-set()/index.html
deleted file mode 100644
index 1e8e370e2a..0000000000
--- a/files/ja/orphaned/web/css/image-set()/index.html
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: image-set()
-slug: orphaned/Web/CSS/image-set()
-tags:
-  - CSS
-  - CSS Function
-  - CSS-4 Images
-  - Function
-  - Reference
-  - Web
-translation_of: Web/CSS/image-set()
-original_slug: Web/CSS/image-set()
----
-<div>{{cssref}}</div>
-
-<p class="summary"><strong><code>image-set()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Functions">関数</a>表記で、主に高密度の画面において、指定されたセットから最も適切な CSS 画像をブラウザーに選択させる方法です。</p>
-
-<p>解像度と帯域は端末やネットワークアクセスによって様々です。 <code>image-set()</code> 関数は、画像オプションのセットを提供して — それぞれが解像度の宣言に関連付けられ — ブラウザーが端末および設定にもっともふさわしいものを選択することで、ユーザーの端末にもっとも適切な解像度の画像を配信します。解像度はファイルサイズのプロキシとして使用することができます。 — 高い密度の画面で遅いモバイル接続を使用しているユーザーエージェントは、高解像度の画面の読み込みを待つよりも、低解像度の画像を受信したほうが良いかもしれません。</p>
-
-<p><code>image-set()</code> はそれぞれのユーザーが必要なことを判断するのではなく、オプションを提供することができます。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate">image-set() = image-set( &lt;image-set-option&gt;# )
-where &lt;image-set-option&gt; = [ &lt;image&gt; | &lt;string&gt; ] &lt;resolution&gt; and
-      &lt;string&gt; is an &lt;url&gt;
-</pre>
-
-<h3 id="Values" name="Values">値</h3>
-
-<p>もっともよく見かけるのは <code>url()</code> または <code>&lt;string&gt;</code> 値ですが、 <code><a href="/ja/docs/Web/CSS/image">&lt;image&gt;</a></code> は画像セット以外のあらゆる画像型を取ることができます。 <code>image-set()</code> 関数は他の <code>image-set()</code> 関数の中に入れることはできません。</p>
-
-<p><code><a href="/ja/docs/Web/CSS/resolution">&lt;resolution&gt;</a></code> の単位には、ピクセル当たりのドット数を表す <code>x</code> または <code>dppx</code>、インチ当たりのドット数を表す <code>dpi</code>、センチメートル当たりのドット数を表す <code>dpcm</code> があります。 <code>image-set()</code> の中の画像はすべて、固有の解像度が必要です。</p>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Using_image-set_to_provide_alternative_background-image_options" name="Using_image-set_to_provide_alternative_background-image_options">image-set() を使用して代替の background-image オプションを提供する</h3>
-
-<pre class="brush: css notranslate">background-image: image-set( "cat.png" 1x,
-                             "cat-2x.png" 2x,
-                             "cat-print.png" 600dpi);</pre>
-
-<p>この例は <code><a class="css" href="https://drafts.csswg.org/css-images-4/#funcdef-image-set" id="ref-for-funcdef-image-set⑨">image-set()</a></code> の使い方を示しており、 {{cssxref("background-image")}} のオプションとして、必要な解像度に応じて2つの異なる画像、通常版と高解像度版を選択する方法を示しています。</p>
-
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
-
-<p>ブラウザーは支援技術に対して、背景画像についての特別な情報を何も提供しません。これは主に読み上げソフトにとって重要であり、読み上げソフトは背景画像が存在することをアナウンスせず、したがってユーザーには何も伝えられません。もし画像がページ全体の目的を理解するのに重要な情報を含んでいる場合は、文書中に意味的に記述するようにしてください。</p>
-
-<ul>
- <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
- <li><a class="external external-icon" href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html" rel="noopener">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li>
-</ul>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>仕様書</th>
-   <th>状態</th>
-   <th>備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}</td>
-   <td>{{Spec2('CSS4 Images')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.types.image.image-set")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{cssxref("image")}}</li>
- <li>{{cssxref("_image", "image()")}}</li>
- <li>{{cssxref("element")}}</li>
- <li>{{cssxref("url")}}</li>
- <li>{{cssxref("&lt;gradient&gt;")}}</li>
- <li>{{cssxref("cross-fade")}}</li>
-</ul>
diff --git a/files/ja/orphaned/web/css/paint()/index.html b/files/ja/orphaned/web/css/paint()/index.html
deleted file mode 100644
index 9f29cb31e3..0000000000
--- a/files/ja/orphaned/web/css/paint()/index.html
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: paint()
-slug: orphaned/Web/CSS/paint()
-tags:
-  - CSS
-  - CSS Function
-  - CSS 関数
-  - CSS4-images
-  - Houdini
-  - Reference
-  - Web
-  - ウェブ
-translation_of: Web/CSS/paint()
-original_slug: Web/CSS/paint()
----
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
-
-<p><strong><code>paint()</code></strong> は <a href="/en-US/docs/Web/CSS">CSS</a> の関数で、 PaintWorklet で生成された {{cssxref("&lt;image&gt;")}} の値を定義します。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox">paint(<var>workletName</var>, <var>parameters</var>)</pre>
-
-<p>凡例</p>
-
-<dl>
- <dt><var>workletName</var></dt>
- <dd>登録された Worklet の名前です。</dd>
- <dt><var>parameters</var></dt>
- <dd>PaintWorklet へ渡される省略可能な追加の引数です。</dd>
-</dl>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<p>CSS の paint() 関数で追加の引数を渡すことができます。この例では、二つの引数を渡しています。リストアイテムのグループの背景画像が塗りつぶしか輪郭線だけかと、輪郭線の太さです。</p>
-
-<pre class="brush: html hidden">&lt;ul&gt;
-    &lt;li&gt;item 1&lt;/li&gt;
-    &lt;li&gt;item 2&lt;/li&gt;
-    &lt;li&gt;item 3&lt;/li&gt;
-    &lt;li&gt;item 4&lt;/li&gt;
-    &lt;li&gt;item 5&lt;/li&gt;
-    &lt;li&gt;item 6&lt;/li&gt;
-    &lt;li&gt;item 7&lt;/li&gt;
-    &lt;li&gt;item 8&lt;/li&gt;
-    &lt;li&gt;item 9&lt;/li&gt;
-    &lt;li&gt;item 10&lt;/li&gt;
-    &lt;li&gt;item 11&lt;/li&gt;
-    &lt;li&gt;item 12&lt;/li&gt;
-    &lt;li&gt;item 13&lt;/li&gt;
-    &lt;li&gt;item 14&lt;/li&gt;
-    &lt;li&gt;item 15&lt;/li&gt;
-    &lt;li&gt;item 16&lt;/li&gt;
-    &lt;li&gt;item 17&lt;/li&gt;
-    &lt;li&gt;item 18&lt;/li&gt;
-    &lt;li&gt;item 19&lt;/li&gt;
-    &lt;li&gt;item 20&lt;/li&gt;
-&lt;/ul&gt;</pre>
-
-<pre class="brush: js hidden">  CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js');
-</pre>
-
-<pre class="brush: css">li {
-   --boxColor: hsla(55, 90%, 60%, 1.0);
-   background-image: paint(hollowHighlights, stroke, 2px);
-}
-
-li:nth-of-type(3n) {
-   --boxColor: hsla(155, 90%, 60%, 1.0);
-   background-image: paint(hollowHighlights, filled,  3px);
-}
-
-li:nth-of-type(3n+1) {
-   --boxColor: hsla(255, 90%, 60%, 1.0);
-   background-image: paint(hollowHighlights, stroke, 1px);
-}</pre>
-
-<p>boxColor を定義しているセレクターブロックにカスタムプロパティを設定しました。カスタムプロパティは PaintWorklet にアクセスすることができます。</p>
-
-<p>{{EmbedLiveSample("Examples", 300, 300)}}</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Painting API', '#paint-notation', 'Paint Notation')}}</td>
-   <td>{{Spec2('CSS Painting API')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.types.image.paint")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref('PaintWorklet')}}</li>
- <li>{{domxref('CSS Painting API')}}</li>
- <li><a href="/ja/docs/Web/API/CSS_Painting_API/Guide">CSS Painting API の使用</a></li>
- <li>{{cssxref("&lt;image&gt;")}}</li>
- <li>{{domxref("canvas")}}</li>
-</ul>