diff options
| -rw-r--r-- | files/ja/web/css/mask-border-repeat/index.html | 80 | ||||
| -rw-r--r-- | files/ja/web/css/mask-border-repeat/index.md | 95 | ||||
| -rw-r--r-- | files/ja/web/css/mask-border-source/index.html | 73 | ||||
| -rw-r--r-- | files/ja/web/css/mask-border-source/index.md | 86 | ||||
| -rw-r--r-- | files/ja/web/css/mask-border-width/index.html | 92 | ||||
| -rw-r--r-- | files/ja/web/css/mask-border-width/index.md | 107 |
6 files changed, 288 insertions, 245 deletions
diff --git a/files/ja/web/css/mask-border-repeat/index.html b/files/ja/web/css/mask-border-repeat/index.html deleted file mode 100644 index 80d6fefd38..0000000000 --- a/files/ja/web/css/mask-border-repeat/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: mask-border-repeat -slug: Web/CSS/mask-border-repeat -tags: - - CSS - - CSS プロパティ - - CSS マスク - - Experimental - - Reference -translation_of: Web/CSS/mask-border-repeat ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>mask-border-repeat</code></strong> プロパティは、どのように元の画像の<a href="/ja/docs/Web/CSS/border-image-slice#edge-regions">辺の領域</a>を要素の<a href="/ja/docs/Web/CSS/mask-border">マスク境界</a>の寸法に合うように調整するかを設定します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css no-line-numbers">/* キーワード値 */ -mask-border-repeat: stretch; -mask-border-repeat: repeat; -mask-border-repeat: round; -mask-border-repeat: space; - -/* 上下 | 左右 */ -mask-border-repeat: round stretch; - -/* グローバル値 */ -mask-border-repeat: inherit; -mask-border-repeat: initial; -mask-border-repeat: unset; -</pre> - -<p><code>mask-border-repeat</code> プロパティは、以下の値のリストから一つまたは二つの値を使用して指定します。</p> - -<ul> - <li><strong>一つ</strong>の値が指定されると、<strong>全四辺</strong>に同じ動作が適用されます。</li> - <li><strong>二つ</strong>の値が指定されると、最初の値は<strong>上と下</strong>の辺に、二番目の値は<strong>左と右</strong>の辺に適用されます。</li> -</ul> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>stretch</code></dt> - <dd>元の画像の辺の領域は、それぞれの境界の間の溝を埋めるように引き伸ばされます。</dd> - <dt><code>repeat</code></dt> - <dd>元の画像の辺の領域は、それぞれの境界の間の溝を埋めるようにタイル配置 (繰り返し) されます。タイルは正しく合うように切り取られることがあります。</dd> - <dt><code>round</code></dt> - <dd>元の画像の辺の領域は、それぞれの境界の間の溝を埋めるようにタイル配置 (繰り返し) されます。タイルは正しく合うように引き伸ばされることがあります。</dd> - <dt><code>space</code></dt> - <dd>元の画像の辺の領域は、それぞれの境界の間の溝を埋めるようにタイル配置 (繰り返し) されます。正しく合うように間隔が配布されることがあります。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<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", "#propdef-mask-border-repeat", "mask-border-repeat")}}</td> - <td>{{Spec2("CSS Masks")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<div>{{cssinfo}}</div> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>TBD</p> diff --git a/files/ja/web/css/mask-border-repeat/index.md b/files/ja/web/css/mask-border-repeat/index.md new file mode 100644 index 0000000000..334b164103 --- /dev/null +++ b/files/ja/web/css/mask-border-repeat/index.md @@ -0,0 +1,95 @@ +--- +title: mask-border-repeat +slug: Web/CSS/mask-border-repeat +tags: + - CSS + - CSS プロパティ + - CSS マスク + - Experimental + - NeedsCompatTable + - NeedsExample + - Reference + - recipe:css-property +browser-compat: css.properties.mask-border-repeat +translation_of: Web/CSS/mask-border-repeat +--- +{{CSSRef}} + +**`mask-border-repeat`** は [CSS](/ja/docs/Web/CSS) のプロパティで、どのように元の画像の[辺の領域](/ja/docs/Web/CSS/border-image-slice#edge-regions)を要素の[マスク境界](/ja/docs/Web/CSS/mask-border)の寸法に合うように調整するかを設定します。 + +## 構文 + +```css +/* キーワード値 */ +mask-border-repeat: stretch; +mask-border-repeat: repeat; +mask-border-repeat: round; +mask-border-repeat: space; + +/* 上下 | 左右 */ +mask-border-repeat: round stretch; + +/* グローバル値 */ +mask-border-repeat: inherit; +mask-border-repeat: initial; +mask-border-repeat: revert; +mask-border-repeat: unset; +``` + +`mask-border-repeat` プロパティは、以下の値のリストから 1 つまたは 2 つの値を使用して指定します。 + +- **1 つ**の値が指定されると、**全四辺**に同じ動作が適用されます。 +- **2 つ**の値が指定されると、最初の値は**上と下**の辺に、二番目の値は**左と右**の辺に適用されます。 + +<h3 id="Values" name="Values">値</h3> + +- `stretch` + - : 元の画像の辺の領域は、それぞれの境界の間の溝を埋めるように引き伸ばされます。 +- `repeat` + - : 元の画像の辺の領域は、それぞれの境界の間の溝を埋めるようにタイル配置 (繰り返し) されます。タイルは正しく合うように切り取られることがあります。 +- `round` + - : 元の画像の辺の領域は、それぞれの境界の間の溝を埋めるようにタイル配置 (繰り返し) されます。タイルは正しく合うように引き伸ばされることがあります。 +- `space` + - : 元の画像の辺の領域は、それぞれの境界の間の溝を埋めるようにタイル配置 (繰り返し) されます。正しく合うように間隔が配布されることがあります。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### Basic usage + +This property doesn't appear to be supported anywhere yet. When it eventually starts to be supported, it will serve to define how the border mask slice will repeat around the border — i.e. will it just repeat, or be scaled slightly so a whole number of slices fits, or be stretched so one slice fits? + +```css +mask-border-repeat: round; +``` + +Chromium-based browsers support an outdated version of this property — `mask-box-image-repeat` — with a prefix: + +```css +-webkit-mask-box-image-repeat: round; +``` + +> **Note:** The [`mask-border`](/ja/docs/Web/CSS/mask-border) page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("mask-border")}} +- {{cssxref("mask-border-mode")}} +- {{cssxref("mask-border-outset")}} +- {{cssxref("mask-border-source")}} +- {{cssxref("mask-border-width")}} diff --git a/files/ja/web/css/mask-border-source/index.html b/files/ja/web/css/mask-border-source/index.html deleted file mode 100644 index f9490dcbe8..0000000000 --- a/files/ja/web/css/mask-border-source/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: mask-border-source -slug: Web/CSS/mask-border-source -tags: - - CSS - - CSS プロパティ - - CSS マスク - - Experimental - - Reference -translation_of: Web/CSS/mask-border-source ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>mask-border-source</code></strong> プロパティは、要素の<a href="/ja/docs/Web/CSS/mask-border">マスク境界</a>を生成するのに使われる元の画像を設定します。</p> - -<p>{{cssxref("mask-border-slice")}} プロパティは、元の画像を最終的なマスク境界に動的に適用する上で、複数の領域に分割するために使用されます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* Keyword 値 */ -mask-border-source: none; - -/* <image> 値 */ -mask-border-source: url(image.jpg); -mask-border-source: linear-gradient(to top, red, yellow); - -/* グローバル値 */ -mask-border-source: inherit; -mask-border-source: initial; -mask-border-source: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>none</code></dt> - <dd>マスク境界は使用されません。</dd> - <dt>{{cssxref("<image>")}}</dt> - <dd>マスク境界に使用する画像への参照です。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<p>例については {{cssxref("mask-border")}} をご覧ください。</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", "#propdef-mask-border-source", "mask-border-source")}}</td> - <td>{{Spec2("CSS Masks")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>TBD</p> diff --git a/files/ja/web/css/mask-border-source/index.md b/files/ja/web/css/mask-border-source/index.md new file mode 100644 index 0000000000..4363af2925 --- /dev/null +++ b/files/ja/web/css/mask-border-source/index.md @@ -0,0 +1,86 @@ +--- +title: mask-border-source +slug: Web/CSS/mask-border-source +tags: + - CSS + - CSS Masking + - CSS プロパティ + - Experimental + - NeedsCompatTable + - NeedsExample + - Reference + - recipe:css-property +browser-compat: css.properties.mask-border-source +translation_of: Web/CSS/mask-border-source +--- +{{CSSRef}} + +**`mask-border-source`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の[マスク境界](/ja/docs/Web/CSS/mask-border)を生成するのに使われる元の画像を設定します。 + +{{cssxref("mask-border-slice")}} プロパティは、元の画像を最終的なマスク境界に動的に適用する上で、複数の領域に分割するために使用されます。 + +## 構文 + +```css +/* Keyword 値 */ +mask-border-source: none; + +/* <image> 値 */ +mask-border-source: url(image.jpg); +mask-border-source: linear-gradient(to top, red, yellow); + +/* グローバル値 */ +mask-border-source: inherit; +mask-border-source: initial; +mask-border-source: revert; +mask-border-source: unset; +``` + +### 値 + +- `none` + - : マスク境界は使用されません。 +- {{cssxref("<image>")}} + - : マスク境界に使用する画像への参照です。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### Basic usage + +This property doesn't appear to be supported anywhere yet. When it eventually starts to be supported, it will serve to define the source of the border mask. + +```css +mask-border-source: url(image.jpg); +``` + +Chromium-based browsers support an outdated version of this property — `mask-box-image-source` — with a prefix: + +```css +-webkit-mask-box-image-source: url(image.jpg); +``` + +> **Note:** The [`mask-border`](/ja/docs/Web/CSS/mask-border) page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("mask-border")}} +- {{cssxref("mask-border-mode")}} +- {{cssxref("mask-border-outset")}} +- {{cssxref("mask-border-repeat")}} +- {{cssxref("mask-border-width")}} diff --git a/files/ja/web/css/mask-border-width/index.html b/files/ja/web/css/mask-border-width/index.html deleted file mode 100644 index 329fa31afe..0000000000 --- a/files/ja/web/css/mask-border-width/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: mask-border-width -slug: Web/CSS/mask-border-width -tags: - - CSS - - CSS プロパティ - - CSS マスク - - Experimental - - Reference -translation_of: Web/CSS/mask-border-width ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>mask-border-width</code></strong> プロパティは、要素の<a href="/ja/docs/Web/CSS/mask-border">マスク境界</a>の幅を設定します。</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush:css no-line-numbers">/* キーワード値 */ -mask-border-width: auto; - -/* <length> 値 */ -mask-border-width: 1rem; - -/* <percentage> 値 */ -mask-border-width: 25%; - -/* <number> 値 */ -mask-border-width: 3; - -/* 上下 | 左右 */ -mask-border-width: 2em 3em; - -/* 上 | 左右 | 下 */ -mask-border-width: 5% 15% 10%; - -/* 上 | 右 | 下 | 左 */ -mask-border-width: 5% 2em 10% auto; - -/* グローバル値 */ -mask-border-width: inherit; -mask-border-width: initial; -mask-border-width: unset; -</pre> - -<p><code>mask-border-width</code> プロパティは、以下の値のリストの中から1～4つの値を使って指定することができます。</p> - -<ul> - <li>値が<strong>1つ</strong>指定された場合、<strong>全四辺</strong>に同じマージンが適用される。</li> - <li>値が<strong>2つ</strong>指定された場合、1つ目のマージンは<strong>上下</strong>、2つ目は<strong>左右</strong>の辺に適用される。</li> - <li>値が<strong>3つ</strong>指定された場合、1つ目のマージンは<strong>上</strong>、2つ目は<strong>左右</strong>、3つ目は<strong>下</strong>の辺に適用される。</li> - <li>値が<strong>4つ</strong>指定された場合、マージンはそれぞれ<strong>上</strong>、<strong>右</strong>、<strong>下</strong>、<strong>左</strong>の順 (時計回り) に適用される。</li> -</ul> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><length-percentage></code></dt> - <dd>マスク境界の幅を、 {{cssxref("<length>")}} または {{cssxref("<percentage>")}} で指定します。パーセント値は左右のオフセットについては境界領域の<em>幅</em>に対する相対値、上下のオフセットについては境界領域の<em>高さ</em>に対する相対値です。負の数であってはなりません。</dd> - <dt><code><number></code></dt> - <dd>マスク境界の幅を、対応する {{cssxref("border-width")}} の倍数で指定します。負の数であってはなりません。</dd> - <dt><code>auto</code></dt> - <dd>マスク境界の幅は、対応する {{cssxref("mask-border-slice")}} の固有の幅または高さ (適切な方) と等しくなります。画像が要求された固有の寸法を持っていない場合は、対応する <code>border-width</code> が代わりに使用されます。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<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", "#propdef-mask-border-width", "mask-border-width")}}</td> - <td>{{Spec2("CSS Masks")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>TBD</p> diff --git a/files/ja/web/css/mask-border-width/index.md b/files/ja/web/css/mask-border-width/index.md new file mode 100644 index 0000000000..8f83e99c13 --- /dev/null +++ b/files/ja/web/css/mask-border-width/index.md @@ -0,0 +1,107 @@ +--- +title: mask-border-width +slug: Web/CSS/mask-border-width +tags: + - CSS + - CSS Masking + - CSS プロパティ + - Experimental + - NeedsCompatTable + - NeedsExample + - Reference + - recipe:css-property +browser-compat: css.properties.mask-border-width +translation_of: Web/CSS/mask-border-width +--- +{{CSSRef}} + +**`mask-border-width`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の[マスク境界](/ja/docs/Web/CSS/mask-border)の幅を設定します。 + +## 構文 + +```css +/* キーワード値 */ +mask-border-width: auto; + +/* <length> 値 */ +mask-border-width: 1rem; + +/* <percentage> 値 */ +mask-border-width: 25%; + +/* <number> 値 */ +mask-border-width: 3; + +/* 上下 | 左右 */ +mask-border-width: 2em 3em; + +/* 上 | 左右 | 下 */ +mask-border-width: 5% 15% 10%; + +/* 上 | 右 | 下 | 左 */ +mask-border-width: 5% 2em 10% auto; + +/* グローバル値 */ +mask-border-width: inherit; +mask-border-width: initial; +mask-border-width: revert; +mask-border-width: unset; +``` + +`mask-border-width` プロパティは、以下の値のリストの中から 1 ～ 4 つの値を使って指定することができます。 + +- 値が **1 つ**指定された場合、**全 4 辺**に同じマージンが適用される。 +- 値が **2 つ**指定された場合、1 つ目のマージンは**上下**、2 つ目は**左右**の辺に適用される。 +- 値が **3 つ**指定された場合、1 つ目のマージンは**上**、2 つ目は**左右**、3 つ目は**下**の辺に適用される。 +- 値が **4 つ**指定された場合、マージンはそれぞれ**上**、**右**、**下**、**左**の順 (時計回り) に適用される。 + +### 値 + +- `<length-percentage>` + - : マスク境界の幅を、 {{cssxref("<length>")}} または {{cssxref("<percentage>")}} で指定します。パーセント値は左右のオフセットについては境界領域の*幅*に対する相対値、上下のオフセットについては境界領域の*高さ*に対する相対値です。負の数であってはなりません。 +- `<number>` + - : マスク境界の幅を、対応する {{cssxref("border-width")}} の倍数で指定します。負の数であってはなりません。 +- `auto` + - : マスク境界の幅は、対応する {{cssxref("mask-border-slice")}} の固有の幅または高さ (適切な方) と等しくなります。画像が要求された固有の寸法を持っていない場合は、対応する `border-width` が代わりに使用されます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### Basic usage + +This property doesn't appear to be supported anywhere yet. When it eventually starts to be supported, it will serve to define the width of the border mask — setting this to a different value to [`mask-border-slice`](/ja/docs/Web/CSS/mask-border-slice) will cause the slices to be scaled to fit the border mask. + +```css +mask-border-width: 30 fill; +``` + +Chromium-based browsers support an outdated version of this property — `mask-box-image-width` — with a prefix: + +```css +-webkit-mask-box-image-width: 20px; +``` + +> **Note:** The [`mask-border`](/ja/docs/Web/CSS/mask-border) page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("mask-border")}} +- {{cssxref("mask-border-mode")}} +- {{cssxref("mask-border-outset")}} +- {{cssxref("mask-border-repeat")}} +- {{cssxref("mask-border-source")}} |