recursal/MDN huggingface dataset:
<display-box>
=============

これらのキーワードは、要素が表示ボックスを作るかどうかを定義します。

構文
--

有効な `<display-box>` の値は以下のとおりです。

`contents`

これらの要素は自身のために特定のボックスを生成しません。擬似ボックスやその子ボックスで置き換えられます。なお、 CSS Display Level 3 仕様書では、 `contents` の値が「普通ではない要素」 — 置換要素のように、 CSS ボックスの純粋な概念に従って表示されない要素に影響する方法を定義しています。詳しくは Appendix B: Effects of display: contents on Unusual Elements を参照してください。

*ブラウザーのバグにより、現在のところ、この値を使用するとアクセシビリティツリーから要素を削除します。 — 読み上げソフトは中に何があるかを見ません。詳しくは後述のアクセシビリティの考慮の節をご覧ください。*

`none`

 要素の表示を無くし、レイアウトに影響を与えなくなります (文書は要素が存在しないかのように表示されます)。すべての子孫要素も表示がなくなります。
 要素が通常占める空間を確保しつつ、実際には何も表示しないようにしたいのであれば、代わりに `visibility` プロパティを使用してください。


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

多くのブラウザーの現在の実装では、アクセシビリティツリーから `display` の値が `contents` である要素を削除します。これにより、その要素は — また、一部の版のブラウザーではその子孫要素も — 読み上げ技術で読み上げられなくなります。これは CSSWG 仕様書によれば、正しくない動作です。

* More accessible markup with display: contents | Hidde de Vries
* Display: Contents Is Not a CSS Reset | Adrian Roselli
例
-

最初の例では、 secret クラスの段落に `display: none` を設定します。ボックスとその内容は表示されなくなります。

### display: none

#### HTML


```html
<p>Visible text</p>
<p class="secret">Invisible text</p>
```


#### CSS


```css
p.secret {
  display: none;
}
```


#### 結果

### display: contents

この例では、外側の `<div>` が 2 ピクセルの赤い境界線と 300px の幅を持っています。しかし、 `display: contents` も指定されているので、この `<div>` は表示されず、境界線や幅は適用されなくなり、子要素は親要素が存在しなかったかのように表示されます。

#### HTML


```html
<div class="outer">
  <div>Inner div.</div>
</div>
```


#### CSS


```css
.outer {
  border: 2px solid red;
  width: 300px;
  display: contents;
}

.outer > div {
  border: 1px solid green;
}
```


#### 結果

仕様書
---

#### No specification found

No specification data found for `css.properties.display.contents`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

### contents の対応

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

関連情報
----

* `display`
    + `<display-outside>`
    + `<display-inside>`
    + `<display-listitem>`
    + `<display-internal>`
    + `<display-legacy>`
* Display: Contents Is Not a CSS Reset | Adrian Roselli
* More accessible markup with display: contents — hiddedevries.nl
CSS カウンタースタイル
=============

**CSS カウンタースタイル** (CSS Counter Styles) は CSS のモジュールの一つで、独自のカウンタースタイルを定義することができます。

リファレンス
------

### プロパティ

* `counter-increment`
* `counter-reset`
### アットルール

* `@counter-style`
    + `system`
    + `additive-symbols`
    + `negative`
    + `prefix`
    + `suffix`
    + `range`
    + `pad`
    + `speak-as`
    + `fallback`
ガイド
---

CSS カウンターの使用

カウンターを使用して HTML 要素に番号を振る方法や、複雑なカウンターを実行する方法を説明します。

仕様書
---

| Specification |
| --- |
| CSS Counter Styles Level 3  |

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

### `@counter-style` ルール

{{Compat}}### `counter-increment` プロパティ

{{Compat}}### `counter-reset` プロパティ

{{Compat}}
margin-bottom
=============

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

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

![要素ボックスにおける CSS の margin-bottom プロパティの効果](/ja/docs/Web/CSS/margin-bottom/margin-bottom.svg)

このプロパティは、 `<span>` または `<code>` のような非置換のインライン要素には効果がありません。

構文
--


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

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

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


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

### 値

`<length>`

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

`<percentage>`

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

`auto`

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

公式定義
----

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

形式文法
----
```

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

例
-

### 正および負の数の下側のマージンの設定

#### HTML


```html
<div class="container">
  <div class="box0">Box 0</div>
  <div class="box1">Box 1</div>
  <div class="box2">Box one's negative margin pulls me up</div>
