---
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>

{{csssyntax}}

<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>