font-variant-numeric - CSS: カスケーディングスタイルシート

font-variant-numeric
====================

**`font-variant-numeric`** は CSS のプロパティで、数字、分数、序数記号の表記を制御するために使用します。

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

構文
--

```css
font-variant-numeric: normal;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: lining-nums; /\* <numeric-figure-values> \*/
font-variant-numeric: oldstyle-nums; /\* <numeric-figure-values> \*/
font-variant-numeric: proportional-nums; /\* <numeric-spacing-values> \*/
font-variant-numeric: tabular-nums; /\* <numeric-spacing-values> \*/
font-variant-numeric: diagonal-fractions; /\* <numeric-fraction-values> \*/
font-variant-numeric: stacked-fractions; /\* <numeric-fraction-values> \*/
font-variant-numeric: oldstyle-nums stacked-fractions;

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

このプロパティは 2 つの形のうちの 1 つを取ります。

* キーワード値 `normal`
* 以下の一覧にあるその他の値を空白区切り、自由な順番で
### 値

`normal`

このキーワードは、別形式の表記の使用を無効にします。

`ordinal`

このキーワードは、序数記号に対して特別な表記を使用します。英語では 1st, 2nd, 3rd, 4th、イタリア語では 1a です。 OpenType の `ordn` の値に対応します。

`slashed-zero`

このキーワードは、スラッシュ付きの 0 を使用します。これは O と 0 を明確に区別する必要がある場合に便利です。 OpenType の `zero` の値に対応します。

*<numeric-figure-values*>

これらの値は、数字の形状を制御します。2 つの値が利用できます。

* `lining-nums` は、全てをベースライン上に並べる表記を有効にします。 OpenType の `lnum` の値に対応します。
* `oldstyle-nums` は、 3, 4, 7, 9 などいくつかの数字を下げる表記を有効にします。 OpenType の `onum` の値に対応します。

*<numeric-spacing-values*>

これらの値は、数字の表記の大きさを制御します。2 つの値が利用できます。

* `proportional-nums` は、数字をすべて同じ大きさにしない表記を有効にします。 OpenType の `pnum` の値に対応します。
* `tabular-nums` は、数字を同じ大きさにする表記を有効にし、表の中に配置しやすくします。 OpenType の `tnum` の値に対応します。

*<numeric-fraction-values*>

これらの値は、分数の表示に使う表記を制御します。2 つの値が利用できます。

* `diagonal-fractions` は、分子と分母が小さめになり、スラッシュで区切られる表記を有効にします。 OpenType の `frac` の値に対応します。
* `stacked-fractions` は、分子と分母が小さめになり、積み重ねられて水平線で区切られた表記を有効にします。 OpenType の `afrc` の値に対応します。

公式定義
----

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

形式文法
----
```

font-variant-numeric =
  normal                                              |
  [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]

<numeric-figure-values> =
  lining-nums    |
  oldstyle-nums

<numeric-spacing-values> =
  proportional-nums  |
  tabular-nums

<numeric-fraction-values> =
  diagonal-fractions  |
  stacked-fractions

```

例
-

### 序数形式の設定

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-variant-numeric-prop |

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

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

関連情報
----

* `font-variant-alternates`
* `font-variant-caps`
* `font-variant-east-asian`
* `font-variant-ligatures`
* `font-variant`


overflow-clip-margin - CSS: カスケーディングスタイルシート

overflow-clip-margin
====================

**`overflow-clip-margin`** は CSS のプロパティで、 `overflow: clip` を持つ要素がクリップされる前に、要素の辺からどれだけ外側に描画できるかを指定します。

構文
--

```css
overflow-clip-margin: 20px;
overflow-clip-margin: 1em;

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

`overflow-clip-margin` プロパティは長さで指定します。負の値は許可されていません。

**メモ:** `overflow: clip` を持たない要素では、このプロパティは無視されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0px` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | the computed <length> and a <visual-box> keyword |
| アニメーションの種類 | 離散値 |

形式文法
----
```

overflow-clip-margin =
  <visual-box>    ||
  <length [0,∞]>

<visual-box> =
  content-box  |
  padding-box  |
  border-box

```

例
-

### HTML

```html
<div class="box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur.
</div>
```

### CSS

```css
.box {
  border: 3px solid black;
  width: 250px;
  height: 100px;
  overflow: clip;
  overflow-clip-margin: 20px;
}
```

### 例

仕様書
---

| Specification |
| --- |
| CSS Overflow Module Level 3 # overflow-clip-margin |

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

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

関連情報
----

* 関連する CSS プロパティ: `text-overflow`, `white-space`, `overflow`, `overflow-inline`, `overflow-x`, `overflow-y`, `clip`, `display`


text-shadow - CSS: カスケーディングスタイルシート

text-shadow
===========

**`text-shadow`** は CSS のプロパティで、テキストに影を追加します。文字列およびその装飾 (`decoration`) に適用される影のリストをカンマで区切ったリストで受け付けます。それぞれの影は、要素からの X および Y オフセット、影の明るさ、影の色のうちいくつかの組み合わせで記述します。

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

構文
--

```css
/\* offset-x | offset-y | blur-radius | color \*/
text-shadow: 1px 1px 2px black;

/\* color | offset-x | offset-y | blur-radius \*/
text-shadow: #fc0 1px 0 10px;

/\* offset-x | offset-y | color \*/
text-shadow: 5px 5px #558abb;

/\* color | offset-x | offset-y \*/
text-shadow: white 2px 5px;

/\* offset-x | offset-y
/\* color および blur-radius は既定値を使用 \*/
text-shadow: 5px 10px;

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

このプロパティは、影のカンマで区切られたリストとして指定します。

それぞれの影は 2 つまたは 3 つの `<length>` 値と、任意でその後に `<color>` 値を続けることで指定します。最初の 2 つの `<length>` 値は、 `<offset-x>` および `<offset-y>` の値です。3 番目の `<length>` 値は任意で `<blur-radius>` です。 `<color>` 値は影の色です。

複数の影が与えられた場合は、影は手前から奥に向けて適用され、最初に指定された影が一番上になります。

このプロパティは `::first-line` および `::first-letter` の両方の擬似要素に適用されます。

### 値

`<color>`

省略可。影の色です。オフセット値の前か後に指定できます。色が指定されなければ、ユーザーエージェントが選択した色が使われるので、ブラウザー間で一貫性を保つために、明示的に定義することが求められます。

`<offset-x> <offset-y>`

必須。これらの `<length>` 値はテキストに対する影のオフセットを指定します。 `<offset-x>` は水平方向の距離を指定します。負の値であればテキストの左に影を配置します。 `<offset-y>` は垂直方向の距離を指定します。負の値であればテキストの上に影を配置します。両方の値が `0` ならば、影はテキストの真後ろに配置されますが、 `<blur-radius>` の効果により一部だけが見えるかもしれません。

`<blur-radius>`

省略可。これは `<length>` 値です。指定されなければ、既定では `0` になります。この値が大きいほど、ぼかしは大きくなり、影は広く薄くなります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | すべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | あり |
| 計算値 | 色に続いて絶対的な長さ 3 つ |
| アニメーションの種類 | a 影のリスト |

形式文法
----
```

text-shadow =
  none                            |
  [ <color>? && <length>{2,3} ]#

```

例
-

### 単純な影

```css
.red-text-shadow {
  text-shadow: red 0 -2px;
}
```

```html
<p class="red-text-shadow">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
</p>
```

### 複数の影

```css
.white-text-with-blue-shadow {
  text-shadow:
    1px 1px 2px black,
    0 0 1em blue,
    0 0 0.2em blue;
  color: white;
  font:
    1.5em Georgia,
    serif;
}
```

```html
<p class="white-text-with-blue-shadow">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
</p>
```

仕様書
---

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-shadow-property |

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

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

関連情報
----

* `<color>` データ型（影の色を指定するため）
* CSS を使った HTML の要素への色の適用
* `box-shadow`
* `drop-shadow()`
* Applying color to HTML elements using CSS


<number> - CSS: カスケーディングスタイルシート

<number>
========

CSS の **`<number>`** データ型は、整数または小数部分のある数値を表します。

構文
--

`<number>` の構文は `<integer>` 構文を拡張したものです。小数は `.` と続く1桁以上の10進数で表し、整数部に追加することができます。数値に関連付けられた単位はありません。

補間
--

`<number>` データ型の値はアニメーション用に補間可能です。実数、浮動小数点数として補間されます。補間の速度は、アニメーションに関連付けられたタイミング関数で決められます。

例
-

### 有効な数値

```css
12          生の <integer> は <number> でもある
4.01        正の実数
-456.8      負の実数
0.0         ゼロ
+0.0        + に続くゼロ
-0.0        - に続くゼロ
.60         前のゼロがない小数値
10e3        指数表記
-3.4e-2     複雑な指数表記
```

### 無効な数値

```css
12.         小数点の後ろには数字が続かなくてはなりません
+-12.2      前に置ける +/- は 1 つだけです
12.1.1      小数点は1つしか置けません
```

仕様書
---

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

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

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

関連情報
----

* `<integer>`


border-image-outset - CSS: カスケーディングスタイルシート

border-image-outset
===================

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

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

* Learn more
* See full compatibility
* Report feedback
**`border-image-outset`** は CSS のプロパティで、要素の境界画像が境界ボックスからはみ出す幅を設定します。

境界画像のうち、 `border-image-outset` によって要素の境界ボックスの外に表示された部分は、はみ出した際にスクロールバーを表示させたり、マウスイベントを受け取ったりすることはありません。

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

構文
--

```css
/\* <length> 値 \*/
border-image-outset: 1rem;

/\* <number> 値 \*/
border-image-outset: 1.5;

/\* 上下 | 左右 \*/
border-image-outset: 1 1.2;

/\* 上 | 左右 | 下 \*/
border-image-outset: 30px 2 45px;

/\* 上 | 右 | 下 | 左 \*/
border-image-outset: 7px 12px 14px 5px;

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

`border-image-outset` プロパティは、1 つから 4 つの値を使用して指定することができます。それぞれの値は `<length>` または `<number>` です。負の値は無効であり、指定すると `border-image-outset` の宣言が無効になります。

1. 値が **1 つ**指定された場合は、**全四辺**に適用されます。
2. 値が **2 つ**指定された場合は、1 つ目が**上下**に、2 つ目が**左右**に適用されます。
3. 値が **3 つ**指定された場合は、1 つ目が**上**に、2 つ目が**左右**に、3 つ目が**下**に適用されます。
4. 値が **4 つ**指定された場合は、**上**、**右**、**下**、**左**の順 (時計回り) で適用されます。
### 値

`<length>`

`border-image` がはみ出す寸法を長さ — 数値と単位で指定します。

`<number>`

`border-image` がはみ出す寸法を、要素の対応する `border-width` の倍数で指定します。例えば、要素が `border-width: 1em 2px 0 1.5rem` で、 `border-image-outset: 2` であると、最終的な `border-image-outset` は `2em 4px 0 3rem` として計算されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | すべての要素。ただし `border-collapse` が `collapse` のときはテーブル要素内部にあるものを除く。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| 計算値 | 指定通り。ただし相対的な長さはは絶対的な長さに変換される |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

border-image-outset =
  [ <length [0,∞]> | <number [0,∞]> ]{1,4}

```

