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

mask-border
===========

**`mask-border`** は CSS の一括指定プロパティで、要素の境界の縁に沿ったマスクを生成することができます。

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

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

* `mask-border-mode`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-slice`
* `mask-border-source`
* `mask-border-width`
構文
--

```css
/\* source | slice \*/
mask-border: url("border-mask.png") 25;

/\* source | slice | repeat \*/
mask-border: url("border-mask.png") 25 space;

/\* source | slice | width \*/
mask-border: url("border-mask.png") 25 / 35px;

/\* source | slice | width | outset | repeat | mode \*/
mask-border: url("border-mask.png") 25 / 35px / 12px space alpha;

/\* Global values \*/
mask-border: inherit;
mask-border: initial;
mask-border: revert;
mask-border: unset;
```

### 値

`<'mask-border-source'>`

ソース画像です。`mask-border-source` を参照してください。

`<'mask-border-slice'>`

ソース画像を複数の領域に分割する幅です。`mask-border-slice` を参照してください。

`<'mask-border-width'>`

境界画像の幅です。4 つまでの値を指定することができます。`mask-border-width` を参照してください。

`<'mask-border-outset'>`

要素の外側の辺から境界画像までの距離です。4 つまでの値を指定することができます。`mask-border-outset` を参照してください。

`<'mask-border-repeat'>`

ソース画像の辺の領域を、境界マスクの幅に合わせて調整する方法を定義します。2 つまでの値を指定することができます。`mask-border-repeat` を参照してください。

`<'mask-border-mode'>`

ソース画像を輝度マスクとして扱うか、アルファマスクとして扱うかを定義します。`mask-border-mode` を参照してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `mask-border-mode`: `alpha`
* `mask-border-outset`: `0`
* `mask-border-repeat`: `stretch`
* `mask-border-slice`: `0`
* `mask-border-source`: `none`
* `mask-border-width`: `auto`
 |
| 適用対象 | すべての要素。 SVG の場合は `defs` 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される |
| 継承 | なし |
| パーセント値 | 一括指定の次の各プロパティとして* `mask-border-slice`: 境界のマスク画像の寸法に対する相対値
* `mask-border-width`: 境界マスク画像領域の幅/高さに対する相対値
 |
| 計算値 | 一括指定の次の各プロパティとして* `mask-border-mode`: 指定通り
* `mask-border-outset`: 指定通り。ただし相対的な長さはは絶対的な長さに変換される
* `mask-border-repeat`: 指定通り
* `mask-border-slice`: 指定通り
* `mask-border-source`: 指定通り、ただし `url` の値は絶対パスになる
* `mask-border-width`: 指定通り。ただし相対的な長さはは絶対的な長さに変換される
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `mask-border-mode`: 離散値
* `mask-border-outset`: 離散値
* `mask-border-repeat`: 離散値
* `mask-border-slice`: 離散値
* `mask-border-source`: 離散値
* `mask-border-width`: 離散値
 |
| 重ね合わせコンテキストの生成 | あり |

形式文法
----
```

mask-border =
  <'mask-border-source'>                              ||
  <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]?  ||
  <'mask-border-repeat'>                              ||
  <'mask-border-mode'>

```

例
-

### ビットマップに基づいたマスク境界の設定

この例では、要素の境界を菱形の模様でマスクします。このマスクのソースは ".png" ファイルで、 90 x 90 ピクセルであり、3つの菱形が垂直・水平に並んでいます。

![](/ja/docs/Web/CSS/mask-border/mask-border-diamonds.png)

一つの菱形の寸法に合わせるため、 90 を 3 で割った値、すなわち '30' を使用して、画像を角と辺の領域に分割します。 repeat の値は `round` であり、マスクのスライスが均等に、すなわち切り取られたり隙間ができたりすることなく合わせられます。

仕様書
---

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-border |

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

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

関連情報
----

* `mask-border-mode`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-source`
* `mask-border-width`


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

アットルール
======

**アットルール**は CSS の文のうち、CSS の動作を既定するものです。アットルールはアットマーク、'`@`' (`U+0040 COMMERCIAL AT`) で始まり、それに続く識別子から、次のセミコロン、 '`;`' (`U+003B SEMICOLON`) もしくは次の CSS ブロックのどちらかが現れるまでの部分からなります。

構文
--

### 通常

```css
/\* 一般的な構造 \*/
@identifier (RULE);

/\* 例: ブラウザーに UTF-8 文字セットを使用することを知らせる \*/
@charset "utf-8";
```

アットルールは何種類かあり、識別子で区別され、それぞれに異なる構文が使用されます。

* `@charset` — スタイルシートで使用される文字セットを定義します。
* `@import` — 外部のスタイルシートを読み込むよう CSS エンジンに指示します。
* `@namespace` — CSS エンジンに、内容のすべてに XML 名前空間の接頭辞がついていると見なすよう指示します。
### 入れ子

```css
@identifier (RULE) {
}
```

入れ子になった文のサブセットになります。スタイルシートの文としてだけではなく、条件付きグループルールの内部で使用されます。

* `@media` — *メディアクエリ*の条件を満たす端末で読み込まれた場合にこれの中身が適用される、条件付きグループルールです。
* `@supports` — ブラウザーが指定の条件を満たす場合にこれの中身が適用される、条件付きグループルールです。
* `@document`
非推奨
 — このスタイルシートが適用される文書が、与えられた条件を満たす場合に、これの中身が適用される条件付きグループルールです。 *(CSS Level 4 仕様に先送り)*
* `@page` — 文書印刷の際に適用されるレイアウト変更に関する指定を記述します。
* `@font-face` — ダウンロードすべき外部フォントに関する指定を記述します。
* `@keyframes` — CSS アニメーションシーケンスの中間段階に関する指定を記述します。
* `@counter-style` — 定義済みのスタイルにはない、独自のカウンタースタイルを定義します。*(勧告候補段階ですが、現時点で Gecko しか実装していません)*
* `@font-feature-values` (および `@swash`, `@ornaments`, `@annotation`, `@stylistic`, `@styleset`, `@character-variant`) — OpenType の各機能を有効化するために、 `font-variant-alternates` の一般名を定義します。*(勧告候補段階ですが、現時点で Gecko しか実装していません)*
* `@property`
Experimental
 — カスタムプロパティと変数に関して指定します。 *(現在は草稿段階)*
* `@color-profile`
Experimental
 — `color()` 関数で使用するカラープロファイルを定義できます。
条件付きグループルール
-----------

プロパティの値と同様に、アットルールはそれぞれ異なる構文を持っています。しかし、いくつかのアットルールは **条件付きグループルール**という特別なカテゴリーに分類されます。これらの文は構文が共通しており、どれも*内側の文*—*規則セット*または*内側のアットルール*を入れることができます。さらに言えば、それらはすべて共通の意味合いがあります。 — すべては常に**真**か**偽**かで判定される何らかの条件と結びついています。条件が**真**であれば、条件付きグループルール内の文全部が適用されます。

条件付きグループルールは CSS Conditionals Level 3 で定義されており、以下の規則があります。

* `@media`
* `@supports`
* `@document` *(CSS Level 4 仕様に先送り)*

条件付きグループは、入れ子状の文を持ち、いくつでも入れ子にすることができます。

索引
--

* `@charset`
* `@color-profile`
Experimental
* `@counter-style`
* `@document`
非推奨
* `@font-face`
* `@font-feature-values`
* `@import`
* `@keyframes`
* `@media`
* `@namespace`
* `@page`
* `@property`
Experimental
* `@supports`
仕様書
---

| Specification |
| --- |
| CSS Conditional Rules Module Level 3  |
| Compatibility Standard # css-at-rules |

関連情報
----

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


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

border-block-style
==================

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

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

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

構文
--

```css
/\* <'border-style'> 値 \*/
border-block-style: dashed;
border-block-style: dotted;
border-block-style: groove;

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

### 値

`<'border-style'>`

境界のスタイルです。 `border-style` を参照してください。

公式定義
----

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

形式文法
----
```

border-block-style =
  <'border-top-style'>{1,2}

```

例
-

### 縦書きでの破線の境界

#### HTML

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

#### CSS

```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-block-style: dashed;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

padding-top
===========

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

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

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

![CSS の padding-top プロパティの要素ボックスへの影響](/ja/docs/Web/CSS/padding-top/padding-top.svg)

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

構文
--

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

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

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

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

### 値

`<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-top =
  <length-percentage [0,∞]>

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

```

例
-

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

```css
.content {
  padding-top: 5%;
}
.sidebox {
  padding-top: 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-right`, `padding-bottom`, `padding-left` および `padding` 一括指定
* 対応付けられる論理的プロパティ: `padding-block-start`, `padding-block-end`, `padding-inline-start`, `padding-inline-end` および一括指定の `padding-block` と `padding-inline`


:user-invalid (:-moz-ui-invalid) - CSS: カスケーディングスタイルシート

:user-invalid (:-moz-ui-invalid)
================================

**`:user-invalid`** は CSS の擬似クラスで、ユーザーの操作の後、制約検証に基づき有効と判断されなかった検証済みのフォーム要素を表します。

`:user-invalid` 擬似クラスは、ユーザーがフォームの送信を試みた後、そのフォーム要素を再び操作するまで、 `:invalid`, `:out-of-range`, `:required` で空欄の要素に一致します。

**メモ:** この擬似クラスは標準外の `:-moz-ui-invalid` 擬似クラスと同じように動作します。

構文
--

Error: could not find syntax for this item例
-

### :user-invalid で色と記号を設定する

 以下の例では、次の例では、赤枠と❌はユーザーがフィールドを操作した場合にのみ表示されます。
 メールアドレス以外を入力してみて、その動作を確認してみてください。

```html
<form>
  <label for="email">Email *: </label>
  <input id="email" name="email" type="email" required />
  <span></span>
</form>
```

```css
input:user-invalid {
  border: 2px solid red;
}

input:user-invalid + span::before {
  content: "✖";
  color: red;
}
```

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # user-invalid-pseudo |

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

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

関連情報
----

* `:valid`
* `:invalid`
* `:required`
* `:optional`
* `:user-valid`


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

grid-row
========

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
**`grid-row`** は CSS の一括指定プロパティで、グリッド行の中におけるグリッドアイテムの寸法と位置を指定し、線、区間、なし (自動) をグリッド配置に適用することで、グリッド領域の行の先頭と末尾の端を指定します。

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

2 つの `<grid-line>` 値を指定する場合は、個別指定の `grid-row-start` をスラッシュの前に設定し、 `grid-row-end` をスラッシュの後に設定します。

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

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

* `grid-row-end`
* `grid-row-start`
構文
--

```css
/\* キーワード値 \*/
grid-row: auto;
grid-row: auto / auto;

/\* <custom-ident> 値 \*/
grid-row: somegridarea;
grid-row: somegridarea / someothergridarea;

/\* <integer> + <custom-ident> 値 \*/
grid-row: somegridarea 4;
grid-row: 4 somegridarea / 6;

/\* span + <integer> + <custom-ident> 値 \*/
grid-row: span 3;
grid-row: span somegridarea;
grid-row: 5 somegridarea span;
grid-row: span 3 / 6;
grid-row: span somegridarea / span someothergridarea;
grid-row: 5 somegridarea span / 2 span;

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

### 値

`auto`

プロパティをグリッドアイテムの配置に影響させず、自動的に配置し、間隔を自動的に取るか、既定の `1` とするためのキーワードです。

`<custom-ident>`

`<custom-ident>-start`/`<custom-ident>-end` という名前の付いた線がある場合、これはそのような線の最初がグリッドのアイテムの配置に関わります。

**メモ:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-row: foo;` と指定すると名前付きグリッド領域の先頭/末尾側の端を選択します (その前に `foo-start`/`foo-end` という名前の線が明示的に存在しない限り)。

そうでなければ、これは `<custom-ident>` に沿って整数の `1` が指定されたものとして扱われます。

`<integer> && <custom-ident>?`

n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。

名前が `<custom-ident>` として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。

`0` の `<integer>` 値は無効です。

`span && [ <integer> || <custom-ident> ]`

グリッドアイテムのグリッド領域の列側の先頭の端が末尾の端から n 行になるように、グリッドアイテムの配置にグリッドスパンを設定します。

名前が `<custom-ident>` として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。

`<integer>` が省略された場合の既定値は `1` です。負の数や 0 は無効です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `grid-row-start`: `auto`
* `grid-row-end`: `auto`
 |
