recursal/MDN huggingface dataset:
background-position-x
=====================

**`background-position-x`** は CSS のプロパティで、各背景画像における水平の初期位置を設定します。位置は `background-origin` によって設定された位置レイヤーに対する相対位置です。

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

このプロパティの値は、その後で一括指定の `background` または `background-position` プロパティが定義されると上書きされます。

構文
--


```css
/\* キーワード値 \*/
background-position-x: left;
background-position-x: center;
background-position-x: right;

/\* <percentage> 値 \*/
background-position-x: 25%;

/\* <length> 値 \*/
background-position-x: 0px;
background-position-x: 1cm;
background-position-x: 8em;

/\* 辺からの相対値 \*/
background-position-x: right 3px;
background-position-x: left 25%;

/\* 複数の値 \*/
background-position-x: 0px, center;

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


`background-position-x` プロパティは、1 つ以上の値をカンマで区切って指定します。

### 値

`left`

背景画像の左端を、背景位置レイヤーの左端に配置します。

`center`

背景画像を背景位置レイヤーの方向の中央に配置します。

`right`

背景画像の右端を、背景位置レイヤーの右端に配置します。

`<length>`

指定された背景画像の左辺の、背景位置レイヤーの左辺からのオフセットです。 (ブラウザーによってはオフセットに右辺を割り当てることもできます)。

`<percentage>`

指定された背景画像の水平位置のオフセットで、コンテナーからの相対値です。 0% の値は背景画像の左端がコンテナーの左端の位置に配置されることを意味し、 100% の値は背景画像の*右端*が、コンテナーの*右端*の位置に配置されることを意味します。したがって、 50% の値では、背景画像を水平方向の中央に配置します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0%` |
| 適用対象 | すべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | なし |
| パーセント値 | 背景配置領域の幅から背景画像の高さを引いたものに対する相対値 |
| 計算値 | 絶対長とパーセント値の組み合わせで与えられるオフセットと原点のキーワードを、各項目として構成されるリスト。 |
| アニメーションの種類 | 反復可能リスト |