例
-

### 境界画像をはみ出させる

#### HTML

```html
<div id="outset">この要素の境界画像ははみ出しています。</div>
```

#### CSS

```css
#outset {
  width: 10rem;
  background: #cef;
  border: 1.4rem solid;
  border-image: radial-gradient(#ff2, #55f) 40;
  border-image-outset: 1.5; /\* 1.5 × 1.4rem = 2.1rem \*/
  margin: 2.1rem;
}
```

#### 例

仕様書
---

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

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

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

関連情報
----

* 背景と境界
* CSS の学習: 背景と境界


:read-only - CSS: カスケーディングスタイルシート

:read-only
==========

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

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

* Learn more
* See full compatibility
* Report feedback
**`:read-only`** は CSS の擬似クラスで、ユーザーが編集できない要素 (`input` や `textarea` など) を表します。

```css
input:read-only,
textarea:read-only {
  background-color: #ccc;
}

p:read-only {
  background-color: #ccc;
}
```

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

構文
--
```

:read-only
```

例
-

### 読み取り専用/読み書きコントロールによるフォーム情報の確認

`readonly` のフォームコントロールの使用方法の一つは、ユーザーが以前のフォームに入力した情報 (例えば、配送方法の詳細など) をチェックして確認しながら、フォームの残りの部分と一緒に情報を送信することができるようにすることです。以下の例では、これを実現しています。

`:read-only` 擬似クラスは、入力欄をクリック可能なフィールドのように見せるスタイル付けをすべて削除するために使用されており、読み取り専用の段落のように見えます。一方、 `:read-write` 擬似クラスは、編集可能な `<textarea>` により良いスタイル付けを行うために使用されています。

```css
input:-moz-read-only,
textarea:-moz-read-only,
input:read-only,
textarea:read-only {
  border: 0;
  box-shadow: none;
  background-color: white;
}

textarea:-moz-read-write,
textarea:read-write {
  box-shadow: inset 1px 1px 3px #ccc;
  border-radius: 5px;
}
```

完全なソースコードは readonly-confirmation.html にあります。以下のように表示されます。

### フォーム以外の読み取り専用コントロールのスタイル付け

このセレクターは `<input>`/`<textarea>` 要素に `readonly` が設定されているものだけを選択するのではありません。ユーザーが編集できない*あらゆる*要素を選択します。

```html
<p contenteditable>この段落は編集可能です。読み書き可です。</p>

<p>この段落は編集できません。読み取り専用です。</p>
```

```css
p {
  font-size: 150%;
  padding: 5px;
  border-radius: 5px;
}

p:read-only {
  background-color: red;
  color: white;
}

p:read-write {
  background-color: lime;
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # selector-read-only |
| Selectors Level 4 # rw-pseudos |

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

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

関連情報
----

* `:read-write`
* HTML の `contenteditable` 属性


CSS レイアウト料理帳 - CSS: カスケーディングスタイルシート

CSS レイアウト料理帳
============

CSS レイアウト料理帳は、よくあるレイアウトパターンや、自分のサイトに実装する可能性がある事柄のレシピを共有するためのものです。プロジェクトの出発点として使うことができるコードを提供することに加えて、これらのレシピは様々な方法のレイアウト仕様書を使用することができることに光を当て、開発者として選択ができるようにします。

**メモ:** CSS のレイアウトが初めてならば、最初に CSS レイアウト学習モジュールを見て、ここのレシピを活用するのに必要な基本的な背景知識を得た方が良いかもしれません。

レシピ
---

| レシピ | 説明 | レイアウト手法 |
| --- | --- | --- |
| メディアオブジェクト | 一方が画像でもう一方が説明テキストである二列のボックス。 例えば Facebook の投稿やツイート。 | CSS グリッド、`float` による代替、`fit-content` による寸法制御 |
| 欄 | 段組みレイアウト、フレックスボックス、グリッドの選択 | CSS グリッド, 段組み, フレックスボックス |
| 要素を中央に配置 | アイテムを水平および垂直方向に中央に配置する方法 | フレックスボックス, ボックス配置 |
| 張り付くフッター | コンテンツが短い場合にコンテナーまたはビューポートの最下部に配置されるフッターの作成。 | CSS グリッド, フレックスボックス |
| ナビゲーションの分割 | 一部のリンクが他と視覚的に分割されているナビゲーションパターン。 | フレックスボックス, `margin` |
| パンくずナビゲーション | 来訪者がページ階層の上の階層に戻ることができるリンクのリストの作成。 | フレックスボックス |
| バッジ付きリストグループ | カウントを表示するバッジの付いたアイテムのリスト。 | フレックスボックス, ボックス配置 |
| ページ付け | コンテンツのページへのリンク (検索結果など)。 | フレックスボックス, ボックス配置 |
| カード | カードのグリッドで表示されるカードコンポーネント。 | CSS グリッド |
| グリッドラッパー | グリッドコンテンツを中央のラッパー内に配置するためのもので、はみ出すこともできます。 | CSS グリッド |

レシピにご協力を
--------

MDN 全体として、上記にあるものと同じ形式のレシピを提供していただけると助かります。 例を書くテンプレートやガイドラインはこちらのページを見てください。


CSS カスタムプロパティ（変数）の使用 - CSS: カスケーディングスタイルシート

CSS カスタムプロパティ（変数）の使用
====================

**カスタムプロパティ**（**CSS 変数**や**カスケード変数**と呼ばれることもあります）は、CSS の作者によって作成され、文書全体で再利用可能な特定の値を含むエンティティです。カスタムプロパティ記法（たとえば、**`--main-color: black;`**）で設定し、`var()` 関数（たとえば、 `color: var(--main-color);`）でアクセスします。

複雑なウェブサイトには、膨大な量の CSS があり、しばしば同じ値が使われています。たとえば、同じ色が異なる場所で数百も使われており、色を変更する場合、グローバルに検索し、置き換えをしなくてはなりません。カスタムプロパティを使えば、一ヶ所に値を保存しておき、複数の場所から参照することができます。更なるメリットとして、意味的な識別をしやすくなります。たとえば、 `--main-text-color` は `#00ff00` より、とりわけ同じ色がさまざまな文脈で使われる場合は理解しやすいでしょう。

カスタムプロパティはカスケードの対象であり、親から値を継承します。

**メモ:** 変数は、メディアクエリーやコンテナークエリーの中では動作しません。`var()` 関数は、要素のすべてのプロパティの、任意の場所で使用することができます。`var()` 関数はプロパティ名やセレクターなど、プロパティ値以外のところでは使用できません。従って、メディアクエリーやコンテナークエリーの中では使用できません。

基本的な使用方法
--------

カスタムプロパティの宣言は、ハイフン 2 つ (`--`) で始まるカスタムプロパティ名と、何らかの有効な CSS 値になるプロパティ値を使用することで行われます。他のプロパティと同様、これはルールセットの中で次のように書きます。

```css
element {
  --main-bg-color: brown;
}
```

なお、ルールセットに指定されたセレクターは、カスタムプロパティを使用することができるスコープを定義します。よく使われる方法は、カスタムプロパティを `:root` 擬似クラスで定義することで、これにより HTML 文書の全体にわたって適用することができます。

```css
:root {
  --main-bg-color: brown;
}
```

但し、これは常にこうしなければならないわけではありません。カスタムプロパティのスコープを制限する良い理由があるかもしれません。

**メモ:** カスタムプロパティの名前は大文字小文字を区別します。 — `--my-color` は `--My-color` とは別なカスタムプロパティとして扱われます。

前述の通り、普通のプロパティ値の代わりに `var()` 関数の中でカスタムプロパティ名を使用することで、カスタムプロパティの値を使用することができます。

```css
element {
  background-color: var(--main-bg-color);
}
```

カスタムプロパティの第一歩
-------------

それぞれ異なるクラスの要素に同じ色を適用するシンプルな CSS から始めましょう。

```css
.one {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 100px;
}

.five {
  background-color: brown;
}
```

これを下の HTML に適用します。

```html
<div>
  <div class="one">1:</div>
  <div class="two">2: Text <span class="five">5 - more text</span></div>
  <input class="three" />
  <textarea class="four">4: Lorem Ipsum</textarea>
</div>
```

このようになるはずです。

:root 擬似クラスの使用
--------------

CSS 中に同じ宣言が繰り返し出てくることに注意してください。いろいろな場所で背景色が `brown` に設定されています。 CSS の宣言によっては、カスケードの上流でこれを宣言し、 CSS の継承によってこの問題を自然に解決することもできます。些末なプロジェクトを除いて、常にこの手法が使えるわけではありません。 `:root` 擬似クラスでカスタムプロパティを宣言し、文書内の必要な場所で使用することで、繰り返して書く必要性を減らすことができるのです。

```css
:root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 100px;
}

.five {
  background-color: var(--main-bg-color);
}
```

```
<div>
  <div class="one"></div>
  <div class="two">Text <span class="five">- more text</span></div>
  <input class="three" />
  <textarea class="four">Lorem Ipsum</textarea>
</div>
```

この例では、前回の例と同じ結果になりますが、目的のプロパティ値の正規宣言を1つだけ行うことができます。後でページ全体の値を変更したい場合に、とても有益です。

カスタムプロパティの継承
------------

カスタムプロパティは継承されます。これはつまり、もし与えられた要素にカスタムプロパティの値がない場合、その値は親の値を使用するということです。 HTML を見てみましょう。

```html
<div class="one">
  <div class="two">
    <div class="three"></div>
    <div class="four"></div>
  </div>
</div>
```

下記の CSS を適用するとします。

```css
.two {
  --test: 10px;
}

.three {
  --test: 2em;
}
```

この場合、 `var(--test)` の結果は以下の通りです。

* `class="two"` の要素: `10px`
* `class="three"` の要素: `2em`
* `class="four"` の要素: `10px` (親から継承)
* `class="one"` の要素: *無効な値*、これはすべてのカスタムプロパティの既定値です。

これらはカスタムプロパティであり、実際には他のプログラミング言語で見られるような変数ではないことに留意してください。値は必要に応じて計算され、他のルールで使用するために格納されるわけではありません。例えば、要素にプロパティを設定して、兄弟の子孫のルールで受け取ることを期待することはできません。通常の CSS と同様、プロパティは一致するセレクターおよびその子孫に対してのみ設定されます。

カスタムプロパティ代替値
------------

`var()` 関数を使用して、指定された変数が定義されていない場合の**代替値**を複数定義することができます。カスタム要素およびシャドウ DOM で作業するときに便利なことがあります。

**メモ:** 代替値はブラウザーの互換性を修正するためには使用されません。ブラウザーが CSS カスタムプロパティに対応していない場合、代替値は助けになりません。これは CSS カスタムプロパティに対応しているブラウザーのための単なるバックアップであり、与えられた変数が定義されていなかったり、無効な値であったりした場合に別な値を選択させるためのものです。

関数の最初の引数は、代替されるカスタムプロパティの名前です。関数の二番目の引数は、もしあれば、参照されたカスタムプロパティが無効であった場合に代わりに使用される代替値です。この関数は引数を 2 つだけ受け付けるので、最初のカンマの後のものは、すべて二番目の引数として割り当てます。二番目の引数が無効な場合、次のように代替処理は失敗します。

