recursal/MDN huggingface dataset:
background-attachment
=====================

**`background-attachment`** は CSS のプロパティで、背景画像の位置をビューポートの中で固定するか、包含ブロックと一緒にスクロールするかを設定します。

試してみましょう
--------

構文
--


```css
/\* キーワード値 \*/
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

/\* グローバル値 \*/
background-attachment: inherit;
background-attachment: initial;
background-attachment: revert;
background-attachment: unset;
```


`background-attachment` プロパティは、以下に挙げた値のうちの一つで指定します。

### 値

`fixed`

背景はビューポートに対する相対位置で固定されます。要素がスクロール機構を持っていたとしても、背景画像は要素とともには動きません。 (これは `background-clip: text` とは両立できません)

`local`

背景は要素の内容に対する相対位置で固定されます。要素がスクロール機構を持っていた場合、背景画像は要素の内容とともにスクロールします。背景画像の描画エリアと配置エリアは、それらを囲む境界ではなく、要素のスクロール可能なエリアを基準にします。

`scroll`

背景は要素自身に対する相対位置で固定され、内容と共にスクロールしません。 (要素の境界に対して効果的に張り付きます。)

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `scroll` |
| 適用対象 | すべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

background-attachment =   
  <attachment>#    
  
<attachment> =   
  scroll  |  
  fixed   |  
  local     
  
```

例
-

### 単純な例

#### HTML


```html
<p>
  There were doors all round the hall, but they were all locked; and when Alice
  had been all the way down one side and up the other, trying every door, she
  walked sadly down the middle, wondering how she was ever to get out again.
</p>
```


#### CSS


```css
p {
  background-image: url("starsolid.gif");
  background-attachment: fixed;
}
```


#### 結果

### 複数の背景画像

このプロパティは複数の背景画像に対応しており、それぞれの背景画像に異なる `<attachment>` をカンマ区切りで指定できます。それぞれの画像には先頭から順番に `<attachment>` の値が適用されます。

#### HTML


```html
<p>
  There were doors all round the hall, but they were all locked; and when Alice
  had been all the way down one side and up the other, trying every door, she
  walked sadly down the middle, wondering how she was ever to get out again.
  Suddenly she came upon a little three-legged table, all made of solid glass;
  there was nothing on it except a tiny golden key, and Alice's first thought
  was that it might belong to one of the doors of the hall; but, alas! either
  the locks were too large, or the key was too small, but at any rate it would
  not open any of them. However, on the second time round, she came upon a low
  curtain she had not noticed before, and behind it was a little door about
  fifteen inches high: she tried the little golden key in the lock, and to her
  great delight it fitted!
