files/ja/web/css/mask-origin/index.md


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

---
title: mask-origin
slug: Web/CSS/mask-origin
tags:
  - CSS
  - CSS プロパティ
  - CSS マスク
  - Experimental
  - Reference
translation_of: Web/CSS/mask-origin
---
<div>{{CSSRef}}</div>

<p><strong><code>mask-origin</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、マスクの基準位置を設定します。</p>

<pre class="brush:css no-line-numbers">/* キーワード値 */
mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: margin-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;

/* 複数の値 */
mask-origin: padding-box, content-box;
mask-origin: view-box, fill-box, border-box;

/* 標準外のキーワード値 */
-webkit-mask-origin: content;
-webkit-mask-origin: padding;
-webkit-mask-origin: border;

/* グローバル値 */
mask-origin: inherit;
mask-origin: initial;
mask-origin: unset;
</pre>

<p>単純なボックスとして描画される要素では、このプロパティはマスクを配置する領域を指定します。言い換えれば、このプロパティは {{cssxref("mask-image")}} CSS プロパティで指定された画像の基準位置を指定します。複数のボックスとして描画される要素、例えば複数行にまたがるインラインボックスや複数のページにまたがるボックスなどでは、マスクの配置領域を決定するために {{cssxref("box-decoration-break")}} がどのボックスに作用するかを指定します。</p>

<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>位置がパディングボックスからの相対位置になります。単純なボックスでは <code>0 0</code> がパディング境界の左上隅で、 <code>100% 100%</code> は右下隅です。</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 ビューポートを参照ボックスとして使用します。 {{svgattr("viewBox")}} 属性が SVG ビューポートを作成している要素に指定されると、参照ボックスは <code>viewBox</code> 属性で示された座標系の原点に配置され、参照ボックスの寸法は <code>viewBox</code> 属性の幅と高さに設定されます。</dd>
 <dt><code>content</code> {{non-standard_inline}}</dt>
 <dd><code>content-box</code> と同じです。</dd>
 <dt><code>padding</code> {{non-standard_inline}}</dt>
 <dd><code>padding-box</code> と同じです。</dd>
 <dt><code>border</code> {{non-standard_inline}}</dt>
 <dd><code>border-box</code> と同じです。</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[9]">#masked {
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 10px solid blue;
  background-color: #8cffa0;
  padding: 10px;
  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
  mask-origin: 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="origin"&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;/select&gt;
</pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">var origin = document.getElementById("origin");
origin.addEventListener("change", function (evt) {
  document.getElementById("masked").style.maskOrigin = evt.target.value;
});
</pre>
</div>

<p>{{EmbedLiveSample("Example", 160, 200)}}</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-origin", "mask-origin")}}</td>
   <td>{{Spec2("CSS Masks")}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>

<p>{{Compat("css.properties.mask-origin")}}</p>