```css
.two {
  /\* --my-var が定義されていなければ red \*/
  color: var(--my-var, red);
}

.three {
  /\* my-var 及び --my-background が定義されていなければ pink \*/
  background-color: var(--my-var, var(--my-background, pink));
}

.three {
  /\* 無効: "--my-background, pink" \*/
  background-color: var(--my-var, --my-background, pink);
}
```

代替としてのカスタムプロパティを含めるには、上記の二番目の例のようにすることが、複数の代替値を提供するための正しい方法です。この技法は変数全体を解釈するのにより時間が掛かるので、性能上の問題が見られます。

**メモ:** 代替値の構文は、カスタムプロパティの場合のように、カンマを使用することができます。例えば、 `var(--foo, red, blue)` は `red, blue` という代替値を定義します。最初のカンマから関数の終わりまでが代替値とみなされます。

値と妥当性
-----

CSS の各プロパティには、定義された値のセットを割り当てることができます。プロパティに有効な値の集合から外れた値を割り当てた場合、そのプロパティは「無効」とみなされます。

ブラウザーは、通常のプロパティに無効な値が設定された場合、その値を破棄し、要素には、その宣言が単に存在しない場合に設定されるはずの値が割り当てられます。

しかし、カスタムプロパティの値が解釈されるとき、ブラウザーはその値がどこで使用されるかをまだ知らないので、ほとんどすべての値を*妥当*とみなす必要があります。

残念なことに、これらの値は妥当であっても、意味のない可能性がある場所で `var()` 関数表記で使用することができてしまいます。プロパティとカスタム変数が無効な CSS 文を生成する可能性があることから、*計算時に妥当*という新しい概念が導かれます。

ブラウザーが無効な `var()` の置き換えに遭遇した場合、プロパティの初期値または継承値が使用されます。

次の 2 つの例でこれを説明します。

### 無効な通常プロパティ

この例では、`16px` という値を `color` プロパティに適用しようとしています。これは無効であるため、CSS は破棄され、結果はルールが存在しなかったかのようになり、代わりに前回の `color: blue` ルールが適用され、段落は青色となります。

#### HTML

```html
<p>この段落は初期値で黒です。</p>
```

#### CSS

```css
p {
  color: blue;
}

p {
  color: 16px;
}
```

#### 結果

### 無効なカスタムプロパティ

この例は前回のものと同様ですが、カスタムプロパティを使用しています。

期待通りに、ブラウザーは `--text-color` の値で `var(--text-color)` の場所を置き換えようとしますが、 `16px` は `color` に妥当なプロパティ値ではありません。置き換え後、プロパティは意味をなさなくなります。ブラウザーはこの状況を 2 段階で扱います。

1. `color` プロパティが継承可能であるかを確認します。可能ですが、 `<p>` には `color` プロパティを持つ親がありません。よって次の段階に進みます。
2. 値を**既定の初期値**、つまり、黒に設定します。

#### HTML

```html
<p>この段落は初期値で黒です。</p>
```

#### CSS

```css
:root {
  --text-color: 16px;
}

p {
  color: blue;
}

p {
  color: var(--text-color);
}
```

#### 結果

JavaScript での値
--------------

カスタムプロパティを JavaScript で使用するには、標準のプロパティのようにします。

```js
// インラインスタイルから値を取得
element.style.getPropertyValue("--my-var");

// あらゆる場所の変数を取得
getComputedStyle(element).getPropertyValue("--my-var");

// インラインスタイルに値を設定
element.style.setProperty("--my-var", jsVar + 4);
```

関連情報
----

* カスタムプロパティの構文
* `var()`


解決値 - CSS: カスケーディングスタイルシート

解決値
===

**解決値** は CSS プロパティにおいて、 `getComputedStyle()` で返される値です。

ほとんどのプロパティでは計算値がそのまま解決値となりますが、古いプロパティ（`width` と `height` を含む）では、代わりに使用値が解決値となります。プロパティごとの詳細については、以下の仕様書のリンクを参照してください。

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # resolved-values |

関連情報
----

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


<image> - CSS: カスケーディングスタイルシート

<image>
=======

**`<image>`** は CSS の データ型で、二次元の画像を表現します。

構文
--

`<image>` データ型は以下のいずれかによって表すことができます。

* `url()` データ型で記述された画像
* `<gradient>` データ型
* `element()` 関数で定義されたウェブページの一部
* `image()` 関数で定義された画像、画像フラグメント、単色の色
* `cross-fade()` 関数で定義された 2 つ以上の画像の合成
* `image-set()` 関数で定義された、解像度に基づいて定義された画像の選択
解説
--

CSS はさまざま種類の画像を扱うことができます。

* JPEG、PNG、その他のラスター形式の画像のように、*内在的な寸法* (自然の寸法) を持つ画像。
* 単一のファイルの中に複数のバージョンが存在する、*複数の内在的な寸法*を持つ画像。（この場合、内在的な寸法は領域に収まる最も大きな画像であり、かつ縦横比が包含ボックスに最も近いものになります。）
* SVG またはその他のベクター形式の画像のように、内在的な寸法を持たないが、幅と高さの間に自身の縦横比のある画像。
* CSS グラデーションなど、*内在的な寸法がなく、固有の縦横比もない*画像。

CSS はオブジェクトの*実際の*寸法を、 (1) *内在的な寸法*、 (2) CSS の `width`, `height`, `background-size` などのプロパティで定義された*指定の寸法*、 (3) 画像が使用されるプロパティの種類によって指定された、以下のような*既定の寸法*によって特定します。

| オブジェクトの種類（CSS プロパティ） | 既定のオブジェクトの寸法 |
| --- | --- |
| `background-image` | 要素の背景が配置される領域の寸法 |
| `list-style-image` | `1em` の文字の寸法 |
| `border-image-source` | 要素の境界画像領域の寸法 |
| `cursor` | クライアントのシステムにおける通常のカーソルの寸法に合わせたブラウザー定義の寸法 |
| `mask-image` | ? |
| `shape-outside` | ? |
| `mask-border-source` | ? |
| @counter-style の `symbols()` | リスクあり。対応している場合、クライアントのシステムにおける通常のカーソルの寸法に合わせたブラウザー定義の寸法 |
| 擬似要素 (`::after`/`::before`) の `content` | 300px × 150px の矩形 |

正しいオブジェクトの寸法は、次のアルゴリズムを使って計算されます。

* 指定された寸法に*幅と高さの両方*が定義されている場合は、その値が実際の寸法に使われます。
* 指定された寸法に*幅と高さのどちらかのみ*が定義されている場合は、もう一方の値は、画像自身の比率、指定値が一致するなら画像の内在的な寸法、既定のオブジェクトの寸法の値の何れかを使用して決められます。
* 指定された寸法が*幅も高さも定義していない*場合は、実際のオブジェクトの寸法は、画像自身の縦横比に一致し、かつ既定のオブジェクトの寸法をどちらの方向にも超過しない値が計算されます。画像自身の縦横比がない場合は、適用されるオブジェクト自身の縦横比が使用されます。このオブジェクトにも縦横比が存在しない場合は、残りの幅または高さは既定のオブジェクトの寸法から取られます。

**メモ:** すべてのブラウザーがすべてのプロパティですべての種類の画像に対応しているわけではありません。詳細はブラウザーの互換性の節を参照してください。

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

ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。

* MDN WCAG を理解する, ガイドライン 1.1 の解説
* Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0
形式文法
----
```

<image> =
  <url>       |
  <gradient>

<url> =
  <url()>  |
  <src()>

<url()> =
  url( <string> <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> <url-modifier>\* )

```

例
-

### 有効な画像

```css
url(test.jpg)               /\* <url>、但し test.jpg は実在する画像 \*/
linear-gradient(blue, red)  /\* <gradient> \*/
element(#realid)            /\* element() 関数で参照されるウェブページの一部、
 ページ上に "realid" が実在する ID である場合 \*/
image(ltr 'arrow.png#xywh=0,0,16,16', red)
                            /\* arrow.png が対応している画像であれば、 <url> の元画像の
 左上から 16x16 を選択し、そうでなければ赤一色の見本になります。
 言語が右書きの場合は、画像は水平方向に反転します。 \*/
cross-fade(20% url(twenty.png), url(eighty.png))
                            /\* 多重露光の画像で、 twenty が 20% の露光で、
 eighty が 80% の露光になる \*/
image-set('test.jpg' 1x, 'test-2x.jpg' 2x)
                            /\* 様々な解像度による画像の選択 \*/
```

### 無効な画像

```css
nourl.jpg            /\* 画像ファイルは url() 関数により示す必要がある \*/
url(report.pdf)      /\* url() 関数で指すファイルは画像でなければならない \*/
element(#fakeid)     /\* 要素 ID はページ上に実在する ID でなければならない \*/
image(z.jpg#xy=0,0)  /\* 空間フラグメントは xywh=#,#,#,# の書式で書かなければならない \*/
image-set('cat.jpg' 1x, 'dog.jpg' 1x) /\* 画像セット内の画像はすべて異なる解像度でなければならない \*/
```

仕様書
---

| Specification |
| --- |
| CSS Images Module Level 3 # image-values |

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

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

関連情報
----

* `<gradient>`
* `element()`
Experimental
* `image()`
* `image-set()`
* `cross-fade()`


scroll-margin-block-end - CSS: カスケーディングスタイルシート

scroll-margin-block-end
=======================

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

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

構文
--

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

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

### 値

`<length>`

スクロールコンテナーのブロック方向における末尾側の辺からみた外部の距離です。

公式定義
----

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

形式文法
----
```

scroll-margin-block-end =
  <length>

```

仕様書
---

| 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


padding-right - CSS: カスケーディングスタイルシート

padding-right
=============

**`padding-right`** は CSS のプロパティで、要素のパディング領域における右側の幅を設定します。

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

要素のパディング領域とは、コンテンツと境界との間の空間のことです。

**メモ:** `padding` プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。

構文
--

```css
/\* <length> の値 \*/
padding-right: 0.5em;
padding-right: 0;
padding-right: 2cm;

/\* <percentage> の値 \*/
padding-right: 10%;

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

`padding-right` プロパティは、以下のリストから選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。

### 値

`<length>`

パディングの寸法を固定値で表したものです。負の数であってはいけません。

`<percentage>`

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

公式定義
----

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

形式文法
----
```

padding-right =
  <length-percentage [0,∞]>

<length-percentage> =
  <length>      |
  <percentage>

```

例
-

### 右パディングをピクセル数とパーセント値で設定

```css
.content {
  padding-right: 5%;
}
.sidebox {
  padding-right: 10px;
}
```

仕様書
---

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

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

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

関連情報
----

* CSS 基本ボックスモデル入門
* `padding-top`, `padding-bottom`, `padding-left` および `padding` 一括指定
* 対応付けられる論理的プロパティ: `padding-block-start`, `padding-block-end`, `padding-inline-start`, `padding-inline-end` および一括指定の `padding-block` と `padding-inline`


column-rule - CSS: カスケーディングスタイルシート

column-rule
===========

**`column-rule`** は一括指定を行う CSS のプロパティで、段組みレイアウトで段間に引かれる線（段間罫）の太さ、スタイル、色を設定します。

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

これは一括指定プロパティであり、一回の便利な宣言で個別の `column-rule-*` プロパティ (`column-rule-width`, `column-rule-style`, `column-rule-color`) を設定できます。

**メモ:** 他の一括指定プロパティと同様に、指定されなかった個別の値は初期値が設定されます (以前に個別指定プロパティを使用して設定された値を上書きする可能性があります)。

構文
--

```css
column-rule: dotted;
column-rule: solid 8px;
column-rule: solid blue;
column-rule: thick inset blue;

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

