diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-11-10 02:36:52 +0900 |
|---|---|---|
| committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-11-20 22:35:37 +0900 |
| commit | b6ef6d47830a2e326211e670174fe1955ad31fa7 (patch) | |
| tree | 8f25d8d47ae30ddfb8beb325f0b070f16bc05390 /files | |
| parent | 684f3a1f7c141b4d1c522687062ff0e6e2e1a080 (diff) | |
| download | translated-content-b6ef6d47830a2e326211e670174fe1955ad31fa7.tar.gz translated-content-b6ef6d47830a2e326211e670174fe1955ad31fa7.tar.bz2 translated-content-b6ef6d47830a2e326211e670174fe1955ad31fa7.zip | |
CSS Masking に関するプロパティの記事を更新
- 2021/11/10 時点の英語版に同期
Diffstat (limited to 'files')
20 files changed, 1232 insertions, 1315 deletions
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 --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><code><strong>clip-path</strong></code> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素のどの部分を表示するかを設定するクリッピング領域を作ります。具体的には、領域の内部の部分は表示され、外側の部分は非表示になります。</p> +**`clip-path`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素のどの部分を表示するかを設定するクリッピング領域を作ります。具体的には、領域の内部の部分は表示され、外側の部分は非表示になります。 -<div>{{EmbedInteractiveExample("pages/css/clip-path.html")}}</div> +{{EmbedInteractiveExample("pages/css/clip-path.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ clip-path: none; -/* <var><clip-source></var> 値 */ +/* <clip-source> 値 */ clip-path: url(resources.svg#c1); -/* <var><geometry-box></var> 値 */ +/* <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; -/* <var><basic-shape></var> 値 */ +/* <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; -</pre> - -<p><code>clip-path</code> プロパティは、以下に挙げた値のうちの一つまたは組み合わせで指定します。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><var><clip-source></var></code></dt> - <dd><a href="/ja/docs/Web/SVG">SVG</a> の {{SVGElement("clipPath")}} 要素を参照する {{cssxref("<url>")}} です。</dd> - <dt>{{cssxref("<basic-shape>")}}</dt> - <dd><code><geometry-box></code> 値で寸法と位置が定義されるシェイプです。ジオメトリボックスが指定されない場合、参照ボックスとして <code>border-box</code> が使用されます。</dd> - <dt><code><var><geometry-box></var></code></dt> - <dd><code><var><basic-shape></var></code> と共に指定された場合、この値は基本シェイプの参照ボックスを定義します。単独で指定された場合、指定のボックスの辺を、角の形 ({{cssxref("border-radius")}} など) を含めてクリッピングパスにします。ジオメトリボックスは以下の値のうちの一つが指定できます。</dd> - <dd> - <dl> - <dt><code>margin-box</code></dt> - <dd><a href="/ja/docs/Web/CSS/CSS_Shapes/From_box_values#margin-box">マージンボックス</a>を参照ボックスとして使用します。</dd> - <dt><code>border-box</code></dt> - <dd><a href="/ja/docs/Web/CSS/CSS_Shapes/From_box_values#border-box">境界ボックス</a>を参照ボックスとして使用します。</dd> - <dt><code>padding-box</code></dt> - <dd><a href="/ja/docs/Web/CSS/CSS_Shapes/From_box_values#padding-box">パディングボックス</a>を参照ボックスとして使用します。</dd> - <dt><code>content-box</code></dt> - <dd><a href="/ja/docs/Web/CSS/CSS_Shapes/From_box_values#content-box">コンテンボックス</a>を参照ボックスとして使用します。</dd> - <dt><code>fill-box</code></dt> - <dd>オブジェクトの境界ボックスを参照ボックスとして使用します。</dd> - <dt><code>stroke-box</code></dt> - <dd>ストロークの境界ボックスを参照ボックスとして使用します。</dd> - <dt><code>view-box</code></dt> - <dd>最も近い SVG のビューポートを参照ボックスとして使用します。 SVG のビューポートを作成する要素に {{SVGAttr("viewBox")}} 属性が指定されている場合、参照ボックスは <code>viewBox</code> 属性で指定された座標系の原点に位置し、参照ボックスの寸法は <code>viewBox</code> 属性の width および height 値に設定されます。</dd> - </dl> - </dd> - <dt><code>none</code></dt> - <dd>クリッピングパスは作成されません。</dd> -</dl> - -<div class="note"> -<p><strong>注</strong>: 計算値が <strong><code>none</code></strong> 以外の場合は、新しい<a href="/ja/docs/CSS/Understanding_z-index/The_stacking_context">重ね合わせコンテキスト</a>を生成します。これは、 {{cssxref("opacity")}} が <code>1</code> 以外の値の場合と同様です。</p> -</div> +``` + +`clip-path` プロパティは、以下に挙げた値のうちの一つまたは組み合わせで指定します。 + +### 値 + +- `<clip-source>` + - : {{cssxref("url()")}} で、[SVG](/ja/docs/Web/SVG) の {{SVGElement("clipPath")}} 要素を参照します。 +- {{cssxref("<basic-shape>")}} + + - : `<geometry-box>` 値で寸法と位置が定義されるシェイプです。ジオメトリボックスが指定されない場合、参照ボックスとして `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 のパス定義を用いて形状を定義します。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +- `<geometry-box>` -<p>{{cssinfo}}</p> + - : `<basic-shape>` と共に指定された場合、この値は基本シェイプの参照ボックスを定義します。単独で指定された場合、指定のボックスの辺を、角の形 ({{cssxref("border-radius")}} など) を含めてクリッピングパスにします。ジオメトリボックスは以下の値のうちの一つが指定できます。 -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> + - `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}} -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Comparison_of_HTML_and_SVG" name="Comparison_of_HTML_and_SVG">HTML と SVG の比較</h3> - -<div class="hidden" id="clip-path"> -<pre class="brush: html notranslate"><svg class="defs"> - <defs> - <clipPath id="myPath" clipPathUnits="objectBoundingBox"> - <path d="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" /> - </clipPath> - </defs> -</svg> - -<div class="grid"> - <div class="col"> - <div class="note">clip-path: none</div> - <div class="row"> - <div class="cell"> <span>HTML</span> - <div class="container"> - <p class="none"> - I LOVE<br><em>clipping</em> - </p> - </div> - </div> - <div class="cell"> <span>SVG</span> - <div class="container viewbox"> - <svg viewBox="0 0 192 192"> - <g class="none"> - <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> - </g> - </svg> - </div> - </div> - </div> - - <div class="note">clip-path: url(#myPath)<br><br> +## 例 + +<h3 id="Comparison_of_HTML_and_SVG">HTML と SVG の比較</h3> + +```html hidden +<svg class="defs"> + <defs> + <clipPath id="myPath" clipPathUnits="objectBoundingBox"> + <path d="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" /> + </clipPath> + </defs> +</svg> + +<div class="grid"> + <div class="col"> + <div class="note">clip-path: none</div> + <div class="row"> + <div class="cell"> <span>HTML</span> + <div class="container"> + <p class="none"> + I LOVE<br><em>clipping</em> + </p> + </div> + </div> + <div class="cell"> <span>SVG</span> + <div class="container viewbox"> + <svg viewBox="0 0 192 192"> + <g class="none"> + <rect x="24" y="24" width="144" height="144" /> + <text x="96" y="91">I LOVE</text> + <text x="96" y="109" class="em">clipping</text> + </g> + </svg> + </div> + </div> + </div> + + <div class="note">clip-path: url(#myPath)<br><br> Assuming the following clipPath definition: - <pre> -&lt;svg&gt; - &lt;clipPath id="myPath" clipPathUnits="objectBoundingBox"&gt; - &lt;path d="M0.5,1 + <pre> +<svg> + <clipPath id="myPath" clipPathUnits="objectBoundingBox"> + <path d="M0.5,1 C 0.5,1,0,0.7,0,0.3 A 0.25,0.25,1,1,1,0.5,0.3 A 0.25,0.25,1,1,1,1,0.3 - C 1,0.7,0.5,1,0.5,1 Z" /&gt; - &lt;/clipPath&gt; -&lt;/svg&gt;</pre> - </div> - <div class="row"> - <div class="cell"> <span>HTML</span> - <div class="container"> - <p class="svg"> - I LOVE<br><em>clipping</em> - </p> - </div> - </div> - <div class="cell"> <span>SVG</span> - <div class="container viewbox"> - <svg viewBox="0 0 192 192"> - <g class="svg"> - <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> - </g> - </svg> - </div> - </div> - </div> - - <div class="note">clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z') - </div> - <div class="row"> - <div class="cell"> <span>HTML</span> - <div class="container"> - <p class="svg2"> - I LOVE<br><em>clipping</em> - </p> - </div> - </div> - <div class="cell"> <span>SVG</span> - <div class="container viewbox"> - <svg viewBox="0 0 192 192"> - <g class="svg2"> - <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> - </g> - </svg> - </div> - </div> - </div> - - - - <div class="note">clip-path: circle(25%)</div> - <div class="row"> - <div class="cell"> <span>HTML</span> - <div class="container"> - <p class="shape1"> - I LOVE<br><em>clipping</em> - </p> - </div> - </div> - <div class="cell"> <span>SVG</span> - <div class="container viewbox"> - <svg viewBox="0 0 192 192"> - <g class="shape1"> - <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> - </g> - </svg> - </div> - </div> - </div> - - <div class="note">clip-path: circle(25% at 25% 25%)</div> - <div class="row"> - <div class="cell"> <span>HTML</span> - <div class="container"> - <p class="shape2"> - I LOVE<br><em>clipping</em> - </p> - </div> - </div> - <div class="cell"> <span>SVG</span> - <div class="container viewbox"> - <svg viewBox="0 0 192 192"> - <g class="shape2"> - <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> - </g> - </svg> - </div> - </div> - </div> - - <div class="note">clip-path: fill-box circle(25% at 25% 25%)</div> - <div class="row"> - <div class="cell"> <span>HTML</span> - <div class="container"> - <p class="shape3"> - I LOVE<br><em>clipping</em> - </p> - </div> - </div> - <div class="cell"> <span>SVG</span> - <div class="container viewbox"> - <svg viewBox="0 0 192 192"> - <g class="shape3"> - <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> - </g> - </svg> - </div> - </div> - </div> - - <div class="note">clip-path: stroke-box circle(25% at 25% 25%)</div> - <div class="row"> - <div class="cell"> <span>HTML</span> - <div class="container"> - <p class="shape4"> - I LOVE<br><em>clipping</em> - </p> - </div> - </div> - <div class="cell"> <span>SVG</span> - <div class="container viewbox"> - <svg viewBox="0 0 192 192"> - <g class="shape4"> - <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> - </g> - </svg> - </div> - </div> - </div> - - <div class="note">clip-path: view-box circle(25% at 25% 25%)</div> - <div class="row"> - <div class="cell"> <span>HTML</span> - <div class="container"> - <p class="shape5"> - I LOVE<br><em>clipping</em> - </p> - </div> - </div> - <div class="cell"> <span>SVG</span> - <div class="container viewbox"> - <svg viewBox="0 0 192 192"> - <g class="shape5"> - <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> - </g> - </svg> - </div> - </div> - </div> - - <div class="note">clip-path: margin-box circle(25% at 25% 25%)</div> - <div class="row"> - <div class="cell"> <span>HTML</span> - <div class="container"> - <p class="shape6"> - I LOVE<br><em>clipping</em> - </p> - </div> - </div> - <div class="cell"> <span>SVG</span> - <div class="container viewbox"> - <svg viewBox="0 0 192 192"> - <g class="shape6"> - <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> - </g> - </svg> - </div> - </div> - </div> - - <div class="note">clip-path: border-box circle(25% at 25% 25%)</div> - <div class="row"> - <div class="cell"> <span>HTML</span> - <div class="container"> - <p class="shape7"> - I LOVE<br><em>clipping</em> - </p> - </div> - </div> - <div class="cell"> <span>SVG</span> - <div class="container viewbox"> - <svg viewBox="0 0 192 192"> - <g class="shape7"> - <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> - </g> - </svg> - </div> - </div> - </div> - - <div class="note">clip-path: padding-box circle(25% at 25% 25%)</div> - <div class="row"> - <div class="cell"> <span>HTML</span> - <div class="container"> - <p class="shape8"> - I LOVE<br><em>clipping</em> - </p> - </div> - </div> - <div class="cell"> <span>SVG</span> - <div class="container viewbox"> - <svg viewBox="0 0 192 192"> - <g class="shape8"> - <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> - </g> - </svg> - </div> - </div> - </div> - - <div class="note">clip-path: content-box circle(25% at 25% 25%)</div> - <div class="row"> - <div class="cell"> <span>HTML</span> - <div class="container"> - <p class="shape9"> - I LOVE<br><em>clipping</em> - </p> - </div> - </div> - <div class="cell"> <span>SVG</span> - <div class="container viewbox"> - <svg viewBox="0 0 192 192"> - <g class="shape9"> - <rect x="24" y="24" width="144" height="144" /> - <text x="96" y="91">I LOVE</text> - <text x="96" y="109" class="em">clipping</text> - </g> - </svg> - </div> - </div> - </div> - </div> -</div></pre> - -<pre class="brush: css notranslate">html,body { + C 1,0.7,0.5,1,0.5,1 Z" /> + </clipPath> +</svg></pre> + </div> + <div class="row"> + <div class="cell"> <span>HTML</span> + <div class="container"> + <p class="svg"> + I LOVE<br><em>clipping</em> + </p> + </div> + </div> + <div class="cell"> <span>SVG</span> + <div class="container viewbox"> + <svg viewBox="0 0 192 192"> + <g class="svg"> + <rect x="24" y="24" width="144" height="144" /> + <text x="96" y="91">I LOVE</text> + <text x="96" y="109" class="em">clipping</text> + </g> + </svg> + </div> + </div> + </div> + + <div class="note">clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z') + </div> + <div class="row"> + <div class="cell"> <span>HTML</span> + <div class="container"> + <p class="svg2"> + I LOVE<br><em>clipping</em> + </p> + </div> + </div> + <div class="cell"> <span>SVG</span> + <div class="container viewbox"> + <svg viewBox="0 0 192 192"> + <g class="svg2"> + <rect x="24" y="24" width="144" height="144" /> + <text x="96" y="91">I LOVE</text> + <text x="96" y="109" class="em">clipping</text> + </g> + </svg> + </div> + </div> + </div> + + <div class="note">clip-path: circle(25%)</div> + <div class="row"> + <div class="cell"> <span>HTML</span> + <div class="container"> + <p class="shape1"> + I LOVE<br><em>clipping</em> + </p> + </div> + </div> + <div class="cell"> <span>SVG</span> + <div class="container viewbox"> + <svg viewBox="0 0 192 192"> + <g class="shape1"> + <rect x="24" y="24" width="144" height="144" /> + <text x="96" y="91">I LOVE</text> + <text x="96" y="109" class="em">clipping</text> + </g> + </svg> + </div> + </div> + </div> + + <div class="note">clip-path: circle(25% at 25% 25%)</div> + <div class="row"> + <div class="cell"> <span>HTML</span> + <div class="container"> + <p class="shape2"> + I LOVE<br><em>clipping</em> + </p> + </div> + </div> + <div class="cell"> <span>SVG</span> + <div class="container viewbox"> + <svg viewBox="0 0 192 192"> + <g class="shape2"> + <rect x="24" y="24" width="144" height="144" /> + <text x="96" y="91">I LOVE</text> + <text x="96" y="109" class="em">clipping</text> + </g> + </svg> + </div> + </div> + </div> + + <div class="note">clip-path: fill-box circle(25% at 25% 25%)</div> + <div class="row"> + <div class="cell"> <span>HTML</span> + <div class="container"> + <p class="shape3"> + I LOVE<br><em>clipping</em> + </p> + </div> + </div> + <div class="cell"> <span>SVG</span> + <div class="container viewbox"> + <svg viewBox="0 0 192 192"> + <g class="shape3"> + <rect x="24" y="24" width="144" height="144" /> + <text x="96" y="91">I LOVE</text> + <text x="96" y="109" class="em">clipping</text> + </g> + </svg> + </div> + </div> + </div> + + <div class="note">clip-path: stroke-box circle(25% at 25% 25%)</div> + <div class="row"> + <div class="cell"> <span>HTML</span> + <div class="container"> + <p class="shape4"> + I LOVE<br><em>clipping</em> + </p> + </div> + </div> + <div class="cell"> <span>SVG</span> + <div class="container viewbox"> + <svg viewBox="0 0 192 192"> + <g class="shape4"> + <rect x="24" y="24" width="144" height="144" /> + <text x="96" y="91">I LOVE</text> + <text x="96" y="109" class="em">clipping</text> + </g> + </svg> + </div> + </div> + </div> + + <div class="note">clip-path: view-box circle(25% at 25% 25%)</div> + <div class="row"> + <div class="cell"> <span>HTML</span> + <div class="container"> + <p class="shape5"> + I LOVE<br><em>clipping</em> + </p> + </div> + </div> + <div class="cell"> <span>SVG</span> + <div class="container viewbox"> + <svg viewBox="0 0 192 192"> + <g class="shape5"> + <rect x="24" y="24" width="144" height="144" /> + <text x="96" y="91">I LOVE</text> + <text x="96" y="109" class="em">clipping</text> + </g> + </svg> + </div> + </div> + </div> + + <div class="note">clip-path: margin-box circle(25% at 25% 25%)</div> + <div class="row"> + <div class="cell"> <span>HTML</span> + <div class="container"> + <p class="shape6"> + I LOVE<br><em>clipping</em> + </p> + </div> + </div> + <div class="cell"> <span>SVG</span> + <div class="container viewbox"> + <svg viewBox="0 0 192 192"> + <g class="shape6"> + <rect x="24" y="24" width="144" height="144" /> + <text x="96" y="91">I LOVE</text> + <text x="96" y="109" class="em">clipping</text> + </g> + </svg> + </div> + </div> + </div> + + <div class="note">clip-path: border-box circle(25% at 25% 25%)</div> + <div class="row"> + <div class="cell"> <span>HTML</span> + <div class="container"> + <p class="shape7"> + I LOVE<br><em>clipping</em> + </p> + </div> + </div> + <div class="cell"> <span>SVG</span> + <div class="container viewbox"> + <svg viewBox="0 0 192 192"> + <g class="shape7"> + <rect x="24" y="24" width="144" height="144" /> + <text x="96" y="91">I LOVE</text> + <text x="96" y="109" class="em">clipping</text> + </g> + </svg> + </div> + </div> + </div> + + <div class="note">clip-path: padding-box circle(25% at 25% 25%)</div> + <div class="row"> + <div class="cell"> <span>HTML</span> + <div class="container"> + <p class="shape8"> + I LOVE<br><em>clipping</em> + </p> + </div> + </div> + <div class="cell"> <span>SVG</span> + <div class="container viewbox"> + <svg viewBox="0 0 192 192"> + <g class="shape8"> + <rect x="24" y="24" width="144" height="144" /> + <text x="96" y="91">I LOVE</text> + <text x="96" y="109" class="em">clipping</text> + </g> + </svg> + </div> + </div> + </div> + + <div class="note">clip-path: content-box circle(25% at 25% 25%)</div> + <div class="row"> + <div class="cell"> <span>HTML</span> + <div class="container"> + <p class="shape9"> + I LOVE<br><em>clipping</em> + </p> + </div> + </div> + <div class="cell"> <span>SVG</span> + <div class="container viewbox"> + <svg viewBox="0 0 192 192"> + <g class="shape9"> + <rect x="24" y="24" width="144" height="144" /> + <text x="96" y="91">I LOVE</text> + <text x="96" y="109" class="em">clipping</text> + </g> + </svg> + </div> + </div> + </div> + </div> +</div> +``` + +```css +html,body { height: 100%; box-sizing: border-box; background: #EEE; @@ -519,103 +529,72 @@ svg text { svg text.em { font-style: italic; -}</pre> -</div> - -<p>{{EmbedLiveSample("Comparison_of_HTML_and_SVG", "100%", 800, "", "", "example-outcome-frame")}}</p> - -<h3 id="Complete_example" name="Complete_example">完全な例</h3> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><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> -</pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">#clipped { +} +``` + +{{EmbedLiveSample("Comparison_of_HTML_and_SVG", "100%", 800, "", "", "example-outcome-frame")}} + +<h3 id="Complete_example">完全な例</h3> + +#### HTML + +```html +<img id="clipped" src="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 + +```css +#clipped { margin-bottom: 20px; clip-path: url(#cross); } -</pre> - -<div class="hidden"> -<h4 id="JavaScript">JavaScript</h4> +``` -<pre class="brush: js notranslate">const clipPathSelect = document.getElementById("clipPath"); +```js hidden +const clipPathSelect = document.getElementById("clipPath"); clipPathSelect.addEventListener("change", function (evt) { document.getElementById("clipped").style.clipPath = evt.target.value; }); -</pre> -</div> +``` + +#### 結果 + +{{EmbedLiveSample("Complete_example", 230, 250)}} -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample("Complete_example", 230, 250)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Shapes 2", "#supported-basic-shapes", 'path')}}</td> - <td>{{Spec2('CSS Shapes 2')}}</td> - <td><code>path()</code> を定義。</td> - </tr> - <tr> - <td>{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}</td> - <td>{{Spec2('CSS Masks')}}</td> - <td>適用範囲を HTML 要素に拡張。 <code>clip-path</code> プロパティが非推奨の {{cssxref("clip")}} プロパティを置き換えた。</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>初回定義 (SVG 要素のみに適用)。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.clip-path")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/">Shapes in clipping and masking – and how to use them</a></li> - <li>CSS プロパティ: {{cssxref("mask")}}, {{cssxref("filter")}}</li> - <li><a href="/ja/docs/Applying_SVG_effects_to_HTML_content">SVG 効果の HTML コンテンツへの適用</a></li> +## 仕様書 + +{{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) <li>SVG 属性: - <ul> - <li>{{SVGAttr("clip-path")}}</li> - <li>{{SVGAttr("clip-rule")}}</li> - </ul> - </li> - <li><a href="http://www.coding-dude.com/wp/css/css-circle-image/">CSS Circle Image</a> ({{SVGAttr("clip-path")}} およびその他のメソッドを使用)</li> -</ul> + + - {{SVGAttr("clip-path")}} + - {{SVGAttr("clip-rule")}} diff --git a/files/ja/web/css/clip/index.md b/files/ja/web/css/clip/index.md index b36aacad45..2aca83b443 100644 --- a/files/ja/web/css/clip/index.md +++ b/files/ja/web/css/clip/index.md @@ -3,55 +3,63 @@ title: clip slug: Web/CSS/clip tags: - CSS - - CSS Reference + - CSS マスク + - CSS プロパティ + - 非推奨 + - リファレンス + - recipe:css-property +browser-compat: css.properties.clip translation_of: Web/CSS/clip --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><strong><code>clip</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素のどの部分が可視であるかを定義します。 <code>clip</code> プロパティは絶対配置された要素、つまり {{cssxref("position","position:absolute")}} または {{cssxref("position","position:fixed")}} を持つ要素だけに適用されます。</span></p> +**`clip`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素のどの部分が可視であるかを定義します。 `clip` プロパティは絶対配置された要素、つまり {{cssxref("position","position:absolute")}} または {{cssxref("position","position:fixed")}} を持つ要素だけに適用されます。 -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ clip: auto; -/* <shape> 値 */ +/* <shape> 値 */ clip: rect(1px, 10em, 3rem, 2ch); /* グローバル値 */ clip: inherit; clip: initial; -clip: unset;</pre> +clip: revert; +clip: unset; +``` -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<div class="note"> -<p><strong>注:</strong> 可能であれば、より新しい {{cssxref("clip-path")}} を使うことをお勧めします。</p> -</div> +> **Note:** 可能であれば、より新しい {{cssxref("clip-path")}} を使うことをお勧めします。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt>{{cssxref("<shape>")}}</dt> - <dd><code>rect(<top>, <right>, <bottom>, <left>)</code> 形式の矩形の {{cssxref("<shape>")}} です。 <code><top></code> と <code><bottom></code> は、ボックス境界の上辺からのオフセットを表します。<code><right></code> と <code><left></code> は、ボックス境界の左辺からのオフセットを表します。これがボックスの中身となります。</dd> - <dd><code><top></code>、<code><right></code>、<code><bottom></code>、<code><left></code> の値は {{cssxref("<length>")}} または <code>auto</code> のいずれかです。<code>auto</code> が指定されると、その辺のボックス境界で切り取られます。</dd> - <dt><code>auto</code></dt> - <dd>要素はクリップされません (既定値)。ボックス境界で切り取る <code>rect(auto, auto, auto, auto)</code> とはまったく異なることに注意してください。</dd> -</dl> +- {{cssxref("shape")}} -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> + - : `rect(<top>, <right>, <bottom>, <left>)` 形式の矩形の {{cssxref("<shape>")}} です。 `<top>` と `<bottom>` は、ボックス境界の上辺からのオフセットを表します。`<right>` と `<left>` は、ボックス境界の左辺からのオフセットを表します。これがボックスの中身となります。 -<p>{{cssinfo}}</p> + `<top>`、`<right>`、`<bottom>`、`<left>` の値は {{cssxref("<length>")}} または `auto` のいずれかです。`auto` が指定されると、その辺の*内部のボックス境界*で切り取られます。 -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +- `auto` + - : 要素はクリップされません (既定値)。ボックス境界で切り取る `rect(auto, auto, auto, auto)` とはまったく異なることに注意してください。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Clipping_an_image" name="Clipping_an_image">画像の切り抜き</h3> +<h3 id="Clipping_an_image">画像の切り抜き</h3> -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush:css notranslate">.dotted-border { +```css +.dotted-border { border: dotted; position: relative; width: 536px; @@ -70,7 +78,6 @@ clip: unset;</pre> clip: rect(0, 175px, 113px, 0); } - #middle { left: 280px; clip: rect(119px, 255px, 229px, 80px); @@ -79,52 +86,33 @@ clip: unset;</pre> #bottom-right { left: 200px; clip: rect(235px, 335px, 345px, 160px); -}</pre> - -<h4 id="HTML">HTML</h4> - -<pre class="brush:html notranslate"><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></pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('Clipping_an_image', '689px', '410px')}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Masks', '#clip-property', 'clip')}}</td> - <td>{{Spec2('CSS Masks')}}</td> - <td><code>clip</code> プロパティを非推奨とし、代わりに {{cssxref("clip-path")}} を提案。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'visufx.html#clipping', 'clip')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.clip")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>このプロパティは非推奨です。代わりに {{cssxref("clip-path")}} を使ってください。</li> - <li>関連する CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{cssxref("overflow-x")}}, {{cssxref("overflow-y")}}, {{cssxref("overflow")}}, {{cssxref("display")}}, {{cssxref("position")}}</li> -</ul> +} +``` + +#### HTML + +```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')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは非推奨です。代わりに {{cssxref("clip-path")}} を使ってください。 +- 関連する CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{cssxref("overflow-x")}}, {{cssxref("overflow-y")}}, {{cssxref("overflow")}}, {{cssxref("display")}}, {{cssxref("position")}} diff --git a/files/ja/web/css/css_masking/index.md b/files/ja/web/css/css_masking/index.md index 39b0d5dfa6..d47bf4138b 100644 --- a/files/ja/web/css/css_masking/index.md +++ b/files/ja/web/css/css_masking/index.md @@ -4,72 +4,43 @@ slug: Web/CSS/CSS_Masking tags: - CSS - CSS マスク - - Overview - - Reference + - ガイド - 概要 + - リファレンス translation_of: Web/CSS/CSS_Masking --- -<div>{{CSSRef}}</div> - -<p><ruby><strong>CSS マスク</strong><rp> (</rp><rt>CSS Masking</rt><rp>) </rp></ruby>は <a href="/ja/docs/Web/CSS">CSS</a> のモジュールの一つで、マスク、クリップを含め、可視要素の一部または全部のを隠すための方法を定義します。</p> - -<h2 id="Reference" name="Reference">リファレンス</h2> - -<h3 id="Properties" name="Properties">プロパティ</h3> - -<div class="index"> -<ul> - <li>{{cssxref("clip")}} {{deprecated_inline}}</li> - <li>{{cssxref("clip-path")}}</li> - <li>{{cssxref("clip-rule")}}</li> - <li>{{cssxref("mask")}}</li> - <li>{{cssxref("mask-border")}}</li> - <li>{{cssxref("mask-border-mode")}}</li> - <li>{{cssxref("mask-border-outset")}}</li> - <li>{{cssxref("mask-border-repeat")}}</li> - <li>{{cssxref("mask-border-slice")}}</li> - <li>{{cssxref("mask-border-source")}}</li> - <li>{{cssxref("mask-border-width")}}</li> - <li>{{cssxref("mask-clip")}}</li> - <li>{{cssxref("mask-composite")}}</li> - <li>{{cssxref("mask-image")}}</li> - <li>{{cssxref("mask-mode")}}</li> - <li>{{cssxref("mask-origin")}}</li> - <li>{{cssxref("mask-position")}}</li> - <li>{{cssxref("mask-repeat")}}</li> - <li>{{cssxref("mask-size")}}</li> - <li>{{cssxref("mask-type")}}</li> -</ul> -</div> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Masks")}}</td> - <td>{{Spec2("CSS Masks")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<h3 id="mask_プロパティ"><code>mask</code> プロパティ</h3> - -<div> -<p>{{Compat("css.properties.mask")}}</p> -</div> +{{CSSRef}} + +**CSS マスク** (CSS Masking) は [CSS](/ja/docs/Web/CSS) のモジュールの一つで、マスク、クリップを含め、可視要素の一部または全部のを隠すための方法を定義します。 + +## リファレンス + +### プロパティ + +- {{cssxref("clip")}} {{deprecated_inline}} +- {{cssxref("clip-path")}} +- {{cssxref("clip-rule")}} +- {{cssxref("mask")}} +- {{cssxref("mask-border")}} +- {{cssxref("mask-border-mode")}} +- {{cssxref("mask-border-outset")}} +- {{cssxref("mask-border-repeat")}} +- {{cssxref("mask-border-slice")}} +- {{cssxref("mask-border-source")}} +- {{cssxref("mask-border-width")}} +- {{cssxref("mask-clip")}} +- {{cssxref("mask-composite")}} +- {{cssxref("mask-image")}} +- {{cssxref("mask-mode")}} +- {{cssxref("mask-origin")}} +- {{cssxref("mask-position")}} +- {{cssxref("mask-repeat")}} +- {{cssxref("mask-size")}} +- {{cssxref("mask-type")}} + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| -------------------------------------------------------------------------------- | ---------------------------- | ------------------ | +| {{SpecName("CSS Masks")}} | {{Spec2("CSS Masks")}} | | +| {{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}} | {{Spec2('SVG1.1')}} | 初回定義 | diff --git a/files/ja/web/css/mask-border-mode/index.md b/files/ja/web/css/mask-border-mode/index.md index bf0ed9a8ad..015ce7f9b1 100644 --- a/files/ja/web/css/mask-border-mode/index.md +++ b/files/ja/web/css/mask-border-mode/index.md @@ -3,12 +3,12 @@ title: mask-border-mode slug: Web/CSS/mask-border-mode tags: - CSS - - CSS Masking + - CSS マスク - CSS プロパティ - 実験的 - NeedsContent - NeedsExample - - Reference + - リファレンス - recipe:css-property browser-compat: css.properties.mask-border-mode translation_of: Web/CSS/mask-border-mode diff --git a/files/ja/web/css/mask-border-outset/index.md b/files/ja/web/css/mask-border-outset/index.md index 521d9b411b..4b5b087183 100644 --- a/files/ja/web/css/mask-border-outset/index.md +++ b/files/ja/web/css/mask-border-outset/index.md @@ -3,12 +3,12 @@ title: mask-border-outset slug: Web/CSS/mask-border-outset tags: - CSS - - CSS Masking + - CSS マスク - CSS プロパティ - 実験的 - NeedsCompatTable - NeedsExample - - Reference + - リファレンス - recipe:css-property browser-compat: css.properties.mask-border-outset translation_of: Web/CSS/mask-border-outset @@ -26,10 +26,10 @@ mask-border-outset: 1rem; /* <number> 値 */ mask-border-outset: 1.5; -/* 垂直 | 水平 */ +/* 上下 | 左右 */ mask-border-outset: 1 1.2; -/* 上 | 水平 | 下 */ +/* 上 | 左右 | 下 */ mask-border-outset: 30px 2 45px; /* 上 | 右 | 下 | 左 */ diff --git a/files/ja/web/css/mask-border-repeat/index.md b/files/ja/web/css/mask-border-repeat/index.md index b70a3d38d7..2f35afb536 100644 --- a/files/ja/web/css/mask-border-repeat/index.md +++ b/files/ja/web/css/mask-border-repeat/index.md @@ -3,12 +3,12 @@ title: mask-border-repeat slug: Web/CSS/mask-border-repeat tags: - CSS - - CSS Masking + - CSS マスク - CSS プロパティ - 実験的 - NeedsCompatTable - NeedsExample - - Reference + - リファレンス - recipe:css-property browser-compat: css.properties.mask-border-repeat translation_of: Web/CSS/mask-border-repeat diff --git a/files/ja/web/css/mask-border-slice/index.md b/files/ja/web/css/mask-border-slice/index.md index 74eda39503..ce8a474c79 100644 --- a/files/ja/web/css/mask-border-slice/index.md +++ b/files/ja/web/css/mask-border-slice/index.md @@ -3,12 +3,12 @@ title: mask-border-slice slug: Web/CSS/mask-border-slice tags: - CSS - - CSS Masking + - CSS マスク - CSS プロパティ - 実験的 - NeedsCompatTable - NeedsExample - - Reference + - リファレンス - recipe:css-property browser-compat: css.properties.mask-border-slice translation_of: Web/CSS/mask-border-slice @@ -64,7 +64,7 @@ mask-border-slice: unset; 分割する過程で、4 つの角、4 つの辺、それに中央領域の計 9 つの領域を作成します。それぞれの辺からの距離で設定される 4 本の分割線が、領域の寸法を制御します。 -[](border-image-slice.png) +[](border-image-slice.png) 上の図は、それぞれの領域の位置を説明しています。 @@ -118,4 +118,4 @@ Chromium ベースのブラウザーは、このプロパティの古い版 — - {{cssxref("mask-border-repeat")}} - {{cssxref("mask-border-source")}} - {{cssxref("mask-border-width")}} -- [Illustrated description of the 1-to-4-value syntax](/ja/docs/Web/CSS/Shorthand_properties#tricky_edge_cases) +- [値 1 ～ 4 つの構文の説明](/ja/docs/Web/CSS/Shorthand_properties#tricky_edge_cases) diff --git a/files/ja/web/css/mask-border-source/index.md b/files/ja/web/css/mask-border-source/index.md index 9454167e1c..df2fea1ac8 100644 --- a/files/ja/web/css/mask-border-source/index.md +++ b/files/ja/web/css/mask-border-source/index.md @@ -3,12 +3,12 @@ title: mask-border-source slug: Web/CSS/mask-border-source tags: - CSS - - CSS Masking + - CSS マスク - CSS プロパティ - 実験的 - NeedsCompatTable - NeedsExample - - Reference + - リファレンス - recipe:css-property browser-compat: css.properties.mask-border-source translation_of: Web/CSS/mask-border-source @@ -22,7 +22,7 @@ translation_of: Web/CSS/mask-border-source ## 構文 ```css -/* Keyword 値 */ +/* キーワード値 */ mask-border-source: none; /* <image> 値 */ diff --git a/files/ja/web/css/mask-border-width/index.md b/files/ja/web/css/mask-border-width/index.md index 221a8615e3..921c81dde6 100644 --- a/files/ja/web/css/mask-border-width/index.md +++ b/files/ja/web/css/mask-border-width/index.md @@ -3,12 +3,12 @@ title: mask-border-width slug: Web/CSS/mask-border-width tags: - CSS - - CSS Masking + - CSS マスク - CSS プロパティ - 実験的 - NeedsCompatTable - NeedsExample - - Reference + - リファレンス - recipe:css-property browser-compat: css.properties.mask-border-width translation_of: Web/CSS/mask-border-width diff --git a/files/ja/web/css/mask-border/index.md b/files/ja/web/css/mask-border/index.md index fdea6b7ec8..ce6c489cf9 100644 --- a/files/ja/web/css/mask-border/index.md +++ b/files/ja/web/css/mask-border/index.md @@ -3,9 +3,9 @@ title: mask-border slug: Web/CSS/mask-border tags: - CSS - - CSS Masking + - CSS マスク - CSS プロパティ - - Reference + - リファレンス - recipe:css-shorthand-property browser-compat: css.properties.mask-border translation_of: Web/CSS/mask-border diff --git a/files/ja/web/css/mask-clip/index.md b/files/ja/web/css/mask-clip/index.md index e057a4eeda..10452c8976 100644 --- a/files/ja/web/css/mask-clip/index.md +++ b/files/ja/web/css/mask-clip/index.md @@ -3,18 +3,20 @@ title: mask-clip slug: Web/CSS/mask-clip tags: - CSS - - CSS Masking - - CSS Property - CSS マスク + - CSS プロパティ - Experimental - - Reference + - リファレンス + - recipe:css-property +browser-compat: css.properties.mask-clip translation_of: Web/CSS/mask-clip --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>mask-clip</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、マスクが影響する領域を指定します。要素の描画されるコンテンツはこの領域に制限されます。</p> +**`mask-clip`** は [CSS](/ja/docs/Web/CSS) のプロパティで、マスクが影響する領域を指定します。要素の描画されるコンテンツはこの領域に制限されます。 -<pre class="brush:css no-line-numbers">/* <geometry-box> 値 */ +```css +/* <geometry-box> 値 */ mask-clip: content-box; mask-clip: padding-box; mask-clip: border-box; @@ -39,112 +41,65 @@ mask-clip: view-box, fill-box, border-box; /* グローバル値 */ mask-clip: inherit; mask-clip: initial; +mask-clip: revert; mask-clip: unset; -</pre> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p>1つまたは複数の以下に挙げたキーワード値を、コンマで区切って指定します。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>content-box</code></dt> - <dd>描画されるコンテンツは、コンテンツボックスでクリッピングされます。</dd> - <dt><code>padding-box</code></dt> - <dd>描画されるコンテンツは、パディングボックスでクリッピングされます。</dd> - <dt><code>border-box</code></dt> - <dd>描画されるコンテンツは、境界ボックスでクリッピングされます。</dd> - <dt><code>margin-box</code></dt> - <dd>描画されるコンテンツは、マージンボックスでクリッピングされます。</dd> - <dt><code>fill-box</code></dt> - <dd>描画されるコンテンツは、オブジェクトの囲みボックスでクリッピングされます。</dd> - <dt><code>stroke-box</code></dt> - <dd>描画されるコンテンツは、オブジェクトの輪郭線ボックスでクリッピングされます。</dd> - <dt><code>view-box</code></dt> - <dd>直近の SVG ビューポートを参照ボックスとして使用します。 <code><a href="/ja/docs/Web/SVG/Attribute/viewBox">viewBox</a></code> 属性が SVG ビューポートを作成している要素に指定されると、参照ボックスは <code>viewBox</code> 属性で示された座標系の原点に配置され、参照ボックスの寸法は <code>viewBox</code> 属性の幅と高さに設定されます。</dd> - <dt><code>no-clip</code></dt> - <dd>描画されるコンテンツはクリッピングされません。</dd> - <dt><code>border</code>{{non-standard_inline}}</dt> - <dd>このキーワードは <code>border-box</code> と同じ動作をします。</dd> - <dt><code>padding</code>{{non-standard_inline}}</dt> - <dd>このキーワードは <code>padding-box</code> と同じ動作をします。</dd> - <dt><code>content</code>{{non-standard_inline}}</dt> - <dd>このキーワードは <code>content-box</code> と同じ動作をします。</dd> - <dt><code>text</code>{{non-standard_inline}}</dt> - <dd>このキーワードは要素のテキストでマスク画像をクリッピングします。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +``` + +## 構文 + +1 つまたは複数の以下に挙げたキーワード値を、カンマで区切って指定します。 + +### 値 + +- `content-box` + - : 描画されるコンテンツは、コンテンツボックスで切り取られます。 +- `padding-box` + - : 描画されるコンテンツは、パディングボックスで切り取られます。 +- `border-box` + - : 描画されるコンテンツは、境界ボックスで切り取られます。 +- `margin-box` + - : 描画されるコンテンツは、マージンボックスで切り取られます。 +- `fill-box` + - : 描画されるコンテンツは、オブジェクトの囲みボックスで切り取られます。 +- `stroke-box` + - : 描画されるコンテンツは、オブジェクトの輪郭線ボックスで切り取られます。 +- `view-box` + - : 直近の SVG ビューポートを参照ボックスとして使用します。 [`viewBox`](/ja/docs/Web/SVG/Attribute/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}} + - : このキーワードは要素のテキストでマスク画像を切り取ります。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css highlight[10]">#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 */ -} -</pre> - -<div class="hidden"> -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div id="masked"> -</div> -<select id="clipBox"> - <option value="content-box">content-box</option> - <option value="padding-box">padding-box</option> - <option value="border-box" selected>border-box</option> - <option value="margin-box">margin-box</option> - <option value="fill-box">fill-box</option> - <option value="stroke-box">stroke-box</option> - <option value="view-box">view-box</option> - <option value="no-clip">no-clip</option> -</select> -</pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var clipBox = document.getElementById("clipBox"); -clipBox.addEventListener("change", function (evt) { - document.getElementById("masked").style.maskClip = evt.target.value; -}); -</pre> -</div> - -<p>{{EmbedLiveSample("Example", "220px", "250px")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Masks", "#the-mask-clip", "mask-clip")}}</td> - <td>{{Spec2("CSS Masks")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.mask-clip")}}</p> +## 例 + +### 境界ボックスでマスクを切り取る + +`mask-clip` の値を、上記の許容値のいずれかに変更してください。Chromium ベースのブラウザーでこの例を表示する場合は、`-webkit-mask-clip` の値を変更してください。 + +{{EmbedGHLiveSample("css-examples/masking/mask-clip.html", '100%', 800)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/) diff --git a/files/ja/web/css/mask-composite/index.md b/files/ja/web/css/mask-composite/index.md index a41474ae08..2e530623e8 100644 --- a/files/ja/web/css/mask-composite/index.md +++ b/files/ja/web/css/mask-composite/index.md @@ -3,18 +3,20 @@ title: mask-composite slug: Web/CSS/mask-composite tags: - CSS - - CSS Masking - - CSS Property + - CSS マスク + - CSS プロパティ - Experimental - - Reference - - 'recipe:css-property' + - リファレンス + - recipe:css-property +browser-compat: css.properties.mask-composite translation_of: Web/CSS/mask-composite --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>mask-composite</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、現在のマスクレイヤーとその下のマスクレイヤーとの間で使われる合成操作を表します。</p> +**`mask-composite`** は [CSS](/ja/docs/Web/CSS) のプロパティで、現在のマスクレイヤーとその下のマスクレイヤーとの間で使われる合成操作を表します。 -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ mask-composite: add; mask-composite: subtract; mask-composite: intersect; @@ -23,98 +25,49 @@ mask-composite: exclude; /* グローバル値 */ mask-composite: inherit; mask-composite: initial; +mask-composite: revert; mask-composite: unset; -</pre> +``` -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<p>以下に示す1つまたは複数のキーワード値を、カンマで区切って指定します。</p> +以下に示す 1 つまたは複数のキーワード値を、カンマで区切って指定します。 -<h3 id="Values" name="Values">値</h3> +### 値 -<p>混合において、現在のマスクレイヤーは <em>source</em>、その下にあるすべてのマスクレイヤーは <em>destination</em> とします。</p> +混合において、現在のマスクレイヤーは _source_、その下にあるすべてのマスクレイヤーは _destination_ とします。 -<dl> - <dt><code>add</code></dt> - <dd>source が destination の上に配置されます。</dd> - <dt><code>subtract</code></dt> - <dd>destination の外側に source が配置されます。</dd> - <dt><code>intersect</code></dt> - <dd>destination と重なっている source の部分が destination を置き換えます。</dd> - <dt><code>exclude</code></dt> - <dd>source と destination で重なっていない領域が結合されます。</dd> -</dl> +- `add` + - : source が destination の上に配置されます。 +- `subtract` + - : destination の外側に source が配置されます。 +- `intersect` + - : destination と重なっている source の部分が destination を置き換えます。 +- `exclude` + - : source と destination で重なっていない領域が結合されます。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Compositing_mask_layers_with_addition" name="Compositing_mask_layers_with_addition">追加でマスクレイヤーの合成</h3> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css; highlight[7] notranslate">#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 */ -} -</pre> - -<div class="hidden"> -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><div id="masked"> -</div> -<select id="compositeMode"> - <option value="add">add</option> - <option value="subtract">subtract</option> - <option value="intersect">intersect</option> - <option value="exclude">exclude</option> -</select> -</pre> - -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js notranslate">var clipBox = document.getElementById("compositeMode"); -clipBox.addEventListener("change", function (evt) { - document.getElementById("masked").style.maskComposite = evt.target.value; -}); -</pre> -</div> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample("Compositing_mask_layers_with_addition", "100px", "130px")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Masks", "#the-mask-composite", "mask-composite")}}</td> - <td>{{Spec2("CSS Masks")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.mask-composite")}}</p> +## 例 + +### マスクレイヤーを加算で合成 + +{{EmbedGHLiveSample("css-examples/masking/mask-composite.html", '100%', 550)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/) diff --git a/files/ja/web/css/mask-image/index.md b/files/ja/web/css/mask-image/index.md index 1a08aa35f5..dc98360f75 100644 --- a/files/ja/web/css/mask-image/index.md +++ b/files/ja/web/css/mask-image/index.md @@ -6,20 +6,24 @@ tags: - CSS プロパティ - CSS マスク - Experimental - - Reference + - リファレンス + - recipe:css-property +browser-compat: css.properties.mask-image translation_of: Web/CSS/mask-image --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>mask-image</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素のマスクレイヤーとして使用される画像を設定します。</p> +**`mask-image`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素のマスクレイヤーとして使用される画像を設定します。 +既定では、マスク画像のアルファチャンネルと要素のアルファチャンネルが乗算されることになります。これは {{cssxref("mask-mode")}} プロパティで制御することができます。 -<pre class="brush:css no-line-numbers">/* キーワード値 */ +```css +/* キーワード値 */ mask-image: none; -/* <mask-source> 値 */ +/* <mask-source> 値 */ mask-image: url(masks.svg#mask1); -/* <image> 値 */ +/* <image> 値 */ mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent); mask-image: image(url(mask.png), skyblue); @@ -29,66 +33,44 @@ mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), t /* グローバル値 */ mask-image: inherit; mask-image: initial; +mask-image: revert; mask-image: unset; -</pre> +``` -<p>{{cssinfo}}</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> +### 値 -<h3 id="Values" name="Values">値</h3> +- `none` + - : このキーワードは、透明な黒い画像レイヤーとして解釈されます。 +- `<mask-source>` + - : {{cssxref("url()","url()")}} による {{SVGElement("mask")}} または CSS 画像への参照です。 +- {{cssxref("<image>")}} + - : マスク画像レイヤーとして使用される画像の値です。 -<dl> - <dt><code>none</code></dt> - <dd>このキーワードは、透明な黒い画像レイヤーとして解釈されます。</dd> - <dt><code><mask-source></code></dt> - <dd>{{cssxref("<url>")}} による {{SVGElement("mask")}} または CSS 画像への参照です。</dd> - <dt>{{cssxref("<image>")}}</dt> - <dd>マスク画像レイヤーとして使用される画像の値です。</dd> -</dl> +## 公式定義 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +{{cssinfo}} -{{csssyntax}} +## 形式文法 -<h2 id="Example" name="Example">例</h2> +{{csssyntax}} -<h3 id="CSS">CSS</h3> +## 例 -<pre class="brush: 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); -}</pre> +### マスク画像を URL で設定 -<h3 id="HTML">HTML</h3> +{{EmbedGHLiveSample("css-examples/masking/mask-image.html", '100%', 560)}} -<pre class="brush: html"><div id="masked"></div> -</pre> +## 仕様書 -<p>{{EmbedLiveSample('Example', '100px', '100px', '', '', 'hide-codepen-jsfiddle')}}</p> +{{Specifications}} -<h2 id="Specifications" name="Specifications">仕様書</h2> +## ブラウザーの互換性 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Masks", "#the-mask-image", "mask-image")}}</td> - <td>{{Spec2("CSS Masks")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Compat}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## 関連情報 -<p>{{Compat("css.properties.mask-image")}}</p> +- [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/) +- [Apply effects to images with CSS's mask-image property](https://web.dev/css-masking/) diff --git a/files/ja/web/css/mask-mode/index.md b/files/ja/web/css/mask-mode/index.md index a4f99606b2..dd9e26b2ed 100644 --- a/files/ja/web/css/mask-mode/index.md +++ b/files/ja/web/css/mask-mode/index.md @@ -3,18 +3,20 @@ title: mask-mode slug: Web/CSS/mask-mode tags: - CSS - - CSS Masking - - CSS Property + - CSS マスク + - CSS プロパティ - Experimental - - Reference - - 'recipe:css-property' + - リファレンス + - recipe:css-property +browser-compat: css.properties.mask-mode translation_of: Web/CSS/mask-mode --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>mask-mode</code></strong> プロパティは、 {{cssxref("mask-image")}} で定義されたマスクを、明度とアルファマスクのどちらで扱うかを設定します。</p> +**`mask-mode`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 {{cssxref("mask-image")}} で定義されたマスクを、輝度とアルファマスクのどちらで扱うかを設定します。 -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ mask-mode: alpha; mask-mode: luminance; mask-mode: match-source; @@ -25,95 +27,48 @@ mask-mode: alpha, match-source; /* グローバル値 */ mask-mode: inherit; mask-mode: initial; +mask-mode: revert; mask-mode: unset; -</pre> +``` -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<p><code>mask-mode</code> プロパティは、以下に示す1つ又は複数のキーワード値を、カンマで区切って指定します。</p> +`mask-mode` プロパティは、以下に示す 1 つまたは複数のキーワード値を、カンマで区切って指定します。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code>alpha</code></dt> - <dd>このキーワードは、マスクレイヤーの透過性 (アルファチャンネル) の値をマスクの値として使用することを示します。</dd> - <dt><code>luminance</code></dt> - <dd>このキーワードは、マスクレイヤーの明度の値をマスクの値として使用することを示します。</dd> - <dt><code>match-source</code></dt> - <dd> - <p>{{cssxref("mask-image")}} プロパティが <code><mask-source></code> 型であれば、マスクレイヤー画像の明度の値がマスクの値として使用されます。</p> +- `alpha` + - : このキーワードは、マスクレイヤーの透過性 (アルファチャンネル) の値をマスクの値として使用することを示します。 +- `luminance` + - : このキーワードは、マスクレイヤーの輝度の値をマスクの値として使用することを示します。 +- `match-source` - <p>{{cssxref("<image>")}} 型であれば、マスクレイヤー画像のアルファ値がマスクの値として使用されます。</p> - </dd> -</dl> + - : {{cssxref("mask-image")}} プロパティが `<mask-source>` 型であれば、マスクレイヤー画像の輝度の値がマスクの値として使用されます。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> + {{cssxref("<image>")}} 型であれば、マスクレイヤー画像のアルファ値がマスクの値として使用されます。 -<p>{{cssinfo}}</p> +## 公式定義 -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_alpha_mask_mode" name="Using_alpha_mask_mode">アルファマスクモードの使用</h3> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css; highlight[6] notranslate">#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; /* ライブサンプルで変更することができます */ -} -</pre> - -<div class="hidden"> -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><div id="masked"> -</div> -<select id="maskMode"> - <option value="alpha">alpha</option> - <option value="luminance">luminance</option> - <option value="match-source">match-source</option> -</select> -</pre> - -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js notranslate">var maskMode = document.getElementById("maskMode"); -maskMode.addEventListener("change", function (evt) { - document.getElementById("masked").style.maskMode = evt.target.value; -}); -</pre> -</div> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Using_alpha_mask_mode", 240, 240)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Masks", "#the-mask-mode", "mask-mode")}}</td> - <td>{{Spec2("CSS Masks")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.mask-mode")}}</p> +## 例 + +### アルファマスクモードの使用 + +{{EmbedGHLiveSample("css-examples/masking/mask-mode.html", '100%', 760)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/) 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 --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>mask-origin</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、マスクの基準位置を設定します。</p> +**`mask-origin`** は [CSS](/ja/docs/Web/CSS) のプロパティで、マスクの原点を設定します。 -<pre class="brush:css no-line-numbers">/* キーワード値 */ +```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; -</pre> - -<p>単純なボックスとして描画される要素では、このプロパティはマスクを配置する領域を指定します。言い換えれば、このプロパティは {{cssxref("mask-image")}} CSS プロパティで指定された画像の基準位置を指定します。複数のボックスとして描画される要素、例えば複数行にまたがるインラインボックスや複数のページにまたがるボックスなどでは、マスクの配置領域を決定するために {{cssxref("box-decoration-break")}} がどのボックスに作用するかを指定します。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p>1つまたは複数の以下に挙げたキーワード値を、コンマで区切って指定します。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>content-box</code></dt> - <dd>位置がコンテンツボックスからの相対位置になります。</dd> - <dt><code>padding-box</code></dt> - <dd>位置がパディングボックスからの相対位置になります。単純なボックスでは <code>0 0</code> がパディング境界の左上隅で、 <code>100% 100%</code> は右下隅です。</dd> - <dt><code>border-box</code></dt> - <dd>位置が境界ボックスからの相対位置になります。</dd> - <dt><code>margin-box</code></dt> - <dd>位置がマージンボックスからの相対位置になります。</dd> - <dt><code>fill-box</code></dt> - <dd>位置がオブジェクトの囲みボックスからの相対位置になります。</dd> - <dt><code>stroke-box</code></dt> - <dd>位置が輪郭線ボックスからの相対位置になります。</dd> - <dt><code>view-box</code></dt> - <dd>直近の SVG ビューポートを参照ボックスとして使用します。 {{svgattr("viewBox")}} 属性が SVG ビューポートを作成している要素に指定されると、参照ボックスは <code>viewBox</code> 属性で示された座標系の原点に配置され、参照ボックスの寸法は <code>viewBox</code> 属性の幅と高さに設定されます。</dd> - <dt><code>content</code> {{non-standard_inline}}</dt> - <dd><code>content-box</code> と同じです。</dd> - <dt><code>padding</code> {{non-standard_inline}}</dt> - <dd><code>padding-box</code> と同じです。</dd> - <dt><code>border</code> {{non-standard_inline}}</dt> - <dd><code>border-box</code> と同じです。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +``` + +単純なボックスとして描画される要素では、このプロパティはマスクを配置する領域を指定します。言い換えれば、このプロパティは {{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}} -<h2 id="Example" name="Example">例</h2> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css highlight[9]">#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 */ -} -</pre> - -<div class="hidden"> -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div id="masked"> -</div> -<select id="origin"> - <option value="content-box">content-box</option> - <option value="padding-box">padding-box</option> - <option value="border-box" selected>border-box</option> - <option value="margin-box">margin-box</option> - <option value="fill-box">fill-box</option> - <option value="stroke-box">stroke-box</option> - <option value="view-box">view-box</option> -</select> -</pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var origin = document.getElementById("origin"); -origin.addEventListener("change", function (evt) { - document.getElementById("masked").style.maskOrigin = evt.target.value; -}); -</pre> -</div> - -<p>{{EmbedLiveSample("Example", 160, 200)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Masks", "#the-mask-origin", "mask-origin")}}</td> - <td>{{Spec2("CSS Masks")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.mask-origin")}}</p> +## 例 + +### マスクの原点を 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/) diff --git a/files/ja/web/css/mask-position/index.md b/files/ja/web/css/mask-position/index.md index 9d7f404404..d4003c04ff 100644 --- a/files/ja/web/css/mask-position/index.md +++ b/files/ja/web/css/mask-position/index.md @@ -6,14 +6,17 @@ tags: - CSS プロパティ - CSS マスク - Experimental - - Reference + - リファレンス + - recipe:css-property +browser-compat: css.properties.mask-position translation_of: Web/CSS/mask-position --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>mask-position</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> プロパティで、定義されたマスク画像それぞれについて、 {{cssxref("mask-origin")}} で設定されたマスク位置レイヤーからの相対で初期位置を設定します。</p> +**`mask-position`** は [CSS](/ja/docs/Web/CSS) プロパティで、定義されたマスク画像それぞれについて、 {{cssxref("mask-origin")}} で設定されたマスク位置レイヤーに対する初期位置を設定します。 -<pre class="brush:css no-line-numbers">/* キーワード値 */ +```css +/* キーワード値 */ mask-position: top; mask-position: bottom; mask-position: left; @@ -32,96 +35,44 @@ mask-position: 1rem 1rem, center; /* グローバル値 */ mask-position: inherit; mask-position: initial; +mask-position: revert; mask-position: unset; -</pre> +``` -<p>{{cssinfo}}</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> +1 つ以上の `<position>` 値をカンマで区切ったもの。 -<p>1つ以上の <code><position></code> 値をコンマで区切ったもの。</p> +### 値 -<h3 id="Values" name="Values">値</h3> +- {{cssxref("<position>")}} + - : 要素ボックスの辺からの二次元の位置を表す 1 つから 4 つの値です。相対または絶対オフセットを与えることができます。なお、位置は要素ボックスの外に設定することができます。 -<dl> - <dt>{{cssxref("<position>")}}</dt> - <dd>要素ボックスの辺からの二次元の位置を表す1つから4つの値です。相対または絶対オフセットを与えることができます。なお、位置は要素ボックスの外に設定することができます。</dd> -</dl> +## 公式定義 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css; highlight[13]">#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; -} -</pre> - -<div class="hidden"> -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div id="wrapper"> - <div id="masked"> - </div> -</div> -<select id="maskPosition"> - <option value="top">top</option> - <option value="center">center</option> - <option value="bottom">bottom</option> - <option value="top right" selected>top right</option> - <option value="center center">center center</option> - <option value="bottom left">bottom left</option> - <option value="10px 20px">10px 20px</option> - <option value="60% 20%">60% 20%</option> -</select> -</pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var maskPosition = document.getElementById("maskPosition"); -maskPosition.addEventListener("change", function (evt) { - document.getElementById("masked").style.maskPosition = evt.target.value; -}); -</pre> -</div> - -<p>{{EmbedLiveSample("Example", 290, 290)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Masks", "#the-mask-position", "mask-position")}}</td> - <td>{{Spec2("CSS Masks")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.mask-position")}}</p> +## 例 + +### マスク位置の設定 + +`mask-position` の値を上記の許容値のいずれかに変更してみてください。 +Chromium ベースのブラウザーでこの例を見る場合は、`-webkit-mask-position` の値を変更してください。 + +{{EmbedGHLiveSample("css-examples/masking/mask-position.html", '100%', 760)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/) diff --git a/files/ja/web/css/mask-repeat/index.md b/files/ja/web/css/mask-repeat/index.md new file mode 100644 index 0000000000..d199547710 --- /dev/null +++ b/files/ja/web/css/mask-repeat/index.md @@ -0,0 +1,159 @@ +--- +title: mask-repeat +slug: Web/CSS/mask-repeat +tags: + - CSS + - CSS プロパティ + - CSS マスク + - Experimental + - リファレンス + - recipe:css-property +browser-compat: css.properties.mask-repeat +translation_of: Web/CSS/mask-repeat +--- +{{CSSRef}} + +**`mask-repeat`** は [CSS](/ja/docs/Web/CSS) プロパティで、マスク画像をどのように繰り返すかを設定します。マスク画像は水平軸、垂直軸、両方の軸で繰り返すか、まったく繰り返さないようにすることができます。 + +```css +/* 1 つの値の構文 */ +mask-repeat: repeat-x; +mask-repeat: repeat-y; +mask-repeat: repeat; +mask-repeat: space; +mask-repeat: round; +mask-repeat: no-repeat; + +/* 2 つの値の構文: 水平 | 垂直 */ +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: revert; +mask-repeat: unset; +``` + +既定では、繰り返された画像は要素の寸法でクリッピングされますが、 (`round` を使用して) 大きさが合うように拡大縮小したり、 (`space` を使用して) 端から端まで等分に配分したりすることができます。 + +## 構文 + +1 つ以上の `<repeat-style>` 値をカンマ区切りで指定します。 + +### 値 + +- `<repeat-style>` + + - : 単一の値の構文は、2 つの値の構文の一括指定です。 + + <table class="standard-table"> + <thead> + <tr> + <th>単一の値</th> + <th>同等の 2 つの値</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>repeat-x</code></td> + <td><code>repeat no-repeat</code></td> + </tr> + <tr> + <td><code>repeat-y</code></td> + <td><code>no-repeat repeat</code></td> + </tr> + <tr> + <td><code>repeat</code></td> + <td><code>repeat repeat</code></td> + </tr> + <tr> + <td><code>space</code></td> + <td><code>space space</code></td> + </tr> + <tr> + <td><code>round</code></td> + <td><code>round round</code></td> + </tr> + <tr> + <td><code>no-repeat</code></td> + <td><code>no-repeat no-repeat</code></td> + </tr> + </tbody> + </table> + + 2 つの値の構文では、1 つ目の値が水平方向の繰り返しの動作を表し、2 つ目の値が垂直方向の動作を表します。それぞれのオプションが各方向にどのように動作するのかを説明します。 + + <table class="standard-table"> + <tbody> + <tr> + <td><code>repeat</code></td> + <td> + 画像がマスク描画領域全体を埋めるのに必要なだけ繰り返されます。最後の画像は合わない時には切り取られます。 + </td> + </tr> + <tr> + <td><code>space</code></td> + <td> + 画像は切り取られずにできる限り繰り返されます。最初と最後の画像は要素の両端に位置し、画像間に均等に余白が配分されます。 {{cssxref("mask-position")}} プロパティは、1つだけの画像が切り取られずに表示される場合を除いて無視されます。 <code>space</code> を使用して切り取りが発生するのは、1つの画像を表示する十分な大きさがない場合だけです。 + </td> + </tr> + <tr> + <td><code>round</code></td> + <td> + 利用できる空間の寸法が拡大した場合、繰り返される画像は (すき間をおかずに) もう一つ追加するだけの余地ができるまで引き伸ばされます。次の画像が追加されるとき、現在の画像は場所を空けるために縮小されます。例えば、元の幅が 260px の画像が3回繰り返されたとき、それぞれの反復の幅は 300px まで拡大する可能性があり、もう一つの画像が追加されると、 225px まで縮小されます。 + </td> + </tr> + <tr> + <td><code>no-repeat</code></td> + <td> + 画像は繰り返されません (また、描画領域のマスクは全体を覆うとは限りません)。繰り返されないマスク画像の位置は {{cssxref("mask-position")}} CSS プロパティで定義されます。 + </td> + </tr> + </tbody> + </table> + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 単一のマスクの反復設定 + +{{EmbedGHLiveSample("css-examples/masking/mask-repeat.html", '100%', 700)}} + +<h3 id="Multiple_mask_image_support">複数のマスク画像の対応</h3> + +それぞれのマスク画像に異なる `<repeat-style>` を、カンマで区切って指定することができます。 + +```css +.examplethree { + mask-image: url('mask1.png'), url('mask2.png'); + mask-repeat: repeat-x, repeat-y; +} +``` + +それぞれの画像は最初のものから最後のものに向けて、それぞれの繰り返しスタイルに対応します。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/) diff --git a/files/ja/web/css/mask-size/index.md b/files/ja/web/css/mask-size/index.md index 9852c3f6f2..5f807d9e1c 100644 --- a/files/ja/web/css/mask-size/index.md +++ b/files/ja/web/css/mask-size/index.md @@ -3,116 +3,117 @@ title: mask-size slug: Web/CSS/mask-size tags: - CSS - - CSS Masking - - CSS Property + - CSS マスク + - CSS プロパティ - Experimental - - Reference + - リファレンス - recipe:css-property browser-compat: css.properties.mask-size +translation_of: Web/CSS/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. +**`mask-size`** は [CSS](/ja/docs/Web/CSS) のプロパティで、マスク画像の寸法を指定します。画像の寸法は、その本質的な比率を維持するために、完全または部分的に制約を受けることがあります。 ```css -/* Keywords syntax */ +/* キーワード構文 */ mask-size: cover; mask-size: contain; -/* One-value syntax */ -/* the width of the image (height set to 'auto') */ +/* 値 1 つの構文 */ +/* 画像の幅 (高さは '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 */ +/* 値 2 つの構文 */ +/* 1 つ目の値: 画像の幅、2 つ目の値: 高さ */ 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: 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. +> **Note:** `mask-size` の後に要素に {{cssxref("mask")}} 一括指定プロパティが指定され、このプロパティの値が設定されていない場合、このプロパティの値は、一括指定プロパティによって初期値にリセットされます。 -## Syntax +## 構文 -One or more `<bg-size>` values, separated by commas. +1 つ以上の `<bg-size>` 値で、カンマ区切りです。 -A `<bg-size>` can be specified in one of three ways: +`<bg-size>` 次の 3 つの方法のうち 1 つで指定することができます。 -- using the keyword [`contain`](#contain) -- using the keyword [`cover`](#cover) -- using width and height values +- `contain` キーワードの使用 +- `cover` キーワードの使用 +- 幅の高さの値の使用 -To specify a size using width and height, you can supply one or two values: +幅と高さを使って大きさを指定するには、1 つまたは 2 つの値を指定します。 -- 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. +- 値が 1 つしか与えられていない場合は、幅が設定され、高さは `auto` に設定されます。 +- 2つの値が与えられた場合、1 つ目の値で幅を、2 つ目の値で高さを設定します。 -Each value can be a `<length>`, a `<percentage>`, or `auto`. +それぞれの値は `<length>`、`<percentage>`、`auto` の何れかです。 -### Values +### 値 - `<length>` - - : A `{{cssxref("<length>")}}` value scales the mask image to the specified length in the corresponding dimension. Negative lengths are not allowed. + - : `{{cssxref("<length>")}}` の値は、マスク画像の対応する軸を、指定された長さに拡大縮小します。負の長さは許可されていません。 - `<percentage>` - - : 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. + - : {{cssxref("<percentage>")}} の値は、マスク画像の対応する軸を、{{cssxref("mask-origin")}} の値で決定されるマスク配置領域に対する指定されたパーセント値に拡大縮小します。マスク配置領域は、既定では、ボックスのコンテンツとそのパディングを含む領域ですが、コンテンツのみの領域や、境界、パディング、コンテンツを含む領域に変更することもできます。負のパーセント値は許されません。 - `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")}}. + - : 画像を可能な限り大きく拡大し、画像のアスペクト比を維持する (画像がゆがまない) ようにするキーワードです。画像はコンテナー内で*レターボックス*になります。画像は、{{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. + - : `contain` の逆バージョンのキーワードです。画像を可能な限り大きく拡大縮小し、画像のアスペクト比を維持する (画像がゆがまない) ようにします。画像は、コンテナーの幅または高さ全体を「カバー」します。画像とコンテナーの寸法が異なる場合、_画像は左右または上下のいずれかで切り取られます。 -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. +- `mask-size` の両方の要素が指定され、`auto` ではない場合 + - : マスク画像は指定された寸法で描画されます。 +- `mask-size` が `contain` または `cover` であった場合 + - : 画像は、マスク配置領域に含まれる、またはマスク配置領域を覆う最大の寸法で、その固有の縦横比を維持して描画されます。画像が固有の縦横比を持たない場合は、マスク配置領域の大きさで描画されます。 +- `mask-size` が `auto` または `auto auto` であった場合 + - : 画像に両方の固有の寸法がある場合は、その寸法で描画されます。固有の寸法がなく、固有の比率もない場合は、マスク配置領域の寸法で描画されます。固有の寸法がなく、縦横比がある場合は、代わりに `contain` が指定されたかのように描画されます。画像が 1 つの固有の寸法と縦横比を持っている場合、その 1 つの寸法と縦横比で決まる寸法で描画されます。画像が 1 つの固有の寸法を持ち、縦横比を持たない場合は、固有の寸法と、マスク配置領域の対応する寸法を使って描画されます。 +- `mask-size` の一方が `auto` でもう一方が `auto` ではない場合 + - : 画像に固有の縦横比がある場合は、一方は指定された長さを使用し、もう一方の長さは指定された長さと指定された長さと固有の縦横比から計算して描画します。画像に固有の縦横比がない場合，その長さには指定された長さを使用します。もう一方の長さには、画像に対応する固有の長さがあればそれを使用します。そのような固有の寸法がない場合は、マスク配置領域の対応する寸法を使用します。 -## 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.md b/files/ja/web/css/mask-type/index.md index 2b3c192f21..c3ed758d38 100644 --- a/files/ja/web/css/mask-type/index.md +++ b/files/ja/web/css/mask-type/index.md @@ -3,112 +3,74 @@ title: mask-type slug: Web/CSS/mask-type tags: - CSS - - CSS Masking - - CSS Property - - CSS プロパティ - CSS マスク - - Reference + - CSS プロパティ + - リファレンス - SVG + - recipe:css-property +browser-compat: css.properties.mask-type translation_of: Web/CSS/mask-type --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>mask-type</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 SVG の {{svgElement("mask")}} 要素を<em>ルミナンス</em>マスクと<em>アルファ</em>マスクのどちらとして扱うかを設定します。これは <code><mask></code> 要素自身に設定します。</p> +**`mask-type`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 SVG の {{svgElement("mask")}} 要素を*輝度*マスクと*アルファ*マスクのどちらとして扱うかを設定します。これは `<mask>` 要素自身に設定します。 -<pre class="brush:css no-line-numbers">/* キーワード値 */ +```css +/* キーワード値 */ mask-type: luminance; mask-type: alpha; /* グローバル値 */ mask-type: inherit; mask-type: initial; +mask-type: revert; mask-type: unset; -</pre> +``` -<p>このプロパティは、マスクが使用される要素に適用され、同じ効果を持つ {{cssxref("mask-mode")}} プロパティによって上書きされることがあります。アルファマスクは全般的に表示が高速です。</p> +このプロパティは、マスクが使用される要素に適用され、同じ効果を持つ {{cssxref("mask-mode")}} プロパティによって上書きされることがあります。アルファマスクは全般的に表示が高速です。 -<p>{{cssinfo}}</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> +`mask-type` プロパティは以下に示すキーワード値のうちの一つで指定します。 -<p><code>mask-type</code> プロパティは以下に示すキーワード値のうちの一つで指定します。</p> +### 値 -<h3 id="Values" name="Values">値</h3> +- `luminance` + - : 関連付けられたマスク画像が輝度マスクであることを示すキーワードです。すなわち、適用時に[相対輝度](https://en.wikipedia.org/wiki/Luminance_%28relative%29)値が使用されます。 +- `alpha` + - : 関連付けられたマスク画像がアルファマスクであることを示すキーワードです。すなわち、適用時に[アルファチャネル](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%AB%E3%83%95%E3%82%A1%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB)値が使用されます。 -<dl> - <dt><code>luminance</code></dt> - <dd>関連付けられたマスク画像がルミナンスマスクであることを示すキーワードです。すなわち、適用時に<a href="https://en.wikipedia.org/wiki/Luminance_%28relative%29">相対輝度</a>値が使用されます。</dd> - <dt><code>alpha</code></dt> - <dd>関連付けられたマスク画像がアルファマスクであることを示すキーワードです。すなわち、適用時に<a href="https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%AB%E3%83%95%E3%82%A1%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB">アルファチャネル</a>値が使用されます。</dd> -</dl> +## 公式定義 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} +{{cssinfo}} -<h2 id="Examples" name="Examples">例</h2> +## 形式文法 -<p>以下の長方形をマスクとして適用してみましょう。</p> - -<pre class="brush: html"><rect x="10" y="10" width="80" height="80" - fill="red" fill-opacity="0.7" /></pre> +{{csssyntax}} -<div class="hidden"> -<h3 id="mask" name="mask">マスク</h3> +## 例 -<pre class="brush: html"><svg width="100" height="100"> - <rect x="10" y="10" width="80" height="80" - fill="red" fill-opacity="0.7"/> -</svg></pre> -</div> +<h3 id="Setting_an_alpha_mask">アルファマスクの設定</h3> -<div>このような正方形になります。 {{EmbedLiveSample('mask', '100%', '100')}}</div> +#### HTML -<p>適用先はこちらです。</p> +```html +<div class="redsquare"></div> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> + <defs> + <mask id="m" maskContentUnits="objectBoundingBox" + style="mask-type:alpha"> + <rect x=".1" y=".1" width=".8" height=".8" + fill="red" fill-opacity="0.7"/> + </mask> + </defs> +</svg> +``` -<div class="hidden"> -<h3 id="box" name="box">ボックス</h3> +#### CSS -<pre class="brush: css">.redsquare { - height: 100px; - width: 100px; - background-color: rgb(128, 128, 128); - border: solid 1px black; -} -</pre> - -<pre class="brush: html"><div class="redsquare"></div> -</pre> -</div> - -<div>{{EmbedLiveSample('box', '100%', '120')}}</div> - -<p>結果として、ブラウザーがこのプロパティに対応している場合、 <code>mask-type</code> が {{SVGElement("mask")}} 要素に適用されると2つの異なる四角形になります。</p> - -<table class="standard-table"> - <tbody> - <tr> - <td><code>mask-type: alpha;</code></td> - <td><code>mask-type: luminance;</code></td> - </tr> - <tr> - <td> - <div class="hidden" id="maskalpha"> - <pre class="brush: html"> -<div class="redsquare"></div> -<svg version="1.1" xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> - <defs> - <mask id="m" maskContentUnits="objectBoundingBox" - style="mask-type:alpha"> - <rect x=".1" y=".1" width=".8" height=".8" - fill="red" fill-opacity="0.7"/> - </mask> - </defs> -</svg> -</pre> - - <pre class="brush: css"> +```css .redsquare { height: 100px; width: 100px; @@ -116,28 +78,33 @@ mask-type: unset; border: solid 1px black; mask: url("#m"); } -</pre> - </div> - - <div>{{EmbedLiveSample('maskalpha', '100%', '102')}}</div> - </td> - <td> - <div class="hidden" id="maskluminance"> - <pre class="brush: html"> -<div class="redsquare"></div> -<svg version="1.1" xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> - <defs> - <mask id="m" maskContentUnits="objectBoundingBox" - style="mask-type:luminance"> - <rect x=".1" y=".1" width=".8" height=".8" - fill="red" fill-opacity="0.7"/> - </mask> - </defs> -</svg> -</pre> - - <pre class="brush: css"> +``` + +#### 結果 + +{{EmbedLiveSample('Setting_an_alpha_mask', '100%', '102')}} + +<h3 id="Setting_a_luminance_mask">輝度マスクの設定</h3> + +#### HTML + +```html +<div class="redsquare"></div> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> + <defs> + <mask id="m" maskContentUnits="objectBoundingBox" + style="mask-type:luminance"> + <rect x=".1" y=".1" width=".8" height=".8" + fill="red" fill-opacity="0.7"/> + </mask> + </defs> +</svg> +``` + +#### CSS + +```css .redsquare { height: 100px; width: 100px; @@ -145,40 +112,20 @@ mask-type: unset; border: solid 1px black; mask: url("#m"); } -</pre> - </div> - - <div>{{EmbedLiveSample('maskluminance', '100%', '102')}}</div> - </td> - </tr> - </tbody> -</table> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Masks', '#the-mask-type', 'mask-type')}}</td> - <td>{{Spec2('CSS Masks')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.mask-type")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>その他のマスクに関するプロパティ: {{cssxref("mask")}}, {{cssxref("mask-mode")}}</li> -</ul> +``` + +#### 結果 + +{{EmbedLiveSample('Setting_a_luminance_mask', '100%', '102')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- その他のマスクに関するプロパティ: {{cssxref("mask")}}, {{cssxref("mask-mode")}} diff --git a/files/ja/web/css/mask/index.md b/files/ja/web/css/mask/index.md new file mode 100644 index 0000000000..61475fbbbb --- /dev/null +++ b/files/ja/web/css/mask/index.md @@ -0,0 +1,118 @@ +--- +title: mask +slug: Web/CSS/mask +tags: + - CSS + - CSS マスク + - CSS プロパティ + - Layout + - リファレンス + - SVG + - Web + - recipe:css-shorthand-property +browser-compat: css.properties.mask +translation_of: Web/CSS/mask +--- +{{CSSRef}} + +**`mask`** は [CSS](/ja/docs/Web/CSS) の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、指定された位置での画像のマスクまたは切り取りによって要素を (部分的または全体的に) 隠します。 + +> **Note:** 以下のプロパティに加えて、`mask` 一括指定は {{cssxref("mask-border")}} を初期値にリセットします。そのため、カスケード内の初期のマスク設定を上書きするには、他の一括指定や個々のプロパティではなく、`mask` 一括指定を使用することをお勧めします。これにより、`mask-border` もリセットされ、新しいスタイルが適用されるようになります。 + +## 構成要素のプロパティ + +このプロパティは以下の CSS プロパティの一括指定です。 + +- [`mask-clip`](/ja/docs/Web/CSS/mask-clip) +- [`mask-composite`](/ja/docs/Web/CSS/mask-composite) +- [`mask-image`](/ja/docs/Web/CSS/mask-image) +- [`mask-mode`](/ja/docs/Web/CSS/mask-mode) +- [`mask-origin`](/ja/docs/Web/CSS/mask-origin) +- [`mask-position`](/ja/docs/Web/CSS/mask-position) +- [`mask-repeat`](/ja/docs/Web/CSS/mask-repeat) +- [`mask-size`](/ja/docs/Web/CSS/mask-size) + +## 構文 + +```css +/* キーワード値 */ +mask: none; + +/* 画像値 */ +mask: url(mask.png); /* マスクとして使用されるピクセル画像 */ +mask: url(masks.svg#star); /* マスクとして使用されるSVGグラフィック内の要素 */ + +/* 組み合わせ値 */ +mask: url(masks.svg#star) luminance; /* 輝度マスクとして使用される SVG グラフィック内の要素 */ +mask: url(masks.svg#star) 40px 20px; /* マスクとして使用される SVG グラフィック内の要素が、上から 40px、左から 20px の位置に配置されている */ +mask: url(masks.svg#star) 0 0/50px 50px; /* 幅と高さが 50px のマスクとして使用される SVG グラフィック内の要素 */ +mask: url(masks.svg#star) repeat-x; /* 水平方向に繰り返されるマスクとして使用される SVG グラフィック内の要素 */ +mask: url(masks.svg#star) stroke-box; /* ストロークで囲まれたボックスに拡張するマスクとして使用される SVG グラフィック内の要素 */ +mask: url(masks.svg#star) exclude; /* SVGグラフィック内の要素をマスクとして使用し、非重複部分を使用して背景と組み合わせる */ + +/* グローバル値 */ +mask: inherit; +mask: initial; +mask: revert; +mask: unset; + +/* 複数のマスク */ +mask: url(masks.svg#star) left / 16px repeat-y, /* SVG グラフィック内の要素が、幅 16px の左端のマスクとして使用されている */ + url(masks.svg#circle) right / 16px repeat-y; /* SVG グラフィック内の要素が、幅 16px の右端のマスクとして使用されている */ +``` + +### 値 + +- `<mask-reference>` + - : マスク画像のソースを設定します。 {{cssxref("mask-image")}} を参照してください。 +- `<masking-mode>` + - : マスク画像のマスクモードを設定します。 {{cssxref("mask-mode")}} を参照してください。 +- `<position>` + - : マスク画像の位置を設定します。 {{cssxref("mask-position")}} を参照してください。 +- `<bg-size>` + - : マスク画像の大きさを設定します。 {{cssxref("mask-size")}} を参照してください。 +- `<repeat-style>` + - : マスク画像の反復を設定します。 {{cssxref("mask-repeat")}} を参照してください。 +- `<geometry-box>` + - : `<geometry-box>` 値が 1 つのみが与えられた場合は、{{cssxref("mask-origin")}} と {{cssxref("mask-clip")}} の両方が設定されます。2 つの `<geometry-box>` 値が存在する場合、1 つ目値は {{cssxref("mask-origin")}} を設定し、2 つ目の値は {{cssxref("mask-clip")}} を設定します。 +- `<geometry-box> | no-clip` + - : マスク画像の影響を受ける範囲を設定します。 {{cssxref("mask-clip")}} を参照してください。 +- `<compositing-operator>` + - : 現在のマスクレイヤーに使用する合成操作を設定します。 {{cssxref("mask-composite")}} を参照してください。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 画像のマスク + +```css +.target { + mask: url(#c1) luminance; +} + +.anothertarget { + mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude; +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{Cssxref("clip-path")}}, {{Cssxref("filter")}} +- [CSS Shapes, clipping and masking – and how to use them](https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/) +- [HTML コンテンツへ SVG 効果を適用する](/ja/docs/Web/SVG/Applying_SVG_effects_to_HTML_content) +- [SVG](/ja/docs/Web/SVG) |