recursal/MDN huggingface dataset:
scroll-margin-inline-start
==========================

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

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

構文
--


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

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

### 値

`<length>`

スクロールコンテナーのインライン方向における先頭側の辺からみた外部の距離です。

公式定義
----

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

形式文法
----
```

scroll-margin-inline-start =   
  <length>    
  
```

例
-

### 簡単なデモ

この例では、上記のインタラクティブ例と非常によく似たものを実装していますが、ここではその実装方法を説明します。

ここでの目的は、水平方向にスクロールする 4 つのブロックを作成することです。2 つ目と 3 つ目のブロックは、それぞれのブロックの左端に近いところでスナップします。

#### HTML

ブロックを表す HTML はとても簡単です。


```html
<div class="scroller">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
```


#### CSS

外側のコンテナーのスタイルは以下のようになっています。


```css
.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid #000;
  scroll-snap-type: x mandatory;
}
```


スクロールスナップに関連する主な部品は、`overflow-x: scroll` で、コンテンツがスクロールしても隠れないようにしています。また、`scroll-snap-type: x mandatory` で、スクロールのスナップは水平軸に沿って行わなければならず、スクロールは常にスナップ点で静止するようになっています。

子要素のスタイルは次のようになっています。


```css
.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: #663399;
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(2n) {
  background-color: #fff;
  color: #663399;
}
```


ここで最も重要なのは `scroll-snap-align: start` で、これは左側の端 (ここでは x 軸に沿った「先頭」) をスナップ点として指定するものです。

最後に、スクロールのマージン値を指定しますが、これは 2 番目と 3 番目の子要素に対して異なる値を指定します。


```css
.scroller > div:nth-child(2) {
  scroll-margin-inline-start: 1rem;
}

.scroller > div:nth-child(3) {
  scroll-margin-inline-start: 2rem;
}
```


つまり、真ん中の子要素を過ぎてスクロールした場合、2 番目の `<div>` のインラインの先頭から `1rem`、3 番目の `<div>` のインラインの先頭から `2rem` のところでスナップすることになります。

#### 結果

自分でやってみましょう。

仕様書
---

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

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

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

関連情報
----

* CSS スクロールスナップ
* Well-Controlled Scrolling with CSS Scroll Snap
row-gap (grid-row-gap)
======================

**`row-gap`** は CSS のプロパティで、要素のグリッド行の間のすき間 (溝) の寸法を定義します。

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

構文
--


```css
/\* <length> 値 \*/
row-gap: 20px;
row-gap: 1em;
row-gap: 3vmin;
row-gap: 0.5cm;

/\* <percentage> 値 \*/
row-gap: 10%;

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

### 値

`<length-percentage>`

行を隔てる溝の幅です。 `<percentage>` 値は要素の寸法に対する相対値です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | 段組み要素、フレックスコンテナー、グリッドコンテナー |
| 継承 | なし |
| パーセント値 | コンテンツ領域の対応する寸法に対する相対値 |
| 計算値 | 指定通りで、 <length> は絶対長になり、 normal の計算値は段組み要素を除き 0 になる |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

row-gap =   
  normal                     |  
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### Flex layout

#### HTML


```html
<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
```


#### CSS


```css
#flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  row-gap: 20px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  width: 100px;
  height: 50px;
}
```


#### 結果

### Grid layout

#### HTML


```html
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
</div>
```


#### CSS


```css
#grid {
  display: grid;
  height: 200px;
  grid-template-columns: 200px;
  grid-template-rows: repeat(3, 1fr);
  row-gap: 20px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # column-row-gap |

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

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

関連情報
----

* 関連する CSS プロパティ: `column-gap`, `gap`
* グリッドレイアウトガイド: グリッドレイアウトの基本概念 - 溝
border-top-width
================

**`border-top-width`** は CSS のプロパティで、要素の上側の境界の幅を設定します。

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

構文
--


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

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

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

### 値

`<line-width>`

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

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


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

公式定義
----

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

