diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-11-09 23:48:02 +0900 |
|---|---|---|
| committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-11-20 22:35:37 +0900 |
| commit | 684f3a1f7c141b4d1c522687062ff0e6e2e1a080 (patch) | |
| tree | 3798639490bef357508feadef36e1bee7860cf3e /files/ja/web/css/mask-clip/index.html | |
| parent | 0fade6a001e0275bd20326c6ac6e04a759bb8cd0 (diff) | |
| download | translated-content-684f3a1f7c141b4d1c522687062ff0e6e2e1a080.tar.gz translated-content-684f3a1f7c141b4d1c522687062ff0e6e2e1a080.tar.bz2 translated-content-684f3a1f7c141b4d1c522687062ff0e6e2e1a080.zip | |
CSS Masking のプロパティの文書を変換準備
Diffstat (limited to 'files/ja/web/css/mask-clip/index.html')
| -rw-r--r-- | files/ja/web/css/mask-clip/index.html | 150 |
1 files changed, 0 insertions, 150 deletions
diff --git a/files/ja/web/css/mask-clip/index.html b/files/ja/web/css/mask-clip/index.html deleted file mode 100644 index e057a4eeda..0000000000 --- a/files/ja/web/css/mask-clip/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: mask-clip -slug: Web/CSS/mask-clip -tags: - - CSS - - CSS Masking - - CSS Property - - CSS マスク - - Experimental - - Reference -translation_of: Web/CSS/mask-clip ---- -<div>{{CSSRef}}</div> - -<p><strong><code>mask-clip</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、マスクが影響する領域を指定します。要素の描画されるコンテンツはこの領域に制限されます。</p> - -<pre class="brush:css no-line-numbers">/* <geometry-box> 値 */ -mask-clip: content-box; -mask-clip: padding-box; -mask-clip: border-box; -mask-clip: margin-box; -mask-clip: fill-box; -mask-clip: stroke-box; -mask-clip: view-box; - -/* キーワード値 */ -mask-clip: no-clip; - -/* 標準外のキーワード値 */ --webkit-mask-clip: border; --webkit-mask-clip: padding; --webkit-mask-clip: content; --webkit-mask-clip: text; - -/* 複数の値 */ -mask-clip: padding-box, no-clip; -mask-clip: view-box, fill-box, border-box; - -/* グローバル値 */ -mask-clip: inherit; -mask-clip: initial; -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> - -{{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> |