`column-rule` プロパティは、以下に挙げる値のうち 1 ～ 3 個を任意の順序で指定します。

### 値

`<'column-rule-width'>`

`<length>` または 3 つのキーワード、 `thin`、`medium`、`thick` のうちの 1 つです。詳しくは `border-width` を参照してください。

`<'column-rule-style'>`

有効な値と詳細は `border-style` を参照してください。

`<'column-rule-color'>`

`<color>` 値です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `column-rule-width`: `medium`
* `column-rule-style`: `none`
* `column-rule-color`: `currentcolor`
 |
| 適用対象 | 段組み要素 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `column-rule-color`: 色の計算値
* `column-rule-style`: 指定通り
* `column-rule-width`: 絶対的な長さ、列の罫線のスタイルが `none` か `hidden` なら `0`
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `column-rule-color`: 色
* `column-rule-style`: 離散値
* `column-rule-width`: length
 |

形式文法
----
```

column-rule =
  <'column-rule-width'>  ||
  <'column-rule-style'>  ||
  <'column-rule-color'>

```

例
-

### 例 1

```css
/\* "medium dotted currentcolor" と同じ \*/
p.foo {
  column-rule: dotted;
}

/\* "medium solid blue" と同じ \*/
p.bar {
  column-rule: solid blue;
}

/\* "8px solid currentcolor" と同じ \*/
p.baz {
  column-rule: solid 8px;
}

p.abc {
  column-rule: thick inset blue;
}
```

### 例 2

#### HTML

```html
<p class="content-box">
  This is a bunch of text split into three columns. Take note of how the
  `column-rule` property is used to adjust the style, width, and color of the
  rule that appears between the columns.
</p>
```

#### CSS

```css
.content-box {
  padding: 0.3em;
  background: #ff7;
  column-count: 3;
  column-rule: inset 2px #33f;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1 # column-rule |

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

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

関連情報
----

* 段組みレイアウト
* `column-rule-style`
* `column-rule-width`
* `column-rule-color`


font-stretch - CSS: カスケーディングスタイルシート

font-stretch
============

**`font-stretch`** は CSS のプロパティで、フォントの normal, condensed, expanded のフェイスを選択します。

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

構文
--

```css
/\* キーワード値 \*/
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;

/\* パーセント値 \*/
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;

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

このプロパティは、単一のキーワード値または単一の `<percentage>` 値として指定することができます。

### 値

`normal`

通常のフォントフェイスを指定します。

`semi-condensed`, `condensed`, `extra-condensed`, `ultra-condensed`

通常より幅の狭い (condensed) フォントフェイスを指定します。最も幅の狭いフェイスは ultra-condensed です。

`semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded`

通常より幅の広い (expanded) フォントフェイスを指定します。最も幅の広いフェイスは ultra-expanded です。

`<percentage>`

`<percentage>` 値です。このプロパティでは負の数は許可されていません。

### キーワードと数値の対応

以下の表は、キーワード値とパーセントの数値の間の対応を示しています。

| キーワード | パーセント値 |
| --- | --- |
| `ultra-condensed` | 50% |
| `extra-condensed` | 62.5% |
| `condensed` | 75% |
| `semi-condensed` | 87.5% |
| `normal` | 100% |
| `semi-expanded` | 112.5% |
| `expanded` | 125% |
| `extra-expanded` | 150% |
| `ultra-expanded` | 200% |

解説
--

フォントファミリーによっては追加のフェイスを提供しており、通常より狭い文字、 (*condensed* フェイス)、通常より広い文字 (*expanded* フェイス) などがあります。

`font-stretch` を使うと、そのようなフォントで condensed や expanded フェイスを選択することができます。使用しているフォントが condensed や expanded フェイスを提供していない場合は、このプロパティは効果がありません。

#### フォントフェイスの選択

`font-stretch` で与えられた値で選択されるフェイスは、フォントがそのフェイスに対応しているかによります。与えられた値に正確に一致するフェイスがフォントに存在しない場合、値が 100% よりも小さい場合はより狭いフェイスが割り当てられ、100% と等しいか大きい場合はより広いフェイスが割り当てられます。

以下の表は 2 つの異なるフォントにおいて、 `font-stretch` に様々なパーセント値を提供した場合の効果を示しています。
```

@font-face {
  font-family: "Inconsolata";
  src: url("https://fonts.gstatic.com/s/inconsolata/v31/QlddNThLqRwH-OJ1UHjlKENVzlm-WkL3GZQmAwPyya15.woff2")
    format("woff2");
  font-stretch: 50% 200%;
}

@font-face {
  font-family: "Anek Malayalam";
  src: url("https://fonts.gstatic.com/s/anekmalayalam/v4/6qLUKZActRTs\_mZAJUZWWkhke0nYa-f6\_\_Azq3-gP1W7db9\_.woff2")
    format("woff2");
  font-stretch: 75% 125%;
}

td {
  border: solid;
  border-width: 1px;
}

#inconsolata td {
  font:
    90px Inconsolata,
    sans-serif;
}
#anek-malayalam td {
  font: 90px "Anek Malayalam";
}
#inconsolata td:nth-child(2),
#anek-malayalam td:nth-child(2) {
  font-stretch: 50%;
}
#inconsolata td:nth-child(3),
#anek-malayalam td:nth-child(3) {
  font-stretch: 62.5%;
}
#inconsolata td:nth-child(4),
#anek-malayalam td:nth-child(4) {
  font-stretch: 75%;
}
#inconsolata td:nth-child(5),
#anek-malayalam td:nth-child(5) {
  font-stretch: 87.5%;
}
#inconsolata td:nth-child(6),
#anek-malayalam td:nth-child(6) {
  font-stretch: 100%;
}
#inconsolata td:nth-child(7),
#anek-malayalam td:nth-child(7) {
  font-stretch: 112.5%;
}
#inconsolata td:nth-child(8),
#anek-malayalam td:nth-child(8) {
  font-stretch: 125%;
}
#inconsolata td:nth-child(9),
#anek-malayalam td:nth-child(9) {
  font-stretch: 150%;
}
#inconsolata td:nth-child(10),
#anek-malayalam td:nth-child(10) {
  font-stretch: 200%;
}
```

```
<table class="standard-table">
  <thead>
    <tr>
      <th scope="row"></th>
      <th scope="col">50%</th>
      <th scope="col">62.5%</th>
      <th scope="col">75%</th>
      <th scope="col">87.5%</th>
      <th scope="col">100%</th>
      <th scope="col">112.5%</th>
      <th scope="col">125%</th>
      <th scope="col">150%</th>
      <th scope="col">200%</th>
    </tr>
  </thead>
  <tbody>
    <tr id="inconsolata">
      <th scope="row">Inconsolata</th>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
    </tr>
    <tr id="anek-malayalam">
      <th scope="row">Anek Malayalam</th>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
    </tr>
  </tbody>
</table>
```

* Anek Malayalam は 75% から 125% の幅に対応している可変の Google フォントです。この範囲を下回る値と上回る値では、最も一致するフォントが選択されます。
* Inconsolata は、 50% から 200% まで連続的に幅を変化させることができる可変フォントです。
公式定義
----

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

形式文法
----
```

font-stretch =
  normal              |
  <percentage [0,∞]>  |
  ultra-condensed     |
  extra-condensed     |
  condensed           |
  semi-condensed      |
  semi-expanded       |
  expanded            |
  extra-expanded      |
  ultra-expanded

```

例
-

### フォントの引き伸ばしパーセント値の設定

仕様書
---

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

**メモ:** CSS プロパティ `font-stretch` は初め CSS 2 で定義されましたが、CSS 2.1 で実装経験不足のため外されました。CSS 3 では新しく定義されました。

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

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

関連情報
----

* `font-style`
* `font-weight`
* 基本的なテキストとフォントの装飾


scroll-timeline - CSS: カスケーディングスタイルシート

scroll-timeline
===============

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

**`scroll-timeline`** は CSS の一括指定プロパティで、スクロール可能な要素（*スクローラー*）を上下（または左右）にスクロールすることで進行する名前付きスクロール進行タイムラインを定義するために使用します。 `scroll-timeline` はタイムラインを提供するスクローラーに設定します。スクロール開始位置は 0% の進行を表し、スクロール終了位置は 100% の進行を表します。 0% の位置と 100% の位置が一致する場合（つまり、スクロールコンテナーがスクロールするオーバーフローがない場合）、タイムラインは非アクティブになります。

`scroll-timeline` には 2 つのコンテナー値、名前付きスクロール進行タイムラインの名前と、オプションのスクロール軸の値を指定することができます。

この名前は、`animation-timeline` 宣言で参照され、スクロールアクションを通してアニメーションの進行を使用するコンテナーの要素を示します。

**メモ:** スクローラーが軸方向の寸法でコンテナーをオーバーフローしない場合、またはオーバーフローが非表示またはクリッピングされている場合、タイムラインは作成されません。

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

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

* `scroll-timeline-name`
* `scroll-timeline-axis`
構文
--

```css
/\* 2 つの値: それぞれ scroll-timeline-name と scroll-timeline-axis が 1 つずつ \*/
scroll-timeline: --custom_name_for_timeline block;
scroll-timeline: --custom_name_for_timeline inline;
scroll-timeline: --custom_name_for_timeline y;
scroll-timeline: --custom_name_for_timeline x;
scroll-timeline: none block;
scroll-timeline: none inline;
scroll-timeline: none y;
scroll-timeline: none x;

/\* 1 つの値: scroll-timeline-name \*/
scroll-timeline: none;
scroll-timeline: --custom_name_for_timeline;
```

`scroll-timeline` 一括指定プロパティは `<scroll-timeline-name>` と `<scroll-timeline-axis>` の値の組み合わせとしてコンテナー要素に適用することができます。少なくともどちらか一方の値を指定しなければなりません。両方の値を指定する場合は、`<scroll-timeline-name>` 値の後に `<scroll-timeline-axis>` 値が続くようにしなければなりません。

**メモ:** `<scroll-timeline-name>` は `<dashed-ident>` 値でなければなりません。すなわち、 `--` で始めなければなりません。これは標準 CSS キーワードとの名前の衝突を避けるのに役立ちます。

### 値

`<scroll-timeline-name>`

`scroll-timeline-name` を参照してください。

`<scroll-timeline-axis>`

`scroll-timeline-axis` を参照してください。既定値は `block` です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `scroll-timeline-name`: `none`
* `scroll-timeline-axis`: `block`
 |
| 適用対象 | スクロールコンテナー |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `scroll-timeline-name`: `none` または識別子の順序付きリスト
* `scroll-timeline-axis`: 指定通り
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `scroll-timeline-name`: アニメーション不可
* `scroll-timeline-axis`: アニメーション不可
 |

形式文法
----
```

scroll-timeline =
  [ <'scroll-timeline-name'> <'scroll-timeline-axis'>? ]#

```