</div>
```


#### CSS

div に margin-bottom と height を設定する CSS です。


```css
.box0 {
  margin-bottom: 1em;
  height: 3em;
}
.box1 {
  margin-bottom: -1.5em;
  height: 4em;
}
.box2 {
  border: 1px dashed black;
  border-width: 1px 0;
  margin-bottom: 2em;
}
```


包含要素と div の定義の一部です。これによってマージンの効果がより明確に見えます。


```css
.container {
  background-color: orange;
  width: 320px;
  border: 1px solid black;
}
div {
  width: 320px;
  background-color: gold;
}
```


#### 結果

仕様書
---

| 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-top`, `margin-right`, `margin-left` と `margin` 一括指定
* 対応する論理的プロパティ: `margin-block-start`, `margin-block-end`, `margin-inline-start`, `margin-inline-end` および一括指定の `margin-block` と `margin-inline`
-webkit-text-stroke-color
=========================

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

**`-webkit-text-stroke-color`** は CSS のプロパティで、テキストの文字の線の色を示します。このプロパティが設定されない場合、 `color` プロパティの値が使用されます。


```css
/\* <color> 値 \*/
-webkit-text-stroke-color: red;
-webkit-text-stroke-color: #e08ab4;
-webkit-text-stroke-color: rgb(200, 100, 0);

/\* グローバル値 \*/
-webkit-text-stroke-color: inherit;
-webkit-text-stroke-color: initial;
-webkit-text-stroke-color: unset;
```

構文
--

### 値

`<color>`

線の色。

公式定義
----

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

形式文法
----
```

-webkit-text-stroke-color =   
  <color>    
  
```

例
-

### 角の色を変化させる

#### HTML


```html
<p>Text with stroke</p>
<input type="color" value="#ff0000" />
```


#### CSS


```css
p {
  margin: 0;
  font-size: 4em;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: #ff0000; /\* ライブサンプルで変更可能 \*/
}
```


```
var colorPicker = document.querySelector("input");
colorPicker.addEventListener("change", function (evt) {
  document.querySelector("p").style.webkitTextStrokeColor = evt.target.value;
});
```


#### 結果

仕様書
---

| Specification |
| --- |
| Compatibility Standard # the-webkit-text-stroke-color |

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

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

関連情報
----

* Surfin' Safari blog post announcing this feature
* CSS-Tricks article explaining this feature
* `-webkit-text-fill-color`
* `-webkit-text-stroke-width`
* `-webkit-text-stroke`
border-block-color
==================

**`border-block-end-color`** は CSS のプロパティで、要素の論理的なブロックの終端側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応づけられます。これは `border-top-color` および `border-bottom-color`、または `border-right-color` および `border-left-color` のどちらかに対応し、どちらに対応するかは `writing-mode`, `direction`, `text-orientation` で定義された値によって決まります。

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

他の方向の境界については、 `border-block-color` によって、 `border-block-start-color` と `border-block-end-color` の両方を設定することができます。

### 構文


```css
border-block-color: yellow;
border-block-color: #f5f6f7;

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

### 値

`<'color'>`

境界の色です。 `color` を参照してください。

公式定義
----

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

形式文法
----
```