形式文法
----
```

border-top-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-top-width: thick;
}
div:nth-child(2) {
  border-top-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.

関連情報
----

* 他の border-width 関連 CSS プロパティ: `border-left-width`, `border-right-width`, `border-bottom-width`, `border-width`
* 他の border-top 関連 CSS プロパティ: `border`, `border-top`, `border-top-style`, `border-top-color`
border-inline-width
===================

**`border-inline-width`** は CSS のプロパティで、要素の論理的なインライン方向の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応づけられます。これは `border-top-width` と `border-bottom-width`、または `border-left-width` と `border-right-width` の組み合わせのどちらかに対応し、どちらに対応するかは `writing-mode`、`direction`、`text-orientation` で定義された値によって決まります。

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

他の方向の境界の幅については `border-block-width` で設定することができ、これは `border-block-start-width` および `border-block-end-width` を設定することができます。

構文
--


```css
/\* <'border-width'> 値 \*/
border-inline-width: 5px 10px;
border-inline-width: 5px;
border-inline-width: thick;

/\* グローバル値 \*/
border-inline-width: inherit;
border-inline-width: initial;
border-inline-width: revert;
border-inline-width: unset;
```

### 値

`<'border-width'>`

境界の幅です。 `border-width` を参照してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `medium` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの論理的な幅 |
| 計算値 | 絶対的な長さ、境界スタイルが `none` または `hidden` であれば `0` |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

border-inline-width =   
  <'border-top-width'>{1,2}    
  
```

例
-

### 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: 1px solid blue;
  border-inline-width: 5px 10px;
}
```

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-inline-width |

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

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

関連情報
----

* このプロパティは `border-top-width`、`border-right-width`、`border-bottom-width`、`border-left-width` のうちの 1 つに対応します
* `writing-mode`、`direction`、`text-orientation`
list-style-position
===================

**`list-style-position`** は CSS のプロパティで、リスト項目に対する `::marker` の位置を指定します。

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

多くの場合、一括指定の `list-style` を使ったほうが便利です。

**メモ:** このプロパティはリスト項目に対して適用されます。つまり、 ``display`: list-item;` が指定された要素です。既定では、 `<li>` 要素が該当します。このプロパティは継承されるので、親要素 (通常は `<ol>` や `<ul>`) に設定することで、すべてのリスト項目に適用することができます。

なお、 `list-style-position: inside` を指定したリスト要素の中で最初にブロック要素が配置された場合、その動作はブラウザーによって異なります。 Chrome と Safari では、この要素はマーカーボックスと同じ行に配置されますが、 Firefox、 Internet Explorer、 Opera では次の行に配置されます。 詳細については Firefox バグ 36854 をご覧ください。

構文
--


```css
/\* キーワード値 \*/
list-style-position: inside;
list-style-position: outside;

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


`list-style-position` プロパティには、下記の値の中の一つが指定されます。

### 値

`inside`

`::marker` はリスト項目の最初の要素として配置されます。

`outside`

`::marker` は主要ブロックボックスの外に配置されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `outside` |
| 適用対象 |  リスト項目 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

list-style-position =   
  inside   |  
  outside    
  
```

例
-

### リスト項目の位置の設定

#### HTML


```html
<ul class="inside">
  List 1
  <li>List Item 1-1</li>
  <li>List Item 1-2</li>
  <li>List Item 1-3</li>
  <li>List Item 1-4</li>
</ul>
<ul class="outside">
  List 2
  <li>List Item 2-1</li>
  <li>List Item 2-2</li>
  <li>List Item 2-3</li>
  <li>List Item 2-4</li>
</ul>
<ul class="inside-img">
  List 3
  <li>List Item 3-1</li>
  <li>List Item 3-2</li>
  <li>List Item 3-3</li>
  <li>List Item 3-4</li>
</ul>
```


#### CSS


```css
.inside {
  list-style-position: inside;
  list-style-type: square;
}

.outside {
  list-style-position: outside;
  list-style-type: circle;
}

