CSS Masking に関するプロパティの記事を更新

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

1 files changed, 63 insertions, 105 deletions

diff --git a/files/ja/web/css/mask-origin/index.md b/files/ja/web/css/mask-origin/index.md
index 7822be961e..023676b1a4 100644
--- a/files/ja/web/css/mask-origin/index.md
+++ b/files/ja/web/css/mask-origin/index.md
@@ -6,14 +6,17 @@ tags:
   - CSS プロパティ
   - CSS マスク
   - Experimental
-  - Reference
+  - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.mask-origin
 translation_of: Web/CSS/mask-origin
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>mask-origin</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、マスクの基準位置を設定します。</p>
+**`mask-origin`** は [CSS](/ja/docs/Web/CSS) のプロパティで、マスクの原点を設定します。
 
-<pre class="brush:css no-line-numbers">/* キーワード値 */
+```css
+/* キーワード値 */
 mask-origin: content-box;
 mask-origin: padding-box;
 mask-origin: border-box;
@@ -34,108 +37,63 @@ mask-origin: view-box, fill-box, border-box;
 /* グローバル値 */
 mask-origin: inherit;
 mask-origin: initial;
+mask-origin: revert;
 mask-origin: unset;
-</pre>
-
-<p>単純なボックスとして描画される要素では、このプロパティはマスクを配置する領域を指定します。言い換えれば、このプロパティは {{cssxref("mask-image")}} CSS プロパティで指定された画像の基準位置を指定します。複数のボックスとして描画される要素、例えば複数行にまたがるインラインボックスや複数のページにまたがるボックスなどでは、マスクの配置領域を決定するために {{cssxref("box-decoration-break")}} がどのボックスに作用するかを指定します。</p>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<p>1つまたは複数の以下に挙げたキーワード値を、コンマで区切って指定します。</p>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt><code>content-box</code></dt>
- <dd>位置がコンテンツボックスからの相対位置になります。</dd>
- <dt><code>padding-box</code></dt>
- <dd>位置がパディングボックスからの相対位置になります。単純なボックスでは <code>0 0</code> がパディング境界の左上隅で、 <code>100% 100%</code> は右下隅です。</dd>
- <dt><code>border-box</code></dt>
- <dd>位置が境界ボックスからの相対位置になります。</dd>
- <dt><code>margin-box</code></dt>
- <dd>位置がマージンボックスからの相対位置になります。</dd>
- <dt><code>fill-box</code></dt>
- <dd>位置がオブジェクトの囲みボックスからの相対位置になります。</dd>
- <dt><code>stroke-box</code></dt>
- <dd>位置が輪郭線ボックスからの相対位置になります。</dd>
- <dt><code>view-box</code></dt>
- <dd>直近の SVG ビューポートを参照ボックスとして使用します。 {{svgattr("viewBox")}} 属性が SVG ビューポートを作成している要素に指定されると、参照ボックスは <code>viewBox</code> 属性で示された座標系の原点に配置され、参照ボックスの寸法は <code>viewBox</code> 属性の幅と高さに設定されます。</dd>
- <dt><code>content</code> {{non-standard_inline}}</dt>
- <dd><code>content-box</code> と同じです。</dd>
- <dt><code>padding</code> {{non-standard_inline}}</dt>
- <dd><code>padding-box</code> と同じです。</dd>
- <dt><code>border</code> {{non-standard_inline}}</dt>
- <dd><code>border-box</code> と同じです。</dd>
-</dl>
-
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+```
+
+単純なボックスとして描画される要素では、このプロパティはマスクを配置する領域を指定します。言い換えれば、このプロパティは {{cssxref("mask-image")}} プロパティで指定された画像の原点を指定します。複数のボックスとして描画される要素、例えば複数行にまたがるインラインボックスや複数のページにまたがるボックスなどでは、マスクの配置領域を決定するために {{cssxref("box-decoration-break")}} がどのボックスに作用するかを指定します。
+
+## 構文
+
+1 つまたは複数の以下に挙げたキーワード値を、カンマで区切って指定します。
+
+### 値
+
+- `content-box`
+  - : 位置がコンテンツボックスからの相対位置になります。
+- `padding-box`
+  - : 位置がパディングボックスからの相対位置になります。単純なボックスでは `0 0` がパディング境界の左上隅で、 `100% 100%` は右下隅です。
+- `border-box`
+  - : 位置が境界ボックスからの相対位置になります。
+- `margin-box`
+  - : 位置がマージンボックスからの相対位置になります。
+- `fill-box`
+  - : 位置がオブジェクトの囲みボックスからの相対位置になります。
+- `stroke-box`
+  - : 位置が輪郭線ボックスからの相対位置になります。
+- `view-box`
+  - : 直近の SVG ビューポートを参照ボックスとして使用します。 {{svgattr("viewBox")}} 属性が SVG ビューポートを作成している要素に指定されると、参照ボックスは `viewBox` 属性で示された座標系の原点に配置され、参照ボックスの寸法は `viewBox` 属性の幅と高さに設定されます。
+- `content` {{non-standard_inline}}
+  - : `content-box` と同じです。
+- `padding` {{non-standard_inline}}
+  - : `padding-box` と同じです。
+- `border` {{non-standard_inline}}
+  - : `border-box` と同じです。
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Example" name="Example">例</h2>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css highlight[9]">#masked {
-  width: 100px;
-  height: 100px;
-  margin: 10px;
-  border: 10px solid blue;
-  background-color: #8cffa0;
-  padding: 10px;
-  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
-  mask-origin: border-box; /* Can be changed in the live sample */
-}
-</pre>
-
-<div class="hidden">
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div id="masked"&gt;
-&lt;/div&gt;
-&lt;select id="origin"&gt;
-  &lt;option value="content-box"&gt;content-box&lt;/option&gt;
-  &lt;option value="padding-box"&gt;padding-box&lt;/option&gt;
-  &lt;option value="border-box" selected&gt;border-box&lt;/option&gt;
-  &lt;option value="margin-box"&gt;margin-box&lt;/option&gt;
-  &lt;option value="fill-box"&gt;fill-box&lt;/option&gt;
-  &lt;option value="stroke-box"&gt;stroke-box&lt;/option&gt;
-  &lt;option value="view-box"&gt;view-box&lt;/option&gt;
-&lt;/select&gt;
-</pre>
-
-<h3 id="JavaScript">JavaScript</h3>
-
-<pre class="brush: js">var origin = document.getElementById("origin");
-origin.addEventListener("change", function (evt) {
-  document.getElementById("masked").style.maskOrigin = evt.target.value;
-});
-</pre>
-</div>
-
-<p>{{EmbedLiveSample("Example", 160, 200)}}</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 Masks", "#the-mask-origin", "mask-origin")}}</td>
-   <td>{{Spec2("CSS Masks")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<p>{{Compat("css.properties.mask-origin")}}</p>
+## 例
+
+### マスクの原点を border-box に設定する
+
+下のボックス内の CSS を更新して、他の可能な値を試してみてください。
+
+{{EmbedGHLiveSample("css-examples/masking/mask-origin.html", '100%', 600)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/)