From b6ef6d47830a2e326211e670174fe1955ad31fa7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 10 Nov 2021 02:36:52 +0900 Subject: CSS Masking に関するプロパティの記事を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/10 時点の英語版に同期 --- files/ja/web/css/mask-clip/index.md | 177 ++++++++++++++---------------------- 1 file changed, 66 insertions(+), 111 deletions(-) (limited to 'files/ja/web/css/mask-clip/index.md') 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 --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`mask-clip`** は [CSS](/ja/docs/Web/CSS) のプロパティで、マスクが影響する領域を指定します。要素の描画されるコンテンツはこの領域に制限されます。 -
/* <geometry-box> 値 */
+```css
+/*  値 */
 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;
-
- -

{{cssinfo}}

- -

構文

- -

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

- -

値

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

形式文法

+``` + +## 構文 + +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}} -

例

- -

CSS

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

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

- -

仕様書

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

ブラウザーの対応

- -

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

+## 例 + +### 境界ボックスでマスクを切り取る + +`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/) -- cgit v1.2.3-54-g00ecf