例
-

### 名前付きスクロール進行タイムラインのアニメーションの作成

 この例では、`--squareTimeline` という名前のスクロールタイムラインを `container` という ID の要素に `scroll-timeline-name` プロパティを使用して定義しています。
 これを `#square` 要素のアニメーションに適用するには、 `animation-timeline: --squareTimeline` を使用します。

#### HTML

この例の HTML は次の通りです。

```html
<div id="container">
  <div id="square"></div>
  <div id="stretcher"></div>
</div>
```

#### CSS

コンテナー用の CSS では、`--squareTimeline` という名前のスクロールタイムラインのソースとして、`scroll-timeline-name` プロパティを使用して設定します。既定で縦軸を使用するので、スクロールバー軸は定義しません。

コンテナーの高さは `300px` に設定し、コンテナーがはみ出した場合は垂直スクロールバーを作成するように設定します（下記の `stretcher` 要素の CSS `height` ルールはコンテンツをコンテナーからはみ出させます）。

```css
#container {
  height: 300px;
  overflow-y: scroll;
  scroll-timeline: --squareTimeline y;
  /\* Firefox supports the older "vertical" syntax \*/
  scroll-timeline: --squareTimeline vertical;
  position: relative;
}
```

下記の CSS は `animation-timeline` プロパティで指定されたタイムラインに従って回転する正方形を定義しています（このプロパティは上記の `--squareTimeline` タイムラインに設定されています）。

```css
#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  animation-name: rotateAnimation;
  animation-duration: 1ms; /\* Firefox では、アニメーションを適用するために必要 \*/
  animation-timeline: --squareTimeline;
  position: absolute;
  bottom: 0;
}

#stretcher {
  height: 600px;
  background: #dedede;
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
```

`stretcher` の CSS ルールでは、ブロックの高さを `600px` に設定します。これにより、コンテナー要素をはみ出すコンテンツが作成され、スクロールバーが作成されます。
 この要素がなければ、コンテナーからコンテンツがはみ出さないので、スクロールバーが存在せず、したがってアニメーションタイムラインに関連付けるスクロールタイムラインも存在しません。

#### 結果

垂直バーをスクロールすると、正方形がアニメーションします。

正方形はスクロールに合わせてアニメーションし、 `scroll-timeline` を使用した場合のアニメーション時間はスクロール速度に依存します（それにもかかわらず、 `animation-duration` プロパティが定義されているので、スクロール駆動アニメーションを確認することができます）。

仕様書
---

| Specification |
| --- |
| Scroll-driven Animations # scroll-timeline-shorthand |

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

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

関連情報
----

* `animation-timeline`
* `scroll-timeline-axis`, `scroll-timeline-name`
* `timeline-scope` (en-US)
* CSS スクロール駆動アニメーション (en-US)


initial - CSS: カスケーディングスタイルシート

initial
=======

**`initial`** は CSS のキーワードで、要素にプロパティの初期値（または既定値）を設定します。どの CSS プロパティにも適用できます。これは、 CSS の一括指定プロパティ `all` を 含め、すべての CSS プロパティに適用することができます。 `all` を `initial` に設定すると、すべての CSS プロパティをそれぞれの初期値に戻すことができます。

継承プロパティでは、初期値は予期せぬ値になるかもしれません。代わりに `inherit`, `unset`, `revert`, `revert-layer` キーワードを使用することを検討してください。

例
-

### initial を使用して要素の色を初期化

#### HTML

```html
<p>
  <span>このテキストは赤です。</span>
  <em>このテキストは初期値（ふつうは黒）です。</em>
  <span>これは再び赤です。</span>
</p>
```

#### CSS

```css
p {
  color: red;
}

em {
  color: initial;
}
```

#### 結果

この例では `initial` キーワードにより、`em` 要素の `color` 値は、仕様書で定義されている `color` の初期値に戻されます。

仕様書
---

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4 # initial |

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

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

関連情報
----

* `inherit` キーワードを使用すると、要素のプロパティを親と同じ値にします。
* `revert` キーワードを使用すると、プロパティをユーザーエージェントのスタイルシート（またはもしあれば、ユーザーのスタイル）で設定された値に初期化します。
* `revert-layer` キーワードを使用すると、プロパティを直前のカスケードレイヤーで確立された値に戻します。
* `unset` キーワードを使用すると、継承プロパティは継承値に、それ以外は初期値に設定します。
* `all` プロパティは、すべてのプロパティを一度に initial, inherit, revert, unset の状態にします。


background-size - CSS: カスケーディングスタイルシート

background-size
===============

**`background-size`** は CSS のプロパティで、要素の背景画像の寸法を設定します。画像は自然な寸法になったり、引き伸ばされたり、利用可能な領域に収まるように縮小されたりします。

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

背景画像に覆われていない領域は `background-color` プロパティで埋められ、背景画像の後ろに見える背景色は透過性があります。

構文
--

```css
/\* キーワード値 \*/
background-size: cover;
background-size: contain;

/\* 値 1 つの構文 \*/
/\* 画像の幅 (高さは 'auto' になる) \*/
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;

/\* 値 2 つの構文 \*/
/\* 1 つ目の値は画像の幅、2番目の値は高さ \*/
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

/\* 複数の背景 \*/
background-size: auto, auto; /\* `auto auto` と混同しないでください \*/
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

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

`background-size` プロパティは以下のいずれか 1 つの方法で指定します。

* `contain` または `cover` のキーワード値を使用
* 幅の値のみを使用、この場合の高さは既定の `auto` になります。
* 幅と高さの値の両方を使用、この場合は 1 番目の値で幅を、2 番目の値で高さを設定します。どちらの値も `<length>`、 `<percentage>` または `auto` のいずれかになります。

複数の背景画像の寸法を指定するには、それぞれの値をカンマで区切ってください。

### 値

`contain`

画像を切り取ったり縦横比を崩したりすることなく、コンテナー内で可能な限り大きくします。コンテナーが画像よりも大きい場合、`background-repeat` プロパティが `no-repeat` に設定されていない限り、画像がタイル状に配置されます。

`cover`

画像をコンテナーいっぱいにできるだけ大きく拡大縮小し、必要に応じて画像を引き伸ばします。画像の比率が要素と異なる場合は、何もない空間が残らないように、上下または左右が切り取られます。

`auto`

背景画像の本来の比率が維持されるように、対応する方向に拡大縮小します。

`<length>`

その軸が指定された長さになるよう画像を拡大縮小します。負の値は使用できません。

`<percentage>`

その軸が*背景配置領域*の指定された割合になるよう拡大縮小します。背景配置領域とは、 `background-origin` の値 (既定ではパディングボックス) によって定められます。しかし、背景の `background-attachment` の値が `fixed` の場合、配置領域はビューポート全体となります。負の値は使用できません。

固有の軸と比率
-------

値の計算は画像の固有の寸法 (幅と高さ) と固有の比率 (幅と高さの比率) に依存します。属性は以下の通りです。

* ビットマップ画像 (JPG など) には、常に固有の寸法と比率があります。
* ベクター画像 (SVG など) には固有の寸法がないことがあります。水平と垂直の両方に固有の寸法がある場合は、固有の比率もあります。固有の寸法がなかったり、一方しかなかったりする場合は、固有の比率がある場合もあるしない場合もあります。
* CSS の `<gradient>` には固有の寸法も固有の比率もありません。
* `element()` 関数によって作成された背景画像では、それを作成する要素の固有の寸法と比率を使用します。

**メモ:** Gecko では、 `element()` 関数を使用して作成された背景画像は要素の寸法、または要素が SVG の場合は背景配置領域の寸法を持つ画像として扱われ、適切な固有の比率を持ちます。これは非標準の振る舞いです。

固有の寸法と比率に基づき、背景画像の描画寸法は以下のようにして計算されます。

* **`background-size` の幅と高さがともに定義されていて `auto` でない場合:** 背景画像は指定の寸法で描画されます。
* **`background-size` が `contain` または `cover` の場合:** 固有の比率を維持するため、画像は背景配置領域の中に収まるか、背景配置領域を覆うように描画されます。画像が固有の比率を持たない場合は、背景配置領域の寸法で描画されます。
* **`background-size` が `auto` または `auto auto` の場合:**
    + 画像に水平および垂直の固有の寸法がある場合は、その寸法で描画されます。
    + 画像に固有の寸法も固有の比率もない場合は、背景配置領域の寸法で描画されます。
    + 画像に固有の寸法はない物の固有の比率がある場合は、 `contain` が指定された場合のように描画されます。
    + 画像に一方だけ固有の寸法があり、固有の比率がある場合は、一方の寸法に合わせて描画されます。もう一方の寸法は指定された寸法と固有の比率を使用して計算されます。
    + 画像に一方だけ固有の寸法があり、固有の比率がない場合は、指定された寸法と、もう一方は背景配置領域の寸法を使用して描画されます。
**メモ:** SVG 画像には `preserveAspectRatio` (en-US) 属性があり、既定では `contain` と同等です。明示的に `background-size` が設定されると `preserveAspectRatio` が無視されます。
* **`background-size` の一方が `auto` でもう一方が `auto` ではない場合:**
    + 画像に固有の比率がある場合は、指定された寸法まで拡大縮小されます。指定されていない方の寸法は指定された寸法と固有の比率を使用して計算されます。
    + 画像に固有の比率がない場合は、指定された寸法まで拡大縮小されます。指定されていない方の寸法は、画像の指定された寸法を使用して計算されます。そのような固有の寸法がない場合、背景配置領域の適切な寸法になります。
**メモ:** 固有の寸法や比率を持たないベクター画像の背景の拡大縮小は、まだすべてのブラウザーで完全に実装されているわけではありません。上記に記述した振る舞いに注意し、結果が適切であるかを複数のブラウザーで確認してください。
### グラデーションでの動き

背景に `<gradient>` を使用し、それに合わせて `background-size` を指定した場合、`auto` を 1 つだけ使用する大きさや、幅の値だけで指定する大きさ (例: `background-size: 50%`) は、指定しないほうがよいでしょう。こういった場合のグラデーションの描画方法は Firefox 8 で変更され、現在のところ CSS3 の `background-size` 仕様や CSS3 の Image Values gradient 仕様に完全準拠した描画方式をすべて実装していない他ブラウザーと、たいていは一致しません。

```css
.gradient-example {
  width: 50px;
  height: 100px;
  background-image: linear-gradient(blue, red);

  /\* 利用が安全ではない \*/
  background-size: 25px;
  background-size: 50%;
  background-size: auto 50px;
  background-size: auto 50%;

  /\* 利用可能 \*/
  background-size: 25px 50px;
  background-size: 50% 50%;
}
```

なお、 `<gradient>` に対してピクセルの寸法と `auto` を利用することは推奨されません。 Firefox の 8 より前と、 Firefox 8 のレンダリングを実装していないブラウザーでは、背景が指定されている要素の正確な寸法が分からないと、レンダリングできないからです。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto auto` |
| 適用対象 | すべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | なし |
| パーセント値 | 背景配置領域に対する相対値 |
| 計算値 | 指定通り。ただし相対的な長さはは絶対的な長さに変換される |
| アニメーションの種類 | 反復可能リスト |

