recursal/MDN huggingface dataset:
border-inline-start-width
=========================

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

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

構文
--


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

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


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

### 値

`<'border-width'>`

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

公式定義
----

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

形式文法
----
```

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

例
-

### 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-start-width: 5px;
}
```

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # border-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`
max-width
=========

**`max-width`** は CSS のプロパティで、要素の最大幅を設定します。これは `width` プロパティの使用値が、 `max-width` で指定した値を上回ることを防ぎます。

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

`max-width` は `width` を上書きしますが、 `min-width` は `max-width` を上書きします。

構文
--


```css
/\* <length> 値 \*/
max-width: 3.5em;

/\* <percentage> 値 \*/
max-width: 75%;

/\* キーワード値 \*/
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content(20em);

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

### 値

`<length>`

`max-width` を絶対的な値で定義します。

`<percentage>`

`max-width` を包含ブロックの幅に対するパーセント値で定義します。

`none`

ボックスの寸法を制限しません。

`max-content`

内容物が推奨する `max-width` です。

`min-content`

内容物の最小の `max-width` です。

`fit-content(`<length-percentage>`)`

利用可能な空白を指定された引数で置き換えた `fit-content` 式を使用します。すなわち、 `min(max-content, max(min-content, 引数))` です。

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

ページを拡大縮小して文字サイズを拡大した際に、 `max-width` を設定した要素が他のコンテンツを切り捨てたり妨げたりしないことを確認してください。

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

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | 置換要素でないインライン要素、テーブルの行、行グループを除くすべての要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの幅に対する相対値 |
| 計算値 | 指定されたパーセント値または絶対的な長さ、または `none` |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

max-width =   
  none                                      |  
  <length-percentage [0,∞]>                 |  
  min-content                               |  
  max-content                               |  
  fit-content( <length-percentage [0,∞]> )    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### 最大幅をピクセル単位で設定

この例では、 "child" の幅が 150 ピクセルか "parent" の幅のどちらか小さい方になります。

#### HTML


```html
<div id="parent">
  <div id="child">
    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
  </div>
</div>
```


#### CSS


```css
#parent {
  background: lightblue;
  width: 300px;
}

#child {
  background: gold;
  width: 100%;
  max-width: 150px;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # width-height-keywords |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

関連情報
----

* ボックスモデル, `box-sizing`
* `width`, `min-width`
* 対応する論理的プロパティ: `max-inline-size`, `max-block-size`
-moz-float-edge
===============

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

標準外の **`-moz-float-edge`** CSS プロパティは要素の高さと幅のプロパティが margin 、border 、padding の厚さを含んでいるのかを指定します。


```css
/\* キーワード値 \*/
-moz-float-edge: border-box;
-moz-float-edge: content-box;
-moz-float-edge: margin-box;
-moz-float-edge: padding-box;

/\* グローバル値 \*/
-moz-float-edge: inherit;
-moz-float-edge: initial;
-moz-float-edge: unset;
```

構文
--

### 値

`border-box`

高さと幅のプロパティがコンテンツ、padding および border を含むが、margin は含まない。

`content-box`

高さと幅のプロパティがコンテンツを含むが、padding 、border および margin は含まない。

`margin-box`

高さと幅のプロパティがコンテンツ、padding 、 border および margin を含む。

`padding-box`

高さと幅のプロパティがコンテンツと padding を含むが、border および margin は含まない。

公式定義
----

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

形式文法
----
```

-moz-float-edge =
  border-box | content-box | margin-box | padding-box
```

例
-

### HTML


```html
<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
```

### CSS


```css
.box {
  display: block;
  height: 5px;
  margin: 0.5em auto 0.5em auto;
  color: gray;
  -moz-float-edge: margin-box;
  box-sizing: border-box;
}
```

結果
--

仕様書
---

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

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

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

関連情報
----

* Firefox バグ 432891
-moz-image-region
=================

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

