CSS シェイプ関係の文書を更新

- 2021/10/09 時点の英語版に同期

1 files changed, 61 insertions, 77 deletions

diff --git a/files/ja/web/css/shape-image-threshold/index.md b/files/ja/web/css/shape-image-threshold/index.md
index 06a839dbed..cc22c46709 100644
--- a/files/ja/web/css/shape-image-threshold/index.md
+++ b/files/ja/web/css/shape-image-threshold/index.md
@@ -2,66 +2,66 @@
 title: shape-image-threshold
 slug: Web/CSS/shape-image-threshold
 tags:
-  - Boundaries
+  - 境界
   - CSS
-  - CSS Property
-  - CSS Shapes
-  - Float Area
+  - CSS プロパティ
+  - CSS シェイプ
+  - 浮動領域
   - Opacity
-  - Property
+  - プロパティ
   - Reference
-  - Shape
-  - 'recipe:css-property'
+  - シェイプ
+  - recipe:css-property
   - shape-image-threshold
+browser-compat: css.properties.shape-image-threshold
 translation_of: Web/CSS/shape-image-threshold
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><span class="seoSummary"><strong><code>shape-image-threshold</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 {{cssxref("shape-outside")}} の値に指定された画像を使用してシェイプを抽出するのに使用される、アルファチャネルのしきい値を設定します。</span></p>
+**`shape-image-threshold`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 {{cssxref("shape-outside")}} の値に指定された画像によってシェイプを抽出するために使用するアルファチャネルのしきい値を設定します。
 
-<div>{{EmbedInteractiveExample("pages/css/shape-image-threshold.html")}}</div>
+{{EmbedInteractiveExample("pages/css/shape-image-threshold.html")}}
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+アルファコンポーネントの値がしきい値よりも大きいピクセルはすべて、境界を特定するためのシェイプの一部とみなされます。例えば、 `0.5` の値は不透過度が 50% よりも大きいピクセルをすべて含めた図形になるという意味です。
 
-<p>アルファコンポーネントの値がしきい値よりも大きいピクセルはすべて、境界を特定するためのシェイプの一部とみなされます。例えば、 <code>0.5</code> の値は不透過度が50%よりも大きいピクセルをすべて含めた図形になるという意味です。</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css no-line-numbers notranslate">/* &lt;number&gt; 値 */
+```css
+/* <number> 値 */
 shape-image-threshold: 0.7;
 
 /* グローバル値 */
 shape-image-threshold: inherit;
 shape-image-threshold: initial;
+shape-image-threshold: revert;
 shape-image-threshold: unset;
-</pre>
+```
 
-<h3 id="Values" name="Values">値</h3>
+### 値
 
-<dl>
- <dt>{{cssxref("&lt;alpha-value&gt;")}}</dt>
- <dd>画像からシェイプを抽出するために使用されるしきい値を設定します。シェイプはアルファ値がしきい値より大きいピクセルによって定義されます。 0.0 (完全に透過) から 1.0 (完全に不透過) の範囲を外れた値は、この範囲に収められます。</dd>
-</dl>
+- {{cssxref("&lt;alpha-value&gt;")}}
+  - : 画像からシェイプを抽出するために使用されるしきい値を設定します。シェイプはアルファ値がしきい値より大きいピクセルによって定義されます。 0.0 (完全に透過) から 1.0 (完全に不透過) の範囲を外れた値は、この範囲に収められます。
 
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+## 公式定義
 
-<p>{{cssinfo}}</p>
+{{CSSInfo}}
 
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="Aligning_text_to_a_gradient" name="Aligning_text_to_a_gradient">グラデーションへのテキストの配置</h3>
+<h3 id="Aligning_text_to_a_gradient">グラデーションへのテキストの配置</h3>
 
-<p>この例では、グラデーションの背景画像を持つ {{HTMLElement("div")}} ブロックを作成します。グラデーションは <code>shape-outside</code> を使用して CSS シェイプとして確立されているので、グラデーションの中のピクセルのうち 20% よりも大きい不透過度 (つまり、アルファコンポーネントが 0.2 よりも大きいピクセル) はシェイプの一部とみなされます。</p>
+この例では、グラデーションの背景画像を持つ {{HTMLElement("div")}} ブロックを作成します。グラデーションは `shape-outside` を使用して CSS シェイプとして確立されているので、グラデーションの中のピクセルのうち 20% よりも大きい不透過度 (つまり、アルファコンポーネントが 0.2 よりも大きいピクセル) はシェイプの一部とみなされます。
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html notranslate">&lt;div id="gradient-shape"&gt;&lt;/div&gt;
+```html
+<div id="gradient-shape"></div>
 
-&lt;p&gt;
+<p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi
   voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint
   facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat
@@ -72,11 +72,13 @@ shape-image-threshold: unset;
   nisi soluta? Totam inventore ea eum sed velit et eligendi suscipit
   accusamus iusto dolore, at provident eius alias maxime pariatur non
   deleniti ipsum sequi rem eveniet laboriosam magni expedita?
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css; hightlight[9] notranslate">#gradient-shape {
+```css
+#gradient-shape {
   width: 150px;
   height: 150px;
   float: left;
@@ -85,47 +87,29 @@ shape-image-threshold: unset;
   shape-outside: linear-gradient(30deg, black, transparent 80%,
       transparent);
   shape-image-threshold: 0.2;
-}</pre>
-
-<p>シェイプは画像ファイルではなく、線形グラデーションの {{cssxref("background-image")}} を使用して定義されています。同じグラデーションが、 {{cssxref("shape-outside")}} プロパティを使用して、浮動領域を設定するためにシェイプが取得される画像としても使用されます。</p>
-
-<p>シェイプの部分として扱うグラデーション内のピクセルは20%の不透過度がしきい値なので、 <code>shape-image-threadhold</code> の値を <code>0.2</code> にして使用して作成しています。</p>
-
-<h4 id="Result" name="Result">結果</h4>
-
-<p>{{EmbedLiveSample('Aligning_text_to_a_gradient', 600, 230)}}</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 Shapes', '#shape-image-threshold-property', 'shape-image-threshold')}}</td>
-   <td>{{Spec2('CSS Shapes')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("css.properties.shape-image-threshold")}}</p>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Shapes">CSS シェイプ</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">CSS シェイプの概要</a></li>
- <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
- <li>{{cssxref("shape-outside")}}</li>
- <li>{{cssxref("shape-margin")}}</li>
-</ul>
+}
+```
+
+シェイプは画像ファイルではなく、線形グラデーションの {{cssxref("background-image")}} を使用して定義されています。同じグラデーションが、 {{cssxref("shape-outside")}} プロパティを使用して、浮動領域を設定するためにシェイプが取得される画像としても使用されます。
+
+シェイプの部分として扱うグラデーション内のピクセルは 20% の不透過度がしきい値なので、 `shape-image-threadhold` の値を `0.2` にして使用して作成しています。
+
+#### 結果
+
+{{EmbedLiveSample('Aligning_text_to_a_gradient', 600, 230)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS シェイプ](/ja/docs/Web/CSS/CSS_Shapes)
+- [CSS シェイプの概要](/ja/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes)
+- {{cssxref("&lt;basic-shape&gt;")}}
+- {{cssxref("shape-outside")}}
+- {{cssxref("shape-margin")}}