| 適用対象 | 包含ブロックがグリッドコンテナーであるグリッドアイテムまたは絶対位置指定のボックス |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `grid-row-start`: 指定通り
* `grid-row-end`: 指定通り
 |
| アニメーションの種類 | 離散値 |

形式文法
----
```

grid-row =
  <grid-line> [ / <grid-line> ]?

<grid-line> =
  auto                                                |
  <custom-ident>                                      |
  [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ]  |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]

```

例
-

### グリッド行の寸法と位置の設定

#### HTML

```html
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>
```

#### CSS

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

#item1 {
  background-color: lime;
}

#item2 {
  background-color: yellow;
  grid-row: 2 / 4;
}

#item3 {
  background-color: blue;
  grid-row: span 2 / 7;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # placement-shorthands |

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

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

関連情報
----

* 関連する CSS プロパティ: `grid-row-start`, `grid-row-end`, `grid-column`, `grid-column-start`, `grid-column-end`
* グリッドレイアウトガイド: 線に基づく配置を使用したグリッドレイアウト
* 動画チュートリアル: *Line-based placement*


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

margin-block-start
==================

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

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

構文
--

```css
/\* <length> 値 \*/
margin-block-start: 10px; /\* 絶対的な長さ \*/
margin-block-start: 1em; /\* テキストの大きさに対する相対値 \*/
margin-block-start: 5%; /\* 直近のブロックコンテナーの大きさに対する相対値 \*/

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

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

これは `margin-top`, `margin-right`, `margin-bottom`, `margin-left` の何れかのプロパティに対応し、どれに対応するかは `writing-mode`, `direction`, `text-orientation` で定義された値によって決まります。

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

### 値

`margin-block-start` プロパティは `margin-left` プロパティと同じ値を取ります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | `margin` と同じ |
| 継承 | なし |
| パーセント値 | レイアウトモデルに依存 |
| 計算値 | 長さで指定されると相当する絶対的な長さ、パーセント値として指定されると指定値、それ以外では `auto` |
| アニメーションの種類 | length |

形式文法
----
```

margin-block-start =
  <'margin-top'>

```

例
-

### ブロック方向の先頭のマージンの設定

#### HTML

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

#### CSS

```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  margin-block-start: 20px;
  background-color: #c8c800;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

aspect-ratio
============

**`aspect-ratio`** は CSS のプロパティで、ボックスの**推奨アスペクト比**を設定します。これは auto の大きさを計算したり、他のレイアウト関数で使用されたりします。

```css
aspect-ratio: 1 / 1;
aspect-ratio: 1;

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

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

### 値

`auto`

内在的なアスペクト比がある置換要素の場合は、*その*アスペクト比を使用し、それ以外の場合はボックスに推奨アスペクト比が設定されません。内在的なアスペクト比を使用して寸法を計算する際には、常にコンテンツボックスの寸法に対して行われます。

`<ratio>`

ボックスの推奨アスペクト比は、`width` / `height` で指定された比率です。`height` とそれに先立つスラッシュ文字が省略された場合、`height` の既定値は `1` です。推奨アスペクト比を含む寸法の計算では、`box-sizing` で指定されたボックスの寸法で行われます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | インラインボックスおよび内部のルビまたは表ボックスを除くすべての要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

aspect-ratio =
  auto     ||
  <ratio>

<ratio> =
  <number [0,∞]> [ / <number [0,∞]> ]?

```

例
-

### aspect-ratio の値の例

```css
aspect-ratio: 1 / 1;
aspect-ratio: 16 / 9;
aspect-ratio: 0.5;
```

幅と高さの aspect-ratio への対応付け
-------------------------

ブラウザーは、内部の `aspect-ratio` プロパティを追加しました。これは置換要素や、 `width` と `height` 属性を受け入れるその他の関連要素に適用されます。これは、ブラウザーの内部 UA スタイルシートに現れます。

Firefox では、内部のスタイルシートルールはこのようになっています。

```css
img,
input[type="image"],
video,
embed,
iframe,
marquee,
object,
table {
  aspect-ratio: attr(width) / attr(height);
}
```

この機能については画像に高さと幅を設定することが再び重要に (英語) で詳しく読むことができます。

仕様書
---

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # aspect-ratio |

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

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

関連情報
----

* メディアのコンテナー要素の幅と高さの属性をアスペクト比にマッピングする
* Designing an aspect ratio unit for CSS
* Setting Height And Width On Images Is Important Again


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

::backdrop
==========

CSS の **`::backdrop`** 擬似要素は、何らかの要素が全画面モード (top layer (en-US)) で表示される直下に直接表示される viewport の寸法のボックスです。

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

構文
--

```css
::backdrop {
  /\* ... \*/
}
```

説明
--

Backdrop は以下の状況で現れます。

* Fullscreen API の `Element.requestFullscreen()` メソッドを使用した全画面モードに配置される要素
* `HTMLDialogElement.showModal()` の呼び出しにより最上位レイヤーで表示される `<dialog>` 要素
* `HTMLElement.showPopover()` の呼び出しにより最上位レイヤーで表示される Popover の要素

全画面モードで複数の要素が配置されたときは、それぞれに自身の `::backdrop` 疑似要素があります。

```css
/\* backdrop はダイアログが dialog.showModal() が開いている時のみ表示されます \*/
dialog::backdrop {
  background: rgba(255, 0, 0, 0.25);
}
```

すべての全画面要素は、最上位レイヤー、すなわちビューポートで常にコンテンツが画面に描画される前に最後に (すなわち最上位に) 描画される特殊なレイヤーの中で、後入れ先出し (LIFO) で配置されます。`::backdrop` 擬似要素は、最上位レイヤーの一番上に来たときに、その下に位置するものをぼかしたり、スタイル付けしたり、完全に隠したりすることができます。

`::backdrop` 擬似要素はどの要素にも継承せず、どの要素からも継承しません。この擬似要素に適用するプロパティの制限はありません。

例
-

### 全画面動画の背景のスタイル付け

この例では、動画が全画面モードに移行したときの backdrop スタイルが、多くのブラウザーでの既定値である黒ではなく、青灰色に構成しています。

```css
video::backdrop {
  background-color: #448;
}
```

結果の画面は以下のようになります。

![ほぼ全画面のビデオプレイヤー。ビデオプレイヤーが完全に画面を覆わないので、プレイヤーの上下に紫が見える。](/ja/docs/Web/CSS/::backdrop/bbb-backdrop.png)

動作例を見てみてください。背景の色を変更した後、動画を全画面表示にすると、背景色の変更を確認することができます。

仕様書
---

| Specification |
| --- |
| CSS Positioned Layout Module Level 4 # backdrop |

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

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

関連情報
----

* `:fullscreen` 疑似クラス
* `<dialog>` HTML 要素
* Fullscreen API


CSS ボックスモデル - CSS: カスケーディングスタイルシート

CSS ボックスモデル
===========

**CSS ボックスモデル**は、要素に対して作成され、パディングやマージンを含む長方形のボックスを定義します。これは視覚整形モデルによってレイアウトされます。

ボックスモデルの概要
----------

CSS のボックスは、テキスト、画像、その他の HTML 要素が表示されるコンテンツ領域で構成されています。この領域は、パディング、境界、マージンによって、1 つ以上の辺で囲まれることがあります。ボックスモデルは、これらの要素がどのように連携して CSS で表示されるボックスを作成するかを説明します。詳しくは、CSS ボックスモデル入門をご覧ください。

### ボックスの辺のキーワード

ボックスモデルの仕様書では、ボックスの各部分の辺を参照する一連のキーワードが定義されています。これらは、`box-sizing` プロパティの値など、CSS のキーワード値としても使用され、ボックスモデルがどのように寸法を計算するかを制御します。

`content-box`

そのボックスのコンテンツ領域の辺です。

`padding-box`

そのボックスのパディングの辺です。その方向にパディングがなかった場合は、 `content-box` と同じになります。

`border-box`

そのボックスの境界の辺です。その方向に境界がなかった場合は、 `padding-box` と同じになります。

`margin-box`

そのボックスのマージンの辺です。その方向にマージンがなかった場合は、 `border-box` と同じになります。

`stroke-box`

SVG では、ストロークの囲みボックスを指します。 CSS では `content-box` として扱われます。

`view-box`

SVG では、最も近い SVG ビューポート要素の原点ボックスを指します。これはその要素の `viewBox` 属性によって確立された初期の SVG ユーザー座標系の幅と高さを持つ長方形です。CSS では `border-box` として扱われます。

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

**メモ:** 本仕様では、物理的なパディングとマージンのプロパティを定義しています。テキストの書字方向に関係するフローに関連したプロパティは、論理的プロパティと値で定義されています。

#### ボックスのマージンを制御するプロパティ

マージンは、ボックスの境界を囲み、ボックス同士の間隔を確保するものです。

* `margin`
* `margin-bottom`
* `margin-left`
* `margin-right`
* `margin-top`
* `margin-trim`
Experimental

#### ボックスのパディングを制御するプロパティ

パディングは、ボックスの境界の縁と内容物の縁の間に挿入されます。

* `padding`
* `padding-bottom`
* `padding-left`
* `padding-right`
* `padding-top`

#### その他のプロパティ

ボックスモデルに関連するプロパティは他にもあり、それらは別の場所で定義されています。

境界

境界のプロパティは、境界の太さ、描画スタイル、色を指定します。

オーバーフロー

内容物が多すぎてボックスに入りきらない場合に起こることを制御します。

ガイド
---

CSS ボックスモデルの紹介

CSS の基礎的概念の 1 つである、ボックスモデルを解説します。このモデルは CSS が要素とそのコンテンツ領域、パディング領域、境界領域、マージン領域をどのように配置するかを定義しています。

マージンの相殺の理解

2 つの隣接するマージンが 1 つに相殺されることがあります。この記事ではいつなぜそれが発生し、どのように制御するかを説明します。

視覚整形モデル

視覚整形モデルを説明します。

仕様書
---

| Specification |
| --- |
| CSS Box Model Module Level 3  |


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

unset
=====

**`unset`** は CSS のキーワードで、プロパティをリセットし、親から自然に継承された場合は継承値、そうでなければ初期値を設定します。言い換えれば、前者の継承プロパティの場合は `inherit` キーワードのように動作し、後者の非継承プロパティの場合は `initial` キーワードのように動作します。

**`unset`** は一括指定の `all` を含む、あらゆる CSS プロパティに対して適用することができます。

例
-

### 色

`color` は継承プロパティです。

#### HTML

```html
<p>このテキストは赤です。</p>
<div class="foo">
  <p>このテキストも赤です。</p>
</div>
<div class="bar">
  <p>このテキストは緑色（既定の継承値）です。</p>
</div>
```

#### CSS

```css
.foo {
  color: blue;
}

.bar {
  color: green;
}

p {
  color: red;
}

.bar p {
  color: unset;
}
```

#### 結果

### 境界線

`border` は非継承プロパティです。

#### HTML

```html
<p>このテキストには赤い境界線があります。</p>
<div>
  <p>このテキストには赤い境界線があります。</p>
</div>
<div class="bar">
  <p>このテキストには黒い境界線があります（既定値、継承なし）。</p>
</div>
```

#### CSS

