diff options
Diffstat (limited to 'files/ja/web')
| -rw-r--r-- | files/ja/web/css/mask-border-mode/index.md | 74 | ||||
| -rw-r--r-- | files/ja/web/css/mask-border-outset/index.md | 99 | ||||
| -rw-r--r-- | files/ja/web/css/mask-border-repeat/index.md | 22 | ||||
| -rw-r--r-- | files/ja/web/css/mask-border-slice/border-image-slice.png | bin | 0 -> 6094 bytes | |||
| -rw-r--r-- | files/ja/web/css/mask-border-slice/index.md | 121 | ||||
| -rw-r--r-- | files/ja/web/css/mask-border-source/index.md | 16 | ||||
| -rw-r--r-- | files/ja/web/css/mask-border-width/index.md | 22 | ||||
| -rw-r--r-- | files/ja/web/css/mask-border/index.md | 99 |
8 files changed, 423 insertions, 30 deletions
diff --git a/files/ja/web/css/mask-border-mode/index.md b/files/ja/web/css/mask-border-mode/index.md new file mode 100644 index 0000000000..bf0ed9a8ad --- /dev/null +++ b/files/ja/web/css/mask-border-mode/index.md @@ -0,0 +1,74 @@ +--- +title: mask-border-mode +slug: Web/CSS/mask-border-mode +tags: + - CSS + - CSS Masking + - CSS プロパティ + - 実験的 + - NeedsContent + - NeedsExample + - Reference + - recipe:css-property +browser-compat: css.properties.mask-border-mode +translation_of: Web/CSS/mask-border-mode +--- +{{CSSRef}} + +**`mask-border-mode`** は [CSS](/ja/docs/Web/CSS) のプロパティで、[マスク境界](/ja/docs/Web/CSS/mask-border)の混合モードを指定します。 + +## 構文 + +```css +/* キーワード値 */ +mask-border-mode: luminance; +mask-border-mode: alpha; + +/* グローバル値 */ +mask-border-mode: inherit; +mask-border-mode: initial; +mask-border-mode: repeat; +mask-border-mode: unset; +``` + +### 値 + +- `luminance` + - : マスク境界画像の輝度値がマスク値として使用されます。 +- `alpha` + - : マスク境界画像のアルファ値がマスク値として使用されます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 基本的な使用 + +このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、マスク境界に使用される混合モードの種類を、輝度値とアルファ値から指定することができるようになります。 + +```css +mask-border-mode: luminance; +mask-border-mode: alpha; +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("mask-border")}} +- {{cssxref("mask-border-outset")}} +- {{cssxref("mask-border-repeat")}} +- {{cssxref("mask-border-source")}} +- {{cssxref("mask-border-width")}} diff --git a/files/ja/web/css/mask-border-outset/index.md b/files/ja/web/css/mask-border-outset/index.md new file mode 100644 index 0000000000..521d9b411b --- /dev/null +++ b/files/ja/web/css/mask-border-outset/index.md @@ -0,0 +1,99 @@ +--- +title: mask-border-outset +slug: Web/CSS/mask-border-outset +tags: + - CSS + - CSS Masking + - CSS プロパティ + - 実験的 + - NeedsCompatTable + - NeedsExample + - Reference + - recipe:css-property +browser-compat: css.properties.mask-border-outset +translation_of: Web/CSS/mask-border-outset +--- +{{CSSRef}} + +**`mask-border-outset`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の[マスク境界](/ja/docs/Web/CSS/mask-border)の境界ボックスからの距離を指定します。 + +## 構文 + +```css +/* <length> 値 */ +mask-border-outset: 1rem; + +/* <number> 値 */ +mask-border-outset: 1.5; + +/* 垂直 | 水平 */ +mask-border-outset: 1 1.2; + +/* 上 | 水平 | 下 */ +mask-border-outset: 30px 2 45px; + +/* 上 | 右 | 下 | 左 */ +mask-border-outset: 7px 12px 14px 5px; + +/* グローバル値 */ +mask-border-outset: inherit; +mask-border-outset: initial; +mask-border-outset: revert; +mask-border-outset: unset; +``` + +`mask-border-outset` プロパティは 1 ～ 4 つの値で指定します。それぞれの値は {{cssxref("<length>")}} または {{cssxref("<number>")}} です。負の値は無効です。 + +- 位置が **1 つ**指定された場合、**全 4 辺**に同じ距離が適用されます。 +- 位置が **2 つ**指定された場合、1 つ目の距離は**上下**に、2 つ目は**左右**に適用されます。 +- 位置が **3 つ**指定された場合、1 つ目の距離はを**上**に、2 つ目は**左右**に、3 つ目は**下**に適用されます。 +- 位置が **4 つ**指定された場合、**上**、**右**、**下**、**左**の順 (時計回り) で適用されます。 + +### 値 + +- {{cssxref("<length>")}} + - : マスク境界の辺からの距離を長さで表します。 +- {{cssxref("<number>")}} + - : マスク境界の辺からの距離を、対応する {{cssxref("border-width")}} の倍数で表します。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 基本的な使用 + +このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、要素の境界ボックスからマスクをどれだけ内側に離すかを示します。 — この機能を使用すると、マスクの端の位置を境界のすぐ内側ではなく、境界の途中にすることができるようになります。 + +```css +mask-border-outset: 1rem; +``` + +Chromium ベースのブラウザーは、このプロパティの古い版 — `mask-box-image-outset` — に接頭辞つきで対応しています。 + +```css +-webkit-mask-box-image-outset: 1rem; +``` + +> **Note:** [`mask-border`](/ja/docs/Web/CSS/mask-border) ページでは動作する例を (Chromium で対応している古い接頭辞つきの境界マスクプロパティを使用して) 挙げていますので、効果について分かるでしょう。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("mask-border")}} +- {{cssxref("mask-border-mode")}} +- {{cssxref("mask-border-repeat")}} +- {{cssxref("mask-border-source")}} +- {{cssxref("mask-border-width")}} diff --git a/files/ja/web/css/mask-border-repeat/index.md b/files/ja/web/css/mask-border-repeat/index.md index 334b164103..b70a3d38d7 100644 --- a/files/ja/web/css/mask-border-repeat/index.md +++ b/files/ja/web/css/mask-border-repeat/index.md @@ -3,9 +3,9 @@ title: mask-border-repeat slug: Web/CSS/mask-border-repeat tags: - CSS + - CSS Masking - CSS プロパティ - - CSS マスク - - Experimental + - 実験的 - NeedsCompatTable - NeedsExample - Reference @@ -38,10 +38,10 @@ mask-border-repeat: unset; `mask-border-repeat` プロパティは、以下の値のリストから 1 つまたは 2 つの値を使用して指定します。 -- **1 つ**の値が指定されると、**全四辺**に同じ動作が適用されます。 +- **1 つ**の値が指定されると、**全 4 辺**に同じ動作が適用されます。 - **2 つ**の値が指定されると、最初の値は**上と下**の辺に、二番目の値は**左と右**の辺に適用されます。 -<h3 id="Values" name="Values">値</h3> +### 値 - `stretch` - : 元の画像の辺の領域は、それぞれの境界の間の溝を埋めるように引き伸ばされます。 @@ -62,31 +62,31 @@ mask-border-repeat: unset; ## 例 -### 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? +このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、境界マスクのスライスが境界の周りでどのように繰り返されるかを定義することができるようになります。 — つまり、ただ繰り返すのか、スライスの全体数が収まるように少しだけ拡大縮小するのか、1 つのスライスが収まるように引き伸ばすのか、ということです。 ```css mask-border-repeat: round; ``` -Chromium-based browsers support an outdated version of this property — `mask-box-image-repeat` — with a prefix: +Chromium ベースのブラウザーは、このプロパティの古い版 — `mask-box-image-repeat` — に接頭辞つきで対応しています。 ```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. +> **Note:** [`mask-border`](/ja/docs/Web/CSS/mask-border) ページでは動作する例を (Chromium で対応している古い接頭辞つきの境界マスクプロパティを使用して) 挙げていますので、効果について分かるでしょう。 -## Specifications +## 仕様書 {{Specifications}} -## Browser compatibility +## ブラウザーの互換性 {{Compat}} -## See also +## 関連情報 - {{cssxref("mask-border")}} - {{cssxref("mask-border-mode")}} diff --git a/files/ja/web/css/mask-border-slice/border-image-slice.png b/files/ja/web/css/mask-border-slice/border-image-slice.png Binary files differnew file mode 100644 index 0000000000..55d5dc758d --- /dev/null +++ b/files/ja/web/css/mask-border-slice/border-image-slice.png diff --git a/files/ja/web/css/mask-border-slice/index.md b/files/ja/web/css/mask-border-slice/index.md new file mode 100644 index 0000000000..74eda39503 --- /dev/null +++ b/files/ja/web/css/mask-border-slice/index.md @@ -0,0 +1,121 @@ +--- +title: mask-border-slice +slug: Web/CSS/mask-border-slice +tags: + - CSS + - CSS Masking + - CSS プロパティ + - 実験的 + - NeedsCompatTable + - NeedsExample + - Reference + - recipe:css-property +browser-compat: css.properties.mask-border-slice +translation_of: Web/CSS/mask-border-slice +--- +{{CSSRef}} + +**`mask-border-slice`** は [CSS](/ja/docs/Web/CSS) のプロパティで、{{cssxref("mask-border-source")}} で設定された画像を複数の領域に分割します。これらの領域は要素の[マスク境界](/ja/docs/Web/CSS/mask-border)の部品を構成するために使用されます。 + +## 構文 + +```css +/* すべての辺 */ +mask-border-slice: 30%; + +/* 垂直 | 水平 */ +mask-border-slice: 10% 30%; + +/* 上 | 水平 | 下 */ +mask-border-slice: 30 30% 45; + +/* 上 | 右 | 下 | 左 */ +mask-border-slice: 7 12 14 5; + +/* `fill` キーワードの使用 */ +mask-border-slice: 10% fill 7 12; + +/* グローバル値 */ +mask-border-slice: inherit; +mask-border-slice: initial; +mask-border-slice: revert; +mask-border-slice: unset; +``` + +`mask-border-slice` プロパティは 1 ～ 4 つの `<number-percentage>` 値で指定し、それぞれの画像スライスの位置を表すことができます。負の数は無効です。対応する寸法よりも大きな値は `100%` に丸められます。 + +- 位置が **1 つ**指定された場合、全 4 本の分割線がそれぞれの辺から同じ距離で作成されます。 +- 位置が **2 つ**指定された場合、1 つ目の値を**上下**の辺からの距離として、2 つ目を**左右**の辺からの距離として分割線を作成します。 +- 位置が **3 つ**指定された場合、1 つ目の値を**上**の辺からの距離として、2 つ目を**左右**の辺からの距離、3 つ目は**下**の辺からの距離として分割線を作成します。 +- 位置が **4 つ**指定された場合、**上**、**右**、**下**、**左**の順 (時計回り) でそれぞれの辺からの距離として分割線を作成します。 + +`fill` の値は任意であり、使用される場合は、宣言のどこにでも置くことができます。 + +### 値 + +- {{cssxref("<number>")}} + - : 縁からのオフセットを、ラスター画像の場合はピクセル数で、ベクター画像の場合は座標で表します。ベクター画像の場合、数値は元の画像の寸法ではなく、要素の寸法に対する相対値になるので、この場合は一般にパーセント値の方が適しています。 +- {{cssxref("<percentage>")}} + - : 縁からのオフセットを、元の画像の寸法、つまり水平方向のオフセットであれば画像の幅、垂直方向のオフセットであれば画像の高さに対するパーセント値で表します。 +- `fill` + - : 中央の画像領域を維持します。幅と高さは、画像領域のそれぞれ上と左に一致するように拡縮されます。 + +## 解説 + +分割する過程で、4 つの角、4 つの辺、それに中央領域の計 9 つの領域を作成します。それぞれの辺からの距離で設定される 4 本の分割線が、領域の寸法を制御します。 + +[](border-image-slice.png) + +上の図は、それぞれの領域の位置を説明しています。 + +- 1-4 の領域は角の領域です。それぞれが 1 回ずつ使用され、最終的な境界画像の中で四隅を形成します。 +- 5-8 の領域は辺の領域です。これらは最終的な境界画像の中で、要素の寸法に合わせて[反復、拡縮、その他の加工](/ja/docs/Web/CSS/mask-border-repeat)が行われます。 +- 9 の領域は中央領域です。既定では描画されませんが、キーワード `fill` が設定されていれば背景画像のように使用されます。 + +{{cssxref("mask-border-repeat")}}、{{cssxref("mask-border-width")}}、{{cssxref("mask-border-outset")}} の各プロパティは、最終的な境界画像を構成するためにこれらの領域が使用される方法を指定します。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 基本的な使用 + +このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、ソース画像から取られるスライスの大きさを定義する役割を果たし、境界マスクを生成するために使用されるようになります。 + +```css +mask-border-slice: 30 fill; +``` + +Chromium ベースのブラウザーは、このプロパティの古い版 — `mask-box-image-slice` — に接頭辞つきで対応しています。 + +```css +-webkit-mask-box-image-slice: 30 fill; +``` + +> **Note:** [`mask-border`](/ja/docs/Web/CSS/mask-border) ページでは動作する例を (Chromium で対応している古い接頭辞つきの境界マスクプロパティを使用して) 挙げていますので、効果について分かるでしょう。 + +> **Note:** fill キーワードは、要素の内容を表示したい場合には設定する必要があります。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("mask-border")}} +- {{cssxref("mask-border-mode")}} +- {{cssxref("mask-border-outset")}} +- {{cssxref("mask-border-repeat")}} +- {{cssxref("mask-border-source")}} +- {{cssxref("mask-border-width")}} +- [Illustrated description of the 1-to-4-value syntax](/ja/docs/Web/CSS/Shorthand_properties#tricky_edge_cases) diff --git a/files/ja/web/css/mask-border-source/index.md b/files/ja/web/css/mask-border-source/index.md index 4363af2925..9454167e1c 100644 --- a/files/ja/web/css/mask-border-source/index.md +++ b/files/ja/web/css/mask-border-source/index.md @@ -5,7 +5,7 @@ tags: - CSS - CSS Masking - CSS プロパティ - - Experimental + - 実験的 - NeedsCompatTable - NeedsExample - Reference @@ -53,31 +53,31 @@ mask-border-source: unset; ## 例 -### 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: +Chromium ベースのブラウザーは、このプロパティの古い版 — `mask-box-image-source` — に接頭辞つきで対応しています。 ```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. +> **Note:** [`mask-border`](/ja/docs/Web/CSS/mask-border) ページでは動作する例を (Chromium で対応している古い接頭辞つきの境界マスクプロパティを使用して) 挙げていますので、効果について分かるでしょう。 -## Specifications +## 仕様書 {{Specifications}} -## Browser compatibility +## ブラウザーの互換性 {{Compat}} -## See also +## 関連情報 - {{cssxref("mask-border")}} - {{cssxref("mask-border-mode")}} diff --git a/files/ja/web/css/mask-border-width/index.md b/files/ja/web/css/mask-border-width/index.md index 8f83e99c13..221a8615e3 100644 --- a/files/ja/web/css/mask-border-width/index.md +++ b/files/ja/web/css/mask-border-width/index.md @@ -5,7 +5,7 @@ tags: - CSS - CSS Masking - CSS プロパティ - - Experimental + - 実験的 - NeedsCompatTable - NeedsExample - Reference @@ -23,13 +23,13 @@ translation_of: Web/CSS/mask-border-width /* キーワード値 */ mask-border-width: auto; -/* <length> 値 */ +/* <length> 値 */ mask-border-width: 1rem; -/* <percentage> 値 */ +/* <percentage> 値 */ mask-border-width: 25%; -/* <number> 値 */ +/* <number> 値 */ mask-border-width: 3; /* 上下 | 左右 */ @@ -74,31 +74,31 @@ mask-border-width: unset; ## 例 -### 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. +このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、境界マスクの幅を定義することになります。このプロパティを [`mask-border-slice`](/ja/docs/Web/CSS/mask-border-slice) と異なる値に設定すると、スライスは境界マスクに合わせて拡大縮小されます。 ```css mask-border-width: 30 fill; ``` -Chromium-based browsers support an outdated version of this property — `mask-box-image-width` — with a prefix: +Chromium ベースのブラウザーは、このプロパティの古い版 — `mask-box-image-width` — に接頭辞つきで対応しています。 ```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. +> **Note:** [`mask-border`](/ja/docs/Web/CSS/mask-border) ページでは動作する例を (Chromium で対応している古い接頭辞つきの境界マスクプロパティを使用して) 挙げていますので、効果について分かるでしょう。 -## Specifications +## 仕様書 {{Specifications}} -## Browser compatibility +## ブラウザーの互換性 {{Compat}} -## See also +## 関連情報 - {{cssxref("mask-border")}} - {{cssxref("mask-border-mode")}} diff --git a/files/ja/web/css/mask-border/index.md b/files/ja/web/css/mask-border/index.md new file mode 100644 index 0000000000..fdea6b7ec8 --- /dev/null +++ b/files/ja/web/css/mask-border/index.md @@ -0,0 +1,99 @@ +--- +title: mask-border +slug: Web/CSS/mask-border +tags: + - CSS + - CSS Masking + - CSS プロパティ + - Reference + - recipe:css-shorthand-property +browser-compat: css.properties.mask-border +translation_of: Web/CSS/mask-border +--- +{{CSSRef}} + +**`mask-border`** は [CSS](/ja/docs/Web/CSS) の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、要素の境界の縁に沿ったマスクを生成することができます。 + +## 構成要素のプロパティ + +このプロパティは以下の CSS プロパティの一括指定です。 + +- [`mask-border-mode`](/ja/docs/Web/CSS/mask-border-mode) +- [`mask-border-outset`](/ja/docs/Web/CSS/mask-border-outset) +- [`mask-border-repeat`](/ja/docs/Web/CSS/mask-border-repeat) +- [`mask-border-slice`](/ja/docs/Web/CSS/mask-border-slice) +- [`mask-border-source`](/ja/docs/Web/CSS/mask-border-source) +- [`mask-border-width`](/ja/docs/Web/CSS/mask-border-width) + +## 構文 + +```css +/* source | slice */ +mask-border: url('border-mask.png') 25; + +/* source | slice | repeat */ +mask-border: url('border-mask.png') 25 space; + +/* source | slice | width */ +mask-border: url('border-mask.png') 25 / 35px; + +/* source | slice | width | outset | repeat | mode */ +mask-border: url('border-mask.png') 25 / 35px / 12px space alpha; + +/* Global values */ +mask-border: inherit; +mask-border: initial; +mask-border: revert; +mask-border: unset; +``` + +### 値 + +- `<'mask-border-source'>` + - : ソース画像です。{{cssxref("mask-border-source")}} を参照してください。 +- `<'mask-border-slice'>` + - : ソース画像を複数の領域に分割する幅です。{{cssxref("mask-border-slice")}} を参照してください。 +- `<'mask-border-width'>` + - : 境界画像の幅です。4 つまでの値を指定することができます。{{cssxref("mask-border-width")}} を参照してください。 +- `<'mask-border-outset'>` + - : 要素の外側の辺から境界画像までの距離です。4 つまでの値を指定することができます。{{cssxref("mask-border-outset")}} を参照してください。 +- `<'mask-border-repeat'>` + - : ソース画像の辺の領域を、境界マスクの幅に合わせて調整する方法を定義します。2 つまでの値を指定することができます。{{cssxref("mask-border-repeat")}} を参照してください。 +- `<'mask-border-mode'>` + - : ソース画像を輝度マスクとして扱うか、アルファマスクとして扱うかを定義します。{{cssxref("mask-border-mode")}} を参照してください。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### ビットマップに基づいたマスク境界の設定 + +この例では、要素の境界を菱形の模様でマスクします。このマスクのソースは ".png" ファイルで、 90 x 90 ピクセルであり、3つの菱形が垂直・水平に並んでいます。 + + + +一つの菱形の寸法に合わせるため、 90 を 3 で割った値、すなわち '30' を使用して、画像を角と辺の領域に分割します。 repeat の値は `round` であり、マスクのスライスが均等に、すなわち切り取られたり隙間ができたりすることなく合わせられます。 + +{{EmbedGHLiveSample("css-examples/masking/mask-border.html", '100%', 800)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("mask-border-mode")}} +- {{cssxref("mask-border-outset")}} +- {{cssxref("mask-border-repeat")}} +- {{cssxref("mask-border-source")}} +- {{cssxref("mask-border-width")}} |
