initial commit

1 files changed, 152 insertions, 0 deletions

diff --git a/files/ja/web/css/mask-clip/index.html b/files/ja/web/css/mask-clip/index.html
new file mode 100644
index 0000000000..15d56ed307
--- /dev/null
+++ b/files/ja/web/css/mask-clip/index.html
@@ -0,0 +1,152 @@
+---
+title: mask-clip
+slug: Web/CSS/mask-clip
+tags:
+  - CSS
+  - CSS Masking
+  - CSS Property
+  - CSS マスク
+  - Experimental
+  - Reference
+translation_of: Web/CSS/mask-clip
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>mask-clip</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、マスクが影響する領域を指定します。要素の描画されるコンテンツはこの領域に制限されます。</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;geometry-box&gt; 値 */
+mask-clip: content-box;
+mask-clip: padding-box;
+mask-clip: border-box;
+mask-clip: margin-box;
+mask-clip: fill-box;
+mask-clip: stroke-box;
+mask-clip: view-box;
+
+/* キーワード値 */
+mask-clip: no-clip;
+
+/* 標準外のキーワード値 */
+-webkit-mask-clip: border;
+-webkit-mask-clip: padding;
+-webkit-mask-clip: content;
+-webkit-mask-clip: text;
+
+/* 複数の値 */
+mask-clip: padding-box, no-clip;
+mask-clip: view-box, fill-box, border-box;
+
+/* グローバル値 */
+mask-clip: inherit;
+mask-clip: initial;
+mask-clip: unset;
+</pre>
+
+<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>描画されるコンテンツは、パディングボックスでクリッピングされます。</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 ビューポートを参照ボックスとして使用します。 <code><a href="/ja/docs/Web/SVG/Attribute/viewBox">viewBox</a></code> 属性が SVG ビューポートを作成している要素に指定されると、参照ボックスは <code>viewBox</code> 属性で示された座標系の原点に配置され、参照ボックスの寸法は <code>viewBox</code> 属性の幅と高さに設定されます。</dd>
+ <dt><code>no-clip</code></dt>
+ <dd>描画されるコンテンツはクリッピングされません。</dd>
+ <dt><code>border</code>{{non-standard_inline}}</dt>
+ <dd>このキーワードは <code>border-box</code> と同じ動作をします。</dd>
+ <dt><code>padding</code>{{non-standard_inline}}</dt>
+ <dd>このキーワードは <code>padding-box</code> と同じ動作をします。</dd>
+ <dt><code>content</code>{{non-standard_inline}}</dt>
+ <dd>このキーワードは <code>content-box</code> と同じ動作をします。</dd>
+ <dt><code>text</code>{{non-standard_inline}}</dt>
+ <dd>このキーワードは要素のテキストでマスク画像をクリッピングします。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css highlight[10]">#masked {
+  width: 100px;
+  height: 100px;
+  background-color: #8cffa0;
+  margin: 20px;
+  border: 20px solid #8ca0ff;
+  padding: 20px;
+  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  mask-size: 100% 100%;
+  mask-clip: 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="clipBox"&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;option value="no-clip"&gt;no-clip&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var clipBox = document.getElementById("clipBox");
+clipBox.addEventListener("change", function (evt) {
+  document.getElementById("masked").style.maskClip = evt.target.value;
+});
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("Example", "220px", "250px")}}</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-clip", "mask-clip")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.properties.mask-clip")}}</p>