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/clip-path/index.html | 621 ----------------------------- files/ja/web/css/clip-path/index.md | 621 +++++++++++++++++++++++++++++ files/ja/web/css/clip/index.html | 130 ------ files/ja/web/css/clip/index.md | 130 ++++++ files/ja/web/css/mask-clip/index.html | 150 ------- files/ja/web/css/mask-clip/index.md | 150 +++++++ files/ja/web/css/mask-composite/index.html | 120 ------ files/ja/web/css/mask-composite/index.md | 120 ++++++ files/ja/web/css/mask-image/index.html | 94 ----- files/ja/web/css/mask-image/index.md | 94 +++++ files/ja/web/css/mask-mode/index.html | 119 ------ files/ja/web/css/mask-mode/index.md | 119 ++++++ files/ja/web/css/mask-origin/index.html | 141 ------- files/ja/web/css/mask-origin/index.md | 141 +++++++ files/ja/web/css/mask-position/index.html | 127 ------ files/ja/web/css/mask-position/index.md | 127 ++++++ files/ja/web/css/mask-repeat/index.html | 192 --------- files/ja/web/css/mask-size/index.md | 118 ++++++ files/ja/web/css/mask-type/index.html | 184 --------- files/ja/web/css/mask-type/index.md | 184 +++++++++ 20 files changed, 1804 insertions(+), 1878 deletions(-) delete mode 100644 files/ja/web/css/clip-path/index.html create mode 100644 files/ja/web/css/clip-path/index.md delete mode 100644 files/ja/web/css/clip/index.html create mode 100644 files/ja/web/css/clip/index.md delete mode 100644 files/ja/web/css/mask-clip/index.html create mode 100644 files/ja/web/css/mask-clip/index.md delete mode 100644 files/ja/web/css/mask-composite/index.html create mode 100644 files/ja/web/css/mask-composite/index.md delete mode 100644 files/ja/web/css/mask-image/index.html create mode 100644 files/ja/web/css/mask-image/index.md delete mode 100644 files/ja/web/css/mask-mode/index.html create mode 100644 files/ja/web/css/mask-mode/index.md delete mode 100644 files/ja/web/css/mask-origin/index.html create mode 100644 files/ja/web/css/mask-origin/index.md delete mode 100644 files/ja/web/css/mask-position/index.html create mode 100644 files/ja/web/css/mask-position/index.md delete mode 100644 files/ja/web/css/mask-repeat/index.html create mode 100644 files/ja/web/css/mask-size/index.md delete mode 100644 files/ja/web/css/mask-type/index.html create mode 100644 files/ja/web/css/mask-type/index.md (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/clip-path/index.html b/files/ja/web/css/clip-path/index.html deleted file mode 100644 index 55ac2da864..0000000000 --- a/files/ja/web/css/clip-path/index.html +++ /dev/null @@ -1,621 +0,0 @@ ---- -title: clip-path -slug: Web/CSS/clip-path -tags: - - CSS - - CSS Masking - - CSS Property - - Experimental - - Reference - - Web - - 'recipe:css-property' -translation_of: Web/CSS/clip-path ---- -
{{CSSRef}}
- -

clip-path は CSS のプロパティで、要素のどの部分を表示するかを設定するクリッピング領域を作ります。具体的には、領域の内部の部分は表示され、外側の部分は非表示になります。

- -
{{EmbedInteractiveExample("pages/css/clip-path.html")}}
- - - -

構文

- -
/* キーワード値 */
-clip-path: none;
-
-/* <clip-source> 値 */
-clip-path: url(resources.svg#c1);
-
-/* <geometry-box> 値 */
-clip-path: margin-box;
-clip-path: border-box;
-clip-path: padding-box;
-clip-path: content-box;
-clip-path: fill-box;
-clip-path: stroke-box;
-clip-path: view-box;
-
-/* <basic-shape> 値 */
-clip-path: inset(100px 50px);
-clip-path: circle(50px at 0 100px);
-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
-clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
-
-/* ボックスおよびシェイプ値の組み合わせ */
-clip-path: padding-box circle(50px at 0 100px);
-
-/* グローバル値 */
-clip-path: inherit;
-clip-path: initial;
-clip-path: unset;
-
- -

clip-path プロパティは、以下に挙げた値のうちの一つまたは組み合わせで指定します。

- -

値

- -
-
<clip-source>
-
SVG の {{SVGElement("clipPath")}} 要素を参照する {{cssxref("<url>")}} です。
-
{{cssxref("<basic-shape>")}}
-
<geometry-box> 値で寸法と位置が定義されるシェイプです。ジオメトリボックスが指定されない場合、参照ボックスとして border-box が使用されます。
-
<geometry-box>
-
<basic-shape> と共に指定された場合、この値は基本シェイプの参照ボックスを定義します。単独で指定された場合、指定のボックスの辺を、角の形 ({{cssxref("border-radius")}} など) を含めてクリッピングパスにします。ジオメトリボックスは以下の値のうちの一つが指定できます。
-
-
-
margin-box
-
マージンボックスを参照ボックスとして使用します。
-
border-box
-
境界ボックスを参照ボックスとして使用します。
-
padding-box
-
パディングボックスを参照ボックスとして使用します。
-
content-box
-
コンテンボックスを参照ボックスとして使用します。
-
fill-box
-
オブジェクトの境界ボックスを参照ボックスとして使用します。
-
stroke-box
-
ストロークの境界ボックスを参照ボックスとして使用します。
-
view-box
-
最も近い SVG のビューポートを参照ボックスとして使用します。 SVG のビューポートを作成する要素に {{SVGAttr("viewBox")}} 属性が指定されている場合、参照ボックスは viewBox 属性で指定された座標系の原点に位置し、参照ボックスの寸法は viewBox 属性の width および height 値に設定されます。
-
-
-
none
-
クリッピングパスは作成されません。
-
- -
-

注: 計算値が none 以外の場合は、新しい重ね合わせコンテキストを生成します。これは、 {{cssxref("opacity")}} が 1 以外の値の場合と同様です。

-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML と SVG の比較

- - - -

{{EmbedLiveSample("Comparison_of_HTML_and_SVG", "100%", 800, "", "", "example-outcome-frame")}}

- -

完全な例

- -

HTML

- -
<img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
-    alt="MDN logo">
-<svg height="0" width="0">
-  <defs>
-    <clipPath id="cross">
-      <rect y="110" x="137" width="90" height="90"/>
-      <rect x="0" y="110" width="90" height="90"/>
-      <rect x="137" y="0" width="90" height="90"/>
-      <rect x="0" y="0" width="90" height="90"/>
-    </clipPath>
-  </defs>
-</svg>
-
-<select id="clipPath">
-  <option value="none">none</option>
-  <option value="circle(100px at 110px 100px)">circle</option>
-  <option value="url(#cross)" selected>cross</option>
-  <option value="inset(20px round 20px)">inset</option>
-  <option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')">path</option>
-</select>
-
- -

CSS

- -
#clipped {
-  margin-bottom: 20px;
-  clip-path: url(#cross);
-}
-
- - - -

結果

- -

{{EmbedLiveSample("Complete_example", 230, 250)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Shapes 2", "#supported-basic-shapes", 'path')}}{{Spec2('CSS Shapes 2')}}path() を定義。
{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}{{Spec2('CSS Masks')}}適用範囲を HTML 要素に拡張。 clip-path プロパティが非推奨の {{cssxref("clip")}} プロパティを置き換えた。
{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}{{Spec2('SVG1.1')}}初回定義 (SVG 要素のみに適用)。
- -

ブラウザーの互換性

- -

{{Compat("css.properties.clip-path")}}

- -

関連情報

- - diff --git a/files/ja/web/css/clip-path/index.md b/files/ja/web/css/clip-path/index.md new file mode 100644 index 0000000000..55ac2da864 --- /dev/null +++ b/files/ja/web/css/clip-path/index.md @@ -0,0 +1,621 @@ +--- +title: clip-path +slug: Web/CSS/clip-path +tags: + - CSS + - CSS Masking + - CSS Property + - Experimental + - Reference + - Web + - 'recipe:css-property' +translation_of: Web/CSS/clip-path +--- +
{{CSSRef}}
+ +

clip-path は CSS のプロパティで、要素のどの部分を表示するかを設定するクリッピング領域を作ります。具体的には、領域の内部の部分は表示され、外側の部分は非表示になります。

+ +
{{EmbedInteractiveExample("pages/css/clip-path.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+clip-path: none;
+
+/* <clip-source> 値 */
+clip-path: url(resources.svg#c1);
+
+/* <geometry-box> 値 */
+clip-path: margin-box;
+clip-path: border-box;
+clip-path: padding-box;
+clip-path: content-box;
+clip-path: fill-box;
+clip-path: stroke-box;
+clip-path: view-box;
+
+/* <basic-shape> 値 */
+clip-path: inset(100px 50px);
+clip-path: circle(50px at 0 100px);
+clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
+
+/* ボックスおよびシェイプ値の組み合わせ */
+clip-path: padding-box circle(50px at 0 100px);
+
+/* グローバル値 */
+clip-path: inherit;
+clip-path: initial;
+clip-path: unset;
+
+ +

clip-path プロパティは、以下に挙げた値のうちの一つまたは組み合わせで指定します。

+ +

値

+ +
+
<clip-source>
+
SVG の {{SVGElement("clipPath")}} 要素を参照する {{cssxref("<url>")}} です。
+
{{cssxref("<basic-shape>")}}
+
<geometry-box> 値で寸法と位置が定義されるシェイプです。ジオメトリボックスが指定されない場合、参照ボックスとして border-box が使用されます。
+
<geometry-box>
+
<basic-shape> と共に指定された場合、この値は基本シェイプの参照ボックスを定義します。単独で指定された場合、指定のボックスの辺を、角の形 ({{cssxref("border-radius")}} など) を含めてクリッピングパスにします。ジオメトリボックスは以下の値のうちの一つが指定できます。
+
+
+
margin-box
+
マージンボックスを参照ボックスとして使用します。
+
border-box
+
境界ボックスを参照ボックスとして使用します。
+
padding-box
+
パディングボックスを参照ボックスとして使用します。
+
content-box
+
コンテンボックスを参照ボックスとして使用します。
+
fill-box
+
オブジェクトの境界ボックスを参照ボックスとして使用します。
+
stroke-box
+
ストロークの境界ボックスを参照ボックスとして使用します。
+
view-box
+
最も近い SVG のビューポートを参照ボックスとして使用します。 SVG のビューポートを作成する要素に {{SVGAttr("viewBox")}} 属性が指定されている場合、参照ボックスは viewBox 属性で指定された座標系の原点に位置し、参照ボックスの寸法は viewBox 属性の width および height 値に設定されます。
+
+
+
none
+
クリッピングパスは作成されません。
+
+ +
+

注: 計算値が none 以外の場合は、新しい重ね合わせコンテキストを生成します。これは、 {{cssxref("opacity")}} が 1 以外の値の場合と同様です。

+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML と SVG の比較

+ + + +

{{EmbedLiveSample("Comparison_of_HTML_and_SVG", "100%", 800, "", "", "example-outcome-frame")}}

+ +

完全な例

+ +

HTML

+ +
<img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
+    alt="MDN logo">
+<svg height="0" width="0">
+  <defs>
+    <clipPath id="cross">
+      <rect y="110" x="137" width="90" height="90"/>
+      <rect x="0" y="110" width="90" height="90"/>
+      <rect x="137" y="0" width="90" height="90"/>
+      <rect x="0" y="0" width="90" height="90"/>
+    </clipPath>
+  </defs>
+</svg>
+
+<select id="clipPath">
+  <option value="none">none</option>
+  <option value="circle(100px at 110px 100px)">circle</option>
+  <option value="url(#cross)" selected>cross</option>
+  <option value="inset(20px round 20px)">inset</option>
+  <option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')">path</option>
+</select>
+
+ +

CSS

+ +
#clipped {
+  margin-bottom: 20px;
+  clip-path: url(#cross);
+}
+
+ + + +

結果

+ +

{{EmbedLiveSample("Complete_example", 230, 250)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Shapes 2", "#supported-basic-shapes", 'path')}}{{Spec2('CSS Shapes 2')}}path() を定義。
{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}{{Spec2('CSS Masks')}}適用範囲を HTML 要素に拡張。 clip-path プロパティが非推奨の {{cssxref("clip")}} プロパティを置き換えた。
{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}{{Spec2('SVG1.1')}}初回定義 (SVG 要素のみに適用)。
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.clip-path")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/clip/index.html b/files/ja/web/css/clip/index.html deleted file mode 100644 index b36aacad45..0000000000 --- a/files/ja/web/css/clip/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: clip -slug: Web/CSS/clip -tags: - - CSS - - CSS Reference -translation_of: Web/CSS/clip ---- -
{{CSSRef}}
- -

clip は CSS のプロパティで、要素のどの部分が可視であるかを定義します。 clip プロパティは絶対配置された要素、つまり {{cssxref("position","position:absolute")}} または {{cssxref("position","position:fixed")}} を持つ要素だけに適用されます。

- -
/* キーワード値 */
-clip: auto;
-
-/* <shape> 値 */
-clip: rect(1px, 10em, 3rem, 2ch);
-
-/* グローバル値 */
-clip: inherit;
-clip: initial;
-clip: unset;
- -

構文

- -
-

注: 可能であれば、より新しい {{cssxref("clip-path")}} を使うことをお勧めします。

-
- -

値

- -
-
{{cssxref("<shape>")}}
-
rect(<top>, <right>, <bottom>, <left>) 形式の矩形の {{cssxref("<shape>")}} です。 <top> と <bottom> は、ボックス境界の上辺からのオフセットを表します。<right> と <left> は、ボックス境界の左辺からのオフセットを表します。これがボックスの中身となります。
-
<top>、<right>、<bottom>、<left> の値は {{cssxref("<length>")}} または auto のいずれかです。auto が指定されると、その辺のボックス境界で切り取られます。
-
auto
-
要素はクリップされません (既定値)。ボックス境界で切り取る rect(auto, auto, auto, auto) とはまったく異なることに注意してください。
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

画像の切り抜き

- -

CSS

- -
.dotted-border {
-  border: dotted;
-  position: relative;
-  width: 536px;
-  height: 350px;
-}
-
-#top-left,
-#middle,
-#bottom-right {
-  position: absolute;
-  top: 0;
-}
-
-#top-left {
-  left: 360px;
-  clip: rect(0, 175px, 113px, 0);
-}
-
-
-#middle {
-  left: 280px;
-  clip: rect(119px, 255px, 229px, 80px);
-}
-
-#bottom-right {
-  left: 200px;
-  clip: rect(235px, 335px, 345px, 160px);
-}
- -

HTML

- -
<p class="dotted-border">
-  <img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Original graphic">
-  <img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to upper left">
-  <img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped towards middle">
-  <img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to bottom right">
-</p>
- -

結果

- -

{{EmbedLiveSample('Clipping_an_image', '689px', '410px')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Masks', '#clip-property', 'clip')}}{{Spec2('CSS Masks')}}clip プロパティを非推奨とし、代わりに {{cssxref("clip-path")}} を提案。
{{SpecName('CSS2.1', 'visufx.html#clipping', 'clip')}}{{Spec2('CSS2.1')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.clip")}}

- -

関連情報

- - diff --git a/files/ja/web/css/clip/index.md b/files/ja/web/css/clip/index.md new file mode 100644 index 0000000000..b36aacad45 --- /dev/null +++ b/files/ja/web/css/clip/index.md @@ -0,0 +1,130 @@ +--- +title: clip +slug: Web/CSS/clip +tags: + - CSS + - CSS Reference +translation_of: Web/CSS/clip +--- +
{{CSSRef}}
+ +

clip は CSS のプロパティで、要素のどの部分が可視であるかを定義します。 clip プロパティは絶対配置された要素、つまり {{cssxref("position","position:absolute")}} または {{cssxref("position","position:fixed")}} を持つ要素だけに適用されます。

+ +
/* キーワード値 */
+clip: auto;
+
+/* <shape> 値 */
+clip: rect(1px, 10em, 3rem, 2ch);
+
+/* グローバル値 */
+clip: inherit;
+clip: initial;
+clip: unset;
+ +

構文

+ +
+

注: 可能であれば、より新しい {{cssxref("clip-path")}} を使うことをお勧めします。

+
+ +

値

+ +
+
{{cssxref("<shape>")}}
+
rect(<top>, <right>, <bottom>, <left>) 形式の矩形の {{cssxref("<shape>")}} です。 <top> と <bottom> は、ボックス境界の上辺からのオフセットを表します。<right> と <left> は、ボックス境界の左辺からのオフセットを表します。これがボックスの中身となります。
+
<top>、<right>、<bottom>、<left> の値は {{cssxref("<length>")}} または auto のいずれかです。auto が指定されると、その辺のボックス境界で切り取られます。
+
auto
+
要素はクリップされません (既定値)。ボックス境界で切り取る rect(auto, auto, auto, auto) とはまったく異なることに注意してください。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

画像の切り抜き

+ +

CSS

+ +
.dotted-border {
+  border: dotted;
+  position: relative;
+  width: 536px;
+  height: 350px;
+}
+
+#top-left,
+#middle,
+#bottom-right {
+  position: absolute;
+  top: 0;
+}
+
+#top-left {
+  left: 360px;
+  clip: rect(0, 175px, 113px, 0);
+}
+
+
+#middle {
+  left: 280px;
+  clip: rect(119px, 255px, 229px, 80px);
+}
+
+#bottom-right {
+  left: 200px;
+  clip: rect(235px, 335px, 345px, 160px);
+}
+ +

HTML

+ +
<p class="dotted-border">
+  <img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Original graphic">
+  <img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to upper left">
+  <img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped towards middle">
+  <img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to bottom right">
+</p>
+ +

結果

+ +

{{EmbedLiveSample('Clipping_an_image', '689px', '410px')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Masks', '#clip-property', 'clip')}}{{Spec2('CSS Masks')}}clip プロパティを非推奨とし、代わりに {{cssxref("clip-path")}} を提案。
{{SpecName('CSS2.1', 'visufx.html#clipping', 'clip')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.clip")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/mask-clip/index.html b/files/ja/web/css/mask-clip/index.html deleted file mode 100644 index e057a4eeda..0000000000 --- a/files/ja/web/css/mask-clip/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: mask-clip -slug: Web/CSS/mask-clip -tags: - - CSS - - CSS Masking - - CSS Property - - CSS マスク - - Experimental - - Reference -translation_of: Web/CSS/mask-clip ---- -
{{CSSRef}}
- -

mask-clip は CSS のプロパティで、マスクが影響する領域を指定します。要素の描画されるコンテンツはこの領域に制限されます。

- -
/* <geometry-box> 値 */
-mask-clip: content-box;
-mask-clip: padding-box;
-mask-clip: border-box;
-mask-clip: margin-box;
-mask-clip: fill-box;
-mask-clip: stroke-box;
-mask-clip: view-box;
-
-/* キーワード値 */
-mask-clip: no-clip;
-
-/* 標準外のキーワード値 */
--webkit-mask-clip: border;
--webkit-mask-clip: padding;
--webkit-mask-clip: content;
--webkit-mask-clip: text;
-
-/* 複数の値 */
-mask-clip: padding-box, no-clip;
-mask-clip: view-box, fill-box, border-box;
-
-/* グローバル値 */
-mask-clip: inherit;
-mask-clip: initial;
-mask-clip: unset;
-
- -

{{cssinfo}}

- -

構文

- -

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

- -

値

- -
-
content-box
-
描画されるコンテンツは、コンテンツボックスでクリッピングされます。
-
padding-box
-
描画されるコンテンツは、パディングボックスでクリッピングされます。
-
border-box
-
描画されるコンテンツは、境界ボックスでクリッピングされます。
-
margin-box
-
描画されるコンテンツは、マージンボックスでクリッピングされます。
-
fill-box
-
描画されるコンテンツは、オブジェクトの囲みボックスでクリッピングされます。
-
stroke-box
-
描画されるコンテンツは、オブジェクトの輪郭線ボックスでクリッピングされます。
-
view-box
-
直近の SVG ビューポートを参照ボックスとして使用します。 viewBox 属性が SVG ビューポートを作成している要素に指定されると、参照ボックスは viewBox 属性で示された座標系の原点に配置され、参照ボックスの寸法は viewBox 属性の幅と高さに設定されます。
-
no-clip
-
描画されるコンテンツはクリッピングされません。
-
border{{non-standard_inline}}
-
このキーワードは border-box と同じ動作をします。
-
padding{{non-standard_inline}}
-
このキーワードは padding-box と同じ動作をします。
-
content{{non-standard_inline}}
-
このキーワードは content-box と同じ動作をします。
-
text{{non-standard_inline}}
-
このキーワードは要素のテキストでマスク画像をクリッピングします。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

CSS

- -
#masked {
-  width: 100px;
-  height: 100px;
-  background-color: #8cffa0;
-  margin: 20px;
-  border: 20px solid #8ca0ff;
-  padding: 20px;
-  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
-  mask-size: 100% 100%;
-  mask-clip: border-box; /* Can be changed in the live sample */
-}
-
- - - -

{{EmbedLiveSample("Example", "220px", "250px")}}

- -

仕様書

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

ブラウザーの対応

- -

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

diff --git a/files/ja/web/css/mask-clip/index.md b/files/ja/web/css/mask-clip/index.md new file mode 100644 index 0000000000..e057a4eeda --- /dev/null +++ b/files/ja/web/css/mask-clip/index.md @@ -0,0 +1,150 @@ +--- +title: mask-clip +slug: Web/CSS/mask-clip +tags: + - CSS + - CSS Masking + - CSS Property + - CSS マスク + - Experimental + - Reference +translation_of: Web/CSS/mask-clip +--- +
{{CSSRef}}
+ +

mask-clip は CSS のプロパティで、マスクが影響する領域を指定します。要素の描画されるコンテンツはこの領域に制限されます。

+ +
/* <geometry-box> 値 */
+mask-clip: content-box;
+mask-clip: padding-box;
+mask-clip: border-box;
+mask-clip: margin-box;
+mask-clip: fill-box;
+mask-clip: stroke-box;
+mask-clip: view-box;
+
+/* キーワード値 */
+mask-clip: no-clip;
+
+/* 標準外のキーワード値 */
+-webkit-mask-clip: border;
+-webkit-mask-clip: padding;
+-webkit-mask-clip: content;
+-webkit-mask-clip: text;
+
+/* 複数の値 */
+mask-clip: padding-box, no-clip;
+mask-clip: view-box, fill-box, border-box;
+
+/* グローバル値 */
+mask-clip: inherit;
+mask-clip: initial;
+mask-clip: unset;
+
+ +

{{cssinfo}}

+ +

構文

+ +

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

+ +

値

+ +
+
content-box
+
描画されるコンテンツは、コンテンツボックスでクリッピングされます。
+
padding-box
+
描画されるコンテンツは、パディングボックスでクリッピングされます。
+
border-box
+
描画されるコンテンツは、境界ボックスでクリッピングされます。
+
margin-box
+
描画されるコンテンツは、マージンボックスでクリッピングされます。
+
fill-box
+
描画されるコンテンツは、オブジェクトの囲みボックスでクリッピングされます。
+
stroke-box
+
描画されるコンテンツは、オブジェクトの輪郭線ボックスでクリッピングされます。
+
view-box
+
直近の SVG ビューポートを参照ボックスとして使用します。 viewBox 属性が SVG ビューポートを作成している要素に指定されると、参照ボックスは viewBox 属性で示された座標系の原点に配置され、参照ボックスの寸法は viewBox 属性の幅と高さに設定されます。
+
no-clip
+
描画されるコンテンツはクリッピングされません。
+
border{{non-standard_inline}}
+
このキーワードは border-box と同じ動作をします。
+
padding{{non-standard_inline}}
+
このキーワードは padding-box と同じ動作をします。
+
content{{non-standard_inline}}
+
このキーワードは content-box と同じ動作をします。
+
text{{non-standard_inline}}
+
このキーワードは要素のテキストでマスク画像をクリッピングします。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

CSS

+ +
#masked {
+  width: 100px;
+  height: 100px;
+  background-color: #8cffa0;
+  margin: 20px;
+  border: 20px solid #8ca0ff;
+  padding: 20px;
+  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  mask-size: 100% 100%;
+  mask-clip: border-box; /* Can be changed in the live sample */
+}
+
+ + + +

{{EmbedLiveSample("Example", "220px", "250px")}}

+ +

仕様書

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

ブラウザーの対応

+ +

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

diff --git a/files/ja/web/css/mask-composite/index.html b/files/ja/web/css/mask-composite/index.html deleted file mode 100644 index a41474ae08..0000000000 --- a/files/ja/web/css/mask-composite/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: mask-composite -slug: Web/CSS/mask-composite -tags: - - CSS - - CSS Masking - - CSS Property - - Experimental - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/mask-composite ---- -
{{CSSRef}}
- -

mask-composite は CSS のプロパティで、現在のマスクレイヤーとその下のマスクレイヤーとの間で使われる合成操作を表します。

- -
/* キーワード値 */
-mask-composite: add;
-mask-composite: subtract;
-mask-composite: intersect;
-mask-composite: exclude;
-
-/* グローバル値 */
-mask-composite: inherit;
-mask-composite: initial;
-mask-composite: unset;
-
- -

構文

- -

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

- -

値

- -

混合において、現在のマスクレイヤーは source、その下にあるすべてのマスクレイヤーは destination とします。

- -
-
add
-
source が destination の上に配置されます。
-
subtract
-
destination の外側に source が配置されます。
-
intersect
-
destination と重なっている source の部分が destination を置き換えます。
-
exclude
-
source と destination で重なっていない領域が結合されます。
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

追加でマスクレイヤーの合成

- -

CSS

- -
#masked {
-  width: 100px;
-  height: 100px;
-  background-color: #8cffa0;
-  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg),
-              url(https://mdn.mozillademos.org/files/12676/star.svg);
-  mask-size: 100% 100%;
-  mask-composite: add; /* Can be changed in the live sample */
-}
-
- - - -

結果

- -

{{EmbedLiveSample("Compositing_mask_layers_with_addition", "100px", "130px")}}

- -

仕様書

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

ブラウザーの互換性

- -

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

diff --git a/files/ja/web/css/mask-composite/index.md b/files/ja/web/css/mask-composite/index.md new file mode 100644 index 0000000000..a41474ae08 --- /dev/null +++ b/files/ja/web/css/mask-composite/index.md @@ -0,0 +1,120 @@ +--- +title: mask-composite +slug: Web/CSS/mask-composite +tags: + - CSS + - CSS Masking + - CSS Property + - Experimental + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/mask-composite +--- +
{{CSSRef}}
+ +

mask-composite は CSS のプロパティで、現在のマスクレイヤーとその下のマスクレイヤーとの間で使われる合成操作を表します。

+ +
/* キーワード値 */
+mask-composite: add;
+mask-composite: subtract;
+mask-composite: intersect;
+mask-composite: exclude;
+
+/* グローバル値 */
+mask-composite: inherit;
+mask-composite: initial;
+mask-composite: unset;
+
+ +

構文

+ +

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

+ +

値

+ +

混合において、現在のマスクレイヤーは source、その下にあるすべてのマスクレイヤーは destination とします。

+ +
+
add
+
source が destination の上に配置されます。
+
subtract
+
destination の外側に source が配置されます。
+
intersect
+
destination と重なっている source の部分が destination を置き換えます。
+
exclude
+
source と destination で重なっていない領域が結合されます。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

追加でマスクレイヤーの合成

+ +

CSS

+ +
#masked {
+  width: 100px;
+  height: 100px;
+  background-color: #8cffa0;
+  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg),
+              url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-size: 100% 100%;
+  mask-composite: add; /* Can be changed in the live sample */
+}
+
+ + + +

結果

+ +

{{EmbedLiveSample("Compositing_mask_layers_with_addition", "100px", "130px")}}

+ +

仕様書

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

ブラウザーの互換性

+ +

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

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

mask-image は CSS のプロパティで、要素のマスクレイヤーとして使用される画像を設定します。

- -
/* キーワード値 */
-mask-image: none;
-
-/* <mask-source> 値 */
-mask-image: url(masks.svg#mask1);
-
-/* <image> 値 */
-mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
-mask-image: image(url(mask.png), skyblue);
-
-/* 複数の値 */
-mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent);
-
-/* グローバル値 */
-mask-image: inherit;
-mask-image: initial;
-mask-image: unset;
-
- -

{{cssinfo}}

- -

構文

- -

値

- -
-
none
-
このキーワードは、透明な黒い画像レイヤーとして解釈されます。
-
<mask-source>
-
{{cssxref("<url>")}} による {{SVGElement("mask")}} または CSS 画像への参照です。
-
{{cssxref("<image>")}}
-
マスク画像レイヤーとして使用される画像の値です。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

CSS

- -
#masked {
-  width: 100px;
-  height: 100px;
-  background-color: #8cffa0;
-  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
-  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
-}
- -

HTML

- -
<div id="masked"></div>
-
- -

{{EmbedLiveSample('Example', '100px', '100px', '', '', 'hide-codepen-jsfiddle')}}

- -

仕様書

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

ブラウザーの互換性

- -

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

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

mask-image は CSS のプロパティで、要素のマスクレイヤーとして使用される画像を設定します。

+ +
/* キーワード値 */
+mask-image: none;
+
+/* <mask-source> 値 */
+mask-image: url(masks.svg#mask1);
+
+/* <image> 値 */
+mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+mask-image: image(url(mask.png), skyblue);
+
+/* 複数の値 */
+mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+
+/* グローバル値 */
+mask-image: inherit;
+mask-image: initial;
+mask-image: unset;
+
+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
none
+
このキーワードは、透明な黒い画像レイヤーとして解釈されます。
+
<mask-source>
+
{{cssxref("<url>")}} による {{SVGElement("mask")}} または CSS 画像への参照です。
+
{{cssxref("<image>")}}
+
マスク画像レイヤーとして使用される画像の値です。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

CSS

+ +
#masked {
+  width: 100px;
+  height: 100px;
+  background-color: #8cffa0;
+  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+}
+ +

HTML

+ +
<div id="masked"></div>
+
+ +

{{EmbedLiveSample('Example', '100px', '100px', '', '', 'hide-codepen-jsfiddle')}}

+ +

仕様書

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

ブラウザーの互換性

+ +

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

diff --git a/files/ja/web/css/mask-mode/index.html b/files/ja/web/css/mask-mode/index.html deleted file mode 100644 index a4f99606b2..0000000000 --- a/files/ja/web/css/mask-mode/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: mask-mode -slug: Web/CSS/mask-mode -tags: - - CSS - - CSS Masking - - CSS Property - - Experimental - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/mask-mode ---- -
{{CSSRef}}
- -

CSS の mask-mode プロパティは、 {{cssxref("mask-image")}} で定義されたマスクを、明度とアルファマスクのどちらで扱うかを設定します。

- -
/* キーワード値 */
-mask-mode: alpha;
-mask-mode: luminance;
-mask-mode: match-source;
-
-/* 複数の値 */
-mask-mode: alpha, match-source;
-
-/* グローバル値 */
-mask-mode: inherit;
-mask-mode: initial;
-mask-mode: unset;
-
- -

構文

- -

mask-mode プロパティは、以下に示す1つ又は複数のキーワード値を、カンマで区切って指定します。

- -

値

- -
-
alpha
-
このキーワードは、マスクレイヤーの透過性 (アルファチャンネル) の値をマスクの値として使用することを示します。
-
luminance
-
このキーワードは、マスクレイヤーの明度の値をマスクの値として使用することを示します。
-
match-source
-
-

{{cssxref("mask-image")}} プロパティが <mask-source> 型であれば、マスクレイヤー画像の明度の値がマスクの値として使用されます。

- -

{{cssxref("<image>")}} 型であれば、マスクレイヤー画像のアルファ値がマスクの値として使用されます。

-
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

アルファマスクモードの使用

- -

CSS

- -
#masked {
-  width: 227px;
-  height: 200px;
-  background: blue linear-gradient(red, blue);
-  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
-  mask-mode: alpha; /* ライブサンプルで変更することができます */
-}
-
- - - -

結果

- -

{{EmbedLiveSample("Using_alpha_mask_mode", 240, 240)}}

- -

仕様書

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

ブラウザーの互換性

- -

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

diff --git a/files/ja/web/css/mask-mode/index.md b/files/ja/web/css/mask-mode/index.md new file mode 100644 index 0000000000..a4f99606b2 --- /dev/null +++ b/files/ja/web/css/mask-mode/index.md @@ -0,0 +1,119 @@ +--- +title: mask-mode +slug: Web/CSS/mask-mode +tags: + - CSS + - CSS Masking + - CSS Property + - Experimental + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/mask-mode +--- +
{{CSSRef}}
+ +

CSS の mask-mode プロパティは、 {{cssxref("mask-image")}} で定義されたマスクを、明度とアルファマスクのどちらで扱うかを設定します。

+ +
/* キーワード値 */
+mask-mode: alpha;
+mask-mode: luminance;
+mask-mode: match-source;
+
+/* 複数の値 */
+mask-mode: alpha, match-source;
+
+/* グローバル値 */
+mask-mode: inherit;
+mask-mode: initial;
+mask-mode: unset;
+
+ +

構文

+ +

mask-mode プロパティは、以下に示す1つ又は複数のキーワード値を、カンマで区切って指定します。

+ +

値

+ +
+
alpha
+
このキーワードは、マスクレイヤーの透過性 (アルファチャンネル) の値をマスクの値として使用することを示します。
+
luminance
+
このキーワードは、マスクレイヤーの明度の値をマスクの値として使用することを示します。
+
match-source
+
+

{{cssxref("mask-image")}} プロパティが <mask-source> 型であれば、マスクレイヤー画像の明度の値がマスクの値として使用されます。

+ +

{{cssxref("<image>")}} 型であれば、マスクレイヤー画像のアルファ値がマスクの値として使用されます。

+
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

アルファマスクモードの使用

+ +

CSS

+ +
#masked {
+  width: 227px;
+  height: 200px;
+  background: blue linear-gradient(red, blue);
+  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  mask-mode: alpha; /* ライブサンプルで変更することができます */
+}
+
+ + + +

結果

+ +

{{EmbedLiveSample("Using_alpha_mask_mode", 240, 240)}}

+ +

仕様書

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

ブラウザーの互換性

+ +

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

diff --git a/files/ja/web/css/mask-origin/index.html b/files/ja/web/css/mask-origin/index.html deleted file mode 100644 index 7822be961e..0000000000 --- a/files/ja/web/css/mask-origin/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: mask-origin -slug: Web/CSS/mask-origin -tags: - - CSS - - CSS プロパティ - - CSS マスク - - Experimental - - Reference -translation_of: Web/CSS/mask-origin ---- -
{{CSSRef}}
- -

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

- -
/* キーワード値 */
-mask-origin: content-box;
-mask-origin: padding-box;
-mask-origin: border-box;
-mask-origin: margin-box;
-mask-origin: fill-box;
-mask-origin: stroke-box;
-mask-origin: view-box;
-
-/* 複数の値 */
-mask-origin: padding-box, content-box;
-mask-origin: view-box, fill-box, border-box;
-
-/* 標準外のキーワード値 */
--webkit-mask-origin: content;
--webkit-mask-origin: padding;
--webkit-mask-origin: border;
-
-/* グローバル値 */
-mask-origin: inherit;
-mask-origin: initial;
-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 と同じです。
-
- -

形式文法

- -{{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")}}

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

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

+ +
/* キーワード値 */
+mask-origin: content-box;
+mask-origin: padding-box;
+mask-origin: border-box;
+mask-origin: margin-box;
+mask-origin: fill-box;
+mask-origin: stroke-box;
+mask-origin: view-box;
+
+/* 複数の値 */
+mask-origin: padding-box, content-box;
+mask-origin: view-box, fill-box, border-box;
+
+/* 標準外のキーワード値 */
+-webkit-mask-origin: content;
+-webkit-mask-origin: padding;
+-webkit-mask-origin: border;
+
+/* グローバル値 */
+mask-origin: inherit;
+mask-origin: initial;
+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 と同じです。
+
+ +

形式文法

+ +{{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")}}

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")}}

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 ---- -
{{CSSRef}}
- -

mask-repeat は CSS プロパティで、マスク画像をどのように繰り返すかを設定します。マスク画像は水平軸、垂直軸、両方の軸で繰り返すか、まったく繰り返さないようにすることができます。

- -
/* 一つの値の構文 */
-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;
-
- -

既定では、繰り返された画像は要素の寸法でクリッピングされますが、 (round を使用して) 大きさが合うように拡大縮小したり、 (space を使用して) 端から端まで等分に配分したりすることができます。

- -

{{cssinfo}}

- -

構文

- -

1つ以上の <repeat-style> 値をコンマ区切りで指定します。

- -

値

- -
-
<repeat-style>
-
単一の値の構文は、二つの値の構文の一括指定です。
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
単一の値同等の二つの値
repeat-xrepeat no-repeat
repeat-yno-repeat repeat
repeatrepeat repeat
spacespace space
roundround round
no-repeatno-repeat no-repeat
- 二つの値の構文では、最初の値が水平方向の繰り返しの動作を表し、二番目の値が垂直方向の動作を表します。それぞれのオプションが各方向にどのように動作するのかを説明します。
-
- - - - - - - - - - - - - - - - - - - -
repeat画像がマスク描画領域全体を埋めるのに必要なだけ繰り返されます。最後の画像は合わない時には切り取られます。
space画像は切り取られずにできる限り繰り返されます。最初と最後の画像は要素の両端に位置し、画像間に均等に余白が配分されます。 {{cssxref("mask-position")}} プロパティは、1つだけの画像が切り取られずに表示される場合を除いて無視されます。 space を使用して切り取りが発生するのは、1つの画像を表示する十分な大きさがない場合だけです。
round利用できる空間の寸法が拡大した場合、繰り返される画像は (すき間をおかずに) もう一つ追加するだけの余地ができるまで引き伸ばされます。次の画像が追加されるとき、現在の画像は場所を空けるために縮小されます。例えば、元の幅が 260px の画像が3回繰り返されたとき、それぞれの反復の幅は 300px まで拡大する可能性があり、もう一つの画像が追加されると、 225px まで縮小されます。
no-repeat画像は繰り返されません (また、描画領域のマスクは全体を覆うとは限りません)。繰り返されないマスク画像の位置は {{cssxref("mask-position")}} CSS プロパティで定義されます。
-
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

単一の値

- -

CSS

- -
#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;
-}
-
- - - -

{{EmbedLiveSample("Single_value", "290px", "290px")}}

- -

複数のマスク画像の対応

- -

それぞれのマスク画像に異なる <repeat-style> を、コンマ区切りで指定することができます。

- -
.examplethree {
-  mask-image: url('mask1.png'), url('mask2.png');
-  mask-repeat: repeat-x, repeat-y;
-}
-
- -

それぞれの画像は最初のものから最後のものに向けて、それぞれの繰り返しスタイルに対応します。

- -

仕様書

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

ブラウザーの対応

- -

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

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 `` values, separated by commas. + +A `` 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 ``, a ``, or `auto`. + +### Values + +- `` + - : A `{{cssxref("<length>")}}` value scales the mask image to the specified length in the corresponding dimension. Negative lengths are not allowed. +- `` + - : 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.html deleted file mode 100644 index 2b3c192f21..0000000000 --- a/files/ja/web/css/mask-type/index.html +++ /dev/null @@ -1,184 +0,0 @@ ---- -title: mask-type -slug: Web/CSS/mask-type -tags: - - CSS - - CSS Masking - - CSS Property - - CSS プロパティ - - CSS マスク - - Reference - - SVG -translation_of: Web/CSS/mask-type ---- -
{{CSSRef}}
- -

mask-type は CSS のプロパティで、 SVG の {{svgElement("mask")}} 要素をルミナンスマスクとアルファマスクのどちらとして扱うかを設定します。これは <mask> 要素自身に設定します。

- -
/* キーワード値 */
-mask-type: luminance;
-mask-type: alpha;
-
-/* グローバル値 */
-mask-type: inherit;
-mask-type: initial;
-mask-type: unset;
-
- -

このプロパティは、マスクが使用される要素に適用され、同じ効果を持つ {{cssxref("mask-mode")}} プロパティによって上書きされることがあります。アルファマスクは全般的に表示が高速です。

- -

{{cssinfo}}

- -

構文

- -

mask-type プロパティは以下に示すキーワード値のうちの一つで指定します。

- -

値

- -
-
luminance
-
関連付けられたマスク画像がルミナンスマスクであることを示すキーワードです。すなわち、適用時に相対輝度値が使用されます。
-
alpha
-
関連付けられたマスク画像がアルファマスクであることを示すキーワードです。すなわち、適用時にアルファチャネル値が使用されます。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

以下の長方形をマスクとして適用してみましょう。

- -
<rect x="10" y="10" width="80" height="80"
-    fill="red" fill-opacity="0.7" />
- - - -
このような正方形になります。 {{EmbedLiveSample('mask', '100%', '100')}}
- -

適用先はこちらです。

- - - -
{{EmbedLiveSample('box', '100%', '120')}}
- -

結果として、ブラウザーがこのプロパティに対応している場合、 mask-type が {{SVGElement("mask")}} 要素に適用されると2つの異なる四角形になります。

- - - - - - - - - - - - -
mask-type: alpha;mask-type: luminance;
- - -
{{EmbedLiveSample('maskalpha', '100%', '102')}}
- 		- - -
{{EmbedLiveSample('maskluminance', '100%', '102')}}
-
- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- -
    -
  • その他のマスクに関するプロパティ: {{cssxref("mask")}}, {{cssxref("mask-mode")}}
    • -
diff --git a/files/ja/web/css/mask-type/index.md b/files/ja/web/css/mask-type/index.md new file mode 100644 index 0000000000..2b3c192f21 --- /dev/null +++ b/files/ja/web/css/mask-type/index.md @@ -0,0 +1,184 @@ +--- +title: mask-type +slug: Web/CSS/mask-type +tags: + - CSS + - CSS Masking + - CSS Property + - CSS プロパティ + - CSS マスク + - Reference + - SVG +translation_of: Web/CSS/mask-type +--- +
{{CSSRef}}
+ +

mask-type は CSS のプロパティで、 SVG の {{svgElement("mask")}} 要素をルミナンスマスクとアルファマスクのどちらとして扱うかを設定します。これは <mask> 要素自身に設定します。

+ +
/* キーワード値 */
+mask-type: luminance;
+mask-type: alpha;
+
+/* グローバル値 */
+mask-type: inherit;
+mask-type: initial;
+mask-type: unset;
+
+ +

このプロパティは、マスクが使用される要素に適用され、同じ効果を持つ {{cssxref("mask-mode")}} プロパティによって上書きされることがあります。アルファマスクは全般的に表示が高速です。

+ +

{{cssinfo}}

+ +

構文

+ +

mask-type プロパティは以下に示すキーワード値のうちの一つで指定します。

+ +

値

+ +
+
luminance
+
関連付けられたマスク画像がルミナンスマスクであることを示すキーワードです。すなわち、適用時に相対輝度値が使用されます。
+
alpha
+
関連付けられたマスク画像がアルファマスクであることを示すキーワードです。すなわち、適用時にアルファチャネル値が使用されます。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

以下の長方形をマスクとして適用してみましょう。

+ +
<rect x="10" y="10" width="80" height="80"
+    fill="red" fill-opacity="0.7" />
+ + + +
このような正方形になります。 {{EmbedLiveSample('mask', '100%', '100')}}
+ +

適用先はこちらです。

+ + + +
{{EmbedLiveSample('box', '100%', '120')}}
+ +

結果として、ブラウザーがこのプロパティに対応している場合、 mask-type が {{SVGElement("mask")}} 要素に適用されると2つの異なる四角形になります。

+ + + + + + + + + + + + +
mask-type: alpha;mask-type: luminance;
+ + +
{{EmbedLiveSample('maskalpha', '100%', '102')}}
+ 		+ + +
{{EmbedLiveSample('maskluminance', '100%', '102')}}
+
+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ +
    +
  • その他のマスクに関するプロパティ: {{cssxref("mask")}}, {{cssxref("mask-mode")}}
    • +
-- cgit v1.2.3-54-g00ecf