aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/css/mask-position/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-position/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-position/index.html')
-rw-r--r--files/ja/web/css/mask-position/index.html127
1 files changed, 0 insertions, 127 deletions
diff --git a/files/ja/web/css/mask-position/index.html b/files/ja/web/css/mask-position/index.html
deleted file mode 100644
index 9d7f404404..0000000000
--- a/files/ja/web/css/mask-position/index.html
+++ /dev/null
@@ -1,127 +0,0 @@
----
-title: mask-position
-slug: Web/CSS/mask-position
-tags:
- - CSS
- - CSS プロパティ
- - CSS マスク
- - Experimental
- - Reference
-translation_of: Web/CSS/mask-position
----
-<div>{{CSSRef}}</div>
-
-<p><strong><code>mask-position</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> プロパティで、定義されたマスク画像それぞれについて、 {{cssxref("mask-origin")}} で設定されたマスク位置レイヤーからの相対で初期位置を設定します。</p>
-
-<pre class="brush:css no-line-numbers">/* キーワード値 */
-mask-position: top;
-mask-position: bottom;
-mask-position: left;
-mask-position: right;
-mask-position: center;
-
-/* &lt;position&gt; 値 */
-mask-position: 25% 75%;
-mask-position: 0px 0px;
-mask-position: 10% 8em;
-
-/* 複数の値 */
-mask-position: top right;
-mask-position: 1rem 1rem, center;
-
-/* グローバル値 */
-mask-position: inherit;
-mask-position: initial;
-mask-position: unset;
-</pre>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<p>1つ以上の <code>&lt;position&gt;</code> 値をコンマで区切ったもの。</p>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt>{{cssxref("&lt;position&gt;")}}</dt>
- <dd>要素ボックスの辺からの二次元の位置を表す1つから4つの値です。相対または絶対オフセットを与えることができます。なお、位置は要素ボックスの外に設定することができます。</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[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">&lt;div id="wrapper"&gt;
- &lt;div id="masked"&gt;
- &lt;/div&gt;
-&lt;/div&gt;
-&lt;select id="maskPosition"&gt;
- &lt;option value="top"&gt;top&lt;/option&gt;
- &lt;option value="center"&gt;center&lt;/option&gt;
- &lt;option value="bottom"&gt;bottom&lt;/option&gt;
- &lt;option value="top right" selected&gt;top right&lt;/option&gt;
- &lt;option value="center center"&gt;center center&lt;/option&gt;
- &lt;option value="bottom left"&gt;bottom left&lt;/option&gt;
- &lt;option value="10px 20px"&gt;10px 20px&lt;/option&gt;
- &lt;option value="60% 20%"&gt;60% 20%&lt;/option&gt;
-&lt;/select&gt;
-</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>