From 684f3a1f7c141b4d1c522687062ff0e6e2e1a080 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 9 Nov 2021 23:48:02 +0900 Subject: CSS Masking のプロパティの文書を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/mask-position/index.html | 127 ------------------------------ files/ja/web/css/mask-position/index.md | 127 ++++++++++++++++++++++++++++++ 2 files changed, 127 insertions(+), 127 deletions(-) delete mode 100644 files/ja/web/css/mask-position/index.html create mode 100644 files/ja/web/css/mask-position/index.md (limited to 'files/ja/web/css/mask-position') diff --git a/files/ja/web/css/mask-position/index.html b/files/ja/web/css/mask-position/index.html deleted file mode 100644 index 9d7f404404..0000000000 --- a/files/ja/web/css/mask-position/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: mask-position -slug: Web/CSS/mask-position -tags: - - CSS - - CSS プロパティ - - CSS マスク - - Experimental - - Reference -translation_of: Web/CSS/mask-position ---- -
{{CSSRef}}
- -

mask-position は CSS プロパティで、定義されたマスク画像それぞれについて、 {{cssxref("mask-origin")}} で設定されたマスク位置レイヤーからの相対で初期位置を設定します。

- -
/* キーワード値 */
-mask-position: top;
-mask-position: bottom;
-mask-position: left;
-mask-position: right;
-mask-position: center;
-
-/* <position> 値 */
-mask-position: 25% 75%;
-mask-position: 0px 0px;
-mask-position: 10% 8em;
-
-/* 複数の値 */
-mask-position: top right;
-mask-position: 1rem 1rem, center;
-
-/* グローバル値 */
-mask-position: inherit;
-mask-position: initial;
-mask-position: unset;
-
- -

{{cssinfo}}

- -

構文

- -

1つ以上の <position> 値をコンマで区切ったもの。

- -

値

- -
-
{{cssxref("<position>")}}
-
要素ボックスの辺からの二次元の位置を表す1つから4つの値です。相対または絶対オフセットを与えることができます。なお、位置は要素ボックスの外に設定することができます。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

CSS

- -
#wrapper {
-  border: 1px solid black;
-  width: 250px;
-  height: 250px;
-}
-
-#masked {
-  width: 250px;
-  height: 250px;
-  background: blue linear-gradient(red, blue);
-  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
-  mask-repeat: no-repeat;
-  mask-position: top right; /* Can be changed in the live sample */
-  margin-bottom: 10px;
-}
-
- - - -

{{EmbedLiveSample("Example", 290, 290)}}

- -

仕様書

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

ブラウザーの対応

- -

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

diff --git a/files/ja/web/css/mask-position/index.md b/files/ja/web/css/mask-position/index.md new file mode 100644 index 0000000000..9d7f404404 --- /dev/null +++ b/files/ja/web/css/mask-position/index.md @@ -0,0 +1,127 @@ +--- +title: mask-position +slug: Web/CSS/mask-position +tags: + - CSS + - CSS プロパティ + - CSS マスク + - Experimental + - Reference +translation_of: Web/CSS/mask-position +--- +
{{CSSRef}}
+ +

mask-position は CSS プロパティで、定義されたマスク画像それぞれについて、 {{cssxref("mask-origin")}} で設定されたマスク位置レイヤーからの相対で初期位置を設定します。

+ +
/* キーワード値 */
+mask-position: top;
+mask-position: bottom;
+mask-position: left;
+mask-position: right;
+mask-position: center;
+
+/* <position> 値 */
+mask-position: 25% 75%;
+mask-position: 0px 0px;
+mask-position: 10% 8em;
+
+/* 複数の値 */
+mask-position: top right;
+mask-position: 1rem 1rem, center;
+
+/* グローバル値 */
+mask-position: inherit;
+mask-position: initial;
+mask-position: unset;
+
+ +

{{cssinfo}}

+ +

構文

+ +

1つ以上の <position> 値をコンマで区切ったもの。

+ +

値

+ +
+
{{cssxref("<position>")}}
+
要素ボックスの辺からの二次元の位置を表す1つから4つの値です。相対または絶対オフセットを与えることができます。なお、位置は要素ボックスの外に設定することができます。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

CSS

+ +
#wrapper {
+  border: 1px solid black;
+  width: 250px;
+  height: 250px;
+}
+
+#masked {
+  width: 250px;
+  height: 250px;
+  background: blue linear-gradient(red, blue);
+  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-repeat: no-repeat;
+  mask-position: top right; /* Can be changed in the live sample */
+  margin-bottom: 10px;
+}
+
+ + + +

{{EmbedLiveSample("Example", 290, 290)}}

+ +

仕様書

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

ブラウザーの対応

+ +

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

-- cgit v1.2.3-54-g00ecf