</p>
```


#### CSS


```css
p {
  background-image: url("starsolid.gif"), url("startransparent.gif");
  background-attachment: fixed, scroll;
  background-repeat: no-repeat, repeat-y;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background-attachment |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 複数の背景画像を使う
border-bottom-width
===================

**`border-bottom-width`** は CSS のプロパティで、ボックスの下の境界の幅を設定します。

試してみましょう
--------

構文
--


```css
/\* キーワード値 \*/
border-bottom-width: thin;
border-bottom-width: medium;
border-bottom-width: thick;

/\* <length> 値 \*/
border-bottom-width: 10em;
border-bottom-width: 3vmax;
border-bottom-width: 6px;

/\* グローバルキーワード \*/
border-bottom-width: inherit;
border-bottom-width: initial;
border-bottom-width: revert;
border-bottom-width: unset;
```

### 値

`<line-width>`

明示的な非負の `<length>` またはキーワードで、境界の幅を定義します。キーワードの場合、以下の値のうちの一つでなければなりません。

* `thin`
* `medium`
* `thick`


**メモ:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか一つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `medium` |
| 適用対象 | すべての要素。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| 計算値 | 絶対的な長さ、または `border-bottom-style` が `none` または `hidden` の場合は `0` |
| アニメーションの種類 | length |

形式文法
----
```

border-bottom-width =   
  <line-width>    
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
```

例
-

### 下境界の太さの比較

#### HTML


```html
<div>Element 1</div>
<div>Element 2</div>
```


#### CSS


```css
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-bottom-width: thick;
}
div:nth-child(2) {
  border-bottom-width: 2em;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-width |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 他の境界の太さに関する CSS プロパティ: `border-left-width`, `border-right-width`, `border-top-width`, `border-width`
* 他の下境界に関する CSS プロパティ: `border`, `border-bottom`, `border-bottom-style`, `border-bottom-color`
minmax()
========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
**`minmax()`** は CSS の関数で、寸法の範囲を *min* 以上、 *max* 以下で定義します。 CSS グリッドで使用されます。

試してみましょう
--------

構文
--


```css
/\* <inflexible-breadth>, <track-breadth> 値 \*/
minmax(200px, 1fr)
minmax(400px, 50%)
minmax(30%, 300px)
minmax(100px, max-content)
minmax(min-content, 400px)
minmax(max-content, auto)
minmax(auto, 300px)
minmax(min-content, auto)

/\* <fixed-breadth>, <track-breadth> 値 \*/
minmax(200px, 1fr)
minmax(30%, 300px)
minmax(400px, 50%)
minmax(50%, min-content)
minmax(300px, max-content)
minmax(200px, auto)

/\* <inflexible-breadth>, <fixed-breadth> 値 \*/
minmax(400px, 50%)
minmax(30%, 300px)
minmax(min-content, 200px)
minmax(max-content, 200px)
minmax(auto, 300px)
```


*min* および *max* の 2 つの引数を取る関数です。

どちらの引数も `<length>`, `<percentage>`, `<flex>`, またはキーワード値 `max-content`, `min-content`, `auto` のうちの一つを取ります。

もし *min* が *max* より大きい場合は無視され、 `minmax(min,max)` は *min* として扱われます。最大値として、 `<flex>` 値はグリッドトラックのフレックス係数を設定します。それは *min* としては無効です。

### 値

`<length>`

負ではない寸法。

`<percentage>`

負ではないパーセント値で、列グリッドトラックのグリッドコンテナーのインライン寸法、および行グリッドトラックのグリッドコンテナーのブロック寸法からの相対値。グリッドコンテナーの寸法がトラックの寸法に依存する場合、 `<percentage>` は `auto` として扱う必要があります。ユーザーエージェントは、グリッドコンテナーの寸法に対するトラックの固有の寸法の貢献度を調整し、パーセント値を尊重して最小限の量だけトラックの最終的な寸法を増加させることがあります。

`<flex>`

単位 `fr` がついた負ではない寸法で、トラックのフレックス係数を指定します。それぞれの `<flex>` による寸法のトラックは、フレックス係数の割合に従って残りの空間を配分します。

`max-content`

グリッドトラックを占めるグリッドアイテムの max-content の貢献度の最大値を表します。

`min-content`

グリッドトラックを占めるグリッドアイテムの min-content の貢献度の最大値を表します。

`auto`

`min` として使用した場合、グリッドトラックを占めるグリッドアイテムの最大最小サイズ（`min-width`/`min-height` で指定）を表します。
 `max` として使用した場合は、 `max-content` と同じです。ただし、 `max-content` とは異なり、 `normal` や `stretch` のように `align-content` や `justify-content` プロパティ値によるトラックの拡張が可能です。


### 形式文法
```

<minmax()> =   
  minmax( min , max )    
  
```

### CSS プロパティ

`minmax()` 関数は次の中で使用することができます。

* `grid-template-columns`
* `grid-template-rows`
* `grid-auto-columns`
* `grid-auto-rows`
例
-

### CSS


```css
#container {
  display: grid;
  grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}
```

### HTML


```html
<div id="container">
  <div>コンテンツと同じ幅で、最大 300 ピクセルのアイテムです。</div>
  <div>幅は自由ですが、最小 200 ピクセルが必要なアイテムです。</div>
  <div>幅 150 ピクセルの柔軟性のないアイテムです。</div>