.inside-img {
  list-style-position: inside;
  list-style-image: url("starsolid.gif");
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # list-style-position-property |

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

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

関連情報
----

* `list-style`, `list-style-type`, `list-style-image`
gap (grid-gap)
==============

**`gap`** は CSS のプロパティで、行や列の間のすき間 (溝) を定義します。これは `row-gap` および `column-gap` の一括指定です。

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

構文
--


```css
/\* 単一の <length> 値 \*/
gap: 20px;
gap: 1em;
gap: 3vmin;
gap: 0.5cm;

/\* 単一の <percentage> 値 \*/
gap: 16%;
gap: 100%;

/\* 2 つの <length> 値 \*/
gap: 20px 10px;
gap: 1em 0.5em;
gap: 3vmin 2vmax;
gap: 0.5cm 2mm;

/\* 1 つまたは 2 つの <percentage> 値 \*/
gap: 16% 100%;
gap: 21px 82%;

/\* calc() 値 \*/
gap: calc(10% + 20px);
gap: calc(20px + 10%) calc(10% - 5px);

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


このプロパティは `<'row-gap'>` の値と、任意で `<'column-gap'>` の値を続けて指定します。 `<'column-gap'>` が省略された場合、 `<'row-gap'>` と同じ値が設定されます。

`<'row-gap'>` および `<'column-gap'>` はそれぞれ、 `<length>` または `<percentage>` で指定します。

### 値

`<length>`

グリッド線を隔てる溝の幅です。

`<percentage>`

要素の寸法に対する、グリッド線を隔てる溝の幅です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `row-gap`: `normal`
* `column-gap`: `normal`
 |
| 適用対象 | 段組み要素、フレックスコンテナー、グリッドコンテナー |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `row-gap`: 指定通りで、 <length> は絶対長になり、 normal の計算値は段組み要素を除き 0 になる
* `column-gap`: 指定通りで、 <length> は絶対長になり、 normal の計算値は段組み要素を除き 0 になる
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `row-gap`: length または パーセント値, calc();
* `column-gap`: length または パーセント値, calc();
 |

形式文法
----
```

gap =   
  <'row-gap'> <'column-gap'>?    
  
```

例
-

### フレックスレイアウト

#### HTML


```html
<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
```


#### CSS


```css
#flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  gap: 20px 5px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  width: 100px;
  height: 50px;
}
```


#### 結果

### グリッドレイアウト

#### HTML


```html
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
```


#### CSS


```css
#grid {
  display: grid;
  height: 200px;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 20px 5px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}
```


#### 結果

### 段組みレイアウト

#### HTML


```html
<p class="content-box">
  This is some multi-column text with a 40px column gap created with the CSS
  <code>gap</code> property. Don't you think that's fun and exciting? I sure do!
