From 684f3a1f7c141b4d1c522687062ff0e6e2e1a080 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 9 Nov 2021 23:48:02 +0900 Subject: CSS Masking のプロパティの文書を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/mask-repeat/index.html | 192 -------------------------------- 1 file changed, 192 deletions(-) delete mode 100644 files/ja/web/css/mask-repeat/index.html (limited to 'files/ja/web/css/mask-repeat') diff --git a/files/ja/web/css/mask-repeat/index.html b/files/ja/web/css/mask-repeat/index.html deleted file mode 100644 index 35c69904e9..0000000000 --- a/files/ja/web/css/mask-repeat/index.html +++ /dev/null @@ -1,192 +0,0 @@ ---- -title: mask-repeat -slug: Web/CSS/mask-repeat -tags: - - CSS - - CSS プロパティ - - CSS マスク - - Experimental - - Reference -translation_of: Web/CSS/mask-repeat ---- -
{{CSSRef}}
- -

mask-repeat は CSS プロパティで、マスク画像をどのように繰り返すかを設定します。マスク画像は水平軸、垂直軸、両方の軸で繰り返すか、まったく繰り返さないようにすることができます。

- -
/* 一つの値の構文 */
-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;
-
- -

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

- -

{{cssinfo}}

- -

構文

- -

1つ以上の <repeat-style> 値をコンマ区切りで指定します。

- -

値

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

形式文法

- -{{csssyntax}} - -

例

- -

単一の値

- -

CSS

- -
#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;
-}
-
- - - -

{{EmbedLiveSample("Single_value", "290px", "290px")}}

- -

複数のマスク画像の対応

- -

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

- -
.examplethree {
-  mask-image: url('mask1.png'), url('mask2.png');
-  mask-repeat: repeat-x, repeat-y;
-}
-
- -

それぞれの画像は最初のものから最後のものに向けて、それぞれの繰り返しスタイルに対応します。

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Masks", "#the-mask-repeat", "mask-repeat")}}{{Spec2("CSS Masks")}}初回定義
- -

ブラウザーの対応

- -

{{Compat("css.properties.mask-repeat")}}

-- cgit v1.2.3-54-g00ecf