</div>
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # valdef-grid-template-columns-minmax |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* グリッドレイアウトガイド: *グリッドレイアウトの基本概念 - minmax() によるトラックの寸法制御*
* グリッド、論理的な値、書字方向
* 動画チュートリアル: *Introducing minmax()*
font-synthesis
==============

**`font-synthesis`** は CSS のプロパティで、太字やイタリックの字体がない場合に、ブラウザーが合成してよいかどうかを制御します。

構文
--


```css
font-synthesis: none;
font-synthesis: weight;
font-synthesis: style;
font-synthesis: small-caps;
font-synthesis: weight style small-caps;

/\* グローバル値 \*/
font-synthesis: inherit;
font-synthesis: initial;
font-synthesis: revert;
font-synthesis: unset;
```

試してみましょう
--------

### 値

`none`

太字およびイタリックの字体を合成しないことを示すキーワードです。

`weight`

必要であれば、太字の字体を合成してよいことを示すキーワードです。

`style`

必要であれば、イタリックの字体を合成してよいことを示すキーワードです。

`small-caps`

必要であれば、スモールキャップの字体を合成してよいことを示すキーワードです。

解説
--

ほとんどの標準的な欧文フォントにはイタリック体や太字の変化形が含まれていますが、多くのノベルティフォントには含まれていません。中国語、日本語、韓国語、その他の表語文字に使用されているフォントは、これらの変化形を含まない傾向があり、それらを合成するとテキストの可読性が損なわれる可能性があります。このような場合には、ブラウザーの既定のフォント合成機能をオフにしたほうがよいかもしれません。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `weight style small-caps position`  |
| 適用対象 | すべての要素とテキスト。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式定義
----
```

font-synthesis =   
  none                                           |  
  [ weight || style || small-caps || position ]    
  
```

例
-

### フォント合成の無効化

#### HTML


```html
<em class="syn">Synthesize me! 站直。</em>
<br />
<em class="no-syn">Don't synthesize me! 站直。</em>
```


#### CSS


```css
em {
  font-weight: bold;
}
.syn {
  font-synthesis: style weight small-caps;
}
.no-syn {
  font-synthesis: none;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-synthesis |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `font-style`
* `font-weight`
border-inline-start-style
=========================

**`border-inline-start-style`** は CSS のプロパティで、要素の論理的なブロックの先頭側の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応づけられます。これは `border-top-style`、`border-right-style`、`border-bottom-style`、`border-left-style` の何れかに対応し、どれに対応するかは `writing-mode`、`direction`、`text-orientation` で定義された値によって決まります。

試してみましょう
--------

構文
--


```css
/\* <'border-style'> 値 \*/
border-inline-start-style: dashed;
border-inline-start-style: dotted;
border-inline-start-style: revert;
border-inline-start-style: groove;
```


関連するプロパティとしては、 `border-block-start-style`、`border-block-end-style`、`border-inline-end-style` が要素の他の境界のスタイルを定義します。

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

### 値

`<'border-style'>`

境界の線のスタイルです。 `border-style` を参照してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

border-inline-start-style =   
  <line-style>    
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

例
-

### HTML


```html
<div>
  <p class="exampleText">Example text</p>
</div>
```

### CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-inline-start-style: dashed;
}
```

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # border-style |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* このプロパティは `border-top-style`、`border-right-style`、`border-bottom-style`、`border-left-style` のうちの 1 つに対応づけられます
* `writing-mode`、`direction`、`text-orientation`
scroll-margin-left
==================

`scroll-margin-left` プロパティは、スクロールスナップ領域の左側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。

試してみましょう
--------

構文
--


```css
/\* <length> 値 \*/
scroll-margin-left: 10px;
scroll-margin-left: 1em;

/\* グローバル値 \*/
scroll-margin-left: inherit;
scroll-margin-left: initial;
scroll-margin-left: revert;
scroll-margin-left: unset;
```

### 値

`<length>`

スクロールコンテナーの左側の辺からみた外部の距離です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

scroll-margin-left =   
  <length>    
  
