diff options
Diffstat (limited to 'files/ja/web/css/mask-position/index.md')
| -rw-r--r-- | files/ja/web/css/mask-position/index.md | 125 |
1 files changed, 38 insertions, 87 deletions
diff --git a/files/ja/web/css/mask-position/index.md b/files/ja/web/css/mask-position/index.md index 9d7f404404..d4003c04ff 100644 --- a/files/ja/web/css/mask-position/index.md +++ b/files/ja/web/css/mask-position/index.md @@ -6,14 +6,17 @@ tags: - CSS プロパティ - CSS マスク - Experimental - - Reference + - リファレンス + - recipe:css-property +browser-compat: css.properties.mask-position translation_of: Web/CSS/mask-position --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>mask-position</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> プロパティで、定義されたマスク画像それぞれについて、 {{cssxref("mask-origin")}} で設定されたマスク位置レイヤーからの相対で初期位置を設定します。</p> +**`mask-position`** は [CSS](/ja/docs/Web/CSS) プロパティで、定義されたマスク画像それぞれについて、 {{cssxref("mask-origin")}} で設定されたマスク位置レイヤーに対する初期位置を設定します。 -<pre class="brush:css no-line-numbers">/* キーワード値 */ +```css +/* キーワード値 */ mask-position: top; mask-position: bottom; mask-position: left; @@ -32,96 +35,44 @@ mask-position: 1rem 1rem, center; /* グローバル値 */ mask-position: inherit; mask-position: initial; +mask-position: revert; mask-position: unset; -</pre> +``` -<p>{{cssinfo}}</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> +1 つ以上の `<position>` 値をカンマで区切ったもの。 -<p>1つ以上の <code><position></code> 値をコンマで区切ったもの。</p> +### 値 -<h3 id="Values" name="Values">値</h3> +- {{cssxref("<position>")}} + - : 要素ボックスの辺からの二次元の位置を表す 1 つから 4 つの値です。相対または絶対オフセットを与えることができます。なお、位置は要素ボックスの外に設定することができます。 -<dl> - <dt>{{cssxref("<position>")}}</dt> - <dd>要素ボックスの辺からの二次元の位置を表す1つから4つの値です。相対または絶対オフセットを与えることができます。なお、位置は要素ボックスの外に設定することができます。</dd> -</dl> +## 公式定義 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +{{cssinfo}} + +## 形式文法 {{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> +## 例 + +### マスク位置の設定 + +`mask-position` の値を上記の許容値のいずれかに変更してみてください。 +Chromium ベースのブラウザーでこの例を見る場合は、`-webkit-mask-position` の値を変更してください。 + +{{EmbedGHLiveSample("css-examples/masking/mask-position.html", '100%', 760)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/) |