```css
div {
  border: 1px solid green;
}

p {
  border: 1px solid red;
}

.bar p {
  border-color: unset;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

animation-timeline
==================

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

**`animation-timeline`** は CSS のプロパティで、 CSS アニメーションの進行を制御するのに使われるタイムラインを指定します。

以下の種類のタイムラインを `animation-timeline` で設定することができます。

* 既定では文書のタイムラインで、文書が最初にブラウザー内に読み込まれてからの時刻を渡すことで進行します。これは伝統的に CSS アニメーションと関連付けられているタイムラインであり、`auto` の値で選択するか、 `animation-timeline` の値をまったく指定しません。
* スクロール進行タイムライン (*scroll progress timeline*) は、スクロール可能な要素 (*scroller*) を上下（または左右）にスクロールすることで進行します。スクロール範囲における位置は、開始には0%、終わりには100%というように、進行のパーセント値に変換されます。スクロール進行のタイムラインを提供する要素は、 2 つの方法で指定することができます。
    + 名前付きスクロール進行タイムライン (*named scroll progress timeline*) とは、スクロール進行タイムラインを提供するスクローラーに、 `scroll-timeline-name` プロパティ（または `scroll-timeline` の一括指定プロパティ）を用いて明示的に名前を指定したものです。そして、その名前を要素の `animation-timeline` プロパティの値として指定することで、アニメーションさせる要素にリンクします。
    + 無名スクロール進行タイムライン (*anonymous scroll progress timeline*) とは、アニメーションさせる要素に `scroll()` 関数を `animation-timeline` 値として指定されたもので、渡す引数に基づいて使用するスクロール進行タイムラインとスクロール軸を提供するスクローラーを選択します。
* ビュー進行タイムライン (*view progress timeline*) は、スクローラー内の要素（主体 (*Subject*) と呼ばれる）の可視性の変化に基づいて進行します。既定では、スクローラーの一方の端に最初に主体が表示されたときにタイムラインは 0% になり、反対側の端に到達したときに 100% になります。スクロール進行タイムラインとは異なり、スクローラーを指定することはできません。被写体の可視性は常に最も近い祖先のスクローラー内で追跡されます。ビュー進行タイムラインを提供する主体は、2 つの方法で指定します。
    + 名前付きビュー進行タイムラインは、 `view-timeline-name` プロパティ（または `view-timeline` の一括指定プロパティ）を用いて主題の名前を明示的に指定するものです。そして、その名前を要素の `animation-timeline` プロパティの値として指定することで、アニメーションさせる要素にリンクします。これは重要な点です。名前付きビュー進行タイムラインでは、アニメーションさせる要素は被写体と同じである必要はありません。
    + 無名ビュー進行タイムラインとは、 `view()` 関数を `animation-timeline` 値として指定され、最も近い親スクローラー内の位置に基づいてアニメーションが発生させられるものです。

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

構文
--

```css
/\* 単一のアニメーション \*/
animation-timeline: none;
animation-timeline: auto;

/\* 単一のアニメーション名付きタイムライン \*/
animation-timeline: --timeline_name;

/\* 単一のアニメーション無名スクロール進行タイムライン \*/
animation-timeline: scroll();
animation-timeline: scroll(scroller axis);

/\* 単一のアニメーション無名ビューの進行タイムライン \*/
animation-timeline: view();
animation-timeline: view(axis inset);

/\* 複数のアニメーション \*/
animation-timeline: --progressBarTimeline, --carouselTimeline;
animation-timeline: none, --slidingTimeline;

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

### 値

`none`

アニメーションはタイムラインに関連付けられません。

`auto`

アニメーションのタイムラインはこの文書の既定の DocumentTimeline (en-US) です。

`scroll()`
Experimental

無名スクロール進行タイムラインは、現在の要素の祖先スクローラーによって指定されます。関数の引数でスクローラーを選択し、タイムラインが測定されるスクロール軸を選択することができます。

詳しくは `scroll()` を参照してください。

`view()`
Experimental

無名ビュー進行タイムラインは、`animation-timeline: view();`が設定された主体から提供されます。関数の引数では、タイムラインの進行が追跡されるスクロールバーの軸と、主体が表示されているとみなされるボックスの位置を調整するインセットを選択できます。

詳しくは `view()` を参照してください。

`<dashed-ident>`

`scroll-timeline-name` または `view-timeline-name` プロパティ（または `scroll-timeline` または `view-timeline` 一括指定プロパティ）で前回宣言された名前付きタイムラインを識別する `<dashed-ident>` です。

**メモ:** 2 つ以上のタイムラインが同じ名前を持っている場合、カスケード内で最後に宣言されたものが使用されます。また、指定された名前に一致するタイムラインが見つからない場合、アニメーションはタイムラインに関連付けられません。

**メモ:** `<dashed-ident>` 値は `--` で始まる必要があります。これにより、標準 CSS キーワードとの名前の衝突を避けることができます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | リストで、それぞれの項目は大文字小文字を区別する CSS 識別子またはキーワード `none`, `auto` |
| アニメーションの種類 | アニメーション不可 |

形式文法
----
```

animation-timeline =
  <single-animation-timeline>#

<single-animation-timeline> =
  auto            |
  none            |
  <dashed-ident>  |
  <scroll()>      |
  <view()>

<scroll()> =
  scroll( [ <scroller> || <axis> ]? )

<view()> =
  view( [ <axis> || <'view-timeline-inset'> ]? )

<scroller> =
  root     |
  nearest  |
  self

<axis> =
  block   |
  inline  |
  x       |
  y

```

例
-

### 単純な例

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

#### HTML

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

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

#### CSS

コンテナーの CSS では、`--squareTimeline` という名前のスクロール進行タイムラインのソースとして、`scroll-timeline-name` プロパティを使用して設定しています（どのスクロールバーの軸を使用するかは `scroll-timeline-axis` で明示的に設定することができますが、ここではブロック方向のスクロールバーしかないので、既定ではそれが使用されます）。

コンテナーの高さは 300px に設定し、コンテナーがはみ出した場合に垂直スクロールバーを作成するようにも設定しています（下記では、"stretcher" 要素に CSS を使用して、はみ出した場合に確実に保持するようにしています）。

```css
#container {
  height: 300px;
  overflow-y: scroll;
  scroll-timeline-name: --squareTimeline;
  position: relative;
}
```

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

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

  position: absolute;
  bottom: 0;
}

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

 "stretcher" の CSS はブロックの高さを 600px に設定し、コンテナー要素をオーバーフローさせ、スクロールバーを作成します。
 この要素がなければスクロールバーが現れず、したがってアニメーションタイムラインに関連付けるスクロール進行タイムラインもなくなります。

```css
#stretcher {
  height: 600px;
}
```

#### 結果

スクロールすると、正方形の要素がアニメーションします。

### 無名スクロール進行タイムラインの設定

 この例では、 `#square` 要素は `scroll()` 関数を使ってアニメーションする要素に使用する、無名スクロール進行タイムラインを使ってアニメーションします。
 この具体的な例でのタイムラインは、ブロック方向のスクロールバーから、（任意の）スクロールバーを持つ最も近い親要素によって指定されたものです。

#### HTML

例の HTML は下記で表示させます。

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

#### CSS

 下記の CSS では、 `animation-timeline` プロパティで指定されたタイムラインに従って、交互に回転する正方形を定義しています。
 この場合、タイムラインは `scroll(block nearest)` によって指定されます。これは、スクロールバーを持つ最も近い祖先要素のブロック方向のスクロールバーを選択することを意味しています。

**メモ:** 実は `block` と `nearest` が既定値の引数なので、`scroll()` だけを使用することができました。

```css
#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  margin-top: 100px;
  position: absolute;
  bottom: 0;

  animation-name: rotateAnimation;
  animation-duration: 1ms; /\* Firefox では、アニメーションを適用するために必要 \*/
  animation-direction: alternate;
  animation-timeline: scroll(block nearest);
}

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

 コンテナー用の CSS では、コンテナーの高さを 300px に設定し、コンテナーがはみ出した場合に垂直スクロールバーを作成するようにも設定しています。
 "stretcher" の CSS では、ブロックの高さを 600px に設定し、コンテナー要素を強制的にオーバーフローさせます。
 この 2 つを組み合わせることで、コンテナーに垂直スクロールバーが確実に設置され、無名スクロール進行タイムラインのソースとして使用することができます。

```css
#container {
  height: 300px;
  overflow-y: scroll;
  position: relative;
}

#stretcher {
  height: 600px;
}
```

#### 結果

スクロールすると、正方形の要素がアニメーションします。

### 名前付きビュー進行タイムラインの設定

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

#### 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-name` を設定するには、名前付きのビュー進行タイムラインを定義します。また、同じ値で `animation-timeline` 名も指定され、ビュー進行タイムラインの進行に合わせてアニメーションする要素であることを宣言します。

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

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

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

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

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

#### 結果

スクロールすると、アニメーションしている主体要素を見ることができます。

### 無名ビュー進行タイムラインの設定

クラス `subject` を持つ要素に `animation-timeline: view()` を用いて無名進行タイムラインを設定します。その結果、 `subject` 要素は文書化されたものをスクロールしながら上方向に移動するアニメーションが表示されます。

#### 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` クラスも指定されています。ここで `animation-timeline: view()` が設定され、スクロールする祖先（文書内のルート要素）が指定された進行タイムラインに沿ってアニメーションすることを宣言します。

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

```css
.animation {
  animation-timeline: view();

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

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

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

#### 結果

スクロールすると、アニメーションしている主体要素を見ることができます。

仕様書
---

| Specification |
| --- |
| CSS Animations Level 2 # animation-timeline |

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

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

関連情報
----

* `animation`, `animation-composition`, `animation-delay`, `animation-direction`, `animation-duration`, `animation-fill-mode`, `animation-iteration-count`, `animation-name`, `animation-play-state`, `animation-timing-function`
* `scroll-timeline-name`, `scroll-timeline-axis`, `scroll-timeline`
* `timeline-scope` (en-US)
* `view-timeline-name`, `view-timeline-axis`, `view-timeline`, `view-timeline-inset`
* JavaScript で相当するもの: `timeline` プロパティが `Element.animate()` 呼び出しで利用できます
* CSS スクロール駆動アニメーション (en-US)
* CSS アニメーションの使用


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

vertical-align
==============

**`vertical-align`** は CSS のプロパティで、インラインボックス、インラインブロック、表セルボックスの垂直方向の配置を設定します。

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

vertical-align は、2 つの場面で使用することができます。

* 包含する行ボックスの中で、インライン要素のボックスの垂直方向の配置を決める場合。例えば、テキストの行の中で画像の垂直位置を決めるために使用することができます。
* 表のセルの内容の垂直方向の配置を決める場合。

`vertical-align` はインライン要素、インラインブロック要素、表のセル要素だけに適用されることに注意してください。つまり、ブロックレベル要素の垂直方向の配置には使用できません。

構文
--

```css
/\* キーワード値 \*/
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/\* <length> 値 \*/
vertical-align: 10em;
vertical-align: 4px;

/\* <percentage> 値 \*/
vertical-align: 20%;

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

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

### インライン要素用の値

#### 親要素との相対値

以下の値は、親要素に対する垂直方向の配置方法を表します。

`baseline`

要素のベースラインを親要素のベースラインに揃えます。一部の置換要素、例えば `<textarea>` などのベースラインは HTML 仕様で未定義です。このため、このキーワードの挙動はブラウザーにより異なるかもしれません。

`sub`

要素のベースラインを親要素の subscript-baseline に揃えます。

`super`

要素のベースラインを親要素の superscript-baseline に揃えます。

`text-top`

要素の上端を親要素のフォントの上端に揃えます。

`text-bottom`

要素の下端を親要素のフォントの下端に揃えます。

`middle`

要素の中央を親要素の `baseline + x-height の半分` に揃えます。

`<length>`

要素のベースラインを、親要素のベースラインの指定値分上に揃えます。負の値を使えます。

`<percentage>`

`<length>` 値と似ていますが、`line-height` プロパティに対するパーセント値で指定します。負の値を使えます。

#### 行との相対値

以下の値は、親要素ではなく、行全体に対する垂直方向の配置方法を表します。

`top`

要素と子孫要素の上端を行全体の上端に揃えます。

`bottom`

要素と子孫要素の下端を行全体の下端に揃えます。

ベースラインを持たない要素では、代わりにマージン境界の下端が使われます。

### 表のセル用の値

`baseline` (および `sub`, `super`, `text-top`, `text-bottom`, `<length>`, `<percentage>`)

セルのベースラインを、行内でベースライン揃えにされた他のすべてのセルのベースラインに揃えます。

`top`

セルの上端のパディング辺を行の上端に揃えます。

`middle`

セルのパディングボックスが行の中央になるようにします。

`bottom`

セルの下端のパディング辺を行の下端に揃えます。

負の値を使用することができます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `baseline` |
| 適用対象 | インラインレベルおよびテーブルセル要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | なし |
| パーセント値 | 要素自身の `line-height` に対する相対値 |
| 計算値 | パーセンテージか長さを指定すると絶対的な値、それ以外は指定されたキーワード |
| アニメーションの種類 | length |

形式文法
----
```

vertical-align =
  [ first | last ]        ||
  <'alignment-baseline'>  ||
  <'baseline-shift'>

```

例
-

### 基本的な例

#### HTML