border-block-color =   
  <'border-top-color'>{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: 10px solid blue;
  border-block-color: red;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-block-color |

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

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

関連情報
----

* このプロパティは `border-top-color`, `border-right-color`, `border-bottom-color`, `border-left-color` のうちの一つに対応します
* `writing-mode`, `direction`, `text-orientation`
z-index
=======

**`z-index`** は CSS のプロパティで、位置指定要素とその子孫要素、またはフレックスアイテムやグリッドアイテムの z 順を定義します。 z-index がより大きな要素はより小さな要素の上に重なります。

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

位置指定されたボックス（つまり、`position` が `static` 以外のもの）では、`z-index` プロパティが以下のことを定義します。

1. 現在の重ね合わせコンテキストにおけるボックスの重ね合わせレベル
2. ボックスがローカルな重ね合わせコンテキストを作るかどうか
構文
--


```css
/\* キーワード値 \*/
z-index: auto;

/\* <integer> 値 \*/
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /\* 負の数はより低い優先度になる \*/

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


`z-index` プロパティは、キーワード `auto` または `<integer>` のどちらかで指定します。

### 値

`auto`

ボックスはローカルな重ね合わせコンテキストを新たに作りません。現在の重ね合わせコンテキストで作られたボックスは、親ボックスと同じ重ね合わせレベルを持ちます。

`<integer>`

この整数値は、現在の重ね合わせコンテキストで作られたボックスの重ね合わせレベルです。ボックスは重ね合わせレベル `0` のローカルの重ね合わせコンテキストを作ります。これは、子孫要素の z-index は、この要素の外部にある要素の z-index とは比較されないということです。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | 位置指定要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | integer |
| 重ね合わせコンテキストの生成 | あり |

形式定義
----
```

z-index =   
  auto       |  
  <integer>  |  
  inherit      
  
```

例
-

### 視覚的な階層を持つ要素

#### HTML


```html
<div class="wrapper">
  <div class="dashed-box">破線のボックス</div>
  <div class="gold-box">金色のボックス</div>
  <div class="green-box">緑色のボックス</div>
</div>
```


#### CSS


```css
.wrapper {
  position: relative;
}

.dashed-box {
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.gold-box {
  position: absolute;
  z-index: 3; /\* .gold-box を .green-box や .dashed-box の上に置く \*/
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.green-box {
  position: absolute;
  z-index: 2; /\* .green-box を .dashed-box の上に置く \*/
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # z-index |

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

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

関連情報
----

* CSS `position` プロパティ
* CSS の z-index を理解する
padding-block-start
===================

**`padding-block-start`** は CSS のプロパティで、要素のブロック方向の論理的な先頭側のパディングを定義し、それが要素の書字方向やテキストの方向に応じて物理的なパディングに対応づけられます。

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

構文
--


```css
/\* <length> 値 \*/
padding-block-start: 10px; /\* 絶対的な長さ \*/
padding-block-start: 1em; /\* テキストの大きさに対する相対値 \*/

/\* <percentage> 値 \*/
padding-block-start: 5%; /\* ブロックコンテナーの幅に対する割合のパディング \*/

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

### 値

`<length>`

パディングの寸法を固定値で指定します。負の値は指定できません。

`<percentage>`

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

解説
--

`padding-block-start` プロパティは、`padding-top` プロパティと同じ値を取ると仕様で定義されています。しかし、このプロパティが対応づけられる物理的なプロパティは、 `writing-mode`, `direction`, `text-orientation` に設定された値に依存します。したがって、`padding-top`, `padding-right`, `padding-left` の何れかに対応づけられる可能性があります。

関連プロパティとして、要素の他のマージンを定義する `padding-block-end`, `padding-inline-start`, `padding-inline-end` があります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group`, `table-column` を除くすべての要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの論理的な幅 |
| 計算値 | `length` 通り |
| アニメーションの種類 | length |

形式文法
----
```

padding-block-start =   
  <'padding-top'>    
  
```

例
-

### 縦書きテキストにおけるブロック方向の先頭のパディングの設定

#### 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;
  padding-block-start: 20px;
  background-color: #c8c800;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* CSS 論理的プロパティと値
* 対応づけ先の物理的なプロパティ: `padding-top`, `padding-right`, `padding-bottom`, `padding-left`
* `writing-mode`, `direction`, `text-orientation`
padding-inline
==============

**`padding-inline`** は CSS の一括指定プロパティで、論理的なインライン方向の先頭と末尾のパディングを設定します。これは要素の書字方向やテキストの向きに応じて物理的なパディングに変換されます。

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

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

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

* `padding-inline-end`
* `padding-inline-start`
構文
--


```css
/\* <length> 値 \*/
padding-inline: 10px 20px; /\* 絶対的な長さ \*/
padding-inline: 1em 2em; /\* テキストの大きさに対する相対値 \*/
padding-inline: 10px; /\* 先頭と末尾の両方を設定 \*/

/\* <percentage> 値 \*/
padding-inline: 5% 2%; /\* 直近のブロックコンテナーの幅に対する相対値 \*/

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


`padding-inline` プロパティでは、1 つまたは 2 つの値を指定できます。1 つの値が指定された場合は、 `padding-inline-start` と `padding-inline-end` の両方の値として使用されます。2 つの値が指定された場合、1 つ目の値が `padding-inline-start` に、2 つ目の値が `padding-inline-end` に使用されます。

### 値

`<length>`

パディングの寸法を固定値で指定します。負の値は指定できません。

`<percentage>`

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

解説
--

これらの値は、 `padding-top` と `padding-bottom`、または `padding-right` と `padding-left` プロパティに、 `writing-mode`, `direction`, `text-orientation` で定義された値に従って対応します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `padding-inline-start`: `0`
* `padding-inline-end`: `0`
 |
| 適用対象 | `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group`, `table-column` を除くすべての要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの論理的な幅 |
| 計算値 | 一括指定の次の各プロパティとして* `padding-inline-start`: `length` 通り
* `padding-inline-end`: `length` 通り
 |
| アニメーションの種類 | length |

形式文法
----
```

padding-inline =   
  <'padding-top'>{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-rl;
  padding-inline: 20px 40px;
  background-color: #c8c800;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* CSS 論理的プロパティと値
* 対応する物理的プロパティ: `padding-top`, `padding-right`, `padding-bottom`, `padding-left`
* `writing-mode`, `direction`, `text-orientation`
quotes
======

**`quotes`** は CSS のプロパティで、 `content` プロパティの `open-quotes` や `close-quotes` を使用して追加された引用符をどのように表示するかを設定します。

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

構文
--


```css
/\* キーワード値 \*/
quotes: none;
quotes: auto;

/\* <string> 値 \*/
quotes: "«" "»"; /\* open-quote および close-quote をフランス語の引用符に設定 \*/
quotes: "«" "»" "‹" "›"; /\* 2 レベルの引用符を設定 \*/

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

### 値

`none`

`content` プロパティの `open-quote` および `close-quote` の値で引用符を生成しません。

`auto`

選択された要素に設定された言語の値（すなわち、 `lang` 属性）で使用される適切な引用符が使用されます。

`[<string> <string>]+`

`open-quote` および `close-quote` を表す `<string>` の 1 つ以上の組。最初の組は、引用符を表示する要素が入れ子になった際の、最上層のものの引用符を表します。以下、順次下位レベルの引用符に対応します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | ユーザエージェントに依存 |
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

quotes =   
  auto                    |  
  none                    |  
  [ <string> <string> ]+    
  
```

例
-

### 基本的な引用符

#### HTML


```html
<q>To be or not to be. That's the question!</q>
```


#### CSS


```css
q {
  quotes: '"' '"' "'" "'";
}
q::before {
  content: open-quote;
}
q::after {
  content: close-quote;
}
```


#### 結果

### 自動引用符

多くのブラウザーでは、 `quotes` の既定値は `auto` (Firefox 70 以降)、またそれ以外のブラウザー (Chromium, Safari, Edge) ではこれが既定の動作なので、この例は明示的に設定されなくても動作します。

#### HTML


```html
<div lang="ja">
  <q>これが日本語の引用符です。</q>
  <div>
    <hr />
    <div lang="ru">
      <q>Это русская цитата</q>
      <div>
        <hr />
        <div lang="de">
          <q>Dies ist ein deutsches Zitat</q>
          <div>
            <hr />
            <div lang="en">
              <q>This is an English quote.</q>
              <div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```


#### CSS


```css
/\*q {
 quotes: auto;
}\*/
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Generated Content Module Level 3 # quotes |

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

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

関連情報
----

* `content`
:disabled
=========

**`:disabled`** は CSS の擬似クラスで、無効な要素を表します。無効な要素とは、アクティブ化（選択、クリック、入力など）したりフォーカスを得たりすることができないものです。要素には有効な状態、つまりアクティブ化したりフォーカスを得たりすることができる状態もあります。


```css
/\* 無効な <input> を選択 \*/
input:disabled {
  background: #ccc;
}
```

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

構文
--
```

:disabled
```

例
-

この例は基本的な送り先フォームを表示します。 JavaScript の `change` イベントを使用して、ユーザーが請求先欄を有効化／無効化できるようにします。

### HTML


```html
<form action="#">
  <fieldset id="shipping">
    <legend>送り先</legend>
    <input type="text" placeholder="名前" />
    <input type="text" placeholder="住所" />
    <input type="text" placeholder="郵便番号" />
  </fieldset>
  <br />
  <fieldset id="billing">
    <legend>請求先</legend>
    <label for="billing\_is\_shipping">送り先と同じ:</label>
    <input type="checkbox" id="billing-checkbox" checked />
    <br />
    <input type="text" placeholder="名前" disabled />
    <input type="text" placeholder="住所" disabled />
    <input type="text" placeholder="郵便番号" disabled />
  </fieldset>
</form>
```

### CSS


```css
input[type="text"]:disabled {
  background: #ccc;
}
```

### JavaScript


```js
// ページの読み込みの終了を待つ
document.addEventListener(
  "DOMContentLoaded",
  function () {
    // チェックボックスに 'change' イベントリスナーを追加
    document.getElementById("billing-checkbox").onchange = toggleBilling;
  },
  false,
);

function toggleBilling() {
  // 請求先のテキストフィールドを選択
  var billingItems = document.querySelectorAll('#billing input[type="text"]');

  // 請求先テキストフィールドを切り替え
  for (var i = 0; i < billingItems.length; i++) {
    billingItems[i].disabled = !billingItems[i].disabled;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # selector-disabled |
| Selectors Level 4 # enableddisabled |

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

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

関連情報
----

* `:enabled`
scroll-margin-top
=================

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

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

構文
--


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

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

### 値

`<length>`

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

公式定義
----

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

形式文法
----
```

scroll-margin-top =   
  <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
image-rendering
===============

CSS の **`image-rendering`** プロパティは、画像を拡大縮小するアルゴリズムを設定します。このプロパティは要素自身に適用され、他のプロパティで設定されるあらゆる画像、子孫要素に適用されます。

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

ユーザーエージェントは、ページの作者が自然な寸法とは異なる寸法を指定したとき、画像を拡大縮小します。拡大縮小は、ユーザー操作 (ズーム) によって発生することもあります。例えば、画像の自然な寸法が `100×100px` であって、実際の寸法が `200×200px` (または `50×50px`) であるとき、画像は `image-rendering` で指定されたアルゴリズムを使用して拡大 (または縮小) されます。このプロパティは拡大/縮小されない画像には効果がありません。

構文
--


```css
/\* キーワード値 \*/
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

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

### 値

`auto`

拡大縮小のアルゴリズムはユーザーエージェントに依存します。バージョン 1.9 (Firefox 3.0) から、Gecko は*バイリニア* (bilinear) 再サンプリングを使用します (high-quality)。

`smooth` 
Experimental

画像は、画像の外見を最適化するアルゴリズムで拡大縮小されます。具体的には、バイリニア補完などの色の「円滑化」が許容されるアルゴリズムで拡大縮小されます。これは、写真のような画像を想定しています。

`high-quality` 
Experimental

`smooth` と同等ですが、より高品質な設定です。システムのリソースが制約されている場合、どの画像の品質をどの程度低下させるかを検討するとき。`high-quality` の画像は他の値よりも優先されます。

`crisp-edges`

画像は、画像内のコントラストとエッジを保つアルゴリズムにより拡大縮小されます、画像の処理過程で色の円滑化やぼかしを導入は行いません。最近傍 (nearest neighbor) 法や、 2×SaI や hqx-family のようなその他のスムーズ化が行われない拡大縮小アルゴリズムなどが適しています。この値はブラウザーゲームようなピクセルアート画像を想定しています。

`pixelated`

画像を拡大する時は、最近傍 (nearest neighbor) 法が使用され、画像は画像が大きなピクセルで構成されたように表示されます。縮小する時は `auto` と同じになります。


**メモ:** `optimizeQuality` および `optimizeSpeed` の値は、初期の草稿で (SVG の仕様 `image-rendering (en-US)` に似たものとして) `smooth` および `pixelated` の同義語として定義されていました。

公式定義
----

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

形式文法
----
```

image-rendering =   
  auto          |  
  smooth        |  
  high-quality  |  
  pixelated     |  
  crisp-edges     
  
```

例
-

### 画像の拡大縮小アルゴリズムの設定

実際の使用では、 `pixelated` と `crisp-edges` のルールを組み合わせることで、お互いにある程度のフォールバックを提供することができます。 (実際のルールにフォールバックを追加するだけです。) Canvas API は手動の画像データ操作または `imageSmoothingEnabled` によって `pixelated` の代替ソリューション を提供することができます。
```

<div>
  <img class="auto" alt="auto" src="blumen.jpg" />
  <img class="pixelated" alt="pixelated" src="blumen.jpg" />
  <img class="crisp-edges" alt="crisp-edges" src="blumen.jpg" />
</div>
```


```
img {
  height: 200px;
}
```


#### CSS


```css
.auto {
  image-rendering: auto;
}

.pixelated {
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: pixelated;
}

.crisp-edges {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Images Module Level 3 # the-image-rendering |

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

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

**メモ:** 仕様書の例にあるようなピクセルアートの拡大縮小には `crisp-edges` を使うことが想定されていますが、実際にはどのブラウザーも (2020 年 1 月時点で) 対応していません。Firefox では、 `pixelated` は最近傍法として解釈されますが、 `auto` と `crisp-edges` はトリリニア法または線形で補間されます。

Chromium と Safari (WebKit) での動作については、 `GetInterpolationQuality` 関数と `CSSPrimitiveValue::operator ImageRendering()` をそれぞれ参照してください。

関連情報
----

* その他の画像に関する CSS プロパティ: `object-fit`, `object-position`, `image-orientation`, `image-rendering`, `image-resolution`