diff options
| -rw-r--r-- | files/ja/web/css/clip-path/index.md (renamed from files/ja/web/css/clip-path/index.html) | 0 | ||||
| -rw-r--r-- | files/ja/web/css/clip/index.md (renamed from files/ja/web/css/clip/index.html) | 0 | ||||
| -rw-r--r-- | files/ja/web/css/mask-clip/index.md (renamed from files/ja/web/css/mask-clip/index.html) | 0 | ||||
| -rw-r--r-- | files/ja/web/css/mask-composite/index.md (renamed from files/ja/web/css/mask-composite/index.html) | 0 | ||||
| -rw-r--r-- | files/ja/web/css/mask-image/index.md (renamed from files/ja/web/css/mask-image/index.html) | 0 | ||||
| -rw-r--r-- | files/ja/web/css/mask-mode/index.md (renamed from files/ja/web/css/mask-mode/index.html) | 0 | ||||
| -rw-r--r-- | files/ja/web/css/mask-origin/index.md (renamed from files/ja/web/css/mask-origin/index.html) | 0 | ||||
| -rw-r--r-- | files/ja/web/css/mask-position/index.md (renamed from files/ja/web/css/mask-position/index.html) | 0 | ||||
| -rw-r--r-- | files/ja/web/css/mask-repeat/index.html | 192 | ||||
| -rw-r--r-- | files/ja/web/css/mask-size/index.md | 118 | ||||
| -rw-r--r-- | files/ja/web/css/mask-type/index.md (renamed from files/ja/web/css/mask-type/index.html) | 0 |
11 files changed, 118 insertions, 192 deletions
diff --git a/files/ja/web/css/clip-path/index.html b/files/ja/web/css/clip-path/index.md index 55ac2da864..55ac2da864 100644 --- a/files/ja/web/css/clip-path/index.html +++ b/files/ja/web/css/clip-path/index.md diff --git a/files/ja/web/css/clip/index.html b/files/ja/web/css/clip/index.md index b36aacad45..b36aacad45 100644 --- a/files/ja/web/css/clip/index.html +++ b/files/ja/web/css/clip/index.md diff --git a/files/ja/web/css/mask-clip/index.html b/files/ja/web/css/mask-clip/index.md index e057a4eeda..e057a4eeda 100644 --- a/files/ja/web/css/mask-clip/index.html +++ b/files/ja/web/css/mask-clip/index.md diff --git a/files/ja/web/css/mask-composite/index.html b/files/ja/web/css/mask-composite/index.md index a41474ae08..a41474ae08 100644 --- a/files/ja/web/css/mask-composite/index.html +++ b/files/ja/web/css/mask-composite/index.md diff --git a/files/ja/web/css/mask-image/index.html b/files/ja/web/css/mask-image/index.md index 1a08aa35f5..1a08aa35f5 100644 --- a/files/ja/web/css/mask-image/index.html +++ b/files/ja/web/css/mask-image/index.md diff --git a/files/ja/web/css/mask-mode/index.html b/files/ja/web/css/mask-mode/index.md index a4f99606b2..a4f99606b2 100644 --- a/files/ja/web/css/mask-mode/index.html +++ b/files/ja/web/css/mask-mode/index.md diff --git a/files/ja/web/css/mask-origin/index.html b/files/ja/web/css/mask-origin/index.md index 7822be961e..7822be961e 100644 --- a/files/ja/web/css/mask-origin/index.html +++ b/files/ja/web/css/mask-origin/index.md diff --git a/files/ja/web/css/mask-position/index.html b/files/ja/web/css/mask-position/index.md index 9d7f404404..9d7f404404 100644 --- a/files/ja/web/css/mask-position/index.html +++ b/files/ja/web/css/mask-position/index.md 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 ---- -<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><repeat-style></code> 値をコンマ区切りで指定します。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><repeat-style></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> - -{{csssyntax}} - -<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"><div id="masked"> -</div> -<select id="repetition"> - <option value="repeat-x">repeat-x</option> - <option value="repeat-y">repeat-y</option> - <option value="repeat" selected>repeat</option> - <option value="space">space</option> - <option value="round">round</option> - <option value="no-repeat">no-repeat</option> -</select> -</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><repeat-style></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> - -<p>{{Compat("css.properties.mask-repeat")}}</p> diff --git a/files/ja/web/css/mask-size/index.md b/files/ja/web/css/mask-size/index.md new file mode 100644 index 0000000000..9852c3f6f2 --- /dev/null +++ b/files/ja/web/css/mask-size/index.md @@ -0,0 +1,118 @@ +--- +title: mask-size +slug: Web/CSS/mask-size +tags: + - CSS + - CSS Masking + - CSS Property + - Experimental + - Reference + - recipe:css-property +browser-compat: css.properties.mask-size +--- +{{CSSRef}} + +The **`mask-size`** [CSS](/en-US/docs/Web/CSS) property specifies the sizes of the mask images. The size of the image can be fully or partially constrained in order to preserve its intrinsic ratio. + +```css +/* Keywords syntax */ +mask-size: cover; +mask-size: contain; + +/* One-value syntax */ +/* the width of the image (height set to 'auto') */ +mask-size: 50%; +mask-size: 3em; +mask-size: 12px; +mask-size: auto; + +/* Two-value syntax */ +/* first value: width of the image, second value: height */ +mask-size: 50% auto; +mask-size: 3em 25%; +mask-size: auto 6px; +mask-size: auto auto; + +/* Multiple values */ +/* Do not confuse this with mask-size: auto auto */ +mask-size: auto, auto; +mask-size: 50%, 25%, 25%; +mask-size: 6px, auto, contain; + +/* Global values */ +mask-size: inherit; +mask-size: initial; +mask-size: revert; +mask-size: unset; +``` + +> **Note:** If the value of this property is not set in a {{cssxref("mask")}} shorthand property that is applied to the element after the `mask-size` CSS property, the value of this property is then reset to its initial value by the shorthand property. + +## Syntax + +One or more `<bg-size>` values, separated by commas. + +A `<bg-size>` can be specified in one of three ways: + +- using the keyword [`contain`](#contain) +- using the keyword [`cover`](#cover) +- using width and height values + +To specify a size using width and height, you can supply one or two values: + +- If only one value is given it sets the width, with the height set to [`auto`](#auto). +- If two values are given, the first sets width and the second sets height. + +Each value can be a `<length>`, a `<percentage>`, or `auto`. + +### Values + +- `<length>` + - : A `{{cssxref("<length>")}}` value scales the mask image to the specified length in the corresponding dimension. Negative lengths are not allowed. +- `<percentage>` + - : A {{cssxref("<percentage>")}} value scales the mask image in the corresponding dimension to the specified percentage of the mask positioning area, which is determined by the value of {{cssxref("mask-origin")}}. The mask positioning area is, by default, the area containing the content of the box and its padding; the area may also be changed to just the content or to the area containing borders, padding and content. Negative percentages are not allowed. +- `auto` + - : A keyword that scales the mask image in the corresponding directions in order to maintain its intrinsic proportion. +- `contain` + - : A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image is _letterboxed_ within the container. The image is automatically centered unless over-ridden by another property such as {{cssxref("mask-position")}}. +- `cover` + - : A keyword that is the inverse of `contain`. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, _the image is clipped_ either on left/right or at top/bottom. + +The interpretation of possible values depends on the image's intrinsic dimensions (width and height) and intrinsic proportion (ratio of width and height). A bitmap image always has intrinsic dimensions and an intrinsic proportion. A vector image may have both intrinsic dimensions and thus it has an intrinsic proportion too. It also may have one or no intrinsic dimensions and in either case it might or might not have an intrinsic proportion. Gradients are treated as images with no intrinsic dimensions or intrinsic proportion. + +The rendered size of the mask image is then computed as follows: + +- If both components of `mask-size` are specified and are not `auto`: + - : The mask image renders at the specified size. +- If the `mask-size` is `contain` or `cover`: + - : The image is rendered by preserving its intrinsic proportion at the largest size contained within or covering the mask positioning area. If the image has no intrinsic proportion, then it is rendered at the size of the mask positioning area. +- If the `mask-size` is `auto` or `auto auto`: + - : If the image has both intrinsic dimensions, it is rendered at that size. If it has no intrinsic dimensions and no intrinsic proportion, it is rendered at the size of the mask positioning area. If it has no dimensions but has a proportion, it's rendered as if `contain` had been specified instead. If the image has one intrinsic dimension and a proportion, it's rendered at the size determined by that one dimension and the proportion. If the image has one intrinsic dimension but no proportion, it's rendered using the intrinsic dimension and the corresponding dimension of the mask positioning area. +- If `mask-size` has one `auto` component and one non-`auto` component: + - : If the image has an intrinsic proportion, then render it using the specified dimension and compute the other dimension from the specified dimension and the intrinsic proportion. If the image has no intrinsic proportion, use the specified dimension for that dimension. For the other dimension, use the image's corresponding intrinsic dimension if there is one. If there is no such intrinsic dimension, use the corresponding dimension of the mask positioning area. + +## Formal definition + +{{cssinfo}} + +## Formal syntax + +{{csssyntax}} + +## Examples + +### Setting mask size as a percentage + +{{EmbedGHLiveSample("css-examples/masking/mask-size.html", '100%', 700)}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/) diff --git a/files/ja/web/css/mask-type/index.html b/files/ja/web/css/mask-type/index.md index 2b3c192f21..2b3c192f21 100644 --- a/files/ja/web/css/mask-type/index.html +++ b/files/ja/web/css/mask-type/index.md |