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-position/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-position/index.html')
| -rw-r--r-- | files/ja/web/css/mask-position/index.html | 127 |
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; - -/* <position> 値 */ -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><position></code> 値をコンマで区切ったもの。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt>{{cssxref("<position>")}}</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"><div id="wrapper"> - <div id="masked"> - </div> -</div> -<select id="maskPosition"> - <option value="top">top</option> - <option value="center">center</option> - <option value="bottom">bottom</option> - <option value="top right" selected>top right</option> - <option value="center center">center center</option> - <option value="bottom left">bottom left</option> - <option value="10px 20px">10px 20px</option> - <option value="60% 20%">60% 20%</option> -</select> -</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> |
