From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/mask-repeat/index.html | 194 ++++++++++++++++++++++++++++++++ 1 file changed, 194 insertions(+) create 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 new file mode 100644 index 0000000000..f38d2244c6 --- /dev/null +++ b/files/ja/web/css/mask-repeat/index.html @@ -0,0 +1,194 @@ +--- +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