`list-style-image` プロパティの画像を使用している特定の XUL 要素や擬似要素では、このプロパティは画像全体の代わりに使用される画像の領域を指定します。これにより、要素は同じ画像の異なる部分を使用してパフォーマンスを向上させることができます。


```css
/\* キーワード値 \*/
-moz-image-region: auto;

/\* <shape> 値 \*/
-moz-image-region: rect(0, 8px, 4px, 4px);

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


構文は `clip` プロパティと似ています。4 つの値はすべて、画像の左上隅を基準にしています。

**メモ:** 背景画像で動作する仕組みについては、 `-moz-image-rect()` を参照してください。

構文
--

### 値

`auto`

使用する画像の領域を自動的に定義します。

`<shape>`

使用する部分画像を定義する図形です。関数 `rect()` は、形状として使用する長方形を定義します。その引数は、画像の上、右、下、左の辺のオフセットを、この順番で定義します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | XUL の `image` 要素と `:-moz-tree-image`, `:-moz-tree-twisty`, `:-moz-tree-checkbox` の各擬似要素。 **注:** `-moz-image-region` はアイコンが `list-style-image` を使用して指定された `image` 要素でしか機能しません。 XUL の `<image src="url" />` では機能しません。 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

### 画像の切り抜き


```css
#example-button {
  /\* この画像の左上から 4x4 の領域のみを表示する \*/
  list-style-image: url("chrome://example/skin/example.png");
  -moz-image-region: rect(0px, 4px, 4px, 0px);
}
#example-button:hover {
  /\* 最初のボタンの右にある 4x4 の領域を、ホバーされたボタンに使用します。 \*/
  -moz-image-region: rect(0px, 8px, 4px, 4px);
}
```

仕様書
---

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

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

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

関連情報
----

* `-moz-image-rect()`
<angle>
=======

**`<angle>`** は CSS のデータ型で、度、グラード、ラジアン、周の値で表される角度の値を表します。例えば、 `<gradient>` 関数や一部の `transform` 関数などで使われています。

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

構文
--

`<angle>` データ型は、1 つの `<number>` とそれに続く以下に挙げる単位の 1 つから成ります。単位と数値の間に空白は置きません。 数値 `0` の後では、角度の単位は任意です。

任意で、先行して単一の符号 (`+` または `-`) を付けることができます。 正の数は時計回りの角度を表し、負の数は反時計回りの角度を表します。静的なプロパティにおいては、ある単位のある角度は、様々な等価の値で表すことができます。例えば、 `90deg` は `-270deg` と等価で、 `1turn` は `4turn` と等価です。しかし、 `animation` や `transition` に適用されるような動的なプロパティでは、効果が異なります。

### 単位

`deg`

角度を度数法 (度) で表します。円一周は `360deg` です。例: `0deg`, `90deg`, `14.23deg`

`grad`

角度をグラードで表します。円一周は `400grad` です。例: `0grad`, `100grad`, `38.8grad`

`rad`

角度を弧度法 (ラジアン) で表します。円一周は 2π ラジアンで、およそ `6.2832rad` です。 `1rad` は 180/π 度です。例: `0rad`, `1.0708rad`, `6.2832rad`

`turn`

角度を回転数で表します。円一周は `1turn` です。例: `0turn`, `0.25turn`, `1.2turn`

例
-

### 時計回りに直角を設定

- : 
![](/ja/docs/Web/CSS/angle/angle90.png)
- : `90deg = 100grad = 0.25turn ≈ 1.5708rad`

|
|  |

### 平角を設定

- : 
![](/ja/docs/Web/CSS/angle/angle180.png)
- : `180deg = 200grad = 0.5turn ≈ 3.1416rad`

|
|  |

### 反時計回りに直角を設定

- : 
![](/ja/docs/Web/CSS/angle/angleminus90.png)
- : `-90deg = -100grad = -0.25turn ≈ -1.5708rad`

|
|  |

### 0 度を設定

- : 
![](/ja/docs/Web/CSS/angle/angle0.png)
- : `0 = 0deg = 0grad = 0turn = 0rad`

|
|  |

仕様書
---

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

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

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

関連情報
----

* CSS データ型
* `<gradient>` 型
* CSS 回転変換: `rotate()`, `rotate3d()`, `rotateX()`, `rotateY()`, `rotateZ()`
* CSS 変換
* CSS 変換の使用
* CSS グラデーションの使用
:scope
======

**`:scope`** は CSS の擬似クラスで、セレクターが選択する対象の参照点である要素を表します。


```css
/\* スコープとなる要素を選択 \*/
:scope {
  background-color: lime;
}
```


現在、スタイルシートで使用したときは、現時点ではスコープ付きの要素を明確に確立する方法がないため、 `:scope` は `:root` と同じです。 DOM API (`querySelector()`, `querySelectorAll()`, `matches()`, `Element.closest()` など) で使用したときは、 `:scope` はメソッドを呼び出した要素を選択します。

構文
--
```