形式文法
----
```

background-size =
  <bg-size>#

<bg-size> =
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain

<length-percentage> =
  <length>      |
  <percentage>

```

例
-

### 巨大な画像をタイル表示

2982 x 2808 の Firefox ロゴ画像という大きな画像を考えてみましょう。この画像のコピーを 4 枚、300 x 300 ピクセルの要素にタイル状に配置したいとします。これを実現するには、固定の `background-size` 値として 150 ピクセルを使用します。

#### HTML

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

#### CSS

```css
.tiledBackground {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}
```

#### 結果

その他の例は背景画像の拡大縮小を参照してください。

仕様書
---

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

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

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

関連情報
----

* 背景画像の拡大縮小
* 背景 SVG の拡大縮小
* `object-fit`


<frequency> - CSS: カスケーディングスタイルシート

<frequency>
===========

**`<frequency>`** は CSS のデータ型で、話し声の高さなどの周波数の値を表します。今のところ、どの CSS プロパティでも使われていません。

構文
--

`<frequency>` データ型は、 `<number>` とその後に以下に挙げる単位のうちの一つから成ります。他の CSS の数値と同様、単位と数値の間には空白を置きません。

### 単位

`Hz`

周波数をヘルツで表します。例： `0Hz`、 `1500Hz`、 `10000Hz`

`kHz`

周波数をキロヘルツで表します。例： `0kHz`、 `1.5kHz`、 `10kHz`

**メモ:** `0` の数値は単位に関わらず常に同じですが、単位は省略できません。言い換えれば、 `0` は無効で `0Hz` や `0kHz` を表すものではありません。単位の大文字と小文字は区別されませんが、国際単位系の表記に従って、 `Hz` や `kHz` の H を大文字にするのが良い習慣です。

例
-

### 有効な周波数の値
```

12Hz     正の整数
4.3Hz    非整数
14KhZ    単位は大文字小文字を区別しません（ただ、国際単位系の表記が推奨されます）
+0Hz     先行する + のあるゼロと単位
-0kHz    先行する - のあるゼロと単位
```

### 無効な周波数の値
```

12.0     これは <number> であり、<frequency> ではありません。単位が必須です。
7 Hz     数値と単位の間に空白を置いてはいけません
0        単位のないゼロは <length> では利用できますが、<frequency> では無効です。
```

仕様書
---

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

**メモ:** このデータ型は初め、 CSS Level 2 の現在は廃止された aural メディア種別で、音声の高さを定義するために導入されました。現時点ではこのデータ型を使う CSS プロパティはありませんが、 CSS 3 で `<frequency>` データ型が再導入されました。

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

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

関連情報
----

* `<frequency-percentage>`
* CSS 値と単位


:last-child - CSS: カスケーディングスタイルシート

:last-child
===========

**`:last-child`** はCSS の擬似クラスで、兄弟要素のグループの中で最後の要素を表します。
```

/* 兄弟要素の中で最後の <p> を
   すべてを選択 */
p:last-child {
  color: lime;
}
```

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

**メモ:** 当初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。

構文
--
```

:last-child
```

例
-

### 基本的な例

#### HTML

```html
<div>
  <p>このテキストは選択されません。</p>
  <p>このテキストは選択されます！</p>
</div>

<div>
  <p>このテキストは選択されません。</p>
  <h2>このテキストは選択されません。 `p` ではありません。</h2>
</div>
```

#### CSS

```css
p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}
```

#### 結果

### リストのスタイル付け

#### HTML

```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>
```

#### CSS

```css
ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # the-last-child-pseudo |

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

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

関連情報
----

* `:-moz-last-node`
Non-standard
* `:last-of-type`
* `:first-child`
* `:nth-child`


clamp() - CSS: カスケーディングスタイルシート

clamp()
=======

**`clamp()`** は CSS の関数で、値を上限と下限の間に制限します。 `clamp()` によって、定義された最大値と最小値の間の値を選択することができます。最小値、推奨値、最大値の3つの引数を取ります。 `clamp()` 関数は `<length>`, `<frequency>`, `<angle>`, `<time>`, `<percentage>`, `<number>`, `<integer>` のいずれでも使用することができます。

`clamp(MIN, VAL, MAX)` は ``max()`(MIN, `min()`(VAL, MAX))` と同等です。

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

これらの例のように、フォントの大きさに `clamp()` を使用すると、ビューポートの大きさに合わせてフォントの大きさを設定することができますが、最小フォントサイズを下回ったり、最大フォントサイズを上回ったりすることはありません。これは Fluid Typography のコードと同じ効果がありますが、1 行で済み、メディアクエリーも使用しません。

構文
--

`clamp()` 関数は、3 つの式を最小値、推奨値、最大値の順で引数としてカンマ区切りで受け取ります。

最小値は最も小さい (最も負側の) 値です。これは許される値の範囲の下限です。推奨値がこの値よりも小さい場合、最小値が使用されます。

推奨値は、結果が最小値と最大値の間である限り使用される値の式です。

最大値は最も大きな (最も正側の) 値で、推奨値がこの上限値よりも大きい場合にプロパティの値に代入されます。

式は計算関数 (詳しくは `calc()` を参照)、リテラル値、 `attr()` のように正しい引数の型 (`<length>` など) として評価されるその他の式、重複した `min()` および `max()` 関数などです。数式としては、 `calc()` 関数自体を使用せずに加算、減算、乗算、除算を使用することができます。計算順を指定するために括弧を使用することもできます。

式の中でそれぞれの値に異なる単位を使用し、いずれかの引数を構成する計算関数の中で異なる単位を使用することもできます。

### メモ

* 自動レイアウト、固定レイアウトを問わず、表の列、列グループ、行、行グループ、セルの幅や高さのパーセント値を出力する数式は、 `auto` が指定されたものとして扱われる*ことが*あります。
* 式の値として `max()` および `min()` 関数を重ねることは許可されており、内側のものは単純な括弧として扱われます。式は完全な数式であるため、 `calc()` 関数自体を使用せずに加算、減算、乗算、除算を使用することができます。
* 式は加算 ( + )、減算 ( - )、乗算 ( \* )、除算 ( / ) 演算子で組み合わせた値にすることがができ、標準の演算子の優先順位を使用します。 + および - 演算子の両側に空白を入れることを忘れないでください。式の中の値には `<length>` の構文の値にすることができます。式の中のそれぞれの値に異なる単位を使用することができます。必要に応じて、計算順を指定するために括弧を使用することもできます。
* `min()` および `max()` を `clamp()` 関数の中で使用したくなるでしょう。
### 形式文法
```

<clamp()> =
  clamp( <calc-sum>#{3} )

<calc-sum> =
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*

<calc-product> =
  <calc-value> [ [ '*' | '/' ] <calc-value> ]\*

<calc-value> =
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )

<calc-keyword> =
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

```

例
-

### min, max, clamp の比較

この例では、いくつかの大きさに対して `min()`、`max()`、`clamp()` を利用した単純なレスポンシブの例を紹介します。

`<body>` 要素の `width` には、`min(1000px, calc(70% + 100px))` が設定されています。これは、`calc(70% + 100px)` の結果が `1000px` よりも小さい場合には、その値に設定されることを意味しています。`min()` では最大値を設定することができます。

`<p>` 要素の `font-size` には、`max(1.2rem, 1.2vw)` が設定されています。すなわち、計算された `1.2vw` の値が `1.2rem` の値よりも大きい場合には、代わりにその値が設定されます。`max()` では、最小値を設定することができ、このような場合にはアクセシビリティの観点からも便利です。

`<h1>` 要素の `font-size` は、`clamp(1.8rem, 2.5vw, 2.8rem)` と設定されています。これは、`2.5vw` の計算値が `1.8rem` の値よりも大きくなるまで、`font-size` が `1.8rem` に設定されることを意味します。この時点では、`2.5vw` の計算値が `2.8rem` の計算値よりも大きくなるまで、`font-size` は `2.5vw` に設定されます。この時点で、`font-size` は `2.8rem` に設定されます。`clamp()` では、最小値と最大値を設定することができます。

操作してみたい場合は、GitHub で公開されている例を参照してください。

#### HTML

```html
<h1>Simple responsive test</h1>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci,
  eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat
  eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula.
  Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis,
  libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis
  lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id
  risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac
  imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit.
  Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec
  vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum.
  Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget
  nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.
</p>

<p>
  Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu
  facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra
  quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu
  ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis
  quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem.
</p>
```

#### CSS

```css
html {
  font-family: sans-serif;
}

body {
  margin: 0 auto;
  width: min(1000px, calc(70% + 100px));
}

h1 {
  letter-spacing: 2px;
  font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}

p {
  line-height: 1.5;
  font-size: max(1.2rem, 1.2vw);
}
```

仕様書
---

| Specification |
| --- |
| CSS Values and Units Module Level 4 # calc-notation |

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

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

関連情報
----

* `calc()`
* `max()`
* `min()`
* CSS 値


animation-range-start - CSS: カスケーディングスタイルシート

animation-range-start
=====================

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

**`animation-range-start`** は CSS のプロパティで、プロパティは、タイムラインに沿ったアニメーションの適用範囲の先頭、つまり、タイムラインに沿ったアニメーションの先頭を設定するために使用します。

`animation-range-start` および `animation-range-end` のプロパティは、 `animation-range` 一括指定プロパティを使用して設定することもできます。

**メモ:** `animation-range-start` はリセット専用の値として `animation` の一括指定に含まれています。これは、`animation` を記載することで、前回宣言した `animation-range-start` の値が `normal` にリセットされることを意味していますが、`animation` によって固有の値を設定することはできません。 CSS スクロール駆動アニメーション (en-US)を作成する際には、 `animation` の一括指定を宣言した後に `animation-range-start` を宣言しないと、その効果を得ることができません。

構文
--

```css
/\* キーワードまたは長さのパーセント値 \*/
animation-range-start: normal;
animation-range-start: 80%;
animation-range-start: 700px;

/\* 名前付きタイムライン範囲の値 \*/
animation-range-start: cover;
animation-range-start: contain;
animation-range-start: cover 80%;
animation-range-start: contain 700px;
```

### 値

`animation-range-start` に指定できる値は `normal`、`<length-percentage>`、`<timeline-range-name>`、`<timeline-range-name>` のいずれかとそれに続く `<length-percentage>` です。利用できる値の詳細については `animation-range` を参照してください。

また、 View Timeline Ranges Visualizer も調べてみてください。異なる値が意味していることを、簡単なビジュアル形式で正確に表示させることができます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | 名前付きタイムラインが指定されていればその範囲、そうでない場合はタイムライン全体からの相対値 |
| 計算値 | リストで、それぞれの項目は 'normal'、長さのパーセント値、タイムラインの範囲名と長さのパーセント値のいずれか。 |
| アニメーションの種類 | アニメーション不可 |

形式文法
----
```