</p>
```


#### CSS


```css
.content-box {
  column-count: 3;
  gap: 40px;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # gap-shorthand |

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

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

関連情報
----

* 関連する CSS プロパティ: `row-gap`, `column-gap`
* グリッドレイアウトガイド: グリッドレイアウトの基本概念 - 溝
list-style-image
================

**`list-style-image`** は CSS のプロパティで、リスト項目のマーカーとして使われる画像を設定します。

ふつうは一括指定の `list-style` を使ったほうが便利です。

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

**メモ:** このプロパティはリスト項目、つまり、``display`: list-item;` が指定された要素に対して適用されます。既定では、 `<li>` 要素を含みます。このプロパティは継承されるので、親要素 (通常は `<ol>` や `<ul>`) に設定することで、すべてのリスト項目に適用することができます。

構文
--


```css
/\* キーワード値 \*/
list-style-image: none;

/\* <url> 値 \*/
list-style-image: url("starsolid.gif");

/\* 有効な画像値 \*/
list-style-image: linear-gradient(to left bottom, red, blue);

/\* グローバル値 \*/
list-style-image: inherit;
list-style-image: initial;
list-style-image: revert;
list-style-image: unset;
```

### 値

`<image>`

マーカーとして使う画像の場所です。

`none`

画像をマーカーとして使用しないことを指定します。この値が設定された場合、代わりに `list-style-type` で定義されたマーカーが使われます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 |  リスト項目 |
| 継承 | あり |
| 計算値 | The keyword `none` or the computed <image> |
| アニメーションの種類 | 離散値 |

形式文法
----
```

list-style-image =   
  <image>  |  
  none       
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

例
-

### url 値の使用

#### HTML


```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
```


#### CSS


```css
ul {
  list-style-image: url("starsolid.gif");
}
```


#### 結果

### グラデーションの使用

#### HTML


```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
```


#### CSS


```css
ul {
  font-size: 200%;
  list-style-image: linear-gradient(to left bottom, red, blue);
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # image-markers |

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

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

関連情報
----

* `list-style`, `list-style-type`, `list-style-position`
* `url()` 関数
border-start-end-radius
=======================

**`border-start-end-radius`** は CSS のプロパティで、要素の論理的な境界の半径を定義します。これは要素の `writing-mode`, `direction`, `text-orientation` に応じて、物理的な境界の半径に対応づけられます。これはテキストの方向や書字方向に依存せずにスタイルを構築する際に便利です。


```css
/\* <length> 値 \*/
/\* 値 1 つの場合は角を円にする \*/
border-start-end-radius: 10px;
border-start-end-radius: 1em;

/\* 値 2 つの場合は角を楕円にする \*/
border-start-end-radius: 1em 2em;

/\* グローバル値 \*/
border-start-end-radius: inherit;
border-start-end-radius: initial;
border-start-end-radius: revert;
border-start-end-radius: unset;
```

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

このプロパティは、要素の block-start と inline-end の間の角に影響します。すなわち、書字方向が `horizontal-tb` で `ltr` の方向であれば、 `border-top-right-radius` プロパティに対応します。

構文
--

### 値

`<length-percentage>`

円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の `<length>` データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対する値です。負の数は無効です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | すべての要素。ただし、ユーザーエージェントは `border-collapse` が `collapse` である場合に`table` および `inline-table` 要素に適用する必要はない。内部表要素での動作は、今のところ未定義。。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| パーセント値 | 境界ボックスの対応する寸法に対する相対値 |
| 計算値 | ２つの絶対的な `length` または `percentage` 値 |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

border-start-end-radius =   
  <length-percentage [0,∞]>{1,2}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### 縦書きの時の境界の丸め

#### HTML


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


#### CSS


```css
div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-start-end-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-start-end-radius: 10px;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* 対応する物理的プロパティ: `border-bottom-left-radius`
* `writing-mode`, `direction`, `text-orientation`
-moz-force-broken-image-icon
============================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`-moz-force-broken-image-icon`** は拡張 CSS プロパティで、壊れた画像に `alt` 属性が付いていても、壊れた画像のアイコンを強制的に表示することができます。

構文
--

### 値

`<integer>`

プロパティの値に `1` を指定した場合、その画像が `alt` 属性を持っていたとしても、壊れた画像アイコンが表示されます。`0` を指定した場合、通常通り `alt` 属性のみが表示されます。


**メモ:** プロパティの値に `1` を指定した場合もなお、 `alt` 属性は壊れた画像アイコンの隣に同時に表示されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | 画像 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

### HTML


```html
<img src="/broken/image/link.png" alt="Broken image link" />
```

### CSS


```css
img {
  -moz-force-broken-image-icon: 1;
  height: 100px;
  width: 100px;
}
```

### 結果

| Screenshot | Live sample |
| --- | --- |
|  |  |

**メモ:** `-moz-force-broken-image-icon` の値に `1` を指定した場合、その画像に width と height を明示的に指定しない限り、壊れた画像アイコンは表示されず、 `alt` 属性も非表示になります。

メモ
--

* このプロパティは Geckoベースのブラウザでのみ使用できます。
* このプロパティの使用は非推奨です。代わりに適切な `alt` 属性を使用してください。
仕様書
---

どの標準にも含まれていません。

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

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

関連情報
----

* Firefox バグ 58646
shape-image-threshold
=====================

**`shape-image-threshold`** は CSS のプロパティで、 `shape-outside` の値に指定された画像によってシェイプを抽出するために使用するアルファチャネルのしきい値を設定します。

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

アルファコンポーネントの値がしきい値よりも大きいピクセルはすべて、境界を特定するためのシェイプの一部とみなされます。例えば、 `0.5` の値は不透過度が 50% よりも大きいピクセルをすべて含めた図形になるという意味です。

構文
--


```css
/\* <number> 値 \*/
shape-image-threshold: 0.7;

/\* グローバル値 \*/
shape-image-threshold: inherit;
shape-image-threshold: initial;
shape-image-threshold: revert;
shape-image-threshold: unset;
```

### 値

`<alpha-value>`

画像からシェイプを抽出するために使用されるしきい値を設定します。シェイプはアルファ値がしきい値より大きいピクセルによって定義されます。 0.0 (完全に透過) から 1.0 (完全に不透過) の範囲を外れた値は、この範囲に収められます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0.0` |
| 適用対象 | 浮動要素 |
| 継承 | なし |
| 計算値 | 指定値の `number` が [0.0, 1.0] の範囲内にクリップされたものと同じ |
| アニメーションの種類 | 数値 |

形式文法
----
```

shape-image-threshold =   
  <alpha-value>    
  
<alpha-value> =   
  <number>      |  
  <percentage>    
  
```

例
-

### グラデーションへのテキストの配置

この例では、グラデーションの背景画像を持つ `<div>` ブロックを作成します。グラデーションは `shape-outside` を使用して CSS シェイプとして確立されているので、グラデーションの中のピクセルのうち 20% よりも大きい不透過度 (つまり、アルファコンポーネントが 0.2 よりも大きいピクセル) はシェイプの一部とみなされます。

#### HTML


```html
<div id="gradient-shape"></div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi
  voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint
  facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat adipisci,
  libero quae nihil porro debitis laboriosam inventore animi impedit nostrum
  nesciunt quisquam expedita! Dolores consectetur iure atque a mollitia dicta
  repudiandae illum exercitationem aliquam repellendus ipsum porro modi, id nemo
  eligendi, architecto ratione quibusdam iusto nisi soluta? Totam inventore ea
  eum sed velit et eligendi suscipit accusamus iusto dolore, at provident eius
  alias maxime pariatur non deleniti ipsum sequi rem eveniet laboriosam magni
  expedita?
</p>
```


#### CSS


```css
#gradient-shape {
  width: 150px;
  height: 150px;
  float: left;
  background-image: linear-gradient(30deg, black, transparent 80%, transparent);
  shape-outside: linear-gradient(30deg, black, transparent 80%, transparent);
  shape-image-threshold: 0.2;
}
```


シェイプは画像ファイルではなく、線形グラデーションの `background-image` を使用して定義されています。同じグラデーションが、 `shape-outside` プロパティを使用して、浮動領域を設定するためにシェイプが取得される画像としても使用されます。

シェイプの部分として扱うグラデーション内のピクセルは 20% の不透過度がしきい値なので、 `shape-image-threadhold` の値を `0.2` にして使用して作成しています。

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Shapes Module Level 1 # shape-image-threshold-property |

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

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

関連情報
----

* CSS シェイプ
* CSS シェイプの概要
* `<basic-shape>`
* `shape-outside`
* `shape-margin`
:playing
========

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`:playing`** は CSS の擬似クラスセレクターで、「再生中」または「停止中」の状態を持つ音声、動画、その他のリソースの要素が「再生中」である場合に一致する、リソース状態擬似クラスです。

バッファリング状態にある場合や、ユーザーの操作以外で停止している状態の場合も、リソースが再生中として扱われます。


```css
:playing {
}
```

構文
--
```

:playing
```

例
-

### CSS


```css
:playing {
  border: 5px solid green;
}
```

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # selectordef-playing |

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

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

関連情報
----

* `:paused`
scroll-padding-block-end
========================

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

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

構文
--


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

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

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

### 値

`<length-percentage>`

スクロールポートのブロック方向の末尾側からの内側のオフセットで、有効な長さまたはパーセント値です。

`auto`

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | スクロールコンテナー |
| 継承 | なし |
| パーセント値 | スクロールコンテナーのスクロールポートに対する相対値 |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

scroll-padding-block-end =   
  auto                       |  
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

仕様書
---

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # padding-longhands-logical |

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

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

関連情報
----

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