:scope
```

例
-

### ID の一致

この例では、 `Element.matches()` メソッドから `:scope` を使用して呼び出される要素を選択する方法を紹介します。

#### JavaScript


```js
let paragraph = document.getElementById("para");
let output = document.getElementById("output");

if (paragraph.matches(":scope")) {
  output.innerText = "はい、この要素は自分自身のスコープ内にあります！";
}
```


#### HTML


```html
<p id="para">これは段落です。面白い段落ではありません。すみません。</p>
<p id="output"></p>
```


#### 結果

### 直接の子

`:scope` 擬似クラスが有用だと示されるのは、すでに受け取っている `Element` の直接の子を取得する必要がある場合です。

#### JavaScript


```js
var context = document.getElementById("context");
var selected = context.querySelectorAll(":scope > div");

document.getElementById("results").innerHTML = Array.prototype.map
  .call(selected, function (element) {
    return "#" + element.getAttribute("id");
  })
  .join(", ");
```


#### HTML


```html
<div id="context">
  <div id="element-1">
    <div id="element-1.1"></div>
    <div id="element-1.2"></div>
  </div>
  <div id="element-2">
    <div id="element-2.1"></div>
  </div>
</div>
<p>
  Selected elements ids :
  <span id="results"></span>
</p>
```


#### 結果

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # the-scope-pseudo |

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

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

関連情報
----

* `:root` 擬似クラス
* セレクターを使用した DOM 要素の特定
* `Element.querySelector()` および `Element.querySelectorAll()`
* `Document.querySelector()` および `Document.querySelectorAll()`
* `DocumentFragment.querySelector()` および `DocumentFragment.querySelectorAll()`
box-pack
========

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

**警告:** これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報はフレックスボックスを参照してください。

**`-moz-box-pack`** および **`-webkit-box-pack`** は CSS のプロパティで、 `-moz-box` または `-webkit-box` がどのようにレイアウトの方向に内容をまとめるかを指定します。この効果はボックス内に空間がある場合のみ見ることができます。


```css
/\* キーワード値 \*/
box-pack: start;
box-pack: center;
box-pack: end;
box-pack: justify;