animation-range-start =
  [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#

<length-percentage> =
  <length>      |
  <percentage>

```

例
-

### 範囲の終わりを指定した進行タイムラインの作成

`view-timeline` プロパティを `class` が `animation` の主体要素に用いて `--subjectReveal` という名前のビュー進行タイムラインを定義します。
 これを同じ要素のタイムラインとして設定するには `animation-timeline: --subjectReveal;` を使用します。その結果、主体要素は文書をスクロールしながら上方向に移動してアニメーションします。

アニメーションを予定より遅く始めるために、 `animation-range-start` 宣言も設定します。

#### HTML

この例の HTML は下記の通りです。

```html
<div class="content">
  <h1>Content</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Risus quis varius quam
    quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat
    interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat
    vivamus at augue.
  </p>

  <p>
    Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate
    dignissim. Tortor aliquam nulla facilisi cras. A erat nam at lectus urna
    duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus.
    Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
    arcu vitae elementum curabitur vitae nunc sed velit.
  </p>

  <div class="subject animation"></div>

  <p>
    Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
    cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
    dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non
    tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam
    vel quam elementum. Nibh praesent tristique magna sit amet purus gravida
    quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat
    imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi
    scelerisque. Netus et malesuada fames ac.
  </p>
</div>
```

#### CSS

`subject` 要素とそのコンテンツを含む `content` 要素は最小限のスタイル設定で、テキストコンテンツには基本的なフォント設定がされています。

```css
.subject {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background-color: deeppink;
}

.content {
  width: 75%;
  max-width: 800px;
  margin: 0 auto;
}

p,
h1 {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 3rem;
}

p {
  font-size: 1.5rem;
  line-height: 1.5;
}
```

`subject` というクラスを持つ `<div>` には `animation` というクラスも指定されています。ここには `view-timeline` が設定されており、ビューの進行タイムラインを定義しています。また、同じ値で `animation-timeline` という名前も指定され、ビュー進行タイムラインが進むにつれてアニメーションする要素であることを宣言します。また、アニメーションが予想よりも遅く始めるように `animation-range-start` 宣言も与えます。

最後に、要素の透過率と変倍をアニメーションで指定し、スクロール移動されるたびにフェードインしたり変倍させたりします。

```css
.animation {
  view-timeline: --subjectReveal block;
  animation-timeline: --subjectReveal;

  animation-name: appear;
  animation-range-start: entry 25%;
  animation-fill-mode: both;
  animation-duration: 1ms; /\* Firefox では、アニメーションを適用するために必要 \*/
}

@keyframes appear {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1,
    transform: scaleX(1);
  }
}
```

#### 結果

スクロールすると、主体要素のアニメーションを確認することができます。

仕様書
---

| Specification |
| --- |
| Scroll-driven Animations # animation-range-start |

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

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

関連情報
----

* `animation-timeline`
* `animation-range`, `animation-range-end`
* `scroll-timeline`, `scroll-timeline-axis`, `scroll-timeline-name`
* `timeline-scope` (en-US)
* `view-timeline-inset`
* JavaScript の同等のもの: `rangeStart` （`Element.animate()` 呼び出しで利用可能）
* CSS スクロール駆動アニメーション (en-US)


border-inline-start-width - CSS: カスケーディングスタイルシート

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 - CSS: カスケーディングスタイルシート

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 - CSS: カスケーディングスタイルシート

-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


@import - CSS: カスケーディングスタイルシート

@import
=======

**`@import`** は CSS のアットルールで、スタイルルールを他の有効なスタイルシートからインポートするために使用します。
 `@import` ルールはスタイルシートの最上位で、他のアットルール（@charset や @layer）やスタイル宣言の前に定義する必要があり、そうしなければ無視されます。

構文
--

```css
@import url;
@import url layer;
@import url layer(layer-name);
@import url layer(layer-name) supports(supports-condition);
@import url layer(layer-name) supports(supports-condition) list-of-media-queries;
@import url layer(layer-name) list-of-media-queries;
@import url supports(supports-condition);
@import url supports(supports-condition) list-of-media-queries;
@import url list-of-media-queries;
```

内容は次の通りです。

*url*

インポートするリソースの位置を表す `<string>`、`<url>`、`url()` のいずれかです。 URL は絶対パスでも相対パスでも構いません。

*list-of-media-queries*

メディアクエリーのカンマ区切りのリストで、リンクした URL で定義された CSS ルールを適用するためのメディアに依存した条件を指定します。ブラウザーが対応していないメディアクエリーの場合、リンクされたリソースは読み込まれません。

*layer-name*

リンクされたリソースのコンテンツがインポートされるカスケードレイヤーの名前です。

*supports-condition*
Experimental

 このスタイルシートをインポートするために、ブラウザーが対応している必要がある特性を示します。
 ブラウザーが *supports-condition* で指定された条件に適合しない場合、リンクされたスタイルシートを取得しないことがあり、他にもパスを通してダウンロードしても読み込むことはできません。
 `supports()` の構文は `@supports` で記述されているものとほぼ同じですので、より完全なリファレンスはそちらのトピックを参照してください。

解説
--

ルールのインポートは、 `@charset` ルールと `@layer` 文を作成するレイヤーを除き、他のすべての種類のルールよりも前に来る必要があります。

```css
\* {
  margin: 0;
  padding: 0;
}
/\* それ以外のスタイル \*/
@import url("my-imported-styles.css");
```

`@import` アットルールはスタイル設定の後に宣言されており、不正であるため無視されます。

```css
@import url("my-imported-styles.css");
\* {
  margin: 0;
  padding: 0;
}
/\* more styles \*/
```

`@import` ルールは入れ子になる文ではありません。従って、条件付きアットルールグループの中で使うことはできません。

ユーザーエージェントは未知のメディア種別のリソースを受け取ることを拒否することができるので、特定のメディアに依存した `@import` ルールを指定することができます。これらの条件付きインポートは、 URL の後でカンマ区切りのメディアクエリーで指定します。メディアクエリーがないと、インポートは無条件で行われます。メディアに `all` を指定しても同じ効果になります。

 同様に、ユーザーエージェントは `@import` アットルールで `supports()` 関数を使用して、具体的な特性の集合に対応している（または対応していない）場合のみリソースを取得することができます。
 これにより、作者は最近導入された CSS 特性の利点を活かしつつ、古いバージョンのブラウザーに対して優雅なフォールバックを提供することができます。
 なお、 `@import` アットルールの `supports()` 関数の条件は、 JavaScript で `CSSImportRule.supportsText` を用いて取得することができます。

`@import` ルールにより、リンクされたリソースからルールをインポートしてカスケードレイヤーを作成することもできます。ルールは既存のカスケードレイヤーにインポートすることもできます。そのために `@import` とともに `layer` キーワードまたは `layer()` 関数を使用します。インポートされたスタイルシートのスタイルルールの宣言は、インポートされた時点でスタイルシートに文字どおり書き込まれたかのようにカスケードに作用します。

形式文法
----
```

@import =
  @import [ <url> | <string> ] [ layer | layer( <layer-name> ) ]? <import-conditions> ;

<url> =
  <url()>  |
  <src()>

<layer-name> =
  <ident> [ '.' <ident> ]\*

<import-conditions> =
  [ supports( [ <supports-condition> | <declaration> ] ) ]? <media-query-list>?

<url()> =
  url( <string> <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> <url-modifier>\* )

<supports-condition> =
  not <supports-in-parens>                            |
  <supports-in-parens> [ and <supports-in-parens> ]\*  |
  <supports-in-parens> [ or <supports-in-parens> ]\*

<supports-in-parens> =
  ( <supports-condition> )  |
  <supports-feature>        |
  <general-enclosed>

<supports-feature> =
  <supports-decl>

<general-enclosed> =
  [ <function-token> <any-value>? ) ]  |
  [ ( <any-value>? ) ]

<supports-decl> =
  ( <declaration> )

```

例
-

### CSS ルールをインポート

```css
@import "custom.css";
@import url("chrome://communicator/skin/");
```

上の 2 つの例では、 *url* を `<string>` として指定する方法と `url()` 関数として指定する方法を示しています。

### 条件付きで CSS ルールをインポート

```css
@import url("fineprint.css") print;
@import url("bluish.css") print, screen;
@import "common.css" screen;
@import url("landscape.css") screen and (orientation: landscape);
```

上記の例の `@import` ルールは、リンクされた CSS ルールが適用される前に成立する必要があるメディア依存の条件を示しています。たとえば、最後の `@import` ルールは、横向きの画面の場合のみ `landscape.css` スタイルシートを読み込ませます。

### 機能に対応していることを条件とした CSS ルールのインポート

```css
@import url("gridy.css") supports(display: grid) screen and (max-width: 400px);
@import url("flexy.css") supports(not (display: grid) and (display: flex)) screen
 and (max-width: 400px);
```

 上記の `@import` ルールは、`display: grid` が対応している場合はグリッドを使用するレイアウトをインポートし、そうでない場合は `display: flex` を使用する CSS をインポートする方法を示しています。
 `supports()` 文は 1 つしか置くことができませんが、`not`、`and`、`or` を使った特性チェックは、調べる条件を括弧でくくればいくつでも組み合わせることができます。
 括弧を使用して優先順位を示すこともできます。
 なお、もし単一の宣言しかない場合は、括弧でくくる必要はありません。これは上の最初の例で示されています。

 上記の例では、単純な宣言構文を使って対応条件を示しています。
 `supports()` で CSS 関数を指定することもでき、対応していてユーザーエージェントで評価できる場合は `true` と評価されます。
 例えば、下記のコードでは、子結合子 (`selector()`) と `font-tech()` 関数の両方を条件とする `@import` を表示しています。

```css
@import url("whatever.css") supports((selector(h2 > p)) and
 (font-tech(color-COLRv1)));
```

### カスケードレイヤーへのCSSルールのインポート

```css
@import "theme.css" layer(utilities);
```

上の例では、 `utilities` という名前のカスケードレイヤーが作成され、インポートされたスタイルシート `theme` のルールを保持するために使用されます。

```css
@import url(headings.css) layer(default);
@import url(links.css) layer(default);

@layer default {
  audio[controls] {
    display: block;
  }
}
```

上の例では、 `headings.css` と `links.css` のスタイルシートのルールは、 `audio[controls]` ルールと同じレイヤー内でカスケードされます。

```css
@import "theme.css" layer();
@import "style.css" layer;
```

この例は、2 つの別個の無名カスケードレイヤーを作成し、それぞれにリンク先のルールをインポートする例です。名前なしで宣言されたカスケードレイヤーは、無名カスケードレイヤーです。名前のないカスケードレイヤーは、作成された時点で確定されます。スタイルを並べ替えたり追加したりする意味を提供せず、外部から参照することはできません。

仕様書
---

| Specification |
| --- |
| CSS Cascading and Inheritance Level 5 # at-import |

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

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

関連情報
----

* `@media`
* `@supports`


-moz-image-region - CSS: カスケーディングスタイルシート

-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> - CSS: カスケーディングスタイルシート

<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 - 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: カスケーディングスタイルシート

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 - CSS: カスケーディングスタイルシート

:-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 - CSS: カスケーディングスタイルシート

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 - CSS: カスケーディングスタイルシート

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 - CSS: カスケーディングスタイルシート

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`


contain - CSS: カスケーディングスタイルシート

contain
=======

Baseline 2023
-------------

Newly availableSince February 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`contain`** は CSS のプロパティで、ある要素とその内容が、できる限り多く、文書ツリーの他の部分から*独立している*ことを示します。これによってブラウザーがレイアウト、スタイル、描画、寸法、およびその組み合わせの再計算を、ページ全体ではなく DOM の限られた領域に対して行うことで、性能上の明らかな利点をもたらします。

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

