diff options
Diffstat (limited to 'files/ja/web/css/mask-clip/index.md')
| -rw-r--r-- | files/ja/web/css/mask-clip/index.md | 177 |
1 files changed, 66 insertions, 111 deletions
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/) |