aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/css/mask-clip/index.html
diff options
context:
space:
mode:
authorMasahiro FUJIMOTO <mfujimot@gmail.com>2021-11-09 23:48:02 +0900
committerMasahiro FUJIMOTO <mfujimot@gmail.com>2021-11-20 22:35:37 +0900
commit684f3a1f7c141b4d1c522687062ff0e6e2e1a080 (patch)
tree3798639490bef357508feadef36e1bee7860cf3e /files/ja/web/css/mask-clip/index.html
parent0fade6a001e0275bd20326c6ac6e04a759bb8cd0 (diff)
downloadtranslated-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.html150
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">/* &lt;geometry-box&gt; 値 */
-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">&lt;div id="masked"&gt;
-&lt;/div&gt;
-&lt;select id="clipBox"&gt;
- &lt;option value="content-box"&gt;content-box&lt;/option&gt;
- &lt;option value="padding-box"&gt;padding-box&lt;/option&gt;
- &lt;option value="border-box" selected&gt;border-box&lt;/option&gt;
- &lt;option value="margin-box"&gt;margin-box&lt;/option&gt;
- &lt;option value="fill-box"&gt;fill-box&lt;/option&gt;
- &lt;option value="stroke-box"&gt;stroke-box&lt;/option&gt;
- &lt;option value="view-box"&gt;view-box&lt;/option&gt;
- &lt;option value="no-clip"&gt;no-clip&lt;/option&gt;
-&lt;/select&gt;
-</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>