このプロパティはページ上にそれぞれ独立したたくさんのウィジェットがあるときに有益であり、ウィジェットの内部を、ウィジェットの囲みボックスの外側の副作用から守るために使用することができます。

**メモ:** (`paint`, `strict`, `content` のいずれかの値で) 適用された場合、このプロパティは以下のものを生成します。

1. 新しい包含ブロック (`position` プロパティが `absolute` または `fixed` である子孫を対象とする)。
2. 新しい重ね合わせコンテキスト。
3. 新しいブロック整形コンテキスト。

構文
--

```css
/\* キーワード値 \*/
contain: none;
contain: strict;
contain: content;
contain: size;
contain: layout;
contain: style;
contain: paint;

/\* 複数のキーワード \*/
contain: size paint;
contain: size layout paint;

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

`contain` プロパティは、以下のうちの一つで指定します。

* `none`, `strict`, `content` の何れかのキーワードを単独で使用。
* `size`, `layout`, `style`, and `paint` の各キーワードを 1 つ以上、任意の順序で使用。
### 値

`none`

その要素が通常通り描画され、封じ込めを適用しないことを示します。

`strict`

`style` を除くすべての封じ込め規則がその要素に適用されることを示します。これは `contain: size layout paint` と同等です。

`content`

`size` および `style` 以外の封じ込め規則がその要素に適用されることを示します。これは `contain: layout paint` と同等です。

`size`

子孫の寸法を確認する必要なく、その要素の寸法を変更できることを示します。

`layout`

要素の外側が内部のレイアウトなどに影響しないことを示します。

`style`

ある要素とその子孫以外に影響を及ぼす可能性のあるプロパティの場合、その要素が含まれている要素をエスケープしないことを示します。

`paint`

その要素の子孫を、境界の外に表示しないことを示します。包含ボックスが画面外の場合、ブラウザーは中の要素を描画する必要はありません。 — そのボックスに完全に含まれていれば、やはり画面外にあるからです。そして、子孫が包含要素の領域を溢れている場合、子孫は包含要素の境界ボックスで切り取られます。

公式定義
----

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

形式文法
----
```

contain =
  none                                  |
  strict                                |
  content                               |
  [ size || layout || style || paint ]

```

例
-

### 単純なレイアウト

以下のマークアップは多数のコンテンツを持つ記事からなるものです。

```html
<h1>My blog</h1>
<article>
  <h2>Heading of a nice article</h2>
  <p>Content here.</p>
</article>
<article>
  <h2>Another heading of another article</h2>
  <img src="graphic.jpg" alt="photo" />
  <p>More content here.</p>
</article>
```

それぞれの `<article>` および `<img>` には境界があり、画像は浮動状態です。

```css
img {
  float: left;
  border: 3px solid black;
}

article {
  border: 1px solid black;
}
```

問題はすぐにわかるでしょう。 — 記事の最下部を超えている浮動要素を解消する対策をしていません。

### 浮動要素の干渉

1 つ目の記事の下部に別の画像を挿入すると、 DOM ツリーの大部分が再レイアウトされたり、再描画されたりする可能性があり、 2 つ目の記事のレイアウトにも支障をきたしてしまいます。

```html
<h1>My blog</h1>
<article>
  <h2>Heading of a nice article</h2>
  <p>Content here.</p>
  <img src="i-just-showed-up.jpg" alt="social" />
</article>
<article>
  <h2>Another heading of another article</h2>
  <img src="graphic.jpg" alt="photo" />
  <p>More content here.</p>
</article>
```

```
img {
  float: left;
  border: 3px solid black;
}

article {
  border: 1px solid black;
}
```

ご覧の通り、浮動要素の動作方法が原因で、最初の画像が 2 つ目の記事の領域内に掛かってしまっています。

### contain による修正

それぞれの `article` の `contain` プロパティを `content` の値を設定すれば、新しい要素が挿入されたときに、ブラウザーはそれが含まれる要素のサブツリーの再計算をするだけで、その外側には何もする必要がないことを理解します。
```

<h1>My blog</h1>
<article>
  <h2>Heading of a nice article</h2>
  <p>Content here.</p>
  <img src="i-just-showed-up.jpg" alt="social" />
</article>
<article>
  <h2>Another heading of another article</h2>
  <img src="graphic.jpg" alt="photo" />
  <p>More content here.</p>
</article>
```

```css
img {
  float: left;
  border: 3px solid black;
}

article {
  border: 1px solid black;
  contain: content;
}
```

これは最初の画像についても、 2 つ目の記事の下に浮遊せずに、包含する要素の範囲内に留まることも意味します。

仕様書
---

| Specification |
| --- |
| CSS Containment Module Level 2 # contain-property |

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

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

関連情報
----

* CSS 封じ込め
* CSS の `content-visibility` プロパティ
* CSS の `position` プロパティ


border-radius - CSS: カスケーディングスタイルシート

border-radius
=============

**`border-radius`** は CSS のプロパティで、要素の境界の外側の角を丸めます。1 つの半径を設定すると円の角になり、2 つの半径を設定すると楕円の角になります。

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

半径は要素に境界がなくても、 `background` 全体に適用されます。切り取りが行われる正確な位置は、 `background-clip` プロパティで定義します。

`border-radius` プロパティは `border-collapse` が `collapse` の table 要素には適用されません。

**メモ:** 他の一括指定プロパティと同様、個別のサブプロパティは `border-radius:0 0 inherit inherit` のように既存の定義を部分的に上書きして継承させることはできません。代わりに、それぞれの個別指定プロパティを使用する必要があります。

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

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

* `border-top-left-radius`
* `border-top-right-radius`
* `border-bottom-right-radius`
* `border-bottom-left-radius`
構文
--

```css
/\* 最初の半径の構文は 1 つから 4 つの値が許可されています \*/
/\* 半径を全 4 角に設定 \*/
border-radius: 10px;

/\* 左上と右下 | 右上と左下 \*/
border-radius: 10px 5%;

/\* 左上 | 右上と左下 | 右下 \*/
border-radius: 2px 4px 2px;

/\* 左上 | 右上 | 右下 | 左下 \*/
border-radius: 1px 0 3px 4px;

/\* 2 番目の半径の構文は 1 つから 4 つの値が許可されています \*/
/\* (最初の半径の値) / 半径 \*/
border-radius: 10px / 20px;

/\* (最初の半径の値) / 左上と右下 | 右上と左下 \*/
border-radius: 10px 5% / 20px 30px;

/\* (最初の半径の値) / 左上 | 右上と左下 | 右下 \*/
border-radius: 10px 5px 2em / 20px 25px 30%;

/\* (最初の半径の値) / 左上 | 右上 | 右下 | 左下 \*/
border-radius: 10px 5% / 20px 25em 30px 35em;

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

`border-radius` プロパティは次のように指定することができます。

* 1 ～ 4 つの `<length>` または `<percentage>` の値。これは角の半径を 1 つ設定するために使用します。
* その後に任意で、 "/" と 1 ～ 4 つの `<length>` または `<percentage>` の値。これは追加の半径を設定し、楕円形の角にすることができます。
### 値

|  |  |  |
| --- | --- | --- |
| *半径* | all-corner.png | 境界の四隅に使用される半径を記述する `<length>` または `<percentage>` です。値 1 つの構文でのみ使用されます。 |
| *左上と右下* | top-left-bottom-right.png | 要素ボックスの左上と右下の隅の境界に使用される半径を記述する `<length>` または `<percentage>` です。値 2 つの構文でのみ使用されます。 |
| *右上と左下* | top-right-bottom-left.png | 要素ボックスの右上と左下の隅の境界に使用される半径を記述する `<length>` または `<percentage>` です。値 2 つまたは 3 つの構文でのみ使用されます。 |
| *左上* | top-left.png | 要素ボックスの左上の隅の境界に使用される半径を記述する `<length>` または `<percentage>` です。値 3 つまたは 4 つの構文でのみ使用されます。 |
| *右上* | top-right.png | 要素ボックスの右上の隅の境界に使用される半径を記述する `<length>` または `<percentage>` です。値 4 つの構文でのみ使用されます。 |
| *右下* | bottom-right.png | 要素ボックスの右下の隅の境界に使用される半径を記述する `<length>` または `<percentage>` です。3 つまたは 4 つの値の構文でのみ使用されます。 |
| *左下* | bottom-left.png | 要素ボックスの左下の隅の境界に使用される半径を記述する `<length>` または `<percentage>` です。値 4 つの構文でのみ使用されます。 |

`<length>`

円の半径の長さ、または楕円の半長軸または半短軸の長さを、 length 値を使用して記述します。負の数は無効です。

`<percentage>`

円の半径の長さ、または楕円の半長軸または半短軸の長さを、 パーセント値を使用して記述します。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対するものです。負の数は無効です。

例:

```css
border-radius: 1em/5em;

/\* ... is equivalent to: \*/
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;
```

```css
border-radius: 4px 3px 6px / 2px 4px;

/\* ... is equivalent to: \*/
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;
```

公式定義
----

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

形式文法
----
```

border-radius =
  <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?

<length-percentage> =
  <length>      |
  <percentage>

```

例
-
```

<pre id="example-1">
border: solid 10px;
border-radius: 10px 40px 40px 10px;
  </pre
>
<pre id="example-2">
border: groove 1em red;
border-radius: 2em;
  </pre
>
<pre id="example-3">
background: gold;
border: ridge gold;
border-radius: 13em/3em;
  </pre
>
<pre id="example-4">
border: none;
border-radius: 40px 10px;
background: gold;
  </pre
>
<pre id="example-5">
border: none;
border-radius: 50%;
background: burlywood;
  </pre
>
<pre id="example-6">
border: dotted;
border-width: 10px 4px;
border-radius: 10px 40px;
  </pre
>
<pre id="example-7">
border: dashed;
border-width: 2px 4px;
border-radius: 40px;
  </pre
>
```

```
pre {
  margin: 20px;
  padding: 20px;
  width: 80%;
  height: 80px;
}

pre#example-1 {
  border: solid 10px;
  border-radius: 10px 40px 40px 10px;
}

pre#example-2 {
  border: groove 1em red;
  border-radius: 2em;
}

pre#example-3 {
  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;
}

pre#example-4 {
  border: none;
  border-radius: 40px 10px;
  background: gold;
}

pre#example-5 {
  border: none;
  border-radius: 50%;
  background: burlywood;
}

pre#example-6 {
  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
}

pre#example-7 {
  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;
}
```

### ライブサンプル

* 例 1 : http://jsfiddle.net/Tripad/qnGKj/2/
* 例 2 : http://jsfiddle.net/Tripad/qnGKj/3/
* 例 3 : http://jsfiddle.net/Tripad/qnGKj/4/
* 例 4 : http://jsfiddle.net/Tripad/qnGKj/5/
* 例 5 : http://jsfiddle.net/Tripad/qnGKj/6/
仕様書
---

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

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

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

関連情報
----

* border-radius に関する CSS プロパティ: `border-top-left-radius`, `border-top-right-radius`, `border-bottom-right-radius`, `border-bottom-left-radius`, `border-start-start-radius`, `border-start-end-radius`, `border-end-start-radius`, `border-end-end-radius`


transition-duration - CSS: カスケーディングスタイルシート

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`