/\* グローバル値 \*/
box-pack: inherit;
box-pack: initial;
box-pack: unset;
```


レイアウトの方向は要素の方向、 horizontal または vertical に依存します。

構文
--

`box-pack` プロパティは、以下に列挙されたキーワード値のうちの一つで指定します。

### 値

`start`

ボックスは内容を先頭にまとめ、残りの空間を末尾に残します。

`center`

ボックスは内容を中央にまとめ、残りの空間を先頭と末尾に均等に分配します。

`end`

ボックスは内容を末尾にまとめ、残りの空間を先頭に残します。

`justify`

空間はそれぞれの子の間に均等に配分され、最初の子の前と最後の子の後には空間が配置されません。子が一つだけであれば、値が `start` であるのと同様に扱われます。

メモ
--

ボックスの向きや方向によって、まとめる際に指定するボックスの端は異なります。

* 水平方向の要素の場合、*start* は上端になります。
* 垂直方向の要素の場合、*start* は左端になります。

|  | **Normal** | **Reverse** |
| --- | --- | --- |
| **Horizontal** | left | right |
| **Vertical** | top | bottom |

start と反対の端は *end* で表されます。

まとめ方が要素の `pack` 属性を使用して設定されていた場合は、スタイルは無視されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `start` |
| 適用対象 | CSS の `display` の値が `-moz-box`, `-moz-inline-box`, `-webkit-box`, `-webkit-inline-box` のいずれかである要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

box-pack の例
-----------


```css
div.example {
  border-style: solid;

  display: -moz-box; /\* Mozilla \*/
  display: -webkit-box; /\* WebKit \*/

  /\* このボックスを子よりも高くし、
 box-pack のための余裕を作る \*/
  height: 300px;
  /\* このボックスを、水平方向に中央揃えされた
 内容を表示するのに十分な幅にする \*/
  width: 300px;

  /\* 子を垂直方向に並べる \*/
  -moz-box-orient: vertical; /\* Mozilla \*/
  -webkit-box-orient: vertical; /\* WebKit \*/

  /\* 子をこのボックスの水平方向に中央揃えする \*/
  -moz-box-align: center; /\* Mozilla \*/
  -webkit-box-align: center; /\* WebKit \*/

  /\* 子をこのボックスの下にまとめる \*/
  -moz-box-pack: end; /\* Mozilla \*/
  -webkit-box-pack: end; /\* WebKit \*/
}

div.example p {
  /\* 子を親より狭くして、
 box-align のための余裕を作る \*/
  width: 200px;
}
```



```html
<div class="example">
  <p>I will be second from the bottom of div.example, centered horizontally.</p>
  <p>I will be on the bottom of div.example, centered horizontally.</p>
</div>
```

仕様書
---

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

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

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

関連情報
----

* `box-orient`
* `box-direction`
* `box-align`
:-moz-broken
============

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

**`:-moz-broken`** は CSS の擬似クラスで、 Mozilla 拡張 であり、壊れた画像リンクを表している要素に一致します。

**メモ:** このセレクターは、主にテーマ開発者が使用することを意図しているものです。

構文
--


```css
:-moz-broken;
```

例
-

### HTML


```html
<img src="broken.jpg" alt="This image is broken. :-(" />
```

### CSS


```css
:-moz-broken {
  background: bisque;
  padding: 8px;
}
```

### 結果

仕様書
---

標準の一部ではありません。

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

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

関連情報
----

* `:-moz-loading`, `:-moz-suppressed` (en-US), `:-moz-user-disabled` (en-US)
* Firefox バグ 11011
height
======

**`height`** は CSS のプロパティで、要素の高さを指定します。既定では、このプロパティはコンテンツ領域の高さを定義します。`box-sizing` が `border-box` に設定されていた場合は、 境界領域の高さを定義します。

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

`min-height` および `max-height` プロパティは `height` を上書きします。

構文
--


```css
/\* <length> 値 \*/
height: 120px;
height: 10em;

/\* <percentage> 値 \*/
height: 75%;

/\* キーワード値 \*/
height: max-content;
height: min-content;
height: fit-content(20em);
height: auto;

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

### 値

`<length>`

絶対値で高さを定義します。

`<percentage>`

包含ブロックの高さのパーセントで高さを定義します。

`auto`

指定された要素の高さをブラウザーが計算して決めます。

`max-content`

本来の望ましい高さです。

`min-content`

本来の最小の高さです。

`fit-content(`<length-percentage>`)`

利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち `min(max-content, max(min-content, <length-percentage>))` です。

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