```

仕様書
---

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # margin-longhands-physical |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS スクロールスナップ
* Well-Controlled Scrolling with CSS Scroll Snap
margin-top
==========

**`margin-top`** は CSS のプロパティで、要素の上側のマージン領域を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。

試してみましょう
--------

このプロパティは、置換要素ではないインライン要素、例えば `<span>` や `<code>` には効果がありません。

構文
--


```css
/\* <length> 値 \*/
margin-top: 10px; /\* 絶対的な寸法 \*/
margin-top: 1em; /\* 文字の寸法からの相対 \*/
margin-top: 5%; /\* 直近のブロックコンテナーの幅からの相対 \*/

/\* キーワード値 \*/
margin-top: auto;

/\* グローバル値 \*/
margin-top: inherit;
margin-top: initial;
margin-top: revert;
margin-top: revert-layer;
margin-top: unset;
```


`margin-top` プロパティは `auto` キーワード、または `<length>` や `<percentage>` で指定されます。正の数、ゼロ、負の数が指定できます。

### 値

`<length>`

マージンの寸法を固定値で表したものです。

`<percentage>`

マージンの寸法を包含ブロックのインラインサイズ（`writing-mode` で横書き言語と定義されている場合は *width*）に対するパーセント値で示したものです。

`auto`

ブラウザーが適切な値を選択して使用します。 `margin` を参照してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | `table-caption`, `table`, `inline-table` 以外の表の `display` 種別を除くすべての要素。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| パーセント値 | 包含ブロックの幅に対する相対値 |
| 計算値 | 指定されたパーセント値または絶対的な長さ |
| アニメーションの種類 | length |

形式文法
----
```

margin-top =   
  <length-percentage>  |  
  auto                   
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### 正と負の上マージンの設定


```css
.content {
  margin-top: 5%;
}
.sidebox {
  margin-top: 10px;
}
.logo {
  margin-top: -5px;
}
#footer {
  margin-top: 1em;
}
```

仕様書
---

| Specification |
| --- |
| CSS Box Model Module Level 3 # margin-physical |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `margin-right`, `margin-bottom`, `margin-left` と `margin` 一括指定
* 対応付けられる論理的プロパティ: `margin-block-start`, `margin-block-end`, `margin-inline-start`, `margin-inline-end` および一括指定の `margin-block` と `margin-inline`
ruby-position
=============

**`ruby-position`** は CSS のプロパティで、ベース要素に対するルビ要素の位置を定義します。要素の上方 (`over`)、下方 (`under`)、文字の間の右側 (`inter-character`) に配置できます。

構文
--


```css
/\* キーワード値 \*/
ruby-position: over;
ruby-position: under;
ruby-position: inter-character;
ruby-position: alternate;

/\* グローバル値 \*/
ruby-position: inherit;
ruby-position: initial;
ruby-position: revert;
ruby-position: unset;
```

試してみましょう
--------

### 値

`over`

![over の例](/ja/docs/Web/CSS/ruby-position/screen_shot_2015-03-04_at_13.02.20.png)ルビを主テキストの上 (横書きの場合) または右 (縦書きの場合) に配置することを示すキーワードです。


`under`

![under の例](/ja/docs/Web/CSS/ruby-position/screen_shot_2015-03-04_at_13.02.07.png)ルビを主テキストの下 (横書きの場合) または左 (縦書きの場合) に配置することを示すキーワードです。


`inter-character`

ルビをそれぞれの文字の間に配置することを示すキーワードです。

`alternate`

複数のレベルの注釈があった場合に、ルビが上と下の間で交互に表示されることを示すキーワードです。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `alternate` |
| 適用対象 | ルビ注釈コンテナー |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

ruby-position =   
  [ alternate || [ over | under ] ]  |  
  inter-character                      
  
```

例
-

### テキストの上に配置したルビ

#### HTML


```html
<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
```


#### CSS


```css
ruby {
  ruby-position: over;
}
```


#### 結果

### テキストの下に配置したルビ

#### HTML


```html
<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
```


#### CSS


```css
ruby {
  ruby-position: under;
}
```


#### 結果

### 交互のルビ

#### HTML


```html
<ruby>
  <rb>A</rb><rb>B</rb><rb>C</rb>
  <rtc>Above</rtc>
  <rtc>Below</rtc>