```html
<div>
  An <img src="frame\_image.svg" alt="link" width="32" height="32" /> image with
  a default alignment.
</div>
<div>
  An
  <img class="top" src="frame\_image.svg" alt="link" width="32" height="32" />
  image with a text-top alignment.
</div>
<div>
  An
  <img class="bottom" src="frame\_image.svg" alt="link" width="32" height="32" />
  image with a text-bottom alignment.
</div>
<div>
  An
  <img class="middle" src="frame\_image.svg" alt="link" width="32" height="32" />
  image with a middle alignment.
</div>
```

#### CSS

```css
img.top {
  vertical-align: text-top;
}
img.bottom {
  vertical-align: text-bottom;
}
img.middle {
  vertical-align: middle;
}
```

#### 結果

### 行ボックス内での垂直方向の配置

#### HTML

```html
<p>
  top: <img style="vertical-align: top" src="star.png" /> middle:
  <img style="vertical-align: middle" src="star.png" /> bottom:
  <img style="vertical-align: bottom" src="star.png" /> super:
  <img style="vertical-align: super" src="star.png" /> sub:
  <img style="vertical-align: sub" src="star.png" />
</p>

<p>
  text-top: <img style="vertical-align: text-top" src="star.png" /> text-bottom:
  <img style="vertical-align: text-bottom" src="star.png" /> 0.2em:
  <img style="vertical-align: 0.2em" src="star.png" /> -1em:
  <img style="vertical-align: -1em" src="star.png" /> 20%:
  <img style="vertical-align: 20%" src="star.png" /> -100%:
  <img style="vertical-align: -100%" src="star.png" />
</p>
```

```
#\* {
  box-sizing: border-box;
}

img {
  margin-right: 0.5em;
}

p {
  height: 3em;
  padding: 0 0.5em;
  font-family: monospace;
  text-decoration: underline overline;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
```

#### 結果

### 表のセル内での垂直方向の配置

#### HTML

```html
<table>
  <tr>
    <td style="vertical-align: baseline">baseline</td>
    <td style="vertical-align: top">top</td>
    <td style="vertical-align: middle">middle</td>
    <td style="vertical-align: bottom">bottom</td>
    <td>
      <p>
        There is a theory which states that if ever anyone discovers exactly
        what the Universe is for and why it is here, it will instantly disappear
        and be replaced by something even more bizarre and inexplicable.
      </p>
      <p>
        There is another theory which states that this has already happened.
      </p>
    </td>
  </tr>
</table>
```

#### CSS

```css
table {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

table,
th,
td {
  border: 1px solid black;
}

td {
  padding: 0.5em;
  font-family: monospace;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-vertical-align |

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

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

関連情報
----

* フレックスボックスの典型的な使用例の「アイテムの中央揃え」の節
* `line-height`, `text-align`, `margin`
* Understanding `vertical-align`, or "How (Not) To Vertically Center Content"
* Vertical-Align: All You Need To Know


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

:last-of-type
=============

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

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

構文
--

```css
:last-of-type {
  /\* ... \*/
}
```

例
-

### 最後の段落の整形

#### HTML

```html
<h2>見出し</h2>
<p>段落 1</p>
<p>段落 2</p>
```

#### CSS

```css
p:last-of-type {
  color: red;
  font-style: italic;
}
```

#### 結果

### 入れ子になった要素

この例は、入れ子になった要素を対象に含める方法を示します。なお、要素型セレクターが書かれていない場合は、全称セレクター (`*`) が暗黙に含まれます。

#### HTML

```html
<article>
  <div>これは最初の `div` です。</div>
  <div>これは<span>内側で最後の `span`</span> です。</div>
  <div>
    これは<em>内側で最初の `em`</em>で、一方これは<em>最後の `em` </em>です。
  </div>
  <p>これは `p` で修飾しています。</p>
  <div>これは最後の `div` です。</div>
</article>
```

#### CSS

```css
article :last-of-type {
  background-color: pink;
}
```

#### 結果

### 複数セレクターの要素

この HTML の例では、さまざまな種類の要素が入れ子になっています。 CSS には、型セレクターとクラスセレクターの両方が含まれています。

#### HTML

```html
<p>この `p` は選択されていません。</p>
<p>この `p` も選択されていません。</p>
<p>
  この `p` は `p` 要素型セレクターで選択された `body` などの親の最後の `p` 要素です。
</p>
<div class="container">
  <div class="item">この `div` は選択されていません。</div>
  <div class="item">この `div` も選択されていません。</div>
  <div class="item">
    この `div` は親 `div` の `.container .item` クラスセレクターで選択される最後の `div` 要素です。
  </div>
  <p class="item">
    この `p` は親 `div` の `.container .item` クラスセレクターで選択される最後の `p` 要素です。
  </p>
</div>
```

#### CSS

```css
p:last-of-type {
  background: skyblue;
}

.container .item:last-of-type {
  color: red;
  font-weight: bold;
}
```

#### 結果

最後の `<div>` と最後の `<p>` はどちらも赤で太字になっています。これは `.item:last-of-type` がすべての型の最後の要素を選択するためで、その最後の要素は `item` クラスも持っています。

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # last-of-type-pseudo |

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

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

関連情報
----

* `:last-child`, `:nth-last-of-type`


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

font-family
===========

CSS の **`font-family`** プロパティは、選択した要素に対して、フォントファミリー名や総称ファミリー名の優先順位リストを指定することができます。

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

複数の値をカンマで区切って、代替フォントを示します。ブラウザーはリストの中で最初のインストール済み、または `@font-face` アット規則を使用してダウンロード可能なフォントを選択します。

一括指定プロパティの `font` を使用すると、 `font-size` やその他のフォント関連プロパティを一度に設定できるのでふつうは便利です。

指定されたフォントが利用可能であるという保証はないので、 `font-family` リストの中に、総称ファミリーを少なくとも 1 つ、常に追加しておくべきです。総称ファミリーを使うことで、必要ならば、ブラウザーで受け付け可能な代替フォントを選択させることができます。

`font-family` プロパティでは、優先順位の高い方から低い方へ、フォントのリストを指定します。フォント選択は、ユーザーのシステム上に存在する、リスト中の一番最初に指定されたフォントを選んで終わるとは**限りません**。むしろ、フォント選択は **1 文字ずつ**行われます。なぜなら、利用可能なフォントが、その文字を表示するのに必要なグリフを欠いている場合には、そのフォントよりも順位の低い利用可能なフォントが試行されるからです。あるフォントが一部のスタイル、種類、大きさでのみ利用可能な場合、これらのプロパティがフォントファミリーの選択に影響する可能性があります。

構文
--

```css
/\* フォントファミリー名および総称ファミリー名 \*/
font-family: "Gill Sans Extrabold", sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

/\* 総称ファミリー名のみ \*/
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: ui-serif;
font-family: ui-sans-serif;
font-family: ui-monospace;
font-family: ui-rounded;
font-family: emoji;
font-family: math;
font-family: fangsong;

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

`font-family` プロパティは、1 つ以上のフォントファミリーをカンマで区切って指定します。それぞれのフォントファミリーは `<family-name>` または `<generic-name>` の値です。

以下の例は 2 つのフォントファミリーを並べており、最初は `<family-name>` で二番目は `<generic-name>` です。

```css
font-family: "Gill Sans Extrabold", sans-serif;
```

### 値

`<family-name>`

フォントファミリーの名称。例えば、 "Times" や "Helvetica" はフォントファミリーです。空白を含むフォントファミリー名は、引用符で囲む必要があります。

`<generic-name>`

総称フォントファミリーは代替の仕組みです。この仕組みによって、指定されたフォントがどれも利用できなかった場合、スタイルシート製作者の意図を多少なりとも保つことができます。総称ファミリー名はキーワードであり、引用符で囲んではいけません。総称フォントファミリーは、フォントファミリー名リストの最終選択肢である必要があります。以下のキーワードが定義されています。

`serif`

終わりが止めや払い、または実際の活字のセリフの形をした角を持つ字形です。

例: Lucida Bright, Lucida Fax, Palatino, Palatino Linotype, Palladio, URW Palladio, serif

`sans-serif`

平たい角の端を持つ字形です。

例: Open Sans, Fira Sans, Lucida Sans, Lucida Sans Unicode, Trebuchet MS, Liberation Sans, Nimbus Sans L, sans-serif.

`monospace`

すべての字が同じ幅を持つ字形です。

例: Fira Mono, DejaVu Sans Mono, Menlo, Consolas, Liberation Mono, Monaco, Lucida Console, monospace

`cursive`

筆記体フォントの字形には、一般に、続け書き、もしくは、イタリック体の特性以上に、その他の筆記体の特性があります。字形は、部分的に、あるいは完全につながっていて、仕上がりは、印刷された活字というよりは、手書きのペンまたは毛筆で書かれたように見えます。

例: Brush Script MT, Brush Script Std, Lucida Calligraphy, Lucida Handwriting, Apple Chancery, cursive

`fantasy`

fantasy フォントは、遊び心に溢れた文字表現を含む、主として装飾的なフォントです。

例: Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy

`system-ui`

指定されたプラットフォームの既定のユーザーインターフェイスフォントからグリフを取ります。文字の伝統は世界で様々であるため、この総称は他の総称にきれいに一致しない文字フォントを提供します。

`ui-serif`

ユーザーインターフェイス既定のセリフ付きフォントです。

`ui-sans-serif`

ユーザーインターフェイス既定のセリフなしフォントです。

`ui-monospace`

ユーザーインターフェイス既定の等幅フォントです。

`ui-rounded`

ユーザーインターフェイス既定の丸い特性を持ったフォントです。

`math`

これは、数式を表現するための特別なスタイル上の概念のためのものです。上付き文字と下付き文字、複数行をまたぐ括弧、式の入れ子、明確な意味を持つ二重のグリフなどです。

`emoji`

絵文字を表示するために特別にデザインされたフォントです。

`fangsong`

セリフ風の Song と手書き風の Kai の形の間にある中国語の文字の特定のスタイルです。このスタイルは政府文書によく使用されます。

### 有効なファミリー名

フォントファミリー名は、引用符で囲まれた文字列か、引用符で囲まれていない 1 つ以上の識別子でなければなりません。これは、引用符で囲まれていないフォントファミリー名において、各トークンの冒頭に区切り記号文字や数字がある場合、エスケープしなければならないということを意味します。

ホワイトスペース、数字、ハイフン以外の区切り文字を含むフォントファミリー名を引用符でくくるのは**良い習慣**です。

例えば、以下の宣言は有効です。

```css
font-family: "Goudy Bookletter 1911", sans-serif;
```

以下の宣言は**無効**です。

```css
font-family:
  Goudy Bookletter 1911,
  sans-serif;
font-family: Red/Black, sans-serif;
font-family:
  "Lucida" Grande,
  sans-serif;
font-family: Ahem!, sans-serif;
font-family:
  test @foo,
 sans-serif;
font-family: #POUND, sans-serif;
font-family:
  Hawaii 5-0,
  sans-serif;
```

以下の例は技術的には**有効**ですが、推奨されません。

```css
font-family:
  Gill Sans Extrabold,
  sans-serif;
```

公式定義
----

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

形式文法
----
```

font-family =
  [ <family-name> | <generic-family> ]#

<family-name> =
  <string>         |
  <custom-ident>+

<generic-family> =
  generic( <custom-ident>+ )  |
  <string>                    |
  <custom-ident>+

```

例
-

### よくあるいくつかのフォントファミリー

```css
.serif {
  font-family: Times, "Times New Roman", Georgia, serif;
}

.sansserif {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

.monospace {
  font-family: "Lucida Console", Courier, monospace;
}

.cursive {
  font-family: cursive;
}

.fantasy {
  font-family: fantasy;
}

.emoji {
  font-family: emoji;
}

.math {
  font-family: math;
}

.fangsong {
  font-family: fangsong;
}
```

```
<div class="serif">This is an example of a serif font.</div>

<div class="sansserif">This is an example of a sans-serif font.</div>

<div class="monospace">This is an example of a monospace font.</div>

<div class="cursive">This is an example of a cursive font.</div>

<div class="fantasy">This is an example of a fantasy font.</div>

<div class="math">This is an example of a math font.</div>

<div class="emoji">This is an example of an emoji font.</div>

<div class="fangsong">This is an example of a fangsong font.</div>
```

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # generic-font-families |
| CSS Fonts Module Level 4 # font-family-prop |

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

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

関連情報
----

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


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

scrollbar-width
===============

**`scrollbar-width`** プロパティは、要素のスクロールバーが表示される時の最大の太さを設定することができます。

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

構文
--

