From f366bd60625f3374034ea9b333162c4715899792 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 20 Dec 2024 01:42:26 +0900 Subject: [PATCH] =?UTF-8?q?2024/09/27=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/clip-path/index.md | 80 +++++++++++++++++------------ 1 file changed, 46 insertions(+), 34 deletions(-) diff --git a/files/ja/web/css/clip-path/index.md b/files/ja/web/css/clip-path/index.md index 512941a7bcf5f2..4fb547a1905bfb 100644 --- a/files/ja/web/css/clip-path/index.md +++ b/files/ja/web/css/clip-path/index.md @@ -1,6 +1,8 @@ --- title: clip-path slug: Web/CSS/clip-path +l10n: + sourceCommit: 2c741257dd3abbd28d7d5f035800002f3b578b89 --- {{CSSRef}} @@ -30,11 +32,13 @@ clip-path: view-box; /* 値 */ clip-path: inset(100px 50px); clip-path: circle(50px at 0 100px); -clip-path: ellipse(50px 60px at 0 10% 20%); +clip-path: ellipse(50px 60px at 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" ); +clip-path: rect(5px 5px 160px 145px round 20%); +clip-path: xywh(0 5px 100% 75% round 15% 0); /* ボックスおよびシェイプ値の組み合わせ */ clip-path: padding-box circle(50px at 0 100px); @@ -43,6 +47,7 @@ clip-path: padding-box circle(50px at 0 100px); clip-path: inherit; clip-path: initial; clip-path: revert; +clip-path: revert-layer; clip-path: unset; ``` @@ -51,25 +56,31 @@ clip-path: unset; ### 値 - `` - - : {{cssxref("url()")}} で、[SVG](/ja/docs/Web/SVG) の {{SVGElement("clipPath")}} 要素を参照します。 + - : {{cssxref("url_value", "<url>")}} で、[SVG](/ja/docs/Web/SVG) の {{SVGElement("clipPath")}} 要素を参照します。 - {{cssxref("<basic-shape>")}} - - : `` 値で寸法と位置が定義されるシェイプです。ジオメトリボックスが指定されない場合、参照ボックスとして `border-box` が使用されます。以下のいずれかです。 + - : `` 値で寸法と位置が定義されるシェイプです。ジオメトリーボックスが指定されない場合、参照ボックスとして `border-box` が使用されます。以下のいずれかです。 - - {{cssxref("basic-shape/inset()","inset()")}} + - {{cssxref("basic-shape/inset","inset()")}} - : 内部の長方形を定義します。 - - {{cssxref("basic-shape/circle()","circle()")}} + - {{cssxref("basic-shape/circle","circle()")}} - : 半径と中心位置を使用して円を定義します。 - - {{cssxref("basic-shape/ellipse()","ellipse()")}} + - {{cssxref("basic-shape/ellipse","ellipse()")}} - : 2つの半径と位置を指定して楕円を定義します。 - - {{cssxref("basic-shape/polygon()","polygon()")}} + - {{cssxref("basic-shape/polygon","polygon()")}} - : SVG の塗りつぶし規則と頂点のセットを用いて多角形を定義します。 - - {{cssxref("path()","path()")}} + - {{cssxref("basic-shape/path","path()")}} - : SVG の塗りつぶし規則と SVG のパス定義を用いて形状を定義します。 + - {{cssxref("basic-shape/rect","rect()")}} + - : 参照ボックスの縁からの指定距離を使用して長方形を定義します。 + - {{cssxref("basic-shape/shape","shape()")}} + - : オプションの SVG 塗りつぶしルールと、行、曲線、円弧用の図形コマンドを使用して図形を定義します。 + - {{cssxref("basic-shape/xywh","xywh()")}} + - : 参照ボックスの上端と左端からの指定距離、および長方形の幅と高さを指定して、長方形を定義します。 - `` - - : `` と共に指定された場合、この値は基本シェイプの参照ボックスを定義します。単独で指定された場合、指定のボックスの辺を、角の形 ({{cssxref("border-radius")}} など) を含めてクリッピングパスにします。ジオメトリボックスは以下の値のうちの一つが指定できます。 + - : `` と共に指定された場合、この値は基本シェイプの参照ボックスを定義します。単独で指定された場合、指定のボックスの辺を、角の形 ({{cssxref("border-radius")}} など) を含めてクリッピングパスにします。ジオメトリーボックスは以下の値のうちの一つが指定できます。 - `margin-box` - : [マージンボックス](/ja/docs/Web/CSS/CSS_shapes/From_box_values#margin-box)を参照ボックスとして使用します。 @@ -102,7 +113,7 @@ clip-path: unset; ## 例 -

HTML と SVG の比較

+### HTML と SVG の比較 ```html hidden @@ -126,7 +137,7 @@ clip-path: unset;
SVG -
+
@@ -140,7 +151,7 @@ clip-path: unset;
clip-path: url(#myPath)

- Assuming the following clipPath definition: + 次の clipPath の定義があったとします。 
 <svg>
   <clipPath id="myPath" clipPathUnits="objectBoundingBox">
@@ -162,7 +173,7 @@ clip-path: unset;
SVG -
+
@@ -187,7 +198,7 @@ clip-path: unset;
SVG -
+
@@ -209,7 +220,7 @@ clip-path: unset;
SVG -
+
@@ -231,7 +242,7 @@ clip-path: unset;
SVG -
+
@@ -253,7 +264,7 @@ clip-path: unset;
SVG -
+
@@ -275,7 +286,7 @@ clip-path: unset;
SVG -
+
@@ -297,7 +308,7 @@ clip-path: unset;
SVG -
+
@@ -319,7 +330,7 @@ clip-path: unset;
SVG -
+
@@ -341,7 +352,7 @@ clip-path: unset;
SVG -
+
@@ -363,7 +374,7 @@ clip-path: unset;
SVG -
+
@@ -385,7 +396,7 @@ clip-path: unset;
SVG -
+
@@ -454,7 +465,7 @@ body { position: relative; } -.container:before { +.container::before { content: "margin"; position: absolute; top: 2px; @@ -462,14 +473,14 @@ body { font: italic 0.6em sans-serif; } -.viewbox { +.view-box { box-shadow: 1rem 1rem 0 #efefef inset, -1rem -1rem 0 #efefef inset; } -.container.viewbox:after { - content: "viewbox"; +.container.view-box::after { + content: "view-box"; position: absolute; left: 1.1rem; top: 1.1rem; @@ -562,13 +573,13 @@ svg text.em { } ``` -{{EmbedLiveSample("Comparison_of_HTML_and_SVG", "100%", 800, "", "", "example-outcome-frame")}} +{{EmbedLiveSample("Comparison_of_HTML_and_SVG", "100%", "800px")}} -

完全な例

+### 完全な例 #### HTML -```html +```html live-sample___complete_example MDN logo @@ -586,6 +597,8 @@ svg text.em { + + @@ -594,16 +607,16 @@ svg text.em { #### CSS -```css +```css live-sample___complete_example #clipped { margin-bottom: 20px; clip-path: url(#cross); } ``` -```js hidden +```js hidden live-sample___complete_example const clipPathSelect = document.getElementById("clipPath"); -clipPathSelect.addEventListener("change", function (evt) { +clipPathSelect.addEventListener("change", (evt) => { document.getElementById("clipped").style.clipPath = evt.target.value; }); ``` @@ -625,7 +638,6 @@ clipPathSelect.addEventListener("change", function (evt) { - [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")}}