</ruby>
```


#### CSS


```css
ruby {
  ruby-position: alternate; /\* 初期値でもある \*/
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Ruby Annotation Layout Module Level 1 # rubypos |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* HTML のルビ関連要素: `<ruby>`, `<rt>`, `<rp>`, `<rtc>`
* CSS のルビ関連プロパティ: `ruby-align`, `ruby-merge`
scroll-padding-block
====================

`scroll-padding-block` は一括指定プロパティで、要素のブロック軸のスクロールパディングを設定します。

試してみましょう
--------

scroll-padding 系のプロパティは、スクロールポートの*最適表示領域*のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、作者は他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

構成要素のプロパティ
----------

このプロパティは以下の CSS プロパティの一括指定です。

* `scroll-padding-block-end`
* `scroll-padding-block-start`
構文
--


```css
/\* キーワード値 \*/
scroll-padding-block: auto;

/\* <length> 値 \*/
scroll-padding-block: 10px;
scroll-padding-block: 1em 0.5em;
scroll-padding-block: 10%;

/\* グローバル値 \*/
scroll-padding-block: inherit;
scroll-padding-block: initial;
scroll-padding-block: revert;
scroll-padding-block: unset;
```

### 値

`<length-percentage>`

スクロールポートの対応する辺からの内側のオフセットで、有効な長さまたはパーセント値です。

`auto`

オフセットはユーザーエージェントによって特定されます。これは一般に 0px になりますが、ユーザーエージェントはゼロ以外の値がもっと適切である場合を検出して他のことを行うことができます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `scroll-padding-block-start`: `auto`
* `scroll-padding-block-end`: `auto`
 |
| 適用対象 | スクロールコンテナー |
| 継承 | なし |
| パーセント値 | スクロールコンテナーのスクロールポートに対する相対値 |
| 計算値 | 一括指定の次の各プロパティとして* `scroll-padding-block-start`: 指定通り
* `scroll-padding-block-end`: 指定通り
 |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

scroll-padding-block =   
  [ auto | <length-percentage [0,∞]> ]{1,2}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

仕様書
---

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # propdef-scroll-padding-block |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS スクロールスナップ
* Well-Controlled Scrolling with CSS Scroll Snap
mask-origin
===========

**`mask-origin`** は CSS のプロパティで、マスクの原点を設定します。


```css
/\* キーワード値 \*/
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: revert;
mask-origin: unset;
```


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

構文
--

1 つまたは複数の以下に挙げたキーワード値を、カンマで区切って指定します。

### 値

`content-box`

位置がコンテンツボックスからの相対位置になります。

`padding-box`

位置がパディングボックスからの相対位置になります。単純なボックスでは `0 0` がパディング辺の左上隅で、 `100% 100%` は右下隅です。

`border-box`

位置が境界ボックスからの相対位置になります。

`margin-box`

位置がマージンボックスからの相対位置になります。

`fill-box`

位置がオブジェクトの囲みボックスからの相対位置になります。

`stroke-box`

位置が輪郭線ボックスからの相対位置になります。

`view-box`

直近の SVG ビューポートを参照ボックスとして使用します。 `viewBox` 属性が SVG ビューポートを作成している要素に指定されると、参照ボックスは `viewBox` 属性で示された座標系の原点に配置され、参照ボックスの寸法は `viewBox` 属性の幅と高さに設定されます。

`content` 
Non-standard

`content-box` と同じです。

`padding` 
Non-standard

`padding-box` と同じです。

`border` 
Non-standard

`border-box` と同じです。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `border-box` |
| 適用対象 | すべての要素。 SVG の場合は `defs` 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

mask-origin =   
  <coord-box>#    
  
<coord-box> =   
  <paint-box>  |  
  view-box       
  
<paint-box> =   
  <visual-box>  |  
  fill-box      |  
  stroke-box      
  
<visual-box> =   
  content-box  |  
  padding-box  |  
  border-box     
  
```

例
-

### マスクの原点を border-box に設定する

下のボックス内の CSS を更新して、他の可能な値を試してみてください。

仕様書
---

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-origin |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* Clipping and Masking in CSS
visibility
==========

**`visibility`** は CSS のプロパティで、文書のレイアウトを変更することなく要素を表示したり非表示にしたりします。このプロパティは `<table>` の行や列を隠すこともできます。

試してみましょう
--------

要素を不可視にして*レイアウトから除去する*には、 `visibility` を使用する代わりに `display` プロパティを `none` に設定してください。

構文
--


```css
/\* キーワード値 \*/
visibility: visible;
visibility: hidden;
visibility: collapse;

/\* グローバル値 \*/
visibility: inherit;
visibility: initial;
visibility: unset;
```


`visibility` プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。

### 値

`visible`

要素のボックスが可視になります。

`hidden`

要素のボックスは不可視になります (描画されません) が、レイアウトには通常通り影響します。子孫要素は `visibility` が `visible` に設定されていれば可視になります。(タブ順で操作された時などに) 要素はフォーカスを受け取ることができません。

`collapse`

* `<table>` の行、列、列グループ、行グループでは、行や列が不可視になり、 (表の列や行に ``display`: none` が適用された場合のように) 占めていた領域も除去されます。しかし、他の行や列の寸法は、不可視になった行や列のセルが存在するときのように計算されます。この値は表全体の幅や高さを強制的に再計算することなく、すばやく行や列を不可視にすることができます。
* フレックス項目では、不可視になり、占めていた領域は削除されます。
* XUL 要素では、通常は寸法に影響するその他のスタイルに関わらず、要素の寸法が常にゼロと計算されますが、マージンは有効になります。
* その他の要素では、 `collapse` は `hidden` と同じと扱われます。

アクセシビリティの考慮
-----------

要素の `visibility` の値に `hidden` を使用すると、 アクセシビリティツリーから削除されます。これは要素及びその子孫要素が読み上げ技術でアナウンスされない結果になります。

補間
--

visibility の値は*可視*及び*不可視*の間で補間可能です。従って、開始または終了の値の一つが `visible` でない限りは、補間は行われません。値は離散的なステップとして補間され、タイミング関数の `0` と `1` 間の値が、 `visible` に対応し、タイミング関数の他の値 (トランジションの開始点または終了点でのみ、または [0、1] の外側の y 値を有する `cubic-bezier()` 関数の結果として) はより近い終了点に対応します。

注
-

* 現在の一部のブラウザーでは、 `visibility:collapse` の対応がないか、部分的に不正確です。表の行や列以外の要素に用いた場合、誤って `visibility:hidden` のように扱われることがあります。
* `visibility:collapse` を用いた表の、折り畳まれたセルに入れ子の表があると、入れ子の表で `visibility:visible` が明示的に指定されていない限りは、表のレイアウトが変わる可能性があります。
公式定義
----

|  |  |
| --- | --- |
| 初期値 | `visible` |
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | visibility |

形式文法
----
```

visibility =   
  visible   |  
  hidden    |  
  collapse    
  
```

例
-

### 基本的な例

#### HTML


```html
<p class="visible">The first paragraph is visible.</p>
<p class="not-visible">The second paragraph is NOT visible.</p>
<p class="visible">
  The third paragraph is visible. Notice the second paragraph is still occupying
  space.
</p>
```


#### CSS


```css
.visible {
  visibility: visible;
}

.not-visible {
  visibility: hidden;
}
```

### 表の例

#### HTML


```html
<table>
  <tr>
    <td>1.1</td>
    <td class="collapse">1.2</td>
    <td>1.3</td>
  </tr>
  <tr class="collapse">
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>
```


#### CSS


```css
.collapse {
  visibility: collapse;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid gray;
}
```

仕様書
---

| Specification |
| --- |
| CSS Display Module Level 3 # visibility |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `display`