```css
/\* キーワード値 \*/
scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;

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

### 値

*<scrollbar-width>*

スクロールバーの幅を、長さまたはキーワードのどちらかで定義します。キーワードが使用する場合は、以下の値のうちの一つでなければなりません。

|  |  |
| --- | --- |
| `auto` | プラットフォーム既定のスクロールバーの幅です。 |
| `thin` | プラットフォームが提供している細いスクロールバー、またはプラットフォーム既定のスクロールバーの幅よりも細いスクロールバーです。 |
| `none` | スクロールバーが表示されませんが、要素はスクロール可能です。 |

**メモ:** ユーザーエージェントは、ビューポートのルート要素に何らかの `scrollbar-width` の値を設定する必要があります。

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

このプロパティは注意して使用してください。 — `scrollbar-width` を `thin` または `none` に設定すると、作者が別なスクロールの仕組みを提供していない限り、スクロールすることが困難または不可能になります。そのようなコンテンツはスワイプのジェスチャーやマウスホイールでスクロールできるものの、端末によっては代替スクロール手段がないことがあります。

WCAG 基準 2.1.1 (キーボード) は、長らく基本的なキーボードのアクセシビリティを勧告してきており、これはコンテンツ領域のスクロールも含みます。また、 WCAG 2.1 で導入された基準 2.5.5 (対象の寸法) では、タッチ対象の幅と高さを 44px 以上にすることを推奨しています (ただし、この問題は高解像度の画面ではさらに複雑になるため、十分なテストが必要です)。

* MDN WCAG の理解、ガイドライン 2.1 の説明
* MDN WCAG の理解、ガイドライン 2.5 の説明
* Understanding Success Criterion 2.1.1 | W3C Understanding WCAG 2.1
* Understanding Success Criterion 2.5.5 | W3C Understanding WCAG 2.1
公式定義
----

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

形式文法
----
```

scrollbar-width =
  auto  |
  thin  |
  none

```

例
-

### あふれた際のスクロールバーの大きさを調整

#### CSS

```css
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-width: thin;
}
```

#### HTML

```html
<div class="scroller">
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
  earthnut pea peanut soko zucchini.
</div>
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Scrollbars Styling Module Level 1 # scrollbar-width |

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

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

関連情報
----

* `-ms-overflow-style`
* `::-webkit-scrollbar`


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

border-block-start-color
========================

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

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

構文
--

```css
border-block-start-color: blue;
border-block-start-color: #4c5d21;

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

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

### 値

`<'color'>`

`border-color` を参照してください。

公式定義
----

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

形式文法
----
```

border-block-start-color =
  <color>     |
  <image-1D>

<image-1D> =
  <stripes()>

<stripes()> =
  stripes( <color-stripe># )

<color-stripe> =
  <color>                            &&
  [ <length-percentage> | <flex> ]?

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

```

例
-

### 縦書きテキストの境界線の色

#### HTML

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

#### CSS

```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-block-start-color: red;
}
```

#### 例

仕様書
---

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

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

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

関連情報
----

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


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

scale
=====

**`scale`** は CSS のプロパティで、 `transform` とは個別に独立しての変倍変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 `transform` の値で座標変換関数を指定する実際の順序を思い出す手間を軽減します。

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

構文
--

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

/\* 1 つの値 \*/
/\* 1 または 100% より大きい値で要素を拡大 \*/
scale: 2;
/\* 1 または 100% より小さい値で要素を縮小 \*/
scale: 50%;

/\* 2 つの値 \*/
scale: 2 0.5;

/\* 3 つの値 \*/
scale: 200% 50% 200%;

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

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

### 値

1 つの数値

該当する要素の変倍率を指定する `<number>` または `<percentage>` であり、 X および Y 軸で同じの変倍になります。 `scale()` （2D の変倍）関数に 1 つの値を指定した場合と等価です。

2 つの長さ/パーセント値

2 つの `<number>` または `<percentage>` 値で、2D の変倍における X 軸と Y 軸の変倍率を（それぞれ）指定します。 `scale()` （2D の変倍）関数に 2 つの値を指定した場合と等価です。

3 つの長さ/パーセント値

3 つの `<number>` または `<percentage>` 値で、3D の変倍における X 軸と Y 軸と Z 軸の変倍率を（それぞれ）指定します。 `scale3d()` （3D の変倍）関数と等価です。

`none`

変倍が適用されないことを示します。

公式定義
----

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

形式文法
----
```

scale =
  none                              |
  [ <number> | <percentage> ]{1,3}

```

例
-

### ホバー時の要素の変倍

 次の例は、ホバー時に要素を変倍する方法を示しています。
 2 つのボックスが表示されており、 1 つは 1 つの `scale` 値を持ち、両軸に沿って要素を変倍します。
 2 つ目のボックスには2つの `scale` 値が示されており、 X 軸と Y 軸のそれぞれに沿って要素を変倍します。

#### HTML

```html
<div class="box" id="box1">single value</div>
<div class="box" id="box2">two values</div>
```

#### CSS

```css
.box {
  float: left;
  margin: 1em;
  width: 7em;
  line-height: 7em;
  text-align: center;
  transition: 0.5s ease-in-out;
  border: 3px dotted;
}

#box1:hover {
  scale: 1.25;
}

#box2:hover {
  scale: 1.25 0.75;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 2 # individual-transforms |

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

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

関連情報
----

* `translate`
* `rotate`
* `transform`

メモ: `skew` には独立した `transform` の値はありません


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

box-align
=========

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

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**警告:** このプロパティは、当初の CSS Flexible Box Layout Module の草案段階のものでしたが、より新しい標準で置き換えられました。

**`box-align`** は CSS のプロパティで、交差軸方向に子要素をどう整列させるかを定義します。ボックス内に余分な空間がある場合にかぎり、その効果を確認することができます。

現在の標準仕様に関する情報については、フレックスボックスを確認してください。

```css
/\* キーワード値 \*/
box-align: start;
box-align: center;
box-align: end;
box-align: baseline;
box-align: stretch;

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

配置する方向は、その要素の向き (水平か垂直か) に依存します。

構文
--

`box-align` プロパティは、 以下に記載する値で定義されます。

### 値

`start`

ボックス内のコンテンツを先頭に寄せて、末尾に余分な空間を残します。

`center`

ボックス内のコンテンツを中央に寄せて、余分な空間を等分に分割し先頭と末尾に残します。

`end`

ボックス内のコンテンツを末尾に寄せて、先頭に余分な空間を残します。

`baseline`

ボックス内のコンテンツが持つテキストのベースラインに整列させます。これはボックス内のコンテンツの向きが水平である場合にのみ適用されます。

`stretch`

ボックス内に余分な空間がなくなるようコンテンツを引き伸ばします。

メモ
--

整列のために *start* と指定されたボックスの辺は、ボックスの方向によって異なります。

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

start の反対側の端は *end* となります。

要素の `align` 属性で配置が設定されている場合、このスタイルは無視されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `stretch` |
| 適用対象 | CSS の `display` の値が `box` または `inline-box` である要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

box-align =
  start | center | end | baseline | stretch
```

例
-

### ボックス配置の設定

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>CSS box-align example</title>
    <style>
 div.example {
 display: box; /\* 仕様書通り \*/
 display: -moz-box; /\* Mozilla \*/
 display: -webkit-box; /\* WebKit \*/

 /\* ボックスの高さを子要素より高くし、
 box-pack のためのスペースを確保する \*/
 height: 400px;

 /\* ボックスの幅を子要素より広くし、
 box-align のためのスペースを確保する \*/
 width: 300px;

 /\* 子要素の向きは垂直方向にする \*/
 box-orient: vertical; /\* 仕様書通り \*/
 -moz-box-orient: vertical; /\* Mozilla \*/
 -webkit-box-orient: vertical; /\* WebKit \*/

 /\* 子要素をボックス内の水平方向に対して中央に整列させる \*/
 box-align: center; /\* 仕様書通り \*/
 -moz-box-align: center; /\* Mozilla \*/
 -webkit-box-align: center; /\* WebKit \*/

 /\* 子要素をボックス内の末尾に寄せる \*/
 box-pack: end; /\* 仕様書通り \*/
 -moz-box-pack: end; /\* Mozilla \*/
 -webkit-box-pack: end; /\* WebKit \*/
 }

 div.example > p {
 /\* 子要素を親要素の幅より狭くし、
 box-align のためのスペースを確保する \*/
 width: 200px;
 }
 </style>
  </head>
  <body>
    <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>
  </body>
</html>
```

仕様書
---

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

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

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

関連情報
----

* `align-items`, `box-orient`, `box-direction`, `box-pack`


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

border-block-end-color
======================

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

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

構文
--

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

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

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

### 値

`<'color'>`

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

公式定義
----

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

形式文法
----
```

border-block-end-color =
  <color>     |
  <image-1D>

<image-1D> =
  <stripes()>

<stripes()> =
  stripes( <color-stripe># )

<color-stripe> =
  <color>                            &&
  [ <length-percentage> | <flex> ]?

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

```

例
-

### 垂直テキストの境界線の色

#### HTML

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

#### CSS

```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-block-end-color: red;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

mask-border-outset
==================

**`mask-border-outset`** は CSS のプロパティで、要素のマスク境界の境界ボックスからの距離を指定します。

構文
--

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

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

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

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

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

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

`mask-border-outset` プロパティは 1 ～ 4 つの値で指定します。それぞれの値は `<length>` または `<number>` です。負の値は無効です。

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

`<length>`

マスク境界の辺からの距離を長さで表します。

`<number>`

マスク境界の辺からの距離を、対応する `border-width` の倍数で表します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | すべての要素。 SVG の場合は `defs` 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される |
| 継承 | なし |
| 計算値 | 指定通り。ただし相対的な長さはは絶対的な長さに変換される |
| アニメーションの種類 | 離散値 |

形式文法
----
```

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

```

例
-

### 基本的な使用

このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、要素の境界ボックスからマスクをどれだけ内側に離すかを示します。 — この機能を使用すると、マスクの端の位置を境界のすぐ内側ではなく、境界の途中にすることができるようになります。

```css
mask-border-outset: 1rem;
```

Chromium ベースのブラウザーは、このプロパティの古い版 — `mask-box-image-outset` — に接頭辞つきで対応しています。

```css
-webkit-mask-box-image-outset: 1rem;
```

**メモ:** `mask-border` ページでは動作する例を (Chromium で対応している古い接頭辞つきの境界マスクプロパティを使用して) 挙げていますので、効果について分かるでしょう。

仕様書
---

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-border-outset |

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

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

関連情報
----

* `mask-border`
* `mask-border-mode`
* `mask-border-repeat`
* `mask-border-source`
* `mask-border-width`


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

animation-timing-function
=========================

**`animation-timing-function`** は CSS のプロパティで、アニメーションがそれぞれの周期の中でどのように進行するかを設定します。

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

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

構文
--

```css
/\* キーワード値 \*/
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/\* 関数値 \*/
animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
animation-timing-function: steps(4, end);

/\* 段階関数のキーワード \*/
animation-timing-function: steps(4, jump-start);
animation-timing-function: steps(10, jump-end);
animation-timing-function: steps(20, jump-none);
animation-timing-function: steps(5, jump-both);
animation-timing-function: steps(6, start);
animation-timing-function: steps(8, end);

/\* 複数のアニメーション \*/
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);

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

### 値

`<easing-function>`

`animation-name` で定められた、アニメーションに対応するイージング関数です。

ステップではないキーワード値 (ease, linear, ease-in-out など) は、それぞれ固定の 4 点値を持つ三次ベジェ曲線を表し、 cubic-bezier() 関数の値で非定義値を指定することができます。ステップイージング関数は、入力時間を長さが等しい指定された数の間隔に分割します。これは、ステップ数とステップ位置によって定義されます。

`ease`

`cubic-bezier(0.25, 0.1, 0.25, 1.0)` と同じで、既定値であり、アニメーションの中央に向けて変化量が増加し、最後に向けて減少します。

`linear`

`cubic-bezier(0.0, 0.0, 1.0, 1.0)` と同じで、等しい速度でアニメーションします。

`ease-in`

`cubic-bezier(0.42, 0, 1.0, 1.0)` と同じで、プロパティのアニメーションの変化の速度はゆっくり始まり、終了まで加速します。

`ease-out`

`cubic-bezier(0, 0, 0.58, 1.0)` と同じで、アニメーションは速く始まり、速度を落としながら続きます。

`ease-in-out`

`cubic-bezier(0.42, 0, 0.58, 1.0)` と同じで、プロパティのアニメーションはゆっくり変化し、速度を上げ、また速度を落とします。

`cubic-bezier(p1, p2, p3, p4)`

ユーザー定義の二次元ベジェ曲線で、 p1 と p3 の値は 0 から 1 の間である必要があります。

`steps(n, <jumpterm>)`

遷移に沿った *n* 個の停止点に沿ってアニメーションを表示し、それぞれの停止点を同じ時間の長さで表示します。例えば、 *n* が 5 の場合、5つの段階があります。アニメーションが停止する点は、以下の jumpterm によって、アメーションに沿って 0%, 20%, 40%, 60%, 80% となるか、 20%, 40%, 60%, 80%, 100% となるか、アニメーションの 0% と 100% の間で5つの停止点を設定するか、 0% と 100% を含む5つの停止点を設定するか (すなわち 0%, 25%, 50%, 75%, 100%)、の何れかを使用します。

`jump-start`

アニメーションの開始時に最初のジャンプが発生するように、左連続関数を表します。

`jump-end`

アニメーションの終了時に最後のジャンプが発生するように、右連続関数を表します。

`jump-none`

どちらの側でもジャンプは行わず、効果的に補間の反復処理中に段階が除去されます。代わりに、 0% 位置と 100% 位置の両方で、それぞれ 1/n の間隔を保持します。

`jump-both`

0% 位置と 100% 位置の両方で一時停止を含み、アニメーションの反復中に効果的にステップを追加します。

`start`

`jump-start` と同じです。

`end`

`jump-end` と同じです。

`step-start`

`steps(1, jump-start)` と同じです。

`step-end`

`steps(1, jump-end)` と同じです。

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

**メモ:** `animation-timing-function` は、 CSS スクロール駆動アニメーション (en-US)を作成するときに、通常の時間ベースのアニメーションと同じ効果があります。

解説
--

イージング関数は @keyframes ルール内にあるそれぞれのキーフレームに指定されることがあります。キーフレームに **`animation-timing-function`** が指定されていない場合、そのキーフレームにはアニメーションが適用された要素から **`animation-timing-function`** の適切な値が使用されます。

キーフレーム内では、`animation-timing-function` はアットルール固有の記述子であり、同名のプロパティではありません。時間ではアニメーションされません。むしろ、キーフレームのイージング関数は、それが指定されたキーフレームから、そのプロパティを指定する次のキーフレームまで、またはそのプロパティを指定する次のキーフレームがない場合はアニメーションが終わるまで、プロパティごとに適用されます。その結果、 **`animation-timing-function`** のうち **`100%`** または **`to`** に指定したものは使用されません。

公式定義
----

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

形式文法
----
```

animation-timing-function =
  <easing-function>#

<easing-function> =
  linear                          |
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>

<linear-easing-function> =
  linear( <linear-stop-list> )

<cubic-bezier-easing-function> =
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )

<step-easing-function> =
  step-start                             |
  step-end                               |
  steps( <integer> , <step-position>? )

<linear-stop-list> =
  [ <linear-stop> ]#

<step-position> =
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end

<linear-stop> =
  <number>               &&
  <linear-stop-length>?

<linear-stop-length> =
  <percentage>{1,2}

```

例
-

### 二次元ベジェの例
```

<div class="parent">
  <div class="ease">ease</div>
  <div class="easein">ease-in</div>
  <div class="easeout">ease-out</div>
  <div class="easeinout">ease-in-out</div>
  <div class="linear">linear</div>
  <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div>
</div>
```

```
.parent > div[class] {
  animation-name: changeme;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  margin-bottom: 4px;
}
@keyframes changeme {
  0% {
    min-width: 12em;
    width: 12em;
    background-color: black;
    border: 1px solid red;
    color: white;
  }
  100% {
    width: 90vw;
    min-width: 24em;
    background-color: magenta;
    color: yellow;
    border: 1px solid orange;
  }
}
```

```css
.ease {
  animation-timing-function: ease;
}
.easein {
  animation-timing-function: ease-in;
}
.easeout {
  animation-timing-function: ease-out;
}
.easeinout {
  animation-timing-function: ease-in-out;
}
.linear {
  animation-timing-function: linear;
}
.cb {
  animation-timing-function: cubic-bezier(0.2, -2, 0.8, 2);
}
```

### 段階の例
```

<div class="parent">
  <div class="jump-start">jump-start</div>
  <div class="jump-end">jump-end</div>
  <div class="jump-both">jump-both</div>
  <div class="jump-none">jump-none</div>
  <div class="start">start</div>
  <div class="end">end</div>
  <div class="step-start">step-start</div>
  <div class="step-end">step-end</div>
</div>
```

```
.parent > div[class] {
  animation-name: changeme;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  margin-bottom: 4px;
}
@keyframes changeme {
  0% {
    min-width: 12em;
    width: 12em;
    background-color: black;
    border: 1px solid red;
    color: white;
  }
  100% {
    width: 90vw;
    min-width: 24em;
    background-color: magenta;
    color: yellow;
    border: 1px solid orange;
  }
}
```

```css
.jump-start {
  animation-timing-function: steps(5, jump-start);
}
.jump-end {
  animation-timing-function: steps(5, jump-end);
}
.jump-none {
  animation-timing-function: steps(5, jump-none);
}
.jump-both {
  animation-timing-function: steps(5, jump-both);
}
.start {
  animation-timing-function: steps(5, start);
}
.end {
  animation-timing-function: steps(5, end);
}
.step-start {
  animation-timing-function: step-start;
}
.step-end {
  animation-timing-function: step-end;
}
```

仕様書
---

| Specification |
| --- |
| CSS Animations Level 1 # animation-timing-function |

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

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

関連情報
----

* CSS アニメーションの使用
* `<easing-function>`
* JavaScript の `AnimationEvent` API
* cubic-bezier.com
* その他のアニメーション関連プロパティ: `animation`, `animation-composition`, `animation-delay`, `animation-direction`, `animation-duration`, `animation-fill-mode`, `animation-iteration-count`, `animation-name`, `animation-play-state`, `animation-timeline`


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

accent-color
============

**`accent-color`** は CSS のプロパティで、一部の要素で生成されるユーザーインターフェイス要素の強調表示色を設定します。

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

現在 `accent-color` に対応しているブラウザーは、以下の HTML 要素に適用します。

* `<input type="checkbox">`
* `<input type="radio">`
* `<input type="range">`
* `<progress>`

各ユーザーエージェントには、読みやすさとコントラストを確実に保持するためのバリエーションを持つアクセントカラーがあります。そのアクセントカラーはすべてのユーザーインターフェイスコントロールで使用されるわけではなく、コントロールのすべての状態で使用されるわけでもありません。 `accent-color` は、それが適用される状態でアクセントカラーを使用するユーザーインターフェイスコントロールにのみ適用されます。

構文
--

```css
/\* キーワード値 \*/
accent-color: auto;

/\* <color> 値 \*/
accent-color: darkred;
accent-color: #5729e9;
accent-color: rgb(0 200 0);
accent-color: hsl(228 4% 24%);

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

### 値

`auto`

UA が選択した色を表します。プラットフォームの強調色がある場合は、それと一致します。

`<color>`

強調色として使用される色を指定します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | `auto` は仕様通りに計算され、 `<color>` 値は `color` プロパティで定義されたように計算される。 |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

accent-color =
  auto     |
  <color>

```

例
-

### 独自の強調色を設定

#### HTML

```html
<input type="checkbox" checked />
<input type="checkbox" class="custom" checked />
```

#### CSS

```css
input {
  accent-color: auto;
  display: block;
  width: 30px;
  height: 30px;
}