要素の `height` は、テキストを大きくするためにページを拡大したとき、切り捨てたられたり他のコンテンツを邪魔したりしないように設定するよう確認してください。

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

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | 非置換インライン要素、テーブルの列、列グループを除くすべての要素 |
| 継承 | なし |
| パーセント値 | パーセント値は、生成ボックスの包含ブロックの高さを基準に計算されます。 包含ブロックの高さが明示的に定義されず (すなわち、コンテンツの高さに依存します)、この要素が絶対位置指定されていない場合は、値は `auto` になります。ルート要素で高さをパーセント値で指定すると、初期包含ブロックに対する相対値になります。 |
| 計算値 | パーセント値、 `auto`、絶対的な長さのいずれか |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

height =   
  auto                                      |  
  <length-percentage [0,∞]>                 |  
  min-content                               |  
  max-content                               |  
  fit-content( <length-percentage [0,∞]> )    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### ピクセル数とパーセント値を使用して高さを設定

#### HTML


```html
<div id="taller">I'm 50 pixels tall.</div>
<div id="shorter">I'm 25 pixels tall.</div>
<div id="parent">
  <div id="child">I'm half the height of my parent.</div>
</div>
```


#### CSS


```css
div {
  width: 250px;
  margin-bottom: 5px;
  border: 2px solid blue;
}

#taller {
  height: 50px;
}

#shorter {
  height: 25px;
}

#parent {
  height: 100px;
}

#child {
  height: 50%;
  width: 75%;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # preferred-size-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

関連情報
----

* ボックスモデル
* `width`
* `box-sizing`
* `min-height`, `max-height`
* 対応する論理的プロパティ: `block-size`, `inline-size`
font-language-override
======================

**`font-language-override`** は CSS のプロパティで、書体で言語に固有の字形の使用を制御します。


```css
/\* キーワード値 \*/
font-language-override: normal;

/\* <string> 値 \*/
font-language-override: "ENG"; /\* 英語の字形 \*/
font-language-override: "TRK"; /\* トルコ語の字形 \*/

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


既定では、 HTML の `lang` 属性がブラウザーにその言語に特化してデザインされた字形を表示することを指示します。例えば、多くのフォントが合字 `fi` に特別な文字を持っており、 "i" の点を "f" に統合しています。しかし、言語がトルコ語に設定された場合、その書体では統合した字形を使用しません。トルコ語では "i" に、点が付いたもの (`i`) と点が付かないもの (`ı`) の二つの種類があり、この合字を使用すると点が付いた "i" を点がない "ı" に誤った変換をしてしまいます。

`font-language-override` プロパティで、その書体における特定の言語の動作を上書きすることができます。これは例えば、使用している書体でその言語に対して正しい対応が行われていないときに便利です。例えば、ある書体がアゼルバイジャン語の正しい規則を持っていない場合、同様の規則に従うトルコ語の字形を強制的に使用することができます。

構文
--

`font-language-override` プロパティは、キーワード `normal` または一つの `<string>` として指定します。

### 値

`normal`

`lang` 属性で指定された言語で適切なフォントの字形を使用するよう、ブラウザーに指示します。

`<string>`

文字列で指定された言語で適切なフォントの字形を使用するよう、ブラウザーに指示します。値は OpenType language system にある言語タグと一致している必要があります。例えば、 "ENG" は英語で、 "KOR" は韓国語です。

公式定義
----

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

形式定義
----
```

font-language-override =   
  normal    |  
  <string>    
  
```

例
-

### デンマーク語の文字の使用

#### HTML


```html
<p class="para1">Default language setting.</p>
<p class="para2">
  This is a string with the <code>font-language-override</code> set to Danish.
</p>
```


#### CSS


```css
p.para1 {
  font-language-override: normal;
}

p.para2 {
  font-language-override: "DAN";
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-language-override-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`, `font-kerning`
animation-delay
===============

**`animation-delay`** は CSS のプロパティで、アニメーションをいつ開始するかを指定します。アニメーションは未来のある時点から、直ちに最初から、または直ちにアニメーション周期の途中から始めることができます。

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

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