形式文法
----
```

background-position-x =   
  [ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]#    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### 基本的な例

次の例は、シンプルな背景画像の実装で、background-position-x と background-position-y を使って、画像の水平方向と垂直方向の位置を別々に定義しています。

#### HTML


```html
<div></div>
```


#### CSS


```css
div {
  width: 300px;
  height: 300px;
  background-color: skyblue;
  background-image: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: bottom 10px;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 4 # background-position-longhands |

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

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

関連情報
----

* `background-position`
* `background-position-y`
* `background-position-inline`
* `background-position-block`
* 複数の背景の使用
:lang()
=======

**`:lang()`** は CSS の擬似クラスで、指定された言語に基づいて要素に一致します。


```css
/\* <p> のうち English (en) のものをすべて選択 \*/
p:lang(en) {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
```

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

**メモ:** HTML では、言語は `lang` 属性と `<meta>` 要素、それに、可能であればプロトコルから得られる情報 (HTTP ヘッダーなど) の組み合わせで決められます。他の文書型では、文書の言語を決定する他の方法があるかもしれません。

構文
--

### 形式文法
```

:lang( <language-code> )
```

### 引数

`<language-code>`

`<string>` で、ターゲットにしたい言語を表します。受付可能な値は HTML 仕様書で定義されています。

例
-

この例では、 `:lang()` 擬似クラスを使用して引用要素 (`<q>`) の親を選択するために 子結合子 を使用しています。なお、この例はこの目的のための唯一の方法でも、文書型における最適な方法を示しているわけでもありません。また、 Unicode の値は特殊な引用符を指定するために使用していることに注意してください。

### HTML


```html
<div lang="en">
  <q>This English quote has a <q>nested</q> quote inside.</q>
</div>
<div lang="fr">
  <q>This French quote has a <q>nested</q> quote inside.</q>
</div>
<div lang="ja">
  <q>この日本語の引用には内部に<q>入れ子</q>の引用があります。</q>
</div>
```

### CSS


```css
:lang(en) > q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
  quotes: "« " " »";
}
:lang(ja) > q {
  quotes: "「" "」" "『" "』";
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # lang-pseudo |

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

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

関連情報
----

* 言語に関する擬似クラス: `:lang`, `:dir`
* HTML の `lang` 属性
* HTML の `translate` 属性
* RFC 5646: Tags for Identifying Languages (also known as BCP 47)
font-kerning
============

**`font-kerning`** CSS プロパティはフォントに存在するカーニング情報の使用を制御します。

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

*カーニング*は、文字の間隔をどれだけ取るかを定義します。*well-kerned* フォントでは、この機能は文字間を他と比較してより整った読みやすい間隔にします。

例えば、下の画像では、左の例ではカーニングが使われていませんが、右の例ではカーニングが使われています。

![font-kerning の例](/ja/docs/Web/CSS/font-kerning/font-kerning.png)

構文
--


```css
font-kerning: auto;
font-kerning: normal;
font-kerning: none;

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

### 値

`auto`

このキーワードは、カーニングを使用するかをブラウザーに任せます。フォントサイズが小さい場合はカーニングが不自然になることがあるため、ブラウザーは無効化するでしょう。これは既定値です。

`normal`

このキーワードは、カーニングを適用するよう要求します。

`none`

このキーワードは、ブラウザーがフォントのカーニング情報を使用しないようにします。

公式定義
----

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

形式定義
----
```

font-kerning =   
  auto    |  
  normal  |  
  none      
  
```

例
-

### カーニングの有無

#### HTML


```html
<div id="kern"></div>
<div id="nokern"></div>
<textarea id="input">AV T. ij</textarea>
```


#### CSS


```css
div {
  font-size: 2rem;
  font-family: serif;
}

#nokern {
  font-kerning: none;
}

#kern {
  font-kerning: normal;
}
```


#### JavaScript


```js
let input = document.getElementById("input");
let kern = document.getElementById("kern");
let nokern = document.getElementById("nokern");

input.addEventListener("keyup", function () {
  kern.textContent = input.value; /\* Update content \*/
  nokern.textContent = input.value;
});

kern.textContent = input.value; /\* Initialize content \*/
nokern.textContent = input.value;
```

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-kerning-prop |

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

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

関連情報
----

* `font-variant`, `font-variant-position`, `font-variant-east-asian`, `font-variant-caps`, `font-variant-ligatures`, `font-variant-numeric`, `font-variant-alternates`, `font-synthesis`, `letter-spacing`
outline-color
=============

**`outline-color`** は CSS のプロパティで、要素の輪郭線の色を設定します。

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

構文
--


```css
/\* <color> 値 \*/
outline-color: #f92525;
outline-color: rgb(30 222 121);
outline-color: blue;

/\* キーワード値 \*/
outline-color: auto;

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


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

### 値

`<color>`

輪郭線の色で、`<color>` で指定します。

`auto` 
Experimental

`outline-style` が `auto` でない限り `currentcolor` に、さらにアクセントカラーに計算されます。

解説
--

輪郭線は要素の周囲、 `border` の外側に描かれる線です。要素の境界線とは異なり、輪郭線は要素の枠の外側に描かれ、他のコンテンツと重複することがあります。一方、境界線はページのレイアウトに実際に影響を与え、他のどの要素とも (明示的に重複させない限り) 重複しないように合わせます。

輪郭線の表示方法を定義する際は、一括指定プロパティの `outline` を使用したほうが普通は便利です。

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

独自のフォーカススタイルを作成するときに、ふつう `outline` プロパティを調整します。輪郭線の色を変更するのであれば、輪郭線と、それが配置される部分の背景のコントラスト比が、弱視の人でも知覚できるよう高くなっているか確認することが重要です。

色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

* WebAIM: Color Contrast Checker
* MDN "WCAG を理解する ― ガイドライン 1.4 の解説"
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | キーワード `auto` の場合は、計算値も `currentcolor`。色の場合は、半透明であれば、計算値はそれに一致する `rbga()` で、不透明であれば、それに一致する `rgb()`。キーワード `transparent` は `rgba(0,0,0,0)` に対応付けられる。 |
| アニメーションの種類 | 色 |

形式文法
----
```

outline-color =   
  auto                      |  
  [ <color> | <image-1D> ]    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># )    
  
<color-stripe> =   
  <color>                            &&  
  [ <length-percentage> | <flex> ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### 青い実線の輪郭線の設定

#### HTML


```html
<p>見ての通り、輪郭線は青です。</p>
```


#### CSS


```css
p {
  outline: 2px solid; /\* 輪郭線の幅と種類 \*/
  outline-color: #0000ff; /\* 輪郭線を青にする \*/
  margin: 5px;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline-color |

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

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

関連情報
----

* `outline`
* `outline-color`
* `outline-style`
* `outline-width`
* `<color>` データ型
* その他の色に関するプロパティ: `color`, `background-color`, `border-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, `column-rule-color`
* CSS を使用した HTML の要素への色の適用
計算値
===

**計算値** (computed value) は CSS プロパティにおいて、継承の過程で親から子へと伝えられる値です。これは指定値から計算されます。

1. 特殊な値である `inherit`, `initial`, `revert`, `revert-layer`, `unset` を扱います。
2. プロパティの概要の「計算値」に記載された値に達するのに必要な計算を行います。

プロパティの計算値に達するのに必要な計算は、一般に (`em` の単位やパーセントなどの) 相対値を絶対値に変換する計算を含みます。例えば、ある要素に `font-size: 16px` と `padding-top: 2em` が指定された場合、 `padding-top` の計算値は `32px` (フォントサイズの倍) になります。

しかしながら、いくつかのプロパティ (`width`, `margin-right`, `text-indent`, `top` など、レイアウトの定義に必要ものに対する割合が相対的なもの) でパーセント値で指定された値はパーセント値で計算された値に変わります。さらに、 `line-height` に指定された単位なしの値は、指定された計算値になります。これらの計算値に残った相対的な値は、使用値が定義された場合、絶対値になります。

**メモ:** DOM の `getComputedStyle()` API は解決値を返しますが、これはプロパティによって計算値であるか使用値であるかが変わります。

仕様書
---

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # computed-value |

関連情報
----

* `window.getComputedStyle`
* CSS の主要概念:
    + CSS の構文
    + アットルール
    + コメント
    + 詳細度
    + 継承
    + ボックスモデル
    + レイアウトモード
    + 視覚整形モデル
    + マージンの相殺
    + 値
        - 初期値
        - 使用値
        - 実効値
    + 値の定義構文
    + 一括指定プロパティ
    + 置換要素
<resolution>
============

**`<resolution>`** は CSS の データ型 で、メディアクエリの resolution で使われ、出力端末のピクセル密度である、解像度を表します。

画面では、長さは物理的な値ではなく、 *CSS* のインチ、センチメートル、またはピクセルと関連づけられます。

構文
--

`<resolution>` データ型は、厳密に正の `<number>` のすぐ後ろに解像度の単位を続けます。他の CSS の寸法と同じく、単位のリテラルと数字の間に空白はありません。

### 単位

`dpi`

1 インチあたりのドット数 を表します。画面でよく使われるのは 72 または 96 dpi です。印刷物の dpi は通常、これより大きくなります。1 インチは 2.54 cm なので、`1dpi ≈ 0.39dpcm` です。

`dpcm`

センチメートルあたりのドット数 を表します。1 インチは 2.54 cm なので、`1dpcm ≈ 2.54dpi` です。

`dppx`

ピクセル (`px`) あたりのドット数を表します。CSS の `in` と CSS の `px` の比率は 1:96 で固定なので、`1dppx` は `96dpi` と同じです。これは `image-resolution` で定義される、CSS の画像の既定の解像度に一致します。

`x`

`dppx` の別名です。


**メモ:** 仮に値 `0` に対しすべての単位が同じ解像度を表すとしても、単位を省略してはいけません。言い換えると `0` は無効で、`0dpi`、`0dpcm`、`0dppx` のどれも表しません。

例
-

### メディアクエリーで使用する


```css
@media print and (min-resolution: 300dpi) { ... }
```

### 有効な解像度
```

96dpi
50.82dpcm
3dppx
```

### 無効な解像度
```

72 dpi     数値と単位の間に空白は許可されていません。
ten dpi    数値は10進数しか使えません。
0          単位は必須です。
```

仕様書
---

| Specification |
| --- |
| CSS Values and Units Module Level 4 # resolution |

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

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

関連情報
----

* resolution メディア特性
* `image-resolution` プロパティ
* メディアクエリーの使用
-webkit-mask-position-x
=======================

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

`-webkit-mask-position-x` は CSS のプロパティで、マスク画像の初期の水平方向の位置を設定します。


```css
/\* キーワード値 \*/
-webkit-mask-position-x: left;
-webkit-mask-position-x: center;
-webkit-mask-position-x: right;

/\* <percentage> 値 \*/
-webkit-mask-position-x: 100%;
-webkit-mask-position-x: -50%;

/\* <length> 値 \*/
-webkit-mask-position-x: 50px;
-webkit-mask-position-x: -1cm;

/\* 複数の値 \*/
-webkit-mask-position-x:
  50px,
  25%,
  -3em;

/\* グローバル値 \*/
-webkit-mask-position-x: inherit;
-webkit-mask-position-x: initial;
-webkit-mask-position-x: unset;
```


|  |  |
| --- | --- |
| 初期値 | `0%` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | ボックス自身の寸法に対する相対値 |
| 計算値 | `length` の場合は絶対的な値、それ以外はパーセント値 |
| アニメーションの種類 | 離散値 |

構文
--

### 値

`<length-percentage>`

ボックスの左パディングの辺から見た画像の左端の位置を示す長さです。パーセント値の場合は、ボックスのパディング領域の水平方向の寸法に対して計算されます。つまり、 `0%` という値は、画像の左端がボックスの左パディングの辺と一致していることを意味し、`100%` という値は、画像の右端がボックスの右パディングの辺と一致していることを意味します。

**`left`**

`0%` と同等です。

**`center`**

`50%` と同等です。

**`right`**

`100%` と同等です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0%` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | ボックス自身の寸法に対する相対値 |
| 計算値 | `length` の場合は絶対的な値、それ以外はパーセント値 |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

### マスク画像の水平方向の位置指定


```css
.exampleOne {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-x: right;
}

.exampleTwo {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-x: 25%;
}
```

仕様書
---

標準には含まれていません。

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

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

関連情報
----

`-webkit-mask-position` (en-US), `-webkit-mask-position-y`, `-webkit-mask-origin` (en-US), `-webkit-mask-attachment`
hyphenate-character
===================

**`hyphenate-character`** は CSS のプロパティで、ハイフンによる改行の前で行末に使用される文字（または文字列）を設定します。

自動ハイフネーション、ソフトハイフネーションのどちらでも、指定された hyphenate-character の値に従って表示されます。

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

構文
--

この値は、ハイフンの代わりに使用する文字列を設定するか、またはユーザーエージェントが現在の書体の慣習に基づいて適切な文字列を選択することを示します（既定値）。


```css
hyphenate-character: <string>;
hyphenate-character: auto;
```

### 値

`<string>`

`<string>` で、ハイフンによる改行の前で行末に使用されるものを表します。
 使用される文字が長すぎる場合は、ユーザーエージェントが切り落とすことがあります。


`auto`

 ユーザーエージェントは、内容の言語における書体の規則に基づいて適切な文字列を選択します。
 これは既定のプロパティ値であり、明示的に指定する必要があるのは、異なる継承値を上書きする場合のみです。


公式定義
----

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

形式文法
----
```

hyphenate-character =   
  auto      |  
  <string>    
  
```

例
-

 この例では、 2 つの同じテキストブロックに `hyphens` を設定して、必要な場所で確実に改行し、（`&shy;`を使って作成した）ソフトハイフンで改行するようにしています。
 最初のブロックは、ハイフンの値が等号（"`*`"）に変更されています。
 これは、このプロパティに対応しているユーザーエージェントでは `hyphenate-character: auto` と同じ意味になります。

#### HTML


```html
<dl>
  <dt><code>hyphenate-character: "*"</code></dt>
  <dd id="string" lang="en">Superc&shy;alifragilisticexpialidocious</dd>
  <dt><code>hyphenate-character の設定なし</code></dt>
  <dd lang="en">Superc&shy;alifragilisticexpialidocious</dd>
</dl>
```


#### CSS


```css
dd {
  width: 90px;
  border: 1px solid black;
  hyphens: auto;
}

dd#string {
  -webkit-hyphenate-character: "\*";
  hyphenate-character: "\*";
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Text Module Level 4 # propdef-hyphenate-character |

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

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

関連情報
----

* 関連する CSS プロパティ: `hyphens`, `overflow-wrap`
page-break-inside
=================

**警告:** このプロパティは `break-inside` プロパティによって置き換えられました。

CSS の **`page-break-inside`** プロパティは、現在の要素の*内側の* 改ページを調整します。


```css
/\* キーワード値 \*/
page-break-inside: auto;
page-break-inside: avoid;

/\* グローバル値 \*/
page-break-inside: inherit;
page-break-inside: initial;
page-break-inside: revert;
page-break-inside: unset;
```

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

構文
--

### 値

`auto`

初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。

`avoid`

要素の内側で改ページされないようにします。

改ページの別名
-------

`page-break-inside` プロパティは古いプロパティとなり、 `break-inside` によって置き換えられました。

互換性のため、 `page-break-inside` はブラウザーから `break-inside` の別名として扱われます。これにより、 `page-break-inside` を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。

| page-break-inside | break-inside |
| --- | --- |
| `auto` | `auto` |
| `avoid` | `avoid` |

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | ルート要素の通常フロー内におけるブロックレベル要素。ユーザーエージェントは他の要素に `table-row` 要素のように適用することがあります。 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

page-break-inside =   
  avoid    |  
  auto     |  
  inherit    
  
```

例
-

### 要素の途中の改ページを防ぐ

#### HTML


```html
<div class="page">
  <p>これは最初の段落です。</p>
  <section class="list">
    <span>リスト</span>
    <ol>
      <li>one</li>
      <!-- <li>two</li> -->
    </ol>
  </section>
  <ul>
    <li>one</li>
    <!-- <li>two</li> -->
  </ul>
  <p>Tこれは第二段落です。</p>
  <p>これは第三段落です。文章の量が多くなっています。</p>
  <p>
    これは第四段落です。第三段落よりも、さらにもう少しだけ、文章の量が多くなっています。
  </p>
</div>
```


#### CSS


```css
.page {
  background-color: #8cffa0;
  height: 90px;
  width: 200px;
  columns: 1;
  column-width: 100px;
}

.list,
ol,
ul,
p {
  break-inside: avoid;
}

p {
  background-color: #8ca0ff;
}

ol,
ul,
.list {
  margin: 0.5em 0;
  display: block;
  background-color: orange;
}

p:first-child {
  margin-top: 0;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Paged Media Module Level 3 # page-break-inside |

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

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

関連情報
----

* `break-before`, `break-after`, `break-inside`
* `page-break-after`, `page-break-before`
* `orphans`, `widows`
animation-duration
==================

**`animation-duration`** は CSS のプロパティで、 1 回のアニメーション周期が完了するまでの所要時間を設定します。

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

アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである `animation` プロパティを使用すると便利です。

構文
--


```css
/\* 単一のアニメーション \*/
animation-duration: auto; /\* 既定値 \*/
animation-duration: 6s;
animation-duration: 120ms;

/\* 複数のアニメーション \*/
animation-duration: 1.64s, 15.22s;
animation-duration: 10s, 35s, 230ms;

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

### 値

`auto` 
Experimental

時間ベースのアニメーションでは、 `auto` は `0s` の値と等価です（下記参照）。 CSS スクロール駆動アニメーション (en-US)では、 `auto` はタイムライン全体をアニメーションで埋めます。

``<time>``

1 回のアニメーションの周期にかかる時間。この値は、秒 (`s`) またはミリ秒 (`ms`) で指定することができます。値は正の数か 0 でなければならず、単位は必須です。

値が指定されなかった場合、既定値である `0s` が使用され、この場合でもアニメーションは実行されます（`animationStart` と `animationEnd` イベントが発生します）。長さが `0s` のときにアニメーションが表示されるかどうかは、下記で説明する `animation-fill-mode` の値によります。

* `animation-fill-mode` を `backwards` または `both` に設定した場合、 `animation-direction` で定義したアニメーションの最初のフレームが `animation-delay`(/ja/docs/Web/CSS/animation-delay) のカウントダウン中に表示されます。
* `animation-fill-mode` が `forwards` または `both` に設定した場合、アニメーションの最後のフレームは `animation-delay` が経過した後に、 `animation-direction` で定義したように表示されます。
* `animation-fill-mode` を `none` に設定すると、アニメーションは目に見える効果はありません。


**メモ:** 負の数は無効であり、宣言が無視されます。一部、初期の接頭辞付きの実装は `0s` と等価に解釈するかもしれません。

**メモ:** `animation-*` プロパティにカンマ区切りで複数の値を指定した場合、 `animation-name` に現れる順にアニメーションに適用されます。アニメーションの数と `animation-*` プロパティの値が一致しない場合は、複数のアニメーションプロパティ値の設定 を参照してください。

**メモ:** CSS スクロール駆動アニメーション (en-US)を作成するとき、`animation-duration` の値を秒やミリ秒で指定することは実際には意味がありません。テストしたところ、スクロール進行タイムラインアニメーションには効果がないように見えましたが、ビュー進行タイムラインアニメーションでは、アニメーションがタイムラインの終わりに近づいて起こるようになるようでした。しかし、Firefox がアニメーションを正常に適用するには `animation-duration` の設定が要求されます。そのため、Firefoxでアニメーションが動作するように `animation-duration` を `1ms` に設定することをお勧めします。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0s` |
| 適用対象 | すべての要素、`::before` / `::after` 擬似要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | アニメーション不可 |

形式文法
----
```

animation-duration =   
  <time [0s,∞]>#    
  
```

例
-

### アニメーション時間の設定

これは animation-duration が 0.7 秒のアニメーションです。

#### HTML


```html
<div class="box"></div>
```


#### CSS


```css
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
```


#### 結果

矩形の上にカーソルを当てると、アニメーションを開始します。

他の例については、 CSS アニメーションを参照してください。

仕様書
---

| Specification |
| --- |
| CSS Animations Level 1 # animation-duration |

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

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

関連情報
----

* CSS アニメーションの使用
* JavaScript の `AnimationEvent` API
* その他のアニメーション関連プロパティ: `animation`, `animation-composition`, `animation-delay`, `animation-direction`, `animation-fill-mode`, `animation-iteration-count`, `animation-name`, `animation-play-state`, `animation-timeline`, `animation-timing-function`
継承
==

CSS において、**継承** (inheritance) はある要素のあるプロパティに値が指定されなかった場合の挙動を制御します。

CSS プロパティは 2 種類に分類することができます。

* **継承プロパティ**は、既定で親要素の計算値に設定されるものです
* **非継承プロパティ**は、既定でそのプロパティの初期値に設定されるものです

いずれかの CSS プロパティの定義を参照して、それぞれのプロパティが既定値を継承するか ("継承: あり") しないか ("継承: なし") を確認してください。

継承プロパティ
-------

要素の**継承プロパティ**に値が指定されなかった場合、要素はその親要素のプロパティの計算値を取得します。文書のルート要素だけは、プロパティの概要で与えられた初期値を取得します。

継承プロパティの一般例として `color` プロパティが挙げられます。以下のスタイルルールとマークアップを考えてみましょう。


```css
p {
  color: green;
}
```



```html
<p>この段落には<em>強調されたテキスト</em>があります。</p>
```


「強調されたテキスト」という文字列は、 `em` 要素が `p` 要素から `color` プロパティの値を継承する為、プロパティの初期値 (※祖先要素の何れにも color プロパティが指定されていない場合に使用される文字色) ではなく、継承値の緑色となります。

非継承プロパティ
--------

値を持たない**非継承プロパティ**が要素に指定された場合、要素はプロパティの初期値（※各プロパティのページの「概要」の節に記されています）を取得します。

非継承プロパティの一般的な例としては `border` プロパティが挙げられます。以下のスタイルルールとマークアップを考えてみましょう。


```css
p {
  border: medium solid;
}
```



```html
<p>この段落には<em>強調されたテキスト</em>があります。</p>
```


この場合、「強調されたテキスト」という文字列は (`border-style` の初期値が `none` であるため) 境界がありません。

注
-

`inherit` のキーワードで、明示的に継承することを指定することができます。これはこれは継承プロパティでも非継承プロパティでも動作します。

すべてのプロパティに値を適用する `all` 一括指定プロパティを使用することで、すべてのプロパティの継承を制御することができます。例えば、


```css
p {
  all: revert;
  font-size: 200%;
  font-weight: bold;
}
```


これは、 `font` プロパティのスタイルを、ユーザーのスタイルシートがなければユーザーエージェントの既定値に、あればその値に戻します。それからフォントの寸法を倍にして、 `font-weight` に `"bold"` を適用します。

関連情報
----

* 継承を制御する CSS 値: `inherit`, `initial`, `revert`, `revert-layer`, `unset`
* CSS カスケード入門
* カスケードと継承
* CSS の主要概念:
    + CSS の構文
    + アットルール
    + コメント
    + 詳細度
    + ボックスモデル
    + レイアウトモード
    + 視覚整形モデル
    + マージンの相殺
    + 値
        - 初期値
        - 計算値
        - 使用値
        - 実効値
    + 値の定義構文
    + 一括指定プロパティ
    + 置換要素
scroll-behavior
===============

**`scroll-behavior`** は CSS のプロパティで、ナビゲーションや CSSOM のスクローリング API によってスクロールするボックスにスクロールが発生した際の、そのスクロールの振る舞いを設定します。

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

なお、ユーザーが実行したスクロールなど、その他のスクロールはこのプロパティの影響を受けません。このプロパティがルート要素に指定された場合は、代わりにビューポートに適用されます。このプロパティが `body` 要素に指定された場合は、ビューポートには適用され*ません*。

ユーザーエージェントは、このプロパティを無視することができます。

構文
--


```css
/\* キーワード値 \*/
scroll-behavior: auto;
scroll-behavior: smooth;

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


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

### 値

`auto`

スクロールするボックスは瞬時にスクロールします。

`smooth`

スクロールするボックスは、ユーザーエージェント定義のタイミング関数を使い、ユーザーエージェント定義の時間をかけて、円滑にスクロールします。もし存在するなら、ユーザーエージェントはプラットフォームの慣例に従うべきです。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | スクロールするボックス |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | アニメーション不可 |

形式文法
----
```

scroll-behavior =   
  auto    |  
  smooth    
  
```

例
-

### スクロールの動きをスムーズに設定

#### HTML


```html
<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<div class="scroll-container">
  <div class="scroll-page" id="page-1">1</div>
  <div class="scroll-page" id="page-2">2</div>
  <div class="scroll-page" id="page-3">3</div>
</div>
```


#### CSS


```css
a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav,
.scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
.scroll-container {
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
.scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Overflow Module Level 3 # smooth-scrolling |

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

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