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/clip-path/index.md | 859 ++++++++++++++++++------------------ 1 file changed, 419 insertions(+), 440 deletions(-) (limited to 'files/ja/web/css/clip-path') diff --git a/files/ja/web/css/clip-path/index.md b/files/ja/web/css/clip-path/index.md index 55ac2da864..f4001a05fb 100644 --- a/files/ja/web/css/clip-path/index.md +++ b/files/ja/web/css/clip-path/index.md @@ -3,31 +3,31 @@ title: clip-path slug: Web/CSS/clip-path tags: - CSS - - CSS Masking - - CSS Property + - CSS マスク + - CSS プロパティ - Experimental - - Reference - - Web - - 'recipe:css-property' + - リファレンス + - ウェブ + - recipe:css-property +browser-compat: css.properties.clip-path translation_of: Web/CSS/clip-path --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`clip-path`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素のどの部分を表示するかを設定するクリッピング領域を作ります。具体的には、領域の内部の部分は表示され、外側の部分は非表示になります。 -
{{EmbedInteractiveExample("pages/css/clip-path.html")}}
+{{EmbedInteractiveExample("pages/css/clip-path.html")}} - +## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 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;
@@ -36,9 +36,10 @@ 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: ellipse(50px 60px at 0 10% 20%);
 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');
 
@@ -48,351 +49,360 @@ clip-path: padding-box circle(50px at 0 100px);
 /* グローバル値 */
 clip-path: inherit;
 clip-path: initial;
+clip-path: revert;
 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 以外の値の場合と同様です。

-
+``` + +`clip-path` プロパティは、以下に挙げた値のうちの一つまたは組み合わせで指定します。 + +### 値 + +- `` + - : {{cssxref("url()")}} で、[SVG](/ja/docs/Web/SVG) の {{SVGElement("clipPath")}} 要素を参照します。 +- {{cssxref("<basic-shape>")}} + + - : `` 値で寸法と位置が定義されるシェイプです。ジオメトリボックスが指定されない場合、参照ボックスとして `border-box` が使用されます。以下のいずれかです。 + + - {{cssxref("basic-shape/inset()","inset()")}} + - : 内部の長方形を定義します。 + - {{cssxref("basic-shape/circle()","circle()")}} + - : 半径と中心位置を使用して円を定義します。 + - {{cssxref("basic-shape/ellipse()","ellipse()")}} + - : 2つの半径と位置を指定して楕円を定義します。 + - {{cssxref("basic-shape/polygon()","polygon()")}} + - : SVG の塗りつぶし規則と頂点のセットを用いて多角形を定義します。 + - {{cssxref("path()","path()")}} + - : SVG の塗りつぶし規則と SVG のパス定義を用いて形状を定義します。 -

公式定義

+- `` -

{{cssinfo}}

+ - : `` と共に指定された場合、この値は基本シェイプの参照ボックスを定義します。単独で指定された場合、指定のボックスの辺を、角の形 ({{cssxref("border-radius")}} など) を含めてクリッピングパスにします。ジオメトリボックスは以下の値のうちの一つが指定できます。 -

形式文法

+ - `margin-box` + - : [マージンボックス](/ja/docs/Web/CSS/CSS_Shapes/From_box_values#margin-box)を参照ボックスとして使用します。 + - `border-box` + - : [境界ボックス](/ja/docs/Web/CSS/CSS_Shapes/From_box_values#border-box)を参照ボックスとして使用します。 + - `padding-box` + - : [パディングボックス](/ja/docs/Web/CSS/CSS_Shapes/From_box_values#padding-box)を参照ボックスとして使用します。 + - `content-box` + - : [コンテンボックス](/ja/docs/Web/CSS/CSS_Shapes/From_box_values#content-box)を参照ボックスとして使用します。 + - `fill-box` + - : オブジェクトの境界ボックスを参照ボックスとして使用します。 + - `stroke-box` + - : ストロークの境界ボックスを参照ボックスとして使用します。 + - `view-box` + - : 最も近い SVG のビューポートを参照ボックスとして使用します。 SVG のビューポートを作成する要素に {{SVGAttr("viewBox")}} 属性が指定されている場合、参照ボックスは `viewBox` 属性で指定された座標系の原点に位置し、参照ボックスの寸法は `viewBox` 属性の width および height 値に設定されます。 + +- `none` + - : クリッピングパスは作成されません。 + +> **Note:** 計算値が **`none`** 以外の場合は、新しい[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)を生成します。これは、 {{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 {
+}
+```
+
+{{EmbedLiveSample("Comparison_of_HTML_and_SVG", "100%", 800, "", "", "example-outcome-frame")}}
+
+
完全な例

+
+#### HTML
+
+```html
+MDN logo
+
+  
+    
+      
+      
+      
+      
+    
+  
+
+
+
+```
+
+#### CSS
+
+```css
+#clipped {
   margin-bottom: 20px;
   clip-path: url(#cross);
 }
-
- - +``` + +#### 結果 + +{{EmbedLiveSample("Complete_example", 230, 250)}} -

結果

- -

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

- -

関連情報

- -
    -
  • Shapes in clipping and masking – and how to use them
    • -
  • CSS プロパティ: {{cssxref("mask")}}, {{cssxref("filter")}}
    • -
  • SVG 効果の HTML コンテンツへの適用
    • +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Shapes in clipping and masking – and how to use them](https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/) +- CSS プロパティ: {{cssxref("mask")}}, {{cssxref("filter")}} +- [SVG 効果の HTML コンテンツへの適用](/ja/docs/Web/SVG/Applying_SVG_effects_to_HTML_content)
  • SVG 属性: -
      -
    • {{SVGAttr("clip-path")}}
      • -
    • {{SVGAttr("clip-rule")}}
      • -
    -
    • -
  • CSS Circle Image ({{SVGAttr("clip-path")}} およびその他のメソッドを使用)
    • -
+ + - {{SVGAttr("clip-path")}} + - {{SVGAttr("clip-rule")}} -- cgit v1.2.3-54-g00ecf