input.custom {
  accent-color: rebeccapurple;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # widget-accent |

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

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

関連情報
----

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


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

:paused
=======

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

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

リソースが停止中になるのは、アクティブでない状態になった場合や、ユーザーが明示的に停止させた場合です。

```css
:paused {
}
```

構文
--
```

:paused
```

例
-

### CSS

```css
:paused {
  border: 5px solid orange;
}
```

仕様書
---

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

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

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

関連情報
----

* `:playing`


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

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

**`<length-percentage>`** は CSS のデータ型で、 `<length>` または `<percentage>` が取りうる値を表します。

構文
--

この型に利用できる個々の構文の詳細は、 `<length>` および `<percentage>` の文書を参照してください。

例
-

### length-percentage の例

以下の簡単な例では、`<length-percentage>` の値を使用するいくつかのプロパティを示しています。

#### HTML

```html
<p>パーセント値や長さは様々な場面で使うことができます。</p>
```

#### CSS

```css
p {
  /\* length-percentage の例 \*/
  width: 75%;
  height: 200px;
  margin: 3rem;
  padding: 1%;
  border-radius: 10px 10%;
  font-size: 250%;
  line-height: 1.5em;

  /\* length の例 \*/
  text-shadow: 1px 1px 1px red;
  border: 5px solid red;
  letter-spacing: 3px;

  /\* percentage example \*/
  text-size-adjust: 20%;
}
```

#### 結果

### calc() での使用

許可されている型として `<length-percentage>` が指定されているところでは、これはパーセント値が長さとして解決されるので、 `calc()` の式で利用することができます。したがって、以下のすべての値が `width` で利用できます。

```css
width: 200px;
width: 20%;
width: calc(100% - 200px);
```

仕様書
---

| Specification |
| --- |
| CSS Values and Units Module Level 4 # mixed-percentages |

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

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

関連情報
----

* `<percentage>`
* `<length>`
* CSS 値と単位


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

text-combine-upright
====================

**`text-combine-upright`** は CSS のプロパティで、一文字分の空間に挿入する文字の組み合わせを設定します。組み合わせたテキストが 1em の幅より広い場合、ユーザーエージェントはコンテンツを 1em の幅に収めなければなりません。合成結果は、レイアウトおよび装飾においてグリフ一文字として扱われます。このプロパティは、縦書きモードでのみ効果があります。

これは、日本語の縦中横、中国語の *直書橫向* として知られる効果をもたらすために使用されます。

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

構文
--

```css
/\* キーワード値 \*/
text-combine-upright: none;
text-combine-upright: all;

/\* Digits 値 \*/
text-combine-upright: digits; /\* 2 桁の数字を垂直テキスト内に水平に収めます \*/
text-combine-upright: digits 4; /\* 4 桁までの数字を垂直テキスト内に水平に収めます \*/

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

### 値

`none`

何も特別な処理をしません。

`all`

タイプセットのすべての文字を水平に並べてボックス内に収めます。この幅は、縦書きボックス内で一文字分の空間を取ります。

`digits <integer>?`

指定した桁数 (整数値) までの連続した ASCII 数字 (U+0030–U+0039) を水平に並べてボックス内に収めます。この幅は、縦書きボックス内で一文字分の空間を取ります。整数値を省略した場合の値は 2 になります。2 ～ 4 までの範囲外の整数値は不正です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | 置換でないインライン要素 |
| 継承 | あり |
| 計算値 | 指定されたキーワード、'digits' の場合は続けて整数 |
| アニメーションの種類 | アニメーション不可 |

形式文法
----
```

text-combine-upright =
  none                         |
  all                          |
  [ digits <integer [2,4]>? ]

```

例
-

### 横書きテキストでの 'all' の使用

all の値は、水平テキストにするすべての部分にマークアップする必要があります。現在、これは digits 値よりも多くのブラウザーが対応しています。

#### HTML

```html
<p lang="zh-Hant">
  民國<span class="num">105</span>年<span class="num">4</span>月<span
 class="num"
 >29</span
 >日
</p>
```

#### CSS

```css
html {
  writing-mode: vertical-rl;
  font: 24px serif;
}
.num {
  text-combine-upright: all;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Writing Modes Level 4 # text-combine-upright |

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

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

関連情報
----

* `writing-mode`, `text-orientation`


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

offset-distance
===============

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

Newly availableSince August 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
**`offset-distance`** は CSS プロパティで、 `offset-path` 上の要素を配置する位置を指定します。

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

構文
--

```css
/\* 既定値 \*/
offset-distance: 0;

/\* offset-path の途中 \*/
offset-distance: 50%;

/\* パス上の固定距離の位置 \*/
offset-distance: 40px;

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

``<length-percentage>``

要素が (`offset-path` で定義された) パス上のどのくらいの距離にあるかを指定する長さです。

100% はパスの全長を表します。 (`offset-path` が基本シェイプまたは `path()` として定義されている場合)。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | 座標変換可能要素 |
| 継承 | なし |
| パーセント値 | パスの全長に対する相対値 |
| 計算値 | `length` の場合は絶対的な値、それ以外の場合はパーセント値 |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

offset-distance =
  <length-percentage>

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

```

例
-

### アニメーション内での offset-distance の使用

CSS モーションパスのモーションアスペクトは、一般に `offset-distance` プロパティのアニメーションから来ています。要素をパス全体の上でアニメーションさせたい場合は、その `offset-path` を定義し、 `offset-distance` に `0%` から `100%` までを取るアニメーションを設定してください。

#### HTML

```html
<div id="motion-demo"></div>
```

#### CSS

```css
#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| Motion Path Module Level 1 # offset-distance-property |

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

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

関連情報
----

* `offset`
* `offset-anchor`
* `offset-path`
* `offset-position`
* `offset-rotate`


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

@font-feature-values
====================

**`@font-feature-values`** は CSS のアットルールで、OpenType で有効化された特性が異なるものに対して `font-variant-alternates` プロパティで共通の名前を使用することができます。これは、複数のフォントを使用している場合に CSS を簡素化するのに役立ちます。

`@font-feature-values` アットルールは、CSS の最上位で使用することも、任意の CSS の条件付きグループアットルールの内部で使用することもできます。

構文
--

### 特性値のブロック

`@swash`

`font-variant-alternates` の `swash()` 関数記法に渡される特性名を指定します。文字飾り (swash) の特性値に定義できる値は 1 個だけです。`ident1: 2` は正しいですが、`ident2: 2 4` は正しくありません。

`@annotation`

`font-variant-alternates` の `annotation()` 関数記法に渡される特性名を指定します。注釈 (annotation) 特性値に定義できる値は 1 個だけです。`ident1: 2` は正しいですが、`ident2: 2 4` は正しくありません。

`@ornaments`

`font-variant-alternates` の `ornaments()` 関数記法に渡される特性名を指定します。装飾活字 (ornaments) の特性値に定義できる値は 1 個だけです。`ident1: 2` は正しいですが、`ident2: 2 4` は正しくありません。

`@stylistic`

`font-variant-alternates` の `stylistic()` 関数記法に渡される特性名を指定します。文字様式 (stylistic) の特性値に定義できる値は 1 個だけです。`ident1: 2` は正しいですが、`ident2: 2 4` は正しくありません。

`@styleset`

`font-variant-alternates` の `styleset()` 関数記法に渡される特性名を指定します。`ident1: 2 4 12 1` は、OpenType 値 `ss02` および `ss04`, `ss12`, `ss01` に対応付けされます。`99` よりも大きな値は正しいですが、どの OpenType 値にも対応付けされず、無視されます。

`@character-variant`

`font-variant-alternates` の `character-variant()` 関数記法に渡される特性名を指定します。異体字 (character-variant) の特性値に定義できる値は 1 個または 2 個です。`ident1: 3` は `cv03=1` に対応付けされ、`ident2: 2 4` は `cv02=4` に対応付けされますが、 `ident2: 2 4 5` は無効です。

形式文法
----
```

@font-feature-values =
  @font-feature-values <family-name># { <declaration-rule-list> }

<family-name> =
  <string>         |
  <custom-ident>+

```

例
-

### @font-feature-values ルール内での @styleset の使用

```css
/\* "nice-style" を Font One に指定するアットルール \*/
@font-feature-values Font One {
  @styleset {
    nice-style: 12;
  }
}

/\* Font Two における "nice-style" のためのアットルール \*/
@font-feature-values Font Two {
  @styleset {
    nice-style: 4;
  }
}

…

/\* 1 回の宣言でアットルールを適用 \*/
.nice-look {
  font-variant-alternates: styleset(nice-style);
}
```

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-feature-values |

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

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

関連情報
----

* このアットルールが定義する値を使用する `font-variant-alternates` プロパティ


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

CSSOM View
==========

**CSSOM View** は CSS のモジュールの一つで、文書の表示方法、特にスクロールの振る舞いを操作できるようにするものです。

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

### プロパティ

* `scroll-behavior`
ガイド
---

座標系

モニター上のウィンドウ、モバイル機器のビューポート、印刷時の紙上の位置などのディスプレイコンテキストにおける位置を特定するために使われる座標系についてのガイドです。

仕様書
---

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

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

### scroll-behavior プロパティ

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


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

tab-size
========

CSS の **`tab-size`** プロパティは、タブ文字 (U+0009) の表示幅の指定に用います。

構文
--

```css
/\* <integer> 値 \*/
tab-size: 4;
tab-size: 0;

/\* <length> 値 \*/
tab-size: 10px;
tab-size: 2em;

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

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

### 値

`<integer>`

タブの幅として使用される空白文字（U+0020）の幅の倍数です。正の数でなければなりません。

`<length>`

タブの幅です。正の数でなければなりません。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `8` |
| 適用対象 | ブロックコンテナー |
| 継承 | あり |
| 計算値 | 指定された整数値または絶対的な長さ |
| アニメーションの種類 | length |

形式文法
----
```

tab-size =
  <number [0,∞]>  |
  <length [0,∞]>

```

例
-

### 文字数による展開

```css
pre {
  tab-size: 4; /\* スペース 4 つ分となります \*/
}
```

### タブの折り畳み

```css
pre {
  tab-size: 0; /\* インデント除去 \*/
}
```

### 既定の大きさの比較

この例では、既定のタブの大きさとカスタムのタブの大きさを比較しています。タブがつぶれないように、 `white-space` を `pre` に設定していることに注意してください。

#### HTML

```html
<p>no tab</p>
<p>	default tab size of 8 characters wide</p>
<p class="custom">	custom tab size of 3 characters wide</p>
<p>   3 spaces, equivalent to the custom tab size</p>
```

#### CSS

```css
p {
  white-space: pre;
}

.custom {
  tab-size: 3;
  -moz-tab-size: 3;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Text Module Level 3 # tab-size-property |

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

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

関連情報
----

* Controlling size of a tab character (U+0009) - Anne van Kesteren 氏 (Opera) からの CSSWG へのメール


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

initial-letter
==============

`initial-letter` は CSS のプロパティで、頭文字をドロップキャップにしたり、上げたり、下げたりすることを設定します。

```css
/\* キーワード値 \*/
initial-letter: normal;

/\* 数値 \*/
initial-letter: 1.5; /\* 頭文字が1.5行分を占める \*/
initial-letter: 3; /\* 頭文字が3行分を占める \*/
initial-letter: 3 2; /\* 頭文字が3行分を占め、
 2行分下がる \*/

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

構文
--

キーワード値の `normal`、または `<number>` と、その後に任意で `<integer>` が付きます。

### 値

`normal`

頭文字に特別な効果を付与しません。テキストは普通通りに表示されます。

`<number>`

頭文字の寸法を、何行を占めるかで指定します。負の値は使用できません。

`<integer>`

寸法が与えられたときに、頭文字が沈み込む行数を定義します。0 以上の値でなければなりません。省略された場合は、寸法の値を複製し、最も近い正の整数に切り捨てられます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | `::first-letter` 擬似要素と、ブロックコンテナーの最初のインラインレベルの子 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

initial-letter =
  normal                               |
  <number [1,∞]> <integer [1,∞]>       |
  <number [1,∞]> && [ drop | raise ]?

```

例
-

### 先頭文字の大きさの設定

#### HTML

```html
<p class="normal">Initial letter is normal</p>
<p class="onefive">Initial letter occupies 1.5 lines</p>
<p class="three">Initial letter occupies 3 lines</p>
```

#### CSS

```css
.normal::first-letter {
  -webkit-initial-letter: normal;
  initial-letter: normal;
}

.onefive::first-letter {
  -webkit-initial-letter: 1.5;
  initial-letter: 1.5;
}

.three::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
}
```

#### Result

仕様書
---

| Specification |
| --- |
| CSS Inline Layout Module Level 3 # sizing-drop-initials |

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

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


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

<dashed-ident>
==============

**`<dashed-ident>`** は CSS のデータ型で、 identifier として使用される任意の文字列を示します。

構文
--

`<dashed-ident>` の構文は CSS の識別子（プロパティ名など）と似ていますが、大文字小文字を区別するという点が異なります。 2 つのダッシュで始まり、ユーザー定義の識別子が続きます。

先頭に 2 つのダッシュをつけることで、 CSS コードブロックを読むときに簡単に識別でき、標準 CSS キーワードとの名前の衝突を避けることができます。

`<custom-ident>` と同様に、 `<dashed-ident>` はユーザーによって識別されますが、 `<custom-ident>` とは異なり、 CSS は `<dashed-ident>` を定義しません。

例
-

### CSS カスタムプロパティでの使用

`<dashed-ident>` は CSS カスタムプロパティで使用されます。まずプロパティが宣言され、 CSS の var() 関数の中で使用されます。

```css
html {
  --primary-color: red;
  --secondary-color: blue;
  --tertiary-color: green;
}

h1,
h4 {
  color: var(--primary-color);
}

h2,
h5 {
  color: var(--secondary-color);
}

h3,
h6 {
  color: var(--tertiary-color);
}
```

### @color-profile での使用

`<dashed-ident>` が @color-profile アットルールで使用される場合、先にアットルールが宣言され、それから CSS の color() 関数内で使用されます。

```css
@color-profile --my-color-profile {
  src: url("https://example.org/SWOP2006\_Coated5v2.icc");
}

.header {
  background-color: color(--my-color-profile 0% 70% 20% 0%);
}
```

### @font-palette-values での使用

`<dashed-ident>` を @font-palette-values (en-US) アットルールで使用する場合、先にアットルールを宣言してから、 font-palette (en-US) プロパティの値として使用します。

```css
@font-palette-values --my-palette {
  font-family: Bixa;
  base-palette: 1;
  override-colors: 0 #ff0000;
}

h1,
h2,
h3,
h4 {
  font-palette: --my-palette;
}
```

仕様書
---

| Specification |
| --- |
| CSS Values and Units Module Level 4 # dashed-idents |

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

*この型は実際の型ではなく、他の CSS 構文の定義を簡略化するために使用する便宜的な型であるため、ブラウザーの互換性に関する情報はありません。*

関連情報
----

* <ident>
* <custom-ident>


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

background-repeat
=================

**`background-repeat`** は CSS のプロパティで、背景画像をどのように繰り返すかを設定します。背景画像は水平軸方向と垂直軸方向に繰り返したり、まったく繰り返さないようにしたりすることができます。

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

既定では、繰り返された画像が要素の大きさで切り取られます。他にも、背景画像の拡縮を伴う方法 (`round` を使用) や、背景画像間に余白を挿入する方法 (`space` を使用) など、別の敷き詰め方法を選択することも可能です。

構文
--

```css
/\* キーワード値 \*/
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/\* 値2つの構文: 水平方向 | 垂直方向 \*/
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

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

### 値

`<repeat-style>`

値 1 つの構文は完全な値 2 つの構文に対する一括指定です。

|  |  |
| --- | --- |
| **単一の値** | **対応するペアの値** |
| `repeat-x` | `repeat no-repeat` |
| `repeat-y` | `no-repeat repeat` |
| `repeat` | `repeat repeat` |
| `space` | `space space` |
| `round` | `round round` |
| `no-repeat` | `no-repeat no-repeat` |

値 2 つの構文では、最初の値は水平方向の繰り返しの振る舞いを表し、2 つ目の値は垂直方向の振る舞いを表します。以下は各値が各方向にどう働くかの説明です。

|  |  |
| --- | --- |
| `repeat` | 画像は描画領域全体を覆うのに必要な回数だけ、繰り返し描画されます。最後の背景画像が領域に収まりきらない場合は切り取られます。 |
| `space` | 画像は指定された方向に切り抜きなしで敷き詰められる回数だけ繰り返されます。最初の画像と最後の画像は領域の両端にそれぞれ接触するように描画され、余白が画像同士の間に均一に分配されます。`background-position` プロパティは、画像を 1 つしか切り抜きなしで敷き詰められない場合を除き、無視されます。`space` を使用していて背景画像が切り抜かれるのは、領域幅を超える背景画像が指定された場合のみです。 |
| `round` | 利用できる空間が広がるにつれ、繰り返し描画された画像は、画像をもう1つ追加するだけの余裕 (残りの空間 ≧ 画像の幅の半分) ができるまで、 (隙間を空けずに) 伸長されます。次の画像が追加されると、描画されたすべての画像が収まるように縮小されます。例えば、元々の幅が 260px の画像が3回繰り返されているとき、それぞれが幅 300px になるまで伸長され、それから画像がもう1つ追加されます。そのときそれぞれは 225px に縮小されます。 |
| `no-repeat` | 画像は繰り返し描画されません (したがって背景画像描画領域が完全に埋め尽くされるとは限りません)。背景画像の位置は `background-position` CSS プロパティで定義されます。 |

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `repeat` |
| 適用対象 | すべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | なし |
| 計算値 | 1 つの方向につき 2 つのキーワードで構成される項目のリスト |
| アニメーションの種類 | 離散値 |

形式文法
----
```

background-repeat =
  <repeat-style>#

<repeat-style> =
  repeat-x                                     |
  repeat-y                                     |
  [ repeat | space | round | no-repeat ]{1,2}

```

例
-

### background-repeat の設定

#### HTML

```html
<ol>
  <li>
    no-repeat
    <div class="one"></div>
  </li>
  <li>
    repeat
    <div class="two"></div>
  </li>
  <li>
    repeat-x
    <div class="three"></div>
  </li>
  <li>
    repeat-y
    <div class="four"></div>
  </li>
  <li>
    space
    <div class="five"></div>
  </li>
  <li>
    round
    <div class="six"></div>
  </li>
  <li>
    repeat-x, repeat-y (multiple images)
    <div class="seven"></div>
  </li>
</ol>
```

#### CSS

```css
/\* 例のすべての div で共通 \*/
ol,
li {
  margin: 0;
  padding: 0;
}
li {
  margin-bottom: 12px;
}
div {
  background-image: url(starsolid.gif);
  width: 160px;
  height: 70px;
}

/\* 背景の繰り返し \*/
.one {
  background-repeat: no-repeat;
}
.two {
  background-repeat: repeat;
}
.three {
  background-repeat: repeat-x;
}
.four {
  background-repeat: repeat-y;
}
.five {
  background-repeat: space;
}
.six {
  background-repeat: round;
}

/\* 複数の画像 \*/
.seven {
  background-image: url(starsolid.gif),
    url(https://developer.mozilla.org/static/img/favicon32.png);
  background-repeat: repeat-x, repeat-y;
  height: 144px;
}
```

#### 結果

この例では、リストの各要素に `background-repeat` の異なる値が対応付けられています。

仕様書
---

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

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

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

関連情報
----

* CSS での複数の背景の利用方法


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

grid-area
=========

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
**`grid-area`** は CSS の一括指定プロパティで、 grid 内でのグリッドアイテムの寸法と位置を指定するために、線、区間、なし (自動) をグリッド配置に適用することで、グリッド領域の縁を指定します。

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

4 つの `<grid-line>` が指定された場合、 `grid-row-start` が最初の値に設定され、 `grid-column-start` が 2 つ目の値に設定され、 `grid-row-end` が 3 つ目の値に設定され、 `grid-column-end` が 4 つ目の値に設定されます。

`grid-column-end` が省略された場合、 `grid-column-start` が `<custom-ident>` であれば、 `grid-column-end` はその `<custom-ident>` に設定されます。それ以外の場合は `auto` に設定されます。

`grid-row-end` が省略された場合、 `grid-row-start` が `<custom-ident>` であれば、 `grid-row-end` はその `<custom-ident>` に設定されます。それ以外の場合は `auto` に設定されます。

`grid-column-start` が省略された場合、 `grid-row-start` が `<custom-ident>` であれば、 4 つの個別指定値はその値に設定されます。それ以外の場合は `auto` に設定されます。

grid-area プロパティは領域の名称として動作する `<custom-ident>` に設定することができ、これは `grid-template-areas` を用いて配置することができます。

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

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

* `grid-row-start`
* `grid-column-start`
* `grid-row-end`
* `grid-column-end`
構文
--

```css
/\* キーワード値 \*/
grid-area: auto;
grid-area: auto / auto;
grid-area: auto / auto / auto;
grid-area: auto / auto / auto / auto;

/\* <custom-ident> 値 \*/
grid-area: some-grid-area;
grid-area: some-grid-area / another-grid-area;

/\* <integer> && <custom-ident>? 値 \*/
grid-area: 4 some-grid-area;
grid-area: 4 some-grid-area / 2 another-grid-area;

/\* span && [ <integer> || <custom-ident> ] 値 \*/
grid-area: span 3;
grid-area: span 3 / span some-grid-area;
grid-area: 2 span / another-grid-area span;

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

### 値

`auto`

プロパティをグリッドアイテムの配置に影響させず、自動的に配置するか、既定の `1` とするためのキーワードです。

`<custom-ident>`

`<custom-ident>-start`/`<custom-ident>-end` という名前の付いた線がある場合、これはそのような線の最初がグリッドのアイテムの配置に関わります。

**メモ:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-area: foo;` と指定すると名前付きグリッド領域の先頭/末尾側の端を選択します (その前に `foo-start`/`foo-end` という名前の線が明示的に存在しない限り)。

そうでなければ、これは `<custom-ident>` に沿って整数の `1` が指定されたものとして扱われます。

`<integer> && <custom-ident>?`

*n* 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。

名前が `<custom-ident>` として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。

`0` の `<integer>` 値は無効です。

`span && [ <integer> || <custom-ident> ]`

グリッドアイテムのグリッド領域の列側の先頭の端が末尾の端から *n* 行になるように、グリッドアイテムの配置にグリッドスパンを設定します。

名前が `<custom-ident>` として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分にない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。

`<integer>` が省略された場合の既定値は `1` です。負の数や 0 は無効です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `grid-row-start`: `auto`
* `grid-column-start`: `auto`
* `grid-row-end`: `auto`
* `grid-column-end`: `auto`
 |
| 適用対象 | 包含ブロックがグリッドコンテナーであるグリッドアイテムまたは絶対位置指定のボックス |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `grid-row-start`: 指定通り
* `grid-column-start`: 指定通り
* `grid-row-end`: 指定通り
* `grid-column-end`: 指定通り
 |
| アニメーションの種類 | 離散値 |

形式文法
----
```

grid-area =
  <grid-line> [ / <grid-line> ]{0,3}

<grid-line> =
  auto                                                |
  <custom-ident>                                      |
  [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ]  |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]

```

例
-

### グリッド領域の設定

#### HTML

```html
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>
```

#### CSS

```css
#grid {
  display: grid;
  height: 100px;
  grid-template: repeat(4, 1fr) / 50px 100px;
}

#item1 {
  background-color: lime;
  grid-area: 2 / 2 / auto / span 3;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # propdef-grid-area |

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

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

関連情報
----

* 関連する CSS プロパティ: `grid-row`, `grid-row-start`, `grid-row-end`, `grid-column`, `grid-column-start`, `grid-column-end`, `grid-template-areas`
* グリッドレイアウトガイド: 線に基づく配置を使用したグリッドレイアウト
* 動画チュートリアル: *Line-based placement*


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

columns
=======

**`columns`** は CSS 一括指定プロパティで、要素の内容物を描画する際に使用する段数や段の幅を設定します。

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

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

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

* `column-count`
* `column-width`
構文
--

```css
/\* 段の幅 \*/
columns: 18em;

/\* 段数 \*/
columns: auto;
columns: 2;

/\* 段の幅と段数の両方 \*/
columns: 2 auto;
columns: auto 12em;
columns: auto auto;

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

`columns` プロパティは以下に挙げる値を 1 つまたは 2 つで、順不同で指定します。

### 値

`<'column-width'>`

理想的な段の幅であり、 `<length>` または `auto` キーワードで定義されます。実際の段の幅は、実際の空間に合わせて広くなったり狭くなったりします。 `column-width` を参照してください。

`<'column-count'>`

要素の内容物が流れる理想的な段の数であり、 `<integer>` または `auto` キーワードで定義します。この値と段の幅の両方が `auto` でない場合は、最大の段数を示します。 `column-count` を参照してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `column-width`: `auto`
* `column-count`: `auto`
 |
| 適用対象 | 表ラッパーボックスを除くブロックコンテナー |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `column-width`: ゼロ以上の絶対的な長さ
* `column-count`: 指定通り
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `column-width`: length
* `column-count`: integer
 |

形式文法
----
```

columns =
  <'column-width'>  ||
  <'column-count'>

```

例
-

### 3 つの等しい段の設定

#### HTML

```html
<p class="content-box">
  This is a bunch of text split into three columns using the CSS `columns`
  property. The text is equally distributed over the columns.
</p>
```

#### CSS

```css
.content-box {
  columns: 3 auto;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* `widows`
* `orphans`
* ページ化メディア
* 段組みレイアウト


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

text-orientation
================

**`text-orientation`** は CSS のプロパティで、行内のテキストの向きを設定します。このプロパティは縦書きのテキスト (`writing-mode` が `horizontal-tb` 以外の場合) でのみ効果があります。これは縦書きを使用する言語の表示を制御したり、縦書きの表見出しを作成したりするのに有用です。

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

構文
--

```css
/\* キーワード値 \*/
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

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

`text-orientation` プロパティは、以下のリストから単一のキーワードとして指定されます。

### 値

`mixed`

横書き用の文字を右に 90° 回転させ、縦書き用の文字は自然に配置します。既定値です。

`upright`

横書き用の文字を、縦書き用の字形と同様に自然に (正立で) 配置します。なお、このキーワードはすべての文字を左書きと見なします。 `direction` の使用値は `ltr` に強制されます。

`sideways`

全行を横書きで書いて 90° 回転したように配置します。

`sideways-right`

`sideways` の別名です。これは互換性のために維持されています。

`use-glyph-orientation`

SVG 要素上で、非推奨の SVG プロパティ `glyph-orientation-vertical` と `glyph-orientation-horizontal` の値を使用します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `mixed` |
| 適用対象 | 表の行グループ、列グループ、行、列を除くすべての要素 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | アニメーション不可 |

形式文法
----
```

text-orientation =
  mixed     |
  upright   |
  sideways

```

例
-

### HTML

```html
<p>Lorem ipsum dolet semper quisquam.</p>
```

### CSS

```css
p {
  writing-mode: vertical-rl;
  text-orientation: upright;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Writing Modes Level 4 # text-orientation |

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

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

関連情報
----

* 他の縦書きに関連する CSS プロパティ: `writing-mode`, `text-combine-upright`, `unicode-bidi`
* CSS 論理的プロパティ
* 縦書きテキストのスタイル付け (中国語、日本語、韓国語、モンゴル語)
* 広範なブラウザーの対応状況のテスト結果: https://w3c.github.io/i18n-tests/results/horizontal-in-vertical.html#text\_orientation


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

transition-delay
================

CSS の `transition-delay` プロパティは、値が変更されたときにプロパティのトランジション効果が始まるまでの待ち時間を指定します。

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

待ち時間はゼロ、正の数、負の数で指定します。

* `0s` (または `0ms`) の値は直ちにトランジション効果が始まります。
* 正の数の場合は、指定された時間の長さの分だけトランジション効果が始まるのが遅れます。
* 負の数の場合は、直ちにトランジション効果が、効果の途中から始まります。言い換えれば、効果は指定された時間の長さの分だけ既に実行されていたかのように動きます。

複数の待ち時間を指定することができ、複数のプロパティのトランジションを行うときに有用です。それぞれの待ち時間は、マスターリストである `transition-property` プロパティによって指定された対応するプロパティに適用されます。マスターリストよりも指定された待ち時間が少ない場合は、充足するまで待ち時間のリストが繰り返して使用されます。また待ち時間の数が多い場合は、リストが適切な長さに切り詰められます。どちらの場合も、 CSS の宣言として妥当です。

構文
--

```css
/\* <time> 値 \*/
transition-delay: 3s;
transition-delay: 2s, 4ms;

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

### 値

`<time>`

プロパティの値が変化してからトランジション効果が始まるまでの待ち時間を記述します。

公式定義
----

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

形式文法
----
```

transition-delay =
  <time>#

```

例
-

### 様々な待ち時間を示す例

#### HTML

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

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

<div class="box delay-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;
  transition-duration: 3s;
}

.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;
  transition-duration: 3s;
}

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

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

.delay-3 {
  transition-delay: 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-delay-property |

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

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

関連情報
----

* CSS トランジションの利用
* `TransitionEvent`