path: root/files/ja/web/css/mask-repeat/index.html

---
title: mask-repeat
slug: Web/CSS/mask-repeat
tags:
  - CSS
  - CSS プロパティ
  - CSS マスク
  - Experimental
  - Reference
translation_of: Web/CSS/mask-repeat
---
<div>{{CSSRef}}</div>

<p><strong><code>mask-repeat</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> プロパティで、マスク画像をどのように繰り返すかを設定します。マスク画像は水平軸、垂直軸、両方の軸で繰り返すか、まったく繰り返さないようにすることができます。</p>

<pre class="brush: css no-line-numbers">/* 一つの値の構文 */
mask-repeat: repeat-x;
mask-repeat: repeat-y;
mask-repeat: repeat;
mask-repeat: space;
mask-repeat: round;
mask-repeat: no-repeat;

/* 二つの値の構文: horizontal | vertical */
mask-repeat: repeat space;
mask-repeat: repeat repeat;
mask-repeat: round space;
mask-repeat: no-repeat round;

/* 複数の値 */
mask-repeat: space round, no-repeat;
mask-repeat: round repeat, space, repeat-x;

/* グローバル値 */
mask-repeat: inherit;
mask-repeat: initial;
mask-repeat: unset;
</pre>

<p>既定では、繰り返された画像は要素の寸法でクリッピングされますが、 (<code>round</code> を使用して) 大きさが合うように拡大縮小したり、 (<code>space</code> を使用して) 端から端まで等分に配分したりすることができます。</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<p>1つ以上の <code>&lt;repeat-style&gt;</code> 値をコンマ区切りで指定します。</p>

<h3 id="Values" name="Values">値</h3>

<dl>
 <dt><code>&lt;repeat-style&gt;</code></dt>
 <dd>単一の値の構文は、二つの値の構文の一括指定です。</dd>
 <dd>
 <table class="standard-table">
  <thead>
   <tr>
    <th>単一の値</th>
    <th>同等の二つの値</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td><code>repeat-x</code></td>
    <td><code>repeat no-repeat</code></td>
   </tr>
   <tr>
    <td><code>repeat-y</code></td>
    <td><code>no-repeat repeat</code></td>
   </tr>
   <tr>
    <td><code>repeat</code></td>
    <td><code>repeat repeat</code></td>
   </tr>
   <tr>
    <td><code>space</code></td>
    <td><code>space space</code></td>
   </tr>
   <tr>
    <td><code>round</code></td>
    <td><code>round round</code></td>
   </tr>
   <tr>
    <td><code>no-repeat</code></td>
    <td><code>no-repeat no-repeat</code></td>
   </tr>
  </tbody>
 </table>
 二つの値の構文では、最初の値が水平方向の繰り返しの動作を表し、二番目の値が垂直方向の動作を表します。それぞれのオプションが各方向にどのように動作するのかを説明します。</dd>
 <dd>
 <table class="standard-table">
  <tbody>
   <tr>
    <td><code>repeat</code></td>
    <td>画像がマスク描画領域全体を埋めるのに必要なだけ繰り返されます。最後の画像は合わない時には切り取られます。</td>
   </tr>
   <tr>
    <td><code>space</code></td>
    <td>画像は切り取られずにできる限り繰り返されます。最初と最後の画像は要素の両端に位置し、画像間に均等に余白が配分されます。 {{cssxref("mask-position")}} プロパティは、1つだけの画像が切り取られずに表示される場合を除いて無視されます。 <code>space</code> を使用して切り取りが発生するのは、1つの画像を表示する十分な大きさがない場合だけです。</td>
   </tr>
   <tr>
    <td><code>round</code></td>
    <td>利用できる空間の寸法が拡大した場合、繰り返される画像は (すき間をおかずに) もう一つ追加するだけの余地ができるまで引き伸ばされます。次の画像が追加されるとき、現在の画像は場所を空けるために縮小されます。例えば、元の幅が 260px の画像が3回繰り返されたとき、それぞれの反復の幅は 300px まで拡大する可能性があり、もう一つの画像が追加されると、 225px まで縮小されます。</td>
   </tr>
   <tr>
    <td><code>no-repeat</code></td>
    <td>画像は繰り返されません (また、描画領域のマスクは全体を覆うとは限りません)。繰り返されないマスク画像の位置は {{cssxref("mask-position")}} CSS プロパティで定義されます。</td>
   </tr>
  </tbody>
 </table>
 </dd>
</dl>

<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Single_value" name="Single_value">単一の値</h3>

<h4 id="CSS">CSS</h4>

<pre class="brush: css highlight[6]">#masked {
  width: 250px;
  height: 250px;
  background: blue linear-gradient(red, blue);
  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
  mask-repeat: repeat; /* Can be changed in the live sample */
  margin-bottom: 10px;
}
</pre>

<div class="hidden">
<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;div id="masked"&gt;
&lt;/div&gt;
&lt;select id="repetition"&gt;
  &lt;option value="repeat-x"&gt;repeat-x&lt;/option&gt;
  &lt;option value="repeat-y"&gt;repeat-y&lt;/option&gt;
  &lt;option value="repeat" selected&gt;repeat&lt;/option&gt;
  &lt;option value="space"&gt;space&lt;/option&gt;
  &lt;option value="round"&gt;round&lt;/option&gt;
  &lt;option value="no-repeat"&gt;no-repeat&lt;/option&gt;
&lt;/select&gt;
</pre>

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush: js">var repetition = document.getElementById("repetition");
repetition.addEventListener("change", function (evt) {
  document.getElementById("masked").style.maskRepeat = evt.target.value;
});
</pre>
</div>

<p>{{EmbedLiveSample("Single_value", "290px", "290px")}}</p>

<h3 id="Multiple_mask_image_support" name="Multiple_mask_image_support">複数のマスク画像の対応</h3>

<p>それぞれのマスク画像に異なる <code>&lt;repeat-style&gt;</code> を、コンマ区切りで指定することができます。</p>

<pre class="brush: css">.examplethree {
  mask-image: url('mask1.png'), url('mask2.png');
  mask-repeat: repeat-x, repeat-y;
}
</pre>

<p>それぞれの画像は最初のものから最後のものに向けて、それぞれの繰り返しスタイルに対応します。</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-repeat", "mask-repeat")}}</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-repeat")}}</p>