構文
--


```css
/\* 単一のアニメーション \*/
animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;

/\* 複数のアニメーション \*/
animation-delay: 2.1s, 480ms;

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

### 値

``<time>``

アニメーションが要素に適用され、アニメーションが始まる瞬間からのオフセット時間。これは秒 (`s`) またはミリ秒 (`ms`) のどちらかで指定できます。単位は必須です。

正の値を指定すると、指定した時刻が経過した後にアニメーションを始めることを示します。既定値である `0s` は、アニメーションが適用されるとすぐに始めることを示します。

負の数が指定された場合は、アニメーションは直ちに始まりますが、アニメーション周期の途中からになります。例えば、 `-1s` を遅延時間に指定すると、アニメーションは直ちに始まりますが、アニメーションが始まって1秒の時点から始まります。アニメーションの遅延時間に負の値を指定しても、暗黙的に開始値が指定されている場合、開始値はアニメーションが要素に適用された瞬間から取得されます。


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

**メモ:** `animation-delay` は CSS スクロール駆動アニメーション (en-US)では効果がありません。

公式定義
----

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

形式文法
----
```

animation-delay =   
  <time>#    
  
```

例
-

### アニメーションの遅延を設定

このアニメーションは遅延がが 2 秒です。

#### 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;
  animation-delay: 2s;
}

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


#### 結果

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

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

仕様書
---

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

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

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

関連情報
----

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

**`transition-duration`** は CSS のプロパティで、トランジションによるアニメーションが完了するまでの所要時間を秒数またはミリ秒数で指定します。既定値は `0s` であり、これはアニメーションを実行しないことを示します。

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

このプロパティには複数の所要時間を指定することができます。それぞれの時間は、マスターリストを務める `transition-property` プロパティの指定値で対応するプロパティに適用されます。指定した所要時間の数がマスターリストで指定したプロパティの数より少ない場合は、ユーザーエージェントは所要時間のリストを反復して使用します。また所要時間の数が多い場合は、リストを適切な長さに切り詰めます。どちらの場合も、CSS の宣言として妥当です。

構文
--


```css
/\* <time> 値 \*/
transition-duration: 6s;
transition-duration: 120ms;
transition-duration: 1s, 15s;
transition-duration: 10s, 30s, 230ms;

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

### 値

`<time>`

プロパティの古い値から新しい値へ遷移するのにかかる時間を表す `<time>` 形式の値です。時間を `0s` にすると、遷移が起こらないこと、すなわち、2 つの状態間の切り替えが瞬間的であることを示します。負の値を指定すると、宣言は無効になります。

公式定義
----

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

形式文法
----
```

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

例
-

### 様々な所要時間を表す例

#### HTML


```html
<div class="box duration-1">0.5 seconds</div>

<div class="box duration-2">2 seconds</div>

<div class="box duration-3">4 seconds</div>

<button id="change">Change</button>
```


#### CSS


```css
.box {
  margin: 20px;
  padding: 10px;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 18px;
  transition-property: background-color font-size transform color;
  transition-timing-function: ease-in-out;
}

.transformed-state {
  transform: rotate(270deg);
  background-color: blue;
  color: yellow;
  font-size: 12px;
  transition-property: background-color font-size transform color;
  transition-timing-function: ease-in-out;
}

.duration-1 {
  transition-duration: 0.5s;
}

.duration-2 {
  transition-duration: 2s;
}

.duration-3 {
  transition-duration: 4s;
}
```


#### JavaScript


```js
function change() {
  const elements = document.querySelectorAll("div.box");
  for (let element of elements) {
    element.classList.toggle("transformed-state");
  }
}

const changeButton = document.querySelector("#change");
changeButton.addEventListener("click", change);
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Transitions # transition-duration-property |

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

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

関連情報
----

* CSS トランジションの利用
* `transition`
* `transition-property`
* `transition-timing-function`
* `transition-delay`
* `TransitionEvent`