From b6ef6d47830a2e326211e670174fe1955ad31fa7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 10 Nov 2021 02:36:52 +0900 Subject: CSS Masking に関するプロパティの記事を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/10 時点の英語版に同期 --- files/ja/web/css/mask-origin/index.md | 168 +++++++++++++--------------------- 1 file changed, 63 insertions(+), 105 deletions(-) (limited to 'files/ja/web/css/mask-origin') diff --git a/files/ja/web/css/mask-origin/index.md b/files/ja/web/css/mask-origin/index.md index 7822be961e..023676b1a4 100644 --- a/files/ja/web/css/mask-origin/index.md +++ b/files/ja/web/css/mask-origin/index.md @@ -6,14 +6,17 @@ tags: - CSS プロパティ - CSS マスク - Experimental - - Reference + - リファレンス + - recipe:css-property +browser-compat: css.properties.mask-origin translation_of: Web/CSS/mask-origin --- -
{{CSSRef}}
+{{CSSRef}} -

mask-origin は CSS のプロパティで、マスクの基準位置を設定します。

+**`mask-origin`** は [CSS](/ja/docs/Web/CSS) のプロパティで、マスクの原点を設定します。 -
/* キーワード値 */
+```css
+/* キーワード値 */
 mask-origin: content-box;
 mask-origin: padding-box;
 mask-origin: border-box;
@@ -34,108 +37,63 @@ mask-origin: view-box, fill-box, border-box;
 /* グローバル値 */
 mask-origin: inherit;
 mask-origin: initial;
+mask-origin: revert;
 mask-origin: unset;
-
- -

単純なボックスとして描画される要素では、このプロパティはマスクを配置する領域を指定します。言い換えれば、このプロパティは {{cssxref("mask-image")}} CSS プロパティで指定された画像の基準位置を指定します。複数のボックスとして描画される要素、例えば複数行にまたがるインラインボックスや複数のページにまたがるボックスなどでは、マスクの配置領域を決定するために {{cssxref("box-decoration-break")}} がどのボックスに作用するかを指定します。

- -

{{cssinfo}}

- -

構文

- -

1つまたは複数の以下に挙げたキーワード値を、コンマで区切って指定します。

- -

値

- -
-
content-box
-
位置がコンテンツボックスからの相対位置になります。
-
padding-box
-
位置がパディングボックスからの相対位置になります。単純なボックスでは 0 0 がパディング境界の左上隅で、 100% 100% は右下隅です。
-
border-box
-
位置が境界ボックスからの相対位置になります。
-
margin-box
-
位置がマージンボックスからの相対位置になります。
-
fill-box
-
位置がオブジェクトの囲みボックスからの相対位置になります。
-
stroke-box
-
位置が輪郭線ボックスからの相対位置になります。
-
view-box
-
直近の SVG ビューポートを参照ボックスとして使用します。 {{svgattr("viewBox")}} 属性が SVG ビューポートを作成している要素に指定されると、参照ボックスは viewBox 属性で示された座標系の原点に配置され、参照ボックスの寸法は viewBox 属性の幅と高さに設定されます。
-
content {{non-standard_inline}}
-
content-box と同じです。
-
padding {{non-standard_inline}}
-
padding-box と同じです。
-
border {{non-standard_inline}}
-
border-box と同じです。
-
- -

形式文法

+``` + +単純なボックスとして描画される要素では、このプロパティはマスクを配置する領域を指定します。言い換えれば、このプロパティは {{cssxref("mask-image")}} プロパティで指定された画像の原点を指定します。複数のボックスとして描画される要素、例えば複数行にまたがるインラインボックスや複数のページにまたがるボックスなどでは、マスクの配置領域を決定するために {{cssxref("box-decoration-break")}} がどのボックスに作用するかを指定します。 + +## 構文 + +1 つまたは複数の以下に挙げたキーワード値を、カンマで区切って指定します。 + +### 値 + +- `content-box` + - : 位置がコンテンツボックスからの相対位置になります。 +- `padding-box` + - : 位置がパディングボックスからの相対位置になります。単純なボックスでは `0 0` がパディング境界の左上隅で、 `100% 100%` は右下隅です。 +- `border-box` + - : 位置が境界ボックスからの相対位置になります。 +- `margin-box` + - : 位置がマージンボックスからの相対位置になります。 +- `fill-box` + - : 位置がオブジェクトの囲みボックスからの相対位置になります。 +- `stroke-box` + - : 位置が輪郭線ボックスからの相対位置になります。 +- `view-box` + - : 直近の SVG ビューポートを参照ボックスとして使用します。 {{svgattr("viewBox")}} 属性が SVG ビューポートを作成している要素に指定されると、参照ボックスは `viewBox` 属性で示された座標系の原点に配置され、参照ボックスの寸法は `viewBox` 属性の幅と高さに設定されます。 +- `content` {{non-standard_inline}} + - : `content-box` と同じです。 +- `padding` {{non-standard_inline}} + - : `padding-box` と同じです。 +- `border` {{non-standard_inline}} + - : `border-box` と同じです。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

- -

CSS

- -
#masked {
-  width: 100px;
-  height: 100px;
-  margin: 10px;
-  border: 10px solid blue;
-  background-color: #8cffa0;
-  padding: 10px;
-  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
-  mask-origin: border-box; /* Can be changed in the live sample */
-}
-
- - - -

{{EmbedLiveSample("Example", 160, 200)}}

- -

仕様書

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

ブラウザーの対応

- -

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

+## 例 + +### マスクの原点を border-box に設定する + +下のボックス内の CSS を更新して、他の可能な値を試してみてください。 + +{{EmbedGHLiveSample("css-examples/masking/mask-origin.html", '100%', 600)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/) -- cgit v1.2.3-54-g00ecf