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

calc()
======

**`calc()`** は CSS の関数で、 CSS のプロパティ値を指定する際に計算を行うことができるものです。 `<length>`、`<frequency>`、`<angle>`、`<time>`、`<percentage>`、`<number>`、`<integer>` が利用できる場所ならば使用できます。

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

構文
--

```css
/\* プロパティ: calc(式) \*/
width: calc(100% - 80px);
```

`calc()` 関数は1つの式を引数として取り、式の結果が値として使用されます。式は以下の演算子を組み合わせたもので、標準的な演算子の優先順位の規則を使用します。

`+`

加算です。

`-`

減算です。

`*`

乗算です。引数の少なくとも 1 つは `<number>` でなければなりません。

`/`

除算です。右側は `<number>` でなければなりません。

式のオペランドは任意の `<length>` 構文の値にすることができます。式の中のそれぞれの値に異なる単位を使用することもできます。必要に応じて、計算の順番を設定するために括弧を使用することもできます。

### メモ

* `+` 演算子と `-` 演算子は**前後にホワイトスペースを置く必要があります**。たとえば、 `calc(50% -8px)` と記述した場合、パーセント表記と負の長さが連続しているものとみなされ、無効な式となるからです。 `calc(50% - 8px)` はパーセント表記、減算記号、長さの順に並んでいるものと解釈されます。また、 `calc(8px + -50%)` は長さ、加算記号、負のパーセント表記の順に並んでいるものと解釈されます。
* `*` 演算子と `/` 演算子には前後のホワイトスペースは必要ありませんが、こちらにもホワイトスペースを用いて記述ルールに一貫性を持たせておくことは認められており、推奨されています。
* ゼロで除算を行うと、 HTML パーサーで生成されるエラーになります。
* 自動レイアウトおよび固定レイアウトのテーブルで列・列グループ・行・行グループ・セルの幅や高さに対してパーセンテージを含む数式を指定すると、 `auto` が指定されたものとして扱います。
* `calc()` 関数は入れ子にすることができ、内側のものは単なる括弧として扱われます。
### 形式文法
```

<calc()> =
  calc( <calc-sum> )

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

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

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

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

```

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

`calc()` を使用してテキストの大きさを制御する場合は、一方の値が相対的な長さの単位になることを確認してください。

```css
h1 {
  font-size: calc(1.5rem + 3vw);
}
```

これによって、ページが拡大縮小されたときにテキストの大きさが変化します。

* MDN WCAG のを理解する 1.4 の解説
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
整数での使用
------

**`calc()`** は `<integer>` が求められる場面で使用することができ、その値は次のように、最も近い整数に丸められます。

```css
.modal {
  z-index: calc(3 / 2);
}
```

これによって最終的に `.modal` は `z-index` の値は 2 になります。

**メモ:** Chrome ブラウザーでは現在のところ、整数が求められる場面で **`calc()`** から返される一部の値を受け付けません。例えば、結果が整数になる場合であっても割り算は受け付けません。すなわち、 `z-index: calc(4 / 2);` は受け付けられません。

例
-

### 余白をつけてオブジェクトを画面に配置する

`calc()` でマージン設定を持つボックス配置がしやすくなります。この例では CSS でウィンドウを横切るように広がるバナーを作ります。バナーの両側とウィンドウの縁は 40 ピクセル空けます。

```css
.banner {
  position: absolute;
  left: 40px;
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
}
```

```html
<div class="banner">これはバナーです！</div>
```

### フォームフィールドの大きさを自動的に隅に合うように調整

`calc()` はフォーム要素のサイズ変更にも利用できます。適切なマージンを維持しながら、コンテナの縁を突き破らないように、利用できるスペースいっぱいに広げます。

いくらかの CSS を見てみましょう。

```css
input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}

#formbox {
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}
```

ここで、フォームはウィンドウの取り得る幅の 1/6 を使うように指定しています。それから、入力項目が必ず妥当なサイズを持つように再度 `calc()` を使い、コンテナーの幅 - 1em の幅になるように指定します。次の HTML でこの CSS を使います。

```html
<form>
  <div id="formbox">
    <label>何か入力:</label>
    <input type="text" />
  </div>
</form>
```

### 入れ子の `calc()` と CSS 変数

`calc()` で CSS 変数 を使用することもできます。以下のコードを見てみてください。

```css
.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}
```

すべての変数が展開された後、 `widthC` の値は `calc( calc( 100px / 2) / 2)` になります。この値が .foo の width プロパティに割り当てられたとき、内部にあるすべての `calc()` は (入れ子の深さにかかわらず) 単なる括弧になり、`width` プロパティの値は最終的に `calc( ( 100px / 2) / 2)`、すなわち `25px` になります。要するに、`calc()` の内部にある `calc()` は単なる括弧と同等です。

仕様書
---

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

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

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

関連情報
----

* Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog


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

flex-flow
=========

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

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

* Learn more
* See full compatibility
* Report feedback
**`flex-flow`** は CSS の一括指定プロパティで、フレックスコンテナーの向きと折り返しの動作を同時に指定します。

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

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

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

* `flex-direction`
* `flex-wrap`
構文
--

```css
/\* flex-flow: <'flex-direction'> \*/
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;

/\* flex-flow: <'flex-wrap'> \*/
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;

/\* flex-flow: <'flex-direction'> および <'flex-wrap'> \*/
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;

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

### 値

値に関して詳しくは、 `flex-direction` および `flex-wrap` をご覧ください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `flex-direction`: `row`
* `flex-wrap`: `nowrap`
 |
| 適用対象 | フレックスコンテナー |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `flex-direction`: 指定通り
* `flex-wrap`: 指定通り
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `flex-direction`: 離散値
* `flex-wrap`: 離散値
 |

形式文法
----
```

flex-flow =
  <'flex-direction'>  ||
  <'flex-wrap'>

```

例
-

### column-reverse と wrap の設定

```css
element {
  /\* main-axis は block 方向で、 main-start と main-end を逆にします。フレックスアイテムは複数行にレイアウトされます \*/
  flex-flow: column-reverse wrap;
}
```

仕様書
---

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-flow-property |

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

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

関連情報
----

* CSS フレックスボックスガイド: *フレックスボックスの基本概念*
* CSS フレックスボックスガイド: *フレックスアイテムの順序*


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

:indeterminate
==============

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

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

* Learn more
* See full compatibility
* Report feedback
**`:indeterminate`** は CSS の擬似クラスセレクターで、未確定の状態にあるフォーム要素を表します。例えばチェックボックスで HTML の `indeterminate` 属性が `true` に設定されたもの、ラジオボタンでグループ内がすべて選択されていないもの、 `<progress>` 要素で中間の状態などです。

```css
/\* 未確定の状態にある <input> をすべて選択 \*/
input:indeterminate {
  background: lime;
}
```

このセレクターが対象とする要素は以下の通りです。

* `<input type="checkbox">` 要素で、JavaScript によって `indeterminate` プロパティが `true` に設定されている場合
* `<input type="radio">` 要素で、フォーム内の同じ `name` の値を持つすべてのラジオボタンが未選択である場合
* `<progress>` 要素で、中間の状態の場合
構文
--
```

:indeterminate
```

例
-

### チェックボックスとラジオボタン

この例では中間の状態にあるフォームの要素に特殊なスタイルを適用します。

#### HTML

```html
<fieldset>
  <legend>Checkbox</legend>
  <div>
    <input type="checkbox" id="checkbox" />
    <label for="checkbox">This checkbox label starts out lime.</label>
  </div>
</fieldset>

<fieldset>
  <legend>Radio</legend>
  <div>
    <input type="radio" id="radio1" name="radioButton" />
    <label for="radio1">First radio label starts out lime.</label>
  </div>
  <div>
    <input type="radio" id="radio2" name="radioButton" />
    <label for="radio2">Second radio label also starts out lime.</label>
  </div>
</fieldset>
```

#### CSS

```css
input:indeterminate + label {
  background: lime;
}
```

```
fieldset {
  padding: 1em 0.75em;
}

fieldset:first-of-type {
  margin-bottom: 1.5rem;
}

fieldset:not(:first-of-type) > div:not(:last-child) {
  margin-bottom: 0.5rem;
}
```

#### JavaScript

```js
const inputs = document.getElementsByTagName("input");

for (let i = 0; i < inputs.length; i++) {
  inputs[i].indeterminate = true;
}
```

#### 結果

### プログレスバー

#### HTML

```html
<progress></progress>
```

#### CSS

```css
progress {
  margin: 4px;
}

progress:indeterminate {
  width: 80vw;
  height: 20px;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # selector-indeterminate |
| Selectors Level 4 # indeterminate |

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

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

関連情報
----

* ウェブフォーム — ユーザーデータでの作業
* ウェブフォームの整形
* `<input type="checkbox">` 要素の `indeterminate` 属性
* `<input>` およびそれを実装している `HTMLInputElement` インターフェイス
* `:checked` セレクターは、チェックボックスがチェックされているかどうかでスタイル付けすることができます


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

animation-name
==============

**`animation-name`** は CSS のプロパティで、要素に適用されるアニメーションを記述する 1 つまたは複数の `@keyframes` アットルールの名前を指定します。複数の `@keyframe` アットルールをカンマ区切りの文字列で指定します。指定した名前がどの `@keyframe` アットルールにも一致しない場合、プロパティはアニメーションしません。

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

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

構文
--

```css
/\* 単一のアニメーション \*/
animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;

/\* 複数のアニメーション \*/
animation-name: test1, animation4;
animation-name:
  none,
  -moz-specific,
  sliding;

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

### 値

`none`

キーフレームがないことを示す特別なキーワード。他の識別子の順序を変更せずにアニメーションを非アクティブにする、またはカスケードからのアニメーションを非アクティブにするために使用できます。

`<custom-ident>`

アニメーションを識別する名前です。識別子は大文字小文字の区別がない英文字 `a` から `z`、 数字 `0` から `9`、 アンダースコア (`_`)、 ダッシュ (`-`) から成ります。最初のダッシュ以外の文字は英文字でなければなりません。また、二重ダッシュは識別子の先頭では禁止されています。さらに、識別子は `none`, `unset`, `initial`, `inherit` であってはなりません。

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

公式定義
----

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

形式文法
----
```

animation-name =
  [ none | <keyframes-name> ]#

<keyframes-name> =
  <custom-ident>  |
  <string>

```

例
-

### アニメーションに名前を付ける

このアニメーションは `animation-name` を `rotate` としています。

#### HTML

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

#### CSS

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

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

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

#### 結果

矩形にポインターを当てるとアニメーションが始まります。

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

仕様書
---

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

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

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

関連情報
----

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


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

caption-side
============

**`caption-side`** は CSS のプロパティで、表 (`<table>`) の `<caption>` の中身を指定された側に配置します。この値は表の `writing-mode` に対する相対値です。

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

構文
--

```css
/\* 方向を示す値 \*/
caption-side: top;
caption-side: bottom;

/\* 警告: 非標準の値 \*/
caption-side: block-start;
caption-side: block-end;
caption-side: inline-start;
caption-side: inline-end;

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

`caption-side` プロパティは、以下のキーワード値のうちの一つで指定します。

### 値

`top`

キャプションボックスを表の上方に配置します。

`bottom`

キャプションボックスを表の下方に配置します。

`block-start`

キャプションボックスを表のブロック方向の先頭に配置します。

`block-end`

キャプションボックスを表のブロック方向の末尾に配置します。

`inline-start`

キャプションボックスを表のインライン方向の先頭に配置します。

`inline-end`

キャプションボックスを表のインライン方向の末尾に配置します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `top` |
| 適用対象 | 表のキャプション要素 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

caption-side =
  top     |
  bottom

```

例
-

### キャプションを上や下に設定

#### HTML

```html
<table class="top">
  <caption>
    Caption ABOVE the table
  </caption>
  <tr>
    <td>Some data</td>
    <td>Some more data</td>
  </tr>
</table>

<br />

<table class="bottom">
  <caption>
    Caption BELOW the table
  </caption>
  <tr>
    <td>Some data</td>
    <td>Some more data</td>
  </tr>
</table>
```

#### CSS

```css
.top caption {
  caption-side: top;
}

.bottom caption {
  caption-side: bottom;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid blue;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-caption-side |
| CSS Logical Properties and Values Level 1 # caption-side |

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

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


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

scroll-padding-inline
=====================

`scroll-padding-inline` プロパティは、インライン方向の scroll-padding の個別指定を設定する一括指定プロパティです。

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

scroll-padding 系のプロパティは、スクロールポートの*最適表示領域*のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

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

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

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

```css
/\* キーワード値 \*/
scroll-padding-inline: auto;

/\* <length> 値 \*/
scroll-padding-inline: 10px;
scroll-padding-inline: 1em 0.5em;
scroll-padding-inline: 10%;

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

### 値

`<length-percentage>`

スクロールポートの対応する辺からのオフセットで、有効な長さまたはパーセント値です。

`auto`

オフセットはユーザーエージェントによって特定されます。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合を検出して他のことを行うことができます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `scroll-padding-inline-start`: `auto`
* `scroll-padding-inline-end`: `auto`
 |
| 適用対象 | スクロールコンテナー |
| 継承 | なし |
| パーセント値 | スクロールコンテナーのスクロールポートに対する相対値 |
| 計算値 | 一括指定の次の各プロパティとして* `scroll-padding-inline-start`: 指定通り
* `scroll-padding-inline-end`: 指定通り
 |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

scroll-padding-inline =
  [ auto | <length-percentage [0,∞]> ]{1,2}

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

```

仕様書
---

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # propdef-scroll-padding-inline |

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

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

関連情報
----

* CSS スクロールスナップ
* Well-Controlled Scrolling with CSS Scroll Snap


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

translate
=========

**`translate`** は CSS のプロパティで、平行移動の座標変換を独自に、 `transform` プロパティから独立して指定することができます。これは一般的なユーザーインターフェイスの用途に適しており、 `transform` の値で指定する変換関数を正確に思い出す必要がなくなります。

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

構文
--

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

/\* 単一の値 \*/
translate: 100px;
translate: 50%;

/\* 二つの値 \*/
translate: 100px 200px;
translate: 50% 105px;

/\* 三つの値 \*/
translate: 50% 105px 5rem;

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

### 値

単一の `<length-percentage>` 値

単一の `<length>` または `<percentage>` 値で、 X 軸方向の平行移動を指定します。 `translate()` （2D の平行移動）関数に単一の値を指定したものと同等です。

2 つの `<length-percentage>` 値

2 つの `<length>` または `<percentage>` 値で、 2D の平行移動における X および Y 軸方向の移動量を (それぞれ) 指定します。 `translate()` （2D の平行移動）関数に 2 つの値を指定したものと同等です。

3 つの値

2 つの `<length-percentage>` 値と 1 つの `<length>` 値で、 3D の平行移動における X, Y, Z 軸の移動量を（それぞれ）指定します。 `translate3d()` （3D の平行移動）関数と同等です。

`none`

平行移動が適用されないことを指定します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | 座標変換可能要素 |
| 継承 | なし |
| パーセント値 | 囲みボックスの寸法に対する相対値 |
| 計算値 | 指定通り。ただし相対的な長さはは絶対的な長さに変換される |
| アニメーションの種類 | 座標変換 |
| 重ね合わせコンテキストの生成 | あり |

形式文法
----
```

translate =
  none                                                |
  <length-percentage> [ <length-percentage> <length>? ]?

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

```

例
-

### ホバー時に要素を移動

 この例では、 `translate` プロパティを使用して要素を 3 軸で移動させる方法を示します。
 1 つ目のボックスは X 軸に沿って移動され、 2 つ目のボックスは X 軸と Y 軸に沿って移動されます。
 3 つ目のボックスは X 軸、Y 軸、Z 軸に沿って移動し、親要素に `perspective` が追加されているため、閲覧者に向かって移動しているように見えます。

#### HTML

```html
<div class="wrapper">
  <div id="box1">translate X</div>
  <div id="box2">translate X,Y</div>
  <div id="box3">translate X,Y,Z</div>
</div>
```

#### CSS

```css
.wrapper {
  perspective: 100px;
  display: inline-flex;
  gap: 1em;
}
.wrapper > div {
  width: 7em;
  line-height: 7em;
  text-align: center;
  transition: 0.5s ease-in-out;
  border: 3px dotted;
}
#box1:hover {
  translate: 20px;
}

#box2:hover {
  translate: 20px 20px;
}

#box3:hover {
  translate: 5px 5px 30px;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* `scale`
* `rotate`
* `transform`

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


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

inset-inline-start
==================

**`inset-inline-start`** は CSS のプロパティで、要素における行頭からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的なオフセットに対応付けられます。 `top`, `right`, `bottom`, `left` のいずれかのプロパティに、 `writing-mode`, `direction`, `text-orientation` で定義された値に従って対応します。

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

構文
--

```css
/\* <length> 値 \*/
inset-inline-start: 3px;
inset-inline-start: 2.4em;

/\* 包含ブロックの幅または高さに対する <percentage> 値 \*/
inset-inline-start: 10%;

/\* キーワード値 \*/
inset-inline-start: auto;

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

`inset-inline-start` と `inset-inline-end` の一括指定は `inset-inline` です。

### 値

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | 位置指定要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの論理的な幅 |
| 計算値 | 方向が論理的である以外はボックスのオフセット、 `top`, `right`, `bottom`, `left` と同じ |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

inset-inline-start =
  auto                 |
  <length-percentage>

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

```

例
-

### インライン方向の先頭のオフセットの設定

#### HTML

```html
<div>
  <p class="exampleText">テキストの例</p>
</div>
```

#### CSS

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

.exampleText {
  writing-mode: vertical-lr;
  position: relative;
  inset-inline-start: 20px;
  background-color: #c8c800;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* 内部位置を定義する他のプロパティ: `inset-block-start`, `inset-block-end`, `inset-inline-end`
* 対応する物理的プロパティ: `top`, `right`, `bottom`, `left`
* `writing-mode`, `direction`, `text-orientation`


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

scroll-margin-bottom
====================

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

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

構文
--

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

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

### 値

`<length>`

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

公式定義
----

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

形式文法
----
```

scroll-margin-bottom =
  <length>

```

仕様書
---

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # margin-longhands-physical |

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

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

関連情報
----

* CSS スクロールスナップ
* Well-Controlled Scrolling with CSS Scroll Snap


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

animation-iteration-count
=========================

**`animation-iteration-count`** は CSS のプロパティで、停止するまでにアニメーション周期が再生される回数を指定します。

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

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

構文
--

```css
/\* キーワード値 \*/
animation-iteration-count: infinite;

/\* <number> 値 \*/
animation-iteration-count: 3;
animation-iteration-count: 2.4;

/\* 複数の値 \*/
animation-iteration-count: 2, 0, infinite;

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

**`animation-iteration-count`** プロパティは 1 つ以上のカンマで区切られた値で指定します。

### 値

`infinite`

アニメーションは無制限に繰り返されます。

``<number>``

アニメーションが繰り返される回数です。既定値は `1` です。アニメーション周期の一部を再生したい場合は、非整数の値を指定できます。例えば、 `0.5` はアニメーション周期の半分を再生します。負の数は無効です。

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

**メモ:** CSS スクロール駆動アニメーション (en-US)を作成するとき、 `animation-iteration-count` を指定すると、進行タイムラインの進行に伴ってその回数だけアニメーションが繰り返されます。もし `animation-iteration-count` が指定されなかった場合、アニメーションは一度しか発生しません。 `infinite` はスクロール駆動のアニメーションには有効な値ですが、アニメーションはうまく動作しません。

公式定義
----

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

形式文法
----
```

animation-iteration-count =
  <single-animation-iteration-count>#

<single-animation-iteration-count> =
  infinite        |
  <number [0,∞]>

```

例
-

### 繰り返し回数を設定

10 回実行されるアニメーション

#### HTML

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

#### CSS

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

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

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

#### 結果

矩形にポインターを当てるとアニメーションが始まります。

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

仕様書
---

| Specification |
| --- |
| CSS Animations Level 1 # animation-iteration-count |

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

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

関連情報
----

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


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

<blend-mode>
============

**`<blend-mode>`** は CSS のデータ型で、要素が重なったときにどのように色が現れるかを記述します。 `background-blend-mode` または `mix-blend-mode` プロパティで使用されます。

構文
--

`<blend-mode>` データ型は、以下に挙げたキーワードのうちの一つで定義します。

### 値

`normal`

 下の色が何であるかに関わらず、上の色が最終的な色になります。
 この効果は 2 枚の不透明の紙が重なっているようなものです。

`multiply`

 上の色と下の色を掛け合わせた結果が最終的な色になります。
 黒いレイヤーは最終的に黒いレイヤーになり、白いレイヤーは変化をもたらしません。
 この効果は 2 枚の透明なフィルムに印刷された画像を重ね合わせたようなものです。

`screen`

 色を反転して乗算を行い、さらに色を反転した結果が最終的な色になります。
 黒いレイヤーは変化をもたらしません。白いレイヤーは、最終的に白いのレイヤーへ近づけます。
 この効果は 2 枚の画像が画面に投影された状況に似ています。

`overlay`

 下の色が暗ければ `multiply`、下の色が明るければ `screen` の結果が最終的な色になります。
 この混合モードは `hard-light` と同等ですが、レイヤーは逆です。

`darken`

色成分ごとに最も暗い値が最終的な値になります。

`lighten`

色成分ごとに最も明るい値が最終的な値になります。

`color-dodge`

 下の色を、反転した上の色で除算した結果が、最終的な色になります。
 黒い前景は変化をもたらしません。背景色を反転した色を持つ前景は、完全に明るい色に導きます。
 この混合モードは `screen` に似ていますが、完全に明るい色に近づけるためには背景色を反転した色と同程度に明るい前景が必要です。

`color-burn`

 反転した下の色を上の色で除算して、さらに反転した結果が最終的な色になります。
 白い背景は変化をもたらしません。背景色を反転した色を持つ前景は、最終的に黒い画像へ近づけます。
 この混合モードは `multiply` に似ていますが、最終的に画像を暗くするためには背景色を反転した色と同程度に暗い前景が必要です。

`hard-light`

 上の色が暗い色であれば `multiply` 、明るい色であれば `screen` の結果が最終的な色になります。
 この混合モードは `overlay` と同じですが、レイヤーが入れ替わっています。
 この効果は、背景に*強烈な*スポットライトを当てた状況に似ています。

`soft-light`

 最終的な色は `hard-light` に似ていますが、よりソフトになります。
 この混合モードは `hard-light` に似ています。
 この効果は、背景に*拡散光の*スポットライトを当てた状況に似ています。

`difference`

 2 つの色のうち明るい色から、暗い色を減算した結果が最終的な色になります。
 黒いレイヤーは変化をもたらしません。白いレイヤーは、もうひとつのレイヤーの色を反転します。

`exclusion`

 最終的な色は `difference` に似ていますが、コントラストが低くなります。
 `difference` と同様に、黒いレイヤーは変化をもたらしません。白いレイヤーは、もうひとつのレイヤーの色を反転します。

`hue`

最終的な色は上の色の*色相*を持ちますが、*彩度*および*明度*は下の色の値を使用します。

`saturation`

 最終的な色は上の色の*彩度*を持ちますが、*色相*および*明度*は下の色の値を使用します。
 彩度を持たない純粋なグレーの背景は、効果がありません。

`color`

 最終的な色は上の色の*色相*および*彩度*を持ちますが、*明度*は下の色の値を使用します。
 この効果はグレーレベルを保持しており、前景に色をつけるために使用できます。

`luminosity`

 最終的な色は上の色の*明度*を持ちますが、*色相*および *彩度*は下の色の値を使用します。
 この混合モードは `color` と同じですが、レイヤーが入れ替わっています。

解説
--

混合モードは、適用されるレイヤー間のそれぞれのピクセルにおいて前景色と背景色を取り、計算を行い、新しい色の値を返します。

混合モード同士の変化は補完されません。すべての変更が直接反映されます。

形式文法
----
```

<blend-mode> =
  normal       |
  multiply     |
  screen       |
  overlay      |
  darken       |
  lighten      |
  color-dodge  |
  color-burn   |
  hard-light   |
  soft-light   |
  difference   |
  exclusion    |
  hue          |
  saturation   |
  color        |
  luminosity

```

例
-

### "normal" の使用例
```

<div id="div"></div>
```

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: normal;
}
```

### "multiply" の使用例
```

<div id="div"></div>
```

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: multiply;
}
```

### "screen" の使用例
```

<div id="div"></div>
```

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: screen;
}
```

### "overlay" の使用例
```

<div id="div"></div>
```

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: overlay;
}
```

### "darken" の使用例
```

<div id="div"></div>
```

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: darken;
}
```

### "lighten" の使用例
```

<div id="div"></div>
```

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: lighten;
}
```

### "color-dodge" の使用例
```

<div id="div"></div>
```

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: color-dodge;
}
```

### "color-burn" の使用例
```

<div id="div"></div>
```

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: color-burn;
}
```

### "hard-light" の使用例
```

<div id="div"></div>
```

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: hard-light;
}
```

### "soft-light" の使用例
```

<div id="div"></div>
```

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: soft-light;
}
```

### "difference" の使用例
```

<div id="div"></div>
```

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: difference;
}
```

### "exclusion" の使用例
```

<div id="div"></div>
```

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: exclusion;
}
```

### "hue" の使用例
```

<div id="div"></div>
```

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: hue;
}
```

### "saturation" の使用例
```

<div id="div"></div>
```

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: saturation;
}
```

### "color" の使用例
```

<div id="div"></div>
```

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: color;
}
```

### "luminosity" の使用例
```

<div id="div"></div>
```

```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: luminosity;
}
```

### 混合モードの比較

次の例の `<div>` には、 Firefox のロゴと線形グラデーションの 2 つの背景画像を設定してあります。その下に `<select>` メニューがあって `background-blend-mode` を変更することができ、それが `<div>` に適用されますので、様々な混合モードの効果を比較することができます。

#### HTML

```html
<div></div>
<p>混合モードを選択してください。</p>
<select>
  <option selected>normal</option>
  <option>multiply</option>
  <option>screen</option>
  <option>overlay</option>
  <option>darken</option>
  <option>lighten</option>
  <option>color-dodge</option>
  <option>color-burn</option>
  <option>hard-light</option>
  <option>soft-light</option>
  <option>difference</option>
  <option>exclusion</option>
  <option>hue</option>
  <option>saturation</option>
  <option>color</option>
  <option>luminosity</option>
</select>
```

#### CSS

```css
div {
  width: 300px;
  height: 300px;
  background:
    url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png)
      no-repeat center,
    linear-gradient(to bottom, blue, orange);
}
```

#### JavaScript

```js
const selectElem = document.querySelector("select");
const divElem = document.querySelector("div");

selectElem.addEventListener("change", () => {
  divElem.style.backgroundBlendMode = selectElem.value;
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| Compositing and Blending Level 2 # ltblendmodegt |

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

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

関連情報
----

* このデータ型を使用するプロパティ: `background-blend-mode`, `mix-blend-mode`

様々な混合モードの他のウェブサイトにおける解説:

* Wikipedia のブレンドモードの記事
* Adobe Photoshop における描画モード (Adobe)


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

::selection
===========

**`::selection`** は CSS の擬似要素で、ユーザーが (テキストをマウスでクリックやドラッグすることで) 選択した文書の一部にスタイルを適用します。

```css
::selection {
  background-color: cyan;
}
```

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

利用できるプロパティ
----------

`::selection` 擬似要素では、特定の CSS プロパティのみが利用できます。

* `color`
* `background-color`
* `text-decoration` および関連プロパティ
* `text-shadow`
* `stroke-color`, `fill-color`, `stroke-width (en-US)`

特に、 `background-image` は無視されます。

構文
--

```css
/\* 従来の Firefox の構文 (バージョン 61 以前) \*/
::-moz-selection

Error: could not find syntax for this item
```

例
-

### HTML

```html
この文字列は選択すると特殊なスタイルになります。
<p>こちらの段落も文字列を選択してみてください。</p>
```

### CSS
```

::-moz-selection {
  color: gold;
  background-color: red;
}

p::-moz-selection {
  color: white;
  background-color: blue;
}
```

```css
/\* 選択されたテキストを赤の背景に金色とする \*/
::selection {
  color: gold;
  background-color: red;
}

/\* 選択されたテキストを青の背景に白とする \*/
p::selection {
  color: white;
  background-color: blue;
}
```

### 結果

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

**純粋に美的な理由により、選択されたテキストのスタイルを上書きしないでください。** — ユーザーは必要に応じてカスタマイズすることができます。認知の問題を抱えている人や、技術的な知識に弱い人にとって、予期せず選択のスタイルが変更されると、機能の理解が妨げられる可能性があります。

上書きする場合は、選択部分のテキストと背景の色の**コントラスト比**が、弱視の人でも読める程度に高いことを確認することが重要です。

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

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-selection |

**メモ:** `::selection` は CSS Selectors Level 3 の草稿にはありましたが、 (特に要素がネストされた場合の) 動作の仕様化が途中であることや相互運用性が確保されなかったこと (W3C Style mailing list での議論に基づく)から、勧告の過程で削除されました。これは Pseudo-Elements Level 4 で再導入されています。

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

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

関連情報
----

* `pointer-events` - 要素でどのイベントが有効かを制御する


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

element()
=========

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

**`element()`** は CSS の関数で、任意の HTML 要素から生成された `<image>` 値を定義します。この画像は動的で、HTML 要素が変更されると、この関数の結果を使う CSS プロパティが自動的に更新されます。

特に便利な使い道としては、HTML の `<canvas>` 要素の画像を背景に使うというものです。

Gecko ブラウザーでは、標準外の `document.mozSetImageElement()` (en-US) メソッドで背景として使われる要素を既定の CSS の背景要素と取り替えることができます。

構文
--

```css
element(id)
```

ここで:

*id*

背景として使う要素の ID です。要素の HTML 属性 #*id* に定義されているものです。

例
-

この例をライブで見るには、`-moz-element()` に対応している Firefox が必要です。

### いくらか現実的な例

この例では hidden 状態の `<div>` を背景に使います。背景要素はグラデーションを使うだけでなく、背景の一部として描画されるテキストも含んでいます。

```html
<div
 style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
  <p>This box uses the element with the #myBackground1 ID as its background!</p>
</div>

<div style="overflow:hidden; height:0;">
  <div
 id="myBackground1"
 style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
    <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">
      This text is part of the background. Cool, huh?
    </p>
  </div>
</div>
```

"myBackground1" という ID を持つ `<div>` 要素が、"This box uses the element with the #myBackground1 ID as its background!" という段落を含むコンテンツの背景に使われています。

![](/ja/docs/Web/CSS/element/example1.png)

### いくらか突飛な例

この例は hidden 状態の `<button>` 要素を、背景の繰り返しパターンとして使います。これは、好きな要素を背景として使うことができるという例ですが、すぐれたデザインとはいえないかもしれません。

```html
<div
 style="width:400px; height:100px; background:-moz-element(#myBackground2);"></div>

<div style="overflow:hidden; height:0;">
  <button id="myBackground2" type="button">Evil button!</button>
</div>
```

![](/ja/docs/Web/CSS/element/example2.png)

仕様書
---

| Specification |
| --- |
| CSS Images Module Level 4 # element-notation |

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

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

関連情報
----

* `image()`
* `image-set()`
* `<image>`
* `<gradient>`
* `element()`
* `cross-fade()`
* `document.mozSetImageElement()` (en-US)


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

:read-write
===========

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

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

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

```css
input:read-write,
textarea:read-write {
  background-color: #bbf;
}

p:read-write {
  background-color: #bbf;
}
```

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

構文
--
```

:read-write
```

例
-

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

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

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

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

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

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

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

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

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

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

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

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

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

仕様書
---

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

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

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

関連情報
----

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


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

scroll-margin
=============

**`scroll-margin`** は一括指定プロパティで、要素のスクロールマージンを一度にすべて、ちょうど `margin` プロパティが個別指定の `margin-*` に値を割り当てるように、値を割り当てます。

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

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

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

* `scroll-margin-bottom`
* `scroll-margin-left`
* `scroll-margin-right`
* `scroll-margin-top`
構文
--

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

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

### 値

`<length>`

スクロールコンテナーの辺からの張り出し部分です。

解説
--

`scroll-margin` の効果は、例のコンテンツの 2 つの「ページ」の間の一部の位置にスクロールすることで見ることができます。`scroll-margin` に指定された値は、主にスナップポートの外側にあるページのうち、どれだけの部分を表示したままにするかを決定します。

`scroll-margin` の値はこのボックスをスナップポートに割り当てるために使用されるスクロールスナップ領域の定義の張り出し部分を表します。スクロールスナップ領域は、変換された境界ボックスを取り、その矩形の境界ボックス (スクロールコンテナーの座標空間内で軸方向に配置) を割り当てて、指定された張り出し部分を追加することによって決定されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `scroll-margin-bottom`: `0`
* `scroll-margin-left`: `0`
* `scroll-margin-right`: `0`
* `scroll-margin-top`: `0`
 |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `scroll-margin-bottom`: 指定通り
* `scroll-margin-left`: 指定通り
* `scroll-margin-right`: 指定通り
* `scroll-margin-top`: 指定通り
 |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

scroll-margin =
  <length>{1,4}

```

例
-

### 簡単なデモ

この例では、上記のインタラクティブ例と非常によく似たものを実装していますが、ここではその実装方法を説明します。

ここでの目的は、水平方向にスクロールする 4 つのブロックを作成することです。2 つ目と 3 つ目のブロックは、それぞれのブロックの左端に近いところでスナップします。

#### HTML

ブロックを表す HTML はとても簡単です。

```html
<div class="scroller">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
```

#### CSS

外側のコンテナーのスタイルは以下のようになっています。

```css
.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid #000;
  scroll-snap-type: x mandatory;
}
```

スクロールスナップに関連する主な部品は、`overflow-x: scroll` で、コンテンツがスクロールしても隠れないようにしています。また、`scroll-snap-type: x mandatory` で、スクロールのスナップは水平軸に沿って行わなければならず、スクロールは常にスナップ点で静止するようになっています。

子要素のスタイルは次のようになっています。

```css
.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: #663399;
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(2n) {
  background-color: #fff;
  color: #663399;
}
```

ここで最も重要なのは `scroll-snap-align: start` で、これは左側の端 (ここでは x 軸に沿った「先頭」) をスナップ点として指定するものです。

最後に、スクロールのマージン値を指定しますが、これは 2 番目と 3 番目の子要素に対して異なる値を指定します。

```css
.scroller > div:nth-child(2) {
  scroll-margin: 1rem;
}

.scroller > div:nth-child(3) {
  scroll-margin: 2rem;
}
```

つまり、真ん中の子要素を過ぎてスクロールした場合、2 番目の `<div>` の左端から `1rem`、3 番目の `<div>` の左端から `2rem` のところでスナップすることになります。

**メモ:** ここでは `scroll-margin` をすべての辺に一度に設定していますが、実際に関係するのは先頭側だけです。例えば `scroll-margin-inline-start: 1rem` や `scroll-margin: 0 0 0 1rem` などのように、一辺のみにスクロールマージンを設定しても同様に機能します。

#### 結果

自分でやってみましょう。

仕様書
---

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # scroll-margin |

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

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

関連情報
----

* CSS スクロールスナップ
* Well-Controlled Scrolling with CSS Scroll Snap


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

CSS 色調整
=======

**CSS 色調整**モジュールは、モデルを提供し、「ダークモード」、コントラスト調整、その他の配色設定などのユーザーの環境設定を処理するために、ユーザーエージェントによる自動色調整を制御します。

このモジュールは `@media` の `prefers-color-scheme`、`prefers-contrast`、`forced-colors` 特性とともに、ブラウザーに色を自動的に調整させる方法とタイミングを定義します。

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

### プロパティ

* `color-scheme`
* `forced-color-adjust`
* `print-color-adjust`
関連概念
----

* CSS の `<color>` データ型
* 関連する `@media` 特性:
    + `prefers-color-scheme`
    + `prefers-contrast`
    + `forced-colors`
* 強制色モードに影響するプロパティ
    + `accent-color`
    + `background-color`
    + `background-image`
    + `border-color`
    + `box-shadow`
    + `caret-color`
    + `color`
    + `color-scheme`
    + `column-rule-color`
    + `fill`
    + `flood-color` (en-US)
    + `lighting-color` (en-US)
    + `outline-color`
    + `scrollbar-color`
    + `stop-color`
    + `stroke`
    + `text-decoration-color`
    + `text-emphasis-color`
    + `text-shadow`
    + `-webkit-tap-highlight-color`
仕様書
---

| Specification |
| --- |
| CSS Color Adjustment Module Level 1  |

関連情報
----

* CSS 色モジュール


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

:any-link
=========

**`:any-link`** は CSS の擬似クラスセレクターで、訪問の有無とは独立したソースアンカーとして振る舞う要素を表します。言い換えれば、 `href` 属性を持つすべての `<a>` または `<area>` 要素を選択します。つまり、 `:link` または `:visited` に一致するすべての要素を選択します。

```css
/\* :link または :visited に該当するすべての要素を選択 \*/
:any-link {
  color: green;
}
```

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

構文
--
```

:any-link
```

例
-

### HTML

```html
<a href="https://example.com">External link</a><br />
<a href="#">Internal target link</a><br />
<a>Placeholder link (won't get styled)</a>
```

### CSS

```css
a:any-link {
  border: 1px solid blue;
  color: orange;
}

/\* WebKit browsers \*/
a:-webkit-any-link {
  border: 1px solid blue;
  color: orange;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # the-any-link-pseudo |

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

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

関連情報
----

* ハイパーリンクの作成
* 一致する HTML 要素: `<a>` および `<area>` に `href` 属性が付いたもの
* 関連する CSS セレクター:
    + `:visited`
    + `:link`


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

-webkit-border-before
=====================

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

**`-webkit-border-before`** は CSS のプロパティで、個々の論理ブロックの境界の先頭側のプロパティ値をスタイルシートの一箇所で設定するための一括指定プロパティです。

```css
/\* border の値 \*/
-webkit-border-before: 1px;
-webkit-border-before: 2px dotted;
-webkit-border-before: medium dashed blue;

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

`-webkit-border-before` は `-webkit-border-before-width`, `-webkit-border-before-style`, `-webkit-border-before-color` のうちの 1 つ以上の値で設定することができます。これはその要素の書字方向やテキストの向きに応じて、物理的な境界に対応付けられます。これは `border-top`, `border-right`, `border-bottom`, `border-left` の各プロパティに、 `writing-mode`, `direction`, `text-orientation` で定義された値に基づいて対応付けられます。

これは要素の他の境界を定義する `-webkit-border-after`, `-webkit-border-start`, `-webkit-border-end` に関連しています。

このプロパティは `border-block-start` として標準化過程にあります。

構文
--

### 値

以下のものを 1 つ以上、任意の順で指定します。

`<'border-width'>`

See `border-width`

`<'border-style'>`

See `border-style`

`<'color'>`

See `color`

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `border-width`: 一括指定の次の各プロパティとして
    + `border-top-width`: `medium`
    + `border-right-width`: `medium`
    + `border-bottom-width`: `medium`
    + `border-left-width`: `medium`
* `border-style`: 一括指定の次の各プロパティとして
    + `border-top-style`: `none`
    + `border-right-style`: `none`
    + `border-bottom-style`: `none`
    + `border-left-style`: `none`
* `color`: `canvastext`
 |
| 適用対象 | すべての要素 |
| 継承 | あり |
| パーセント値 | 一括指定の次の各プロパティとして* `-webkit-border-before-width`: 包含ブロックの論理的な幅
 |
| 計算値 | 一括指定の次の各プロパティとして* `border-width`: 一括指定の次の各プロパティとして
    + `border-bottom-width`: 絶対的な長さ、または `border-bottom-style` が `none` または `hidden` の場合は `0`
    + `border-left-width`: 絶対的な長さ、または `border-left-style` が `none` または `hidden` の場合は `0`
    + `border-right-width`: 絶対的な長さ、または `border-right-style` が `none` または `hidden` の場合は `0`
    + `border-top-width`: 絶対的な長さ、または `border-top-style` が `none` または `hidden` の場合は `0`
* `border-style`: 一括指定の次の各プロパティとして
    + `border-bottom-style`: 指定通り
    + `border-left-style`: 指定通り
    + `border-right-style`: 指定通り
    + `border-top-style`: 指定通り
* `color`: 色の計算値
 |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

### 縦書きテキストに境界を適用

#### HTML

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

#### CSS

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

.exampleText {
  writing-mode: vertical-rl;
  -webkit-border-before: 5px dashed blue;
}
```

#### 結果

仕様書
---

標準には含まれていませんが、標準化過程にある `border-block-start` プロパティに関連しています。

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

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

関連情報
----

* `border-block-start`
* 対応付けられる物理的プロパティ: `border-top`, `border-right`, `border-bottom`, `border-left`
* `writing-mode`, `direction`, `text-orientation`


擬似要素 - CSS: カスケーディングスタイルシート

擬似要素
====

CSS の **擬似要素** (Pseudo-elements) は、セレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。

構文
--

```css
selector::pseudo-element {
  property: value;
}
```

例えば `::first-line` 擬似要素は、段落の最初の行のフォントを変更するために使用することができます。

```css
/\* すべての <p> 要素の最初の行です。 \*/
p::first-line {
  color: blue;
  text-transform: uppercase;
}
```

擬似要素にはダブルコロン (`::`) を使用します。これは、単一のコロン (`:`) を使用する擬似クラスと区別するためです。

1つのセレクターで使用できる擬似要素は1つだけです。擬似要素が現れる場所は、それが現れる複雑セレクターまたは複合セレクター内の他のすべての要素の後でなければなりません。例えば、段落の最初の行は `p::first-line` を使用して選択することができますが、最初の行の子やポインターが当たっている最初の行は選択できません。つまり、 `p::first-line > *` と `p::first-line:hover` はどちらも無効です。

擬似要素を使用して、状態に基づいて要素を選択することはできませんが、擬似要素を使用して、すでに状態が適用されている要素の一部を選択してスタイル設定することはできます。例えば、 `p:hover::first-line` は、段落自体にポインターが当たっているとき（擬似クラス）に、段落の最初の行（擬似要素）を選択します。

**メモ:** セレクターリストに無効なセレクターが含まれている場合、そのスタイルブロック全体が無効になります。

擬似要素の一覧
-------

CSS の一連の仕様で定義される擬似要素には、以下のようなものがあります。

A

* `::after`

B

* `::backdrop`
* `::before`

C

* `::cue`
* `::cue-region`

F

* `::first-letter`
* `::first-line`
* `::file-selector-button` (en-US)

G

* `::grammar-error`
Experimental

M

* `::marker`

P

* `::part()`
* `::placeholder`

S

* `::selection`
* `::slotted()`
* `::spelling-error`
Experimental

T

* `::target-text`
Experimental

**メモ:** ブラウザーは元の 4 つの擬似要素、 `::before`、`::after`、`::first-line`、`::first-letter` のみで単一コロンの構文に対応しています。

仕様書
---

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4  |
| CSS Positioned Layout Module Level 4  |
| CSS Shadow Parts  |
| WebVTT: The Web Video Text Tracks Format  |

関連情報
----

* CSS 擬似要素モジュール
* 擬似クラス
* CSS セレクターモジュール
* CSS 構成要素: 擬似クラスと擬似要素


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

animation
=========

**`animation`** は CSS の一括指定プロパティで、スタイルの間のアニメーションを適用します。これは `animation-name`, `animation-duration`, `animation-timing-function`, `animation-delay`, `animation-iteration-count`, `animation-direction`, `animation-fill-mode`, `animation-play-state` の一括指定です。

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

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

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

* `animation-delay`
* `animation-direction`
* `animation-duration`
* `animation-fill-mode`
* `animation-iteration-count`
* `animation-name`
* `animation-play-state`
* `animation-timeline`
* `animation-timing-function`
構文
--

```css
/\* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name \*/
animation: 3s ease-in 1s 2 reverse both paused slidein;

/\* @keyframes duration | easing-function | delay | name \*/
animation: 3s linear 1s slidein;

/\* 2 つのアニメーション \*/
animation:
  3s linear slidein,
  3s ease-out 5s slideout;
```

`animation` プロパティは 1 つまたはカンマで区切った複数のアニメーションとして指定します。

それぞれ個別のアニメーションは以下のように定義されます。

* 0 ～ 2 個の `<time>` の値
* 以下の値は 0 ～ 1 回出現します。
    + `<single-easing-function>`
    + `<single-animation-iteration-count>`
    + `<single-animation-direction>`
    + `<single-animation-fill-mode>`
    + `<single-animation-play-state>`
* アニメーションの名前は任意で、 `none`, `<custom-ident>`, `<string>` のいずれかになります。

**メモ:** `animation-timeline`、`animation-range-start`、`animation-range-end` は、現在の実装ではリセットのみであるため、現在のところこのリストには掲載されていません。つまり、 `animation` があると、それ以前に宣言した `animation-timeline` の値は `auto` に、それ以前に宣言した `animation-range-start` と `animation-range-end` の値は `normal` にリセットされますが、これらのプロパティを `animation` で設定することはできません。 CSS スクロール駆動アニメーション (en-US) を作成する場合、 `animation` の一括指定を宣言した後に、これらのプロパティを宣言しなければ効果を得ることはできません。

### 値

`<single-easing-function>`

推移の形式を決定します。値は `<easing-function>` で利用できる値のいずれかでなければなりません。

`<single-animation-iteration-count>`

アニメーションが実行される回数です。 `animation-iteration-count` で利用できる値の一つでなければなりません。

`<single-animation-direction>`

アニメーションが実行される方向です。 `animation-direction` で利用できる値の一つでなければなりません。

`<single-animation-fill-mode>`

アニメーションの実行の前後にどのようにスタイルが適用されるかを定めます。 `animation-fill-mode` で利用できる値の一つでなければなりません。

`<single-animation-play-state>`

アニメーションが実行中かどうかを定めます。 `animation-play-state` で利用できる値の一つでなければなりません。

解説
--

それぞれのアニメーションの定義の中での順序は重要です。 `<time>` として解釈される最初の値は `animation-duration` に、そして 2 番目の値は、`animation-delay` に割り当てられます。

それぞれのアニメーション定義内の他の値の順序も、 `animation-name` 値と他の値を判別するために重要です。もし `animation` の一括指定の値が `animation-name` 以外のアニメーションプロパティの値として解釈できる場合、その値は最初のプロパティに適用され、 `animation-name` には適用されません。このため、 `animation` 一括指定を使用する場合は、値のリストの最後の値として `animation-name` の値を指定することをお勧めします。これは、`animation` 一括指定を使用してカンマで区切られた複数のアニメーションを指定する場合でも同様です。

アニメーションを適用するにはアニメーション名を設定する必要がありますが、`animation` 一括指定の値はすべてオプションで、それぞれの個別指定の `animation` 成分の既定値が設定されます。 `animation-name` の初期値は `none` です。つまり、`animation` 一括指定のプロパティで `animation-name` の値が宣言されていない場合、どのプロパティにもアニメーションは適用されません。

`animation-duration` 値が `animation` 一括指定プロパティにおいて除外された場合、このプロパティの値は `0s` が既定値となります。この場合、アニメーションは発生しますが（`animationStart` と `animationEnd` イベントは発行されますが）、アニメーションは表示されません。

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

点滅を伴うアニメーションは、注意欠陥障害 (ADHD) のような認知障害を持つ人々に問題を起こす可能性があります。加えて、特定の種類の動きが、前庭障害、てんかん、片頭痛、痙攣感受性などの引き金になることもあります。

アニメーションを停止したり無効にしたりする仕組みを、できれば動きを縮小するメディアクエリーを使用して、アニメーションを削減した操作の設定を表明したユーザーの希望を叶えるように作成することができます。

* Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article
* An Introduction to the Reduced Motion Media Query | CSS-Tricks
* Responsive Design for Motion | WebKit
* MDN WCAG を理解する、ガイドライン 2.2 の説明
* Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0
公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `animation-name`: `none`
* `animation-duration`: `0s`
* `animation-timing-function`: `ease`
* `animation-delay`: `0s`
* `animation-iteration-count`: `1`
* `animation-direction`: `normal`
* `animation-fill-mode`: `none`
* `animation-play-state`: `running`
* `animation-timeline`: `auto`
 |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `animation-name`: 指定通り
* `animation-duration`: 指定通り
* `animation-timing-function`: 指定通り
* `animation-delay`: 指定通り
* `animation-direction`: 指定通り
* `animation-iteration-count`: 指定通り
* `animation-fill-mode`: 指定通り
* `animation-play-state`: 指定通り
* `animation-timeline`: リストで、それぞれの項目は大文字小文字を区別する CSS 識別子またはキーワード `none`, `auto`
 |
| アニメーションの種類 | アニメーション不可 |

形式文法
----
```

animation =
  <single-animation>#

<single-animation> =
  <time [0s,∞]>                       ||
  <easing-function>                   ||
  <time>                              ||
  <single-animation-iteration-count>  ||
  <single-animation-direction>        ||
  <single-animation-fill-mode>        ||
  <single-animation-play-state>       ||
  [ none | <keyframes-name> ]

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

<single-animation-iteration-count> =
  infinite        |
  <number [0,∞]>

<single-animation-direction> =
  normal             |
  reverse            |
  alternate          |
  alternate-reverse

<single-animation-fill-mode> =
  none       |
  forwards   |
  backwards  |
  both

<single-animation-play-state> =
  running  |
  paused

<keyframes-name> =
  <custom-ident>  |
  <string>

<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}

```

例
-

**メモ:** CSS ボックスモデル プロパティのアニメーションは推奨されません。ボックスモデルのプロパティをアニメーションさせると、本質的に CPU に負荷がかかります。

### 日の出

 ここでは、水色の空を昇る黄色い太陽をアニメーション化しています。太陽は
 ビューポートの中心まで上昇してから、下落して見えなくなります。

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

```css
:root {
  overflow: hidden; /\* 地平線下の部分の太陽を隠す \*/
  background-color: lightblue;
  display: flex;
  justify-content: center; /\* 太陽を背景の中心に配置する \*/
}

.sun {
  background-color: yellow;
  border-radius: 50%; /\* 丸い背景を作成 \*/
  height: 100vh; /\* 太陽をビューポートの大きさにする \*/
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate sun-rise;
}

@keyframes sun-rise {
  from {
    /\* ビューポートを通過して太陽を下に押し下げる \*/
    transform: translateY(110vh);
  }
  to {
    /\* 太陽を既定の位置に戻す \*/
    transform: translateY(0);
  }
}
```

### 複数のプロパティのアニメーション

前回の例の太陽のアニメーションに追加して、太陽が昇ったり沈んだりするときの色を変える 2 つ目のアニメーションを追加します。太陽が地平線の下にあるときは暗い赤色から始まり、上に近づくにつれて明るいオレンジ色に変わります。

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

```css
:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate animating-multiple-properties;
}

/\* 単一のアニメーションで複数のプロパティをアニメーションさせることができる \*/
@keyframes animating-multiple-properties {
  from {
    transform: translateY(110vh);
    background-color: red;
    filter: brightness(75%);
  }
  to {
    transform: translateY(0);
    background-color: orange;
    /\* 設定されていないプロパティ、つまり 'filter' は既定値に戻る \*/
  }
}
```

### 複数のアニメーションの適用

水色の背景に昇ったり沈んだりする太陽。太陽は徐々に虹色に回転します。太陽の位置と色のタイミングは独立しています。

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

```css
:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  /\* 複数のアニメーションをカンマで区切り、各アニメーションの引数を個別に設定 \*/
  animation:
    4s linear 0s infinite alternate rise,
    24s linear 0s infinite psychedelic;
}

@keyframes rise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes psychedelic {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}
```

### 複数のアニメーションのカスケード

ここでは、水色の背景に黄色の太陽があります。太陽はビューポートの左側と右側の間で跳ね返ります。上昇アニメーションを定義しても、太陽はビューポートに残ります。上昇アニメーションの座標変換プロパティは、跳ね返るアニメーションによって「上書き」されます。

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

```css
:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  /\*
 カスケードの後半で宣言されたアニメーションは、
 それ以前に宣言されたアニメーションのプロパティを上書きする
 \*/
  /\* 跳ね返りは上昇の座標変換を「上書き」するため、太陽は水平方向にしか移動しない \*/
  animation:
    4s linear 0s infinite alternate rise,
    4s linear 0s infinite alternate bounce;
}

@keyframes rise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes bounce {
  from {
    transform: translateX(-50vw);
  }
  to {
    transform: translateX(50vw);
  }
}
```

これ以外の例は CSS アニメーションを参照してください。

仕様書
---

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

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

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

関連情報
----

* CSS アニメーションの使用
* JavaScript の `AnimationEvent` API


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

animation-direction
===================

**`animation-direction`** は CSS のプロパティで、アニメーション再生の向きを順方向、逆方向、前後反転のいずれにするかを設定します。

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

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

構文
--

```css
/\* 単一のアニメーション \*/
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

/\* 複数のアニメーション \*/
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;

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

### 値

`normal`

アニメーションを毎回*順方向*に再生します。言い換えれば、アニメーション周期ごとに、アニメーションを最初の状態にリセットしてそこからまた始めます。これが既定値です。

`reverse`

アニメーションを毎回*逆方向*に再生します。言い換えれば、アニメーション周期ごとに、アニメーションを最後の状態にリセットしてそこからまた始めます。アニメーションを逆方向に実行し、イージング関数も逆になります。例えば、イージング関数の `ease-in` が `ease-out` になります。

`alternate`

アニメーションを毎回反転させ、初回は*順方向*になります。周期が偶数か奇数かを特定する回数は1から始まります。

`alternate-reverse`

アニメーションを毎回反転させ、初回は*逆方向*になります。周期が偶数か奇数かを特定する回数は1から始まります。

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

**メモ:** CSS スクロール駆動アニメーション (en-US) を作成するとき、 `animation-direction` を指定すると期待通りに動作します。例えば、`reverse` を指定すると、タイムラインの進行の過程でアニメーションが逆に実行されます。alternate`の値（`animation-iteration-count`と結合子）を指定すると、タイムラインの進行に合わせてアニメーションを前後に実行させます。

公式定義
----

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

形式文法
----
```

animation-direction =
  <single-animation-direction>#

<single-animation-direction> =
  normal             |
  reverse            |
  alternate          |
  alternate-reverse

```

例
-

### 逆方向に実行されるアニメーション

#### HTML

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

#### CSS

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

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

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

#### 結果

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

仕様書
---

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

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

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

関連情報
----

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


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

place-self
==========

**`place-self`** は CSS の一括指定プロパティで、アイテムのブロック軸およびインライン軸に沿ったアイテムの配置 (すなわち `align-self` および `justify-self` プロパティ) を、グリッドやフレックスボックスなどのレイアウトシステムにおいて、一度に指定することができます。2 番目の値が設定されていない場合、最初の値がそちらにも使用されます。

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

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

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

* `align-self`
* `justify-self`
構文
--

```css
/\* キーワード値 \*/
place-self: auto center;
place-self: normal start;

/\* 位置による配置 \*/
place-self: center normal;
place-self: start auto;
place-self: end normal;
place-self: self-start auto;
place-self: self-end normal;
place-self: flex-start auto;
place-self: flex-end normal;
place-self: left auto;
place-self: right normal;

/\* ベースラインによる配置 \*/
place-self: baseline normal;
place-self: first baseline auto;
place-self: last baseline normal;
place-self: stretch auto;

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

### 値

`auto`

親の `align-items` の値で計算します。

`normal`

このキーワードの効果は、現在のレイアウトモードに依存します。

* 絶対位置のレイアウトでは、このキーワードは*置換*の絶対位置ボックスには `start` のように動作し、*その他*の絶対位置ボックスには `stretch` のように動作します。
* 絶対位置指定レイアウトの固定位置指定時は、このキーワードは `stretch` と同様に動作します。
* フレックスアイテムでは、このキーワードは `stretch` と同様に動作します。
* グリッドアイテムでは、このキーワードは `stretch` のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスは `start` のように動作します。
* ブロックレベルボックスと表のセルでは、プロパティは適用されません。

`self-start`

アイテムは交差軸の開始側に対応する配置コンテナーの端に詰めて配置されます。

`self-end`

アイテムは交差軸の終端側に対応する配置コンテナーの端に詰めて配置されます。

`flex-start`

このフレックスアイテムの cross-start マージン側が、行の cross-start 側に詰められます。

`flex-end`

このフレックスアイテムの cross-end マージン側が、行の cross-end 側に詰められます。

`center`

このフレックスアイテムのマージンボックスが、行の交差軸方向の中央に配置されます。アイテムの交差軸方向の寸法がフレックスコンテナーよりも大きい場合は、両方向に均等にはみ出します。

`baseline`, `first baseline`. `last baseline`

 first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。
 `first baseline` の代替配置は `start`、`last baseline` の代替配置は `end` です。

`stretch`

アイテムの交差軸方向の寸法の合計値が、配置コンテナーの寸法よりも小さく、アイテムの寸法が `auto` であった場合、アイテムの寸法は `max-height`/`max-width` (または同等の機能) で課された制約を尊重しつつ、均等の寸法 (比例的ではない) に拡大されるので、 `auto` が指定されたアイテムすべての寸法の合計は、ちょうど配置コンテナーの交差軸方向を埋めるようになります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `align-self`: `auto`
* `justify-self`: `auto`
 |
| 適用対象 | block-level boxes, absolutely-positioned boxes, and grid items |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `align-self`: 絶対位置指定要素に対しては `auto` は自分自身に対して計算し、それ以外のすべてのボックスに対しては親の `align-items` の計算値 (から古いキーワードを引いた値) に計算し、親が無ければ `start` になる。この動作は `justify-self` で説明したとおり、レイアウトモデルの依存する。それ以外の場合は指定された値となる。
* `justify-self`: 指定通り
 |
| アニメーションの種類 | 離散値 |

形式文法
----
```

place-self =
  <'align-self'> <'justify-self'>?

```

例
-

### 簡単なデモ

以下の例では簡単な 2 x 2 のグリッドレイアウトを用意しました。最初にグリッドコンテナーには `justify-items` および `align-items` の値を `stretch` — 既定値 — に設定し、グリッドアイテムがセルの幅全体に広がるようにしています。

2 番目、3 番目、4 番目のグリッドアイテムは、別々な `place-self` の値を指定し、これらが既定の配置をオーバーライドする様子を表示します。これらの値はグリッドアイテムの幅や高さを内容物の幅や高さに設定し、セルごとにブロック方向とインライン方向の両方で異なる位置に配置しています。

#### HTML

```html
<article class="container">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
  <span>Fourth</span>
</article>
```

#### CSS

```css
html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
}

article {
  background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 80px;
  grid-gap: 10px;
  width: 300px;
}

span:nth-child(2) {
  place-self: start center;
}

span:nth-child(3) {
  place-self: center start;
}

span:nth-child(4) {
  place-self: end;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
  text-align: center;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

article {
  margin: 20px;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # place-self-property |

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

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

関連情報
----

* CSS フレックスボックスガイド: *フレックスボックスの基本概念*
* CSS フレックスボックスガイド: *フレックスコンテナー内のアイテムの配置*
* CSS グリッドガイド: *グリッドレイアウトのボックス配置*
* CSS ボックス配置
* `align-self` プロパティ
* `justify-self` プロパティ


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

box-shadow
==========

**`box-shadow`** は CSS のプロパティで、要素のフレームの周囲にシャドウ効果を追加します。カンマで区切ることで、複数の効果を設定することができます。ボックスの影は要素からの相対的な X および Y のオフセット、ぼかしと拡散の半径、色で記述します。

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

`box-shadow` プロパティで、ほぼすべての要素のフレームからドロップシャドウを作成することができます。 `border-radius` が指定された場合は、影もその丸みを反映します。複数のボックスの影の重ね合わせ順は、複数のテキストの影の場合と同様になります (最初に指定された影が最も手前に来ます)。

ボックスの影作成ツールは、 `box-shadow` を対話的に作成できるツールです。

構文
--

```css
/\* キーワード値 \*/
box-shadow: none;

/\* offset-x | offset-y | color \*/
box-shadow: 60px -16px teal;

/\* offset-x | offset-y | blur-radius | color \*/
box-shadow: 10px 5px 5px black;

/\* offset-x | offset-y | blur-radius | spread-radius | color \*/
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/\* inset | offset-x | offset-y | color \*/
box-shadow: inset 5em 1em gold;

/\* 複数の影はカンマで区切る \*/
box-shadow:
  3px 3px red,
  -1em 0 0.4em olive;

/\* グローバルキーワード \*/
box-shadow: inherit;
box-shadow: initial;
box-shadow: revert;
box-shadow: unset;
```

単一の box-shadow は次の物を使用して指定します。

* 2 ～ 4 つの `<length>` 値
    + 値が 2 つだけ与えられた場合、 `<offset-x>` および `<offset-y>` として解釈されます。
    + 3 つ目の値が与えられた場合、 `<blur-radius>` として解釈されます。
    + 4 つ目の値が与えられた場合、 `<spread-radius>` として解釈されます。
* 任意で、 `inset` キーワード
* 任意で、 `<color>` の値

複数の影を指定する場合は、影をカンマで区切ったリストを指定してください。

### 値

`inset`

 指定されていない場合、ボックスにはドロップシャドウ効果 (浮き上がったように見える) が与えられます。
 `inset` キーワードが指定された場合、影はボックスの内側に描画されます (凹んだように見える)。 `inset` な影は背景の上、境界や内容の下に描画されます。

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

 これらは 2 つの `<length>` 値で、影のオフセットを設定します。 `<offset-x>` は水平方向の距離を表します。負の値が指定された場合、影は左方向に配置されます。 `<offset-y>` は垂直方向の距離を表します。負の値が指定された場合、影は上方向に配置されます。利用可能な値の単位については `<length>` をご覧ください。
 どちらのオフセットも `0` である場合、影は要素の裏に配置されます。 (`<blur-radius>` や `<spread-radius>` が指定されている場合は、ぼかし効果を生成することができます。)

`<blur-radius>`

これは 3 つ目の `<length>` 値です。値が大きくなるほど、ぼかしが大きくなるため影の面積が広くなり、また影の色も薄くなります。負の値は指定できません。値が指定されていない場合は `0` となります (影の縁にぼかしが入りません)。仕様書にはぼかしの半径の計算方法について正確なアルゴリズムは書かれていませんが、以下のように複雑なものです。

>
> …影の辺が長くまっすぐな場合、影の辺に垂直で中心にあるぼかし距離の長さの色遷移を作成し、影の内側の半径の端点で完全な影の色からその外側の端点で完全に透明になるまでの範囲の色遷移を作成する必要があります。
>
>
>

`<spread-radius>`

4 つ目に指定される `<length>` の値です。正の値が指定された場合、影がその分だけ拡張され大きくなります。負の値が指定された場合、影は縮小されます。値が指定されていない場合は `0` と解釈され、影の大きさは要素の大きさと同じままとなります。

`<color>`

 可能なキーワード及び記述方法については `<color>` の値をご覧ください。
 値が指定されていない場合は、既定で `currentColor` になります。

### 補間

リストの中 (`none` は長さ 0 のリスト) 中のそれぞれの影は、色の成分、 x、 y、 ぼかし、およびび (適切であれば) 広がり (の長さ) の成分で補間されます。両方の影について、もし `inset` が異なる場合、補間された影はそれに関する入力影と一致しなければなりません。入力影で `inset` と `inset` の組み合わせがない場合、影のリスト全体は解釈できません。影のリストの長さが異なる場合、影のリストの長さが異なる場合、短い方のリストの末尾は `transparent` の色の影で補完し、すべての長さが `0` であり、 `inset` (の有無) が一致するものがあれば、より長いリストに一致します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | すべての要素。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| 計算値 | 指定値（length は全て絶対値となり、color については計算値となる） |
| アニメーションの種類 | a 影のリスト |

形式文法
----
```

box-shadow =
  <spread-shadow>#

<spread-shadow> =
  <'box-shadow-color'>?                               &&
  [ <'box-shadow-offset'> [ <'box-shadow-blur'> <'box-shadow-spread'>? ]? ]  &&
  <'box-shadow-position'>?

```

例
-

### 3 つの影の設定

この例では、3 つの影を使用しています。内部への影、通常のドロップシャドウ、境界の効果を生む 2px の影です (3 つ目の影の代わりに `outline` を使用することもできます)。

#### HTML

```html
<blockquote>
  <q
 >You may shoot me with your words,<br />
    You may cut me with your eyes,<br />
    You may kill me with your hatefulness,<br />
    But still, like air, I'll rise.</q
 >
  <p>— Maya Angelou</p>
</blockquote>
```

#### CSS

```css
blockquote {
  padding: 20px;
  box-shadow:
    inset 0 -3em 3em rgba(0, 0, 0, 0.1),
    0 0 0 2px rgb(255, 255, 255),
    0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
}
```

#### 結果

### offset と blur をゼロに設定

`x-offset`, `y-offset`, `blur` がすべてゼロの場合、ボックスシャドウはすべての辺に同じ幅の単一色の囲み線になります。影は背後から手前にかけて描かれるため、最初の影はその後の影の最上位に表示されます。既定値通り、 `border-radius` が 0 に設定されていた場合、影の角は同様に尖った形になります。 `border-radius` にそれ以外の値を設定した場合、角は丸みを帯びます。

影が隣接する要素と重ならないように、また、包含ボックスの境界線を超えないように、最も広いボックスシャドウの寸法のマージンを追加しました。ボックスシャドウはボックスモデルの寸法に影響を与えません。

#### HTML

```html
<div><p>Hello World</p></div>
```

#### CSS

```css
p {
  box-shadow:
    0 0 0 2em #f4aab9,
    0 0 0 4em #66ccff;
  margin: 4em;
  padding: 1em;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # box-shadow |

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

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

関連情報
----

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


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

<alpha-value>
=============

**`<alpha-value>`** は CSS のデータ型であり、 `<number>` または `<percentage>` によって色の **アルファチャネル** または **透過性** を表します。

構文
--

`<alpha-value>` の値は `<number>` または `<percentage>` のどちらかで指定します。

数値で指定した場合、有用な範囲は 0 （完全に透明）から 1.0 （完全に不透明）であり，その中間の 10 進数の値です。 0.5 は前景色が半分、背景色が半分使用されることを示します。 0 から 1 までの範囲の外にある値も許容されますが、 0 から 1 の範囲に収まるように制限が行われます。

アルファ値がパーセント値で指定された場合は、 0% が完全に透明、 100% が完全に不透明に対応します。

補間
--

アニメーションの際、 CSS の `<alpha-value>` データ型の値は実数の浮動小数点値として補間されます。補間の速度はアニメーションと関連づけられたタイミング関数によって決められます。

例
-

### テキスト色の透明度の設定

ここでは、アルファ値を使用して部分的に透明なテキストを設定しています。

```css
/\* <rgba()> \*/
color: rgba(34, 12, 64, 0.6);
color: rgba(34 12 64 / 60%);
```

### シェイプ画像の閾値の設定

こちらは、アルファ値を使用して画像のどの部分がシェイプの一部と考えられるかを特定しています。

```css
/\* shape-image-threshold \*/
shape-image-threshold: 70%;
shape-image-threshold: 0.7;
```

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4 # typedef-color-alpha-value |

関連情報
----

* 基本的なテキストとフォントの装飾
* CSS データ型
* CSS 色
* `<color>`


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

:required
=========

**`:required`** は CSS の 擬似クラスで、 `<input>`, `<select>`, `<textarea>` 要素のうち `required` 属性が設定されているものを表します。

```css
/\* 必須の <input> をすべて選択 \*/
input:required {
  border: 1px dashed red;
}
```

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

この擬似クラスは、フォームを送信する前に有効なデータを持っている必要がある入力欄を強調表示するのに便利です。

**メモ:** `:optional` 擬似クラスは*省略可能*なフォーム欄を選択します。

構文
--
```

:required
```

例
-

### 必須フィールドの枠を赤にする

#### HTML

```html
<form>
  <div class="field">
    <label for="url\_input">Enter a URL:</label>
    <input type="url" id="url\_input" />
  </div>

  <div class="field">
    <label for="email\_input">Enter an email address:</label>
    <input type="email" id="email\_input" required />
  </div>
</form>
```

#### CSS

```css
label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #c00000;
}
```

#### 結果

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

入力が必須の `<input>` には `required` 属性を適用してください。これによって、読み上げソフトなどの支援技術を使用している人が、フォームを送信するためにどの入力欄が有効なコンテンツを必要とするかを理解することができます。

フォームに任意の入力欄も含まれている場合、必須の入力欄を視覚的に示すのを色だけに依存しないようにしてください。通常、説明する文字列やアイコンが使用されます。

* MDN WCAG を理解する ― ガイドライン 3.3 の解説
* Understanding Success Criterion 3.3.2 | W3C Understanding WCAG 2.0
仕様書
---

| Specification |
| --- |
| HTML Standard # selector-required |
| Selectors Level 4 # opt-pseudos |

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

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

関連情報
----

* 他の検証関連の擬似クラス: `:optional`, `:invalid`, `:valid`
* フォームデータの検証


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

border-top-style
================

**`border-top-style`** は CSS のプロパティで、要素の上側の境界 (`border`) における線の形状を設定します。

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

**メモ:** 仕様書では、異なる形状の境界線を角でどのように接続するかを定義していません。

構文
--

```css
/\* キーワード値 \*/
border-top-style: none;
border-top-style: hidden;
border-top-style: dotted;
border-top-style: dashed;
border-top-style: solid;
border-top-style: double;
border-top-style: groove;
border-top-style: ridge;
border-top-style: inset;
border-top-style: outset;

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

`border-top-style` プロパティは、 `border-style` プロパティで利用できるキーワードのうちの一つで指定します。

公式定義
----

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

形式文法
----
```

border-top-style =
  <line-style>

<line-style> =
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

```

例
-

### border-top-style の設定

#### HTML

```html
<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>
```

#### CSS

```css
/\* 表の外見を定義 \*/
table {
  border-width: 2px;
  background-color: #52e385;
}
tr,
td {
  padding: 3px;
}

/\* border-top-style の例のクラス \*/
.b1 {
  border-top-style: none;
}
.b2 {
  border-top-style: hidden;
}
.b3 {
  border-top-style: dotted;
}
.b4 {
  border-top-style: dashed;
}
.b5 {
  border-top-style: solid;
}
.b6 {
  border-top-style: double;
}
.b7 {
  border-top-style: groove;
}
.b8 {
  border-top-style: ridge;
}
.b9 {
  border-top-style: inset;
}
.b10 {
  border-top-style: outset;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* その他の形状に関する境界のプロパティ: `border-left-style`, `border-right-style`, `border-bottom-style`, `border-style`
* その他の左側の境界に関するプロパティ: `border-top`, `border-top-color`, `border-top-width`


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

border-inline-style
===================

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

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

他の方向の境界スタイルについては `border-block-style` で設定することができ、これは `border-block-start-style` および `border-block-end-style` を設定することができます。

構文
--

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

### 値

`<'border-style'>`

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

公式定義
----

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

形式文法
----
```

border-inline-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-inline-style: dashed;
}
```

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-inline-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`


WebKit の CSS 拡張 - CSS: カスケーディングスタイルシート

WebKit の CSS 拡張
===============

Safari や Chrome のような WebKit または blink ベースのアプリケーションは、数多くの特殊な **CSS の WebKit 拡張**に対応しています。これらの拡張には一般に `-webkit-` の接頭辞が付きます。 `-webkit-` の接頭辞が付いたプロパティの多くは `-apple-` の接頭辞でも動作します。少数ながら `-epub-` の接頭辞も存在します。

WebKit 独自のプロパティ
---------------

**メモ:** ウェブサイトで使用しないでください。これらのプロパティは WebKit アプリケーションでしか動作しません。

### A

* `-webkit-animation-trigger`
* `-webkit-app-region`
* `-webkit-appearance`\*
* `-webkit-aspect-ratio`
### B

* `-webkit-backdrop-filter`
* `-webkit-background-composite`
* `-webkit-border-after`
* `-webkit-border-after-color`
* `-webkit-border-after-style`
* `-webkit-border-after-width`
* `-webkit-border-before`
* `-webkit-border-before-color`
* `-webkit-border-before-style`
* `-webkit-border-before-width`
* `-webkit-border-end`
* `-webkit-border-end-color`
* `-webkit-border-end-style`
* `-webkit-border-end-width`
* `-webkit-border-fit`
* `-webkit-border-horizontal-spacing`
* `-webkit-border-start`
* `-webkit-border-start-color`
* `-webkit-border-start-style`
* `-webkit-border-start-width`
* `-webkit-border-vertical-spacing`
* `-webkit-box-align`
* `-webkit-box-direction`
* `-webkit-box-flex-group`
* `-webkit-box-flex`
* `-webkit-box-lines`
* `-webkit-box-ordinal-group`
* `-webkit-box-orient`
* `-webkit-box-pack`
* `-webkit-box-reflect`
### C

* `-webkit-column-axis`
* `-webkit-column-break-after`
* `-webkit-column-break-before`
* `-webkit-column-break-inside`
* `-webkit-column-progression`
* `-webkit-cursor-visibility`
### D-I

* `-webkit-dashboard-region`
* `-webkit-font-size-delta`
* `-webkit-font-smoothing`
* `-webkit-highlight`
* `-webkit-hyphenate-character`
* `-webkit-hyphenate-limit-after`
* `-webkit-hyphenate-limit-before`
* `-webkit-hyphenate-limit-lines`
* `-webkit-initial-letter`
### L

* `-webkit-line-align`
* `-webkit-line-box-contain`
* `-webkit-line-clamp`
* `-webkit-line-grid`
* `-webkit-line-snap`
* `-webkit-locale`
* `-webkit-logical-height`
* `-webkit-logical-width`
### M

* `-webkit-margin-after-collapse`
* `-webkit-margin-after`
* `-webkit-margin-before-collapse`
* `-webkit-margin-before`
* `-webkit-margin-bottom-collapse`
* `-webkit-margin-collapse`
* `-webkit-margin-end`
* `-webkit-margin-start`
* `-webkit-margin-top-collapse`
* `-webkit-marquee-direction`
* `-webkit-marquee-increment`
* `-webkit-marquee-repetition`
* `-webkit-marquee-speed`
* `-webkit-marquee-style`
* `-webkit-marquee`
* `-webkit-mask-box-image-outset`
* `-webkit-mask-box-image-repeat`
* `-webkit-mask-box-image-slice`
* `-webkit-mask-box-image-source`
* `-webkit-mask-box-image-width`
* `-webkit-mask-box-image`
* `-webkit-mask-repeat-x`
* `-webkit-mask-repeat-y`
* `-webkit-mask-source-type`
* `-webkit-max-logical-height`
* `-webkit-max-logical-width`
* `-webkit-min-logical-height`
* `-webkit-min-logical-width`
### N

* `-webkit-nbsp-mode`
### P

* `-webkit-padding-after`
* `-webkit-padding-before`
* `-webkit-padding-end`
* `-webkit-padding-start`
* `-webkit-perspective-origin-x`
* `-webkit-perspective-origin-y`
* `-webkit-print-color-adjust`
### R-S

* `-webkit-rtl-ordering`
* `-webkit-svg-shadow`
### T

* `-webkit-tap-highlight-color`
* `-webkit-text-combine`
* `-webkit-text-decoration-skip`
* `-webkit-text-decorations-in-effect`
* `-webkit-text-fill-color`
* `-webkit-text-security` (en-US)
* `-webkit-text-stroke-color`
* `-webkit-text-stroke-width`
* `-webkit-text-stroke`
* `-webkit-text-zoom`
* `-webkit-transform-origin-x`
* `-webkit-transform-origin-y`
* `-webkit-transform-origin-z`
### U

* `-webkit-user-drag`
* `-webkit-user-modify`

 \* 一部は標準化され、接頭辞がなくなりました。
 新しい構文が標準化されています。プロパティは新しい構文にリンクしています。古い構文は一部のブラウザーが対応しています。

標準化過程にある WebKit の接頭辞のついたプロパティ
-----------------------------

* `-webkit-appearance`
* `-webkit-font-size-delta`
* `-webkit-mask-composite`
* `-webkit-mask-position-x`
* `-webkit-mask-position-y`
* `-webkit-mask-repeat-x`
* `-webkit-mask-repeat-y`
以前は独自プロパティであったものが標準化されたもの
-------------------------

**メモ:** CSS の互換性を最大化するために、以下に挙げた接頭辞付きのプロパティの代わりに接頭辞のない標準のプロパティを使用してください。

### A

* `-webkit-align-content`
* `-webkit-align-items`
* `-webkit-align-self`
* `-webkit-animation`
* `-webkit-animation-delay`
* `-webkit-animation-direction`
* `-webkit-animation-duration`
* `-webkit-animation-fill-mode`
* `-webkit-animation-iteration-count`
* `-webkit-animation-name`
* `-webkit-animation-play-state`
* `-webkit-animation-timing-function`
### B

* `-webkit-backface-visibility`
* `-webkit-background-clip`
* `-webkit-background-origin`
* `-webkit-background-size`
* `-webkit-border-bottom-left-radius`
* `-webkit-border-bottom-right-radius`
* `-webkit-border-image`
* `-webkit-border-radius`
* `-webkit-border-top-left-radius`
* `-webkit-border-top-right-radius`
* `-webkit-box-decoration-break`
* `-webkit-box-shadow`
* `-webkit-box-sizing`
### C

* `-webkit-clip-path`
* `-webkit-column-count`
* `-webkit-column-fill`
* `-webkit-column-gap`
* `-webkit-column-rule`
* `-webkit-column-rule-color`
* `-webkit-column-rule-style`
* `-webkit-column-rule-width`
* `-webkit-column-span`
* `-webkit-column-width`
* `-webkit-columns`
### F

* `-webkit-filter`
* `-webkit-flex`
* `-webkit-flex-basis`
* `-webkit-flex-direction`
* `-webkit-flex-flow`
* `-webkit-flex-grow`
* `-webkit-flex-shrink`
* `-webkit-flex-wrap`
* `-webkit-font-feature-settings`
* `-webkit-font-kerning`
* `-webkit-font-variant-ligatures`
### G-J

* `-webkit-grid`
* `-webkit-grid-area`
* `-webkit-grid-auto-columns`
* `-webkit-grid-auto-flow`
* `-webkit-grid-auto-rows`
* `-webkit-grid-column`
* `-webkit-grid-column-end`
* `-webkit-grid-column-gap`
* `-webkit-grid-column-start`
* `-webkit-grid-gap`
* `-webkit-grid-row`
* `-webkit-grid-row-end`
* `-webkit-grid-row-gap`
* `-webkit-grid-row-start`
* `-webkit-grid-template`
* `-webkit-grid-template-areas`
* `-webkit-grid-template-columns`
* `-webkit-grid-template-rows`
### H-L

* `-webkit-hyphens`
* `-webkit-justify-content`
* `-webkit-justify-items`
* `-webkit-justify-self`
* `-webkit-line-break`
### M

* `-webkit-mask`
* `-webkit-mask-clip`
* `-webkit-mask-composite`
* `-webkit-mask-image`
* `-webkit-mask-origin`
* `-webkit-mask-position`
* `-webkit-mask-repeat`
* `-webkit-mask-size`
### O-R

* `-webkit-opacity`
* `-webkit-order`
* `-webkit-perspective`
* `-webkit-perspective-origin`
* `-webkit-ruby-position`
### S

* `-webkit-scroll-snap-type`
* `-webkit-shape-image-threshold`
* `-webkit-shape-margin`
* `-webkit-shape-outside`
### T

* `-epub-text-decoration`
* `-webkit-text-color-decoration`
* `-webkit-text-decoration-line`
* `-webkit-text-decoration-style`
* `-epub-text-emphasis`
* `-webkit-text-emphasis`
* `-epub-text-emphasis-color`
* `-webkit-text-emphasis-color`
* `-webkit-text-emphasis-position`
* `-epub-text-emphasis-style`
* `-webkit-text-emphasis-style`
* `-webkit-text-justify`
* `-webkit-text-orientation`
* `-webkit-text-size-adjust`
* `-webkit-text-underline-position`
* `-webkit-transform`
* `-webkit-transform-origin`
* `-webkit-transform-style`
* `-webkit-transition`
* `-webkit-transition-delay`
* `-webkit-transition-duration`
* `-webkit-transition-property`
* `-webkit-transition-timing-function`
### U-W

* `-webkit-user-select`
* `-epub-word-break`
* `-epub-writing-mode`
WebKit 以外のブラウザーで接頭辞なしのものが対応されているが、標準ではないもの
------------------------------------------

以下のプロパティは 1 つ以上のブラウザーが接頭辞なしで対応していますが、標準化路線には乗っていません。

* `-webkit-mask-position-x`\*
* `-webkit-mask-position-y`\*

\* Firefox が接頭辞なしで対応、 Safari が接頭辞付きで対応。

`-webkit-` 接頭辞付きで Firefox が対応しているもの
-----------------------------------

以下のプロパティは Firefox が `-webkit-` 接頭辞付きで対応しています。多くのものは同様に接頭辞なしでも対応しています。前述の以前は独自プロパティであったものが標準化されたものを参照してください。

**メモ:** 多数のウェブサイトが古いコードで -webkit- 接頭辞の付いたプロパティを使用しているため、 Edge や Firefox は -webkit- 接頭辞のついた多くのプロパティを -moz-, -ms-, 接頭辞なしの同等のプロパティに転送しています。

### A

* `-webkit-align-content`
* `-webkit-align-items`
* `-webkit-align-self`
* `-webkit-animation`
* `-webkit-animation-delay`
* `-webkit-animation-direction`
* `-webkit-animation-duration`
* `-webkit-animation-fill-mode`
* `-webkit-animation-iteration-count`
* `-webkit-animation-name`
* `-webkit-animation-play-state`
* `-webkit-animation-timing-function`
* `-webkit-appearance`\*
### B

* `-webkit-backface-visibility`
* `-webkit-background-clip`
* `-webkit-background-origin`
* `-webkit-background-size`
* `-webkit-border-bottom-left-radius`
* `-webkit-border-bottom-right-radius`
* `-webkit-border-image`
* `-webkit-border-radius`
* `-webkit-box-align`
* `-webkit-box-direction`
* `-webkit-box-flex`
* `-webkit-box-orient`
* `-webkit-box-pack`
* `-webkit-box-shadow`
* `-webkit-box-sizing`
* `-webkit-border-top-left-radius`
* `-webkit-border-top-right-radius`
### F

* `-webkit-filter`
* `-webkit-flex`
* `-webkit-flex-basis`
* `-webkit-flex-direction`
* `-webkit-flex-flow`
* `-webkit-flex-grow`
* `-webkit-flex-shrink`
* `-webkit-flex-wrap`
### J

* `-webkit-justify-content`
### M

* `-webkit-mask`
* `-webkit-mask-clip`
* `-webkit-mask-composite`\*
* `-webkit-mask-image`
* `-webkit-mask-origin`
* `-webkit-mask-position`
* `-webkit-mask-position-x`
* `-webkit-mask-position-y`
* `-webkit-mask-repeat`
* `-webkit-mask-size`
### O-P

* `-webkit-order`
* `-webkit-perspective`
* `-webkit-perspective-origin`
### T

* `-webkit-text-fill-color`
* `-webkit-text-size-adjust`
* `-webkit-text-stroke`
* `-webkit-text-stroke-color`
* `-webkit-text-stroke-width`
* `-webkit-transform`
* `-webkit-transform-origin`
* `-webkit-transition`
* `-webkit-transition-delay`
* `-webkit-transition-duration`
* `-webkit-transition-property`
* `-webkit-transition-timing-function`
### U

* `-webkit-user-select`
* Firefox では `-moz-` と `-webkit-` の接頭辞に対応していますが、 接頭辞のないものには対応していません。 Microsoft Edge と IE Mobile は、同様に相互運用性のためにこのプロパティを `-ms-` ではなく `-webkit-` の接頭辞付きで対応しています。
 これらの値は、標準ではなく標準化路線にもなっていませんが、対応しています。
 代わりにフレックスボックスプロパティを使用してください。
非推奨の `-webkit-` プロパティ
---------------------

以下のプロパティはいったん -webkit- 接頭辞付きで対応していましたが、すでに `-webkit-` 接頭辞のありなしに関わらず、主要なブラウザーで対応されなくなりました。

* `-webkit-alt*`
* `-webkit-color-correction`
* `-webkit-flow-from`
* `-webkit-flow-into`
* `-webkit-grid-columns` (`grid-column` を参照)
* `-webkit-grid-rows` (`grid-row` を参照)
* `-webkit-hyphenate-charset`
* `-webkit-image-set` (``image-set` を参照)
* `-webkit-mask-attachment`
* `-webkit-match-nearest-mail-blockquote-color`
* `-webkit-overflow-scrolling`
* `-webkit-region-break-after`
* `-webkit-region-break-before`
* `-webkit-region-break-inside`
* `-webkit-region-fragment`
* `-webkit-shape-inside`
* -webkit-touch-callout (`touch-action` を参照)
* `background-origin-x` (接頭辞なし)
* `background-origin-y` (接頭辞なし)

\* Safari Technology Preview ではまだ対応していますが、リリース版のブラウザーでは一般に対応していません。

擬似クラス
-----

* `:-webkit-animating-full-screen-transition`
* `:-webkit-any()`
* `:-webkit-any-link`\*
* `:-webkit-autofill`
* `:-webkit-autofill-strong-password`
* `:-webkit-drag`
* `:-webkit-full-page-media`
* `:-webkit-full-screen`\*
* `:-webkit-full-screen-ancestor`
* `:-webkit-full-screen-document`
* `:-webkit-full-screen-controls-hidden`

\* 標準化されました。

**メモ:** セレクターのチェーンまたはグループ内に無効な擬似クラスがあった場合、セレクターのリスト全体が無効になります。

擬似要素
----

ウェブの互換性のため、 Blink, WebKit, Gecko のブラウザーは、 `::-webkit-` がついたすべての擬似要素を有効なものとして扱います。

* `::-webkit-file-upload-button` (en-US)\*
* `::-webkit-inner-spin-button` (en-US)
* `::-webkit-input-placeholder`
* `::-webkit-media-controls`
* `::-webkit-media-controls-current-time-display`
* `::-webkit-media-controls-enclosure`
* `::-webkit-media-controls-fullscreen-button`
* `::-webkit-media-controls-mute-button`
* `::-webkit-media-controls-overlay-enclosure`
* `::-webkit-media-controls-panel`
* `::-webkit-media-controls-play-button`
* `::-webkit-media-controls-timeline`
* `::-webkit-media-controls-time-remaining-display`
* `::-webkit-media-controls-toggle-closed-captions-button`
* `::-webkit-media-controls-volume-control-container`
* `::-webkit-media-controls-volume-control-hover-background`
* `::-webkit-media-controls-volume-slider`
* `::-webkit-meter-bar` (en-US)
* `::-webkit-meter-even-less-good-value` (en-US)
* `::-webkit-meter-inner-element` (en-US)
* `::-webkit-meter-optimum-value` (en-US)
* `::-webkit-meter-suboptimum-value` (en-US)
* `-webkit-media-text-track-container`
* `::-webkit-outer-spin-button` (en-US)
* `::-webkit-progress-bar` (en-US)
* `::-webkit-progress-inner-element` (en-US)
* `::-webkit-progress-value`
* `::-webkit-search-cancel-button` (en-US)
* `::-webkit-search-results-button` (en-US)
* `::-webkit-slider-runnable-track`
* `::-webkit-slider-thumb`

\* 標準化されました。

**メモ:** 一般に、セレクターのチェーンまたはグループ内に無効な擬似要素または擬似クラスがあった場合、セレクターのリスト全体が無効になります。 (擬似クラスではない) 擬似要素に -webkit- という接頭辞が付いている場合、 Firefox 63 以降, Blink, WebKit, Gecko のブラウザーはセレクターのリストを妥当とみなし、無効にしないようにします。

メディア特性
------

* `-webkit-animation`
* `-webkit-device-pixel-ratio`
* `-webkit-transform-2d`
* `-webkit-transform-3d`
* `-webkit-transition`
関連情報
----

* Styling Form Controls on the WebKit Trac
* Microsoft CSS 拡張
* Mozilla CSS 拡張


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

animation-play-state
====================

**`animation-play-state`** は CSS のプロパティで、アニメーションが実行中か停止中かを設定します。

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

停止したアニメーションを再開すると、アニメーションの流れの最初からではなく、停止した位置からアニメーションが始まります。

構文
--

```css
/\* 単一のアニメーション \*/
animation-play-state: running;
animation-play-state: paused;

/\* 複数のアニメーション \*/
animation-play-state: paused, running, running;

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

### 値

`running`

**アニメーション**が現在**実行中**です。

`paused`

**アニメーション**が現在**停止中**です。

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

公式定義
----

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

形式文法
----
```

animation-play-state =
  <single-animation-play-state>#

<single-animation-play-state> =
  running  |
  paused

```

例
-

### アニメーションの停止

このアニメーションは停止していますが、ポインターを当てると実行されます。

#### HTML

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

#### CSS

```css
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.box:hover {
  animation-play-state: running;
}

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

#### 結果

矩形にポインターを当てるとアニメーションが始まります。

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

仕様書
---

| Specification |
| --- |
| CSS Animations Level 1 # animation-play-state |

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

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

関連情報
----

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


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

border-image-source
===================

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

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

* Learn more
* See full compatibility
* Report feedback
**`border-image-source`** は CSS のプロパティで、要素の境界画像に使われる元の画像を設定します。

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

元の画像を最終的な境界画像に動的に適用する上で、複数の領域に分割するために `border-image-slice` プロパティが使用されます。

構文
--

```css
/\* キーワード値 \*/
border-image-source: none;

/\* <image> 値 \*/
border-image-source: url(image.jpg);
border-image-source: linear-gradient(to top, red, yellow);

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

### 値

`none`

境界画像は使用されません。代わりに `border-style` で定義されたものが表示されます。

`<image>`

境界に使用する画像への参照です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | すべての要素。ただし `border-collapse` が `collapse` のときはテーブル要素内部にあるものを除く。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| 計算値 | `none` または画像の絶対化した URI |
| アニメーションの種類 | 離散値 |

形式文法
----
```

border-image-source =
  none     |
  <image>

<image> =
  <url>       |
  <gradient>

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

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

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

```

例
-

### 基本的な例

```css
.box {
  border-image-source: url("image.png");
}
```

仕様書
---

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

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

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

関連情報
----

* `border`
* `outline`
* `box-shadow`
* `background-image`
* `url()` 関数


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

padding-inline-start
====================

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

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

構文
--

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

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

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

### 値

`<length>`

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

`<percentage>`

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

解説
--

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

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

公式定義
----

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

形式文法
----
```

padding-inline-start =
  <'padding-top'>

```

例
-

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

#### HTML

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

#### CSS

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

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

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

outline-width
=============

CSS の **`outline-width`** プロパティは、要素の輪郭線の太さを設定します。輪郭線とは要素の周りに描かれる線のことで、 `border` よりも外側です。

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

たいていの場合、輪郭線の見た目を定義するときは一括指定プロパティ `outline` を使ったほうが便利です。

構文
--

```css
/\* キーワード値 \*/
outline-width: thin;
outline-width: medium;
outline-width: thick;

/\* <length> 値 \*/
outline-width: 1px;
outline-width: 0.1em;

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

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

### 値

`<length>`

輪郭線の太さを `<length>` で指定します。

`thin`

ユーザーエージェントに依存します。Firefox のようなデスクトップブラウザーでは、通常は `1px` です。

`medium`

ユーザーエージェントに依存します。Firefox のようなデスクトップブラウザーでは、通常は `3px` です。

`thick`

ユーザーエージェントに依存します。Firefox のようなデスクトップブラウザーでは、通常は `5px` です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `medium` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 絶対的な長さ、キーワード `none` が指定されると計算値は `0` になる |
| アニメーションの種類 | length |

形式文法
----
```

outline-width =
  <line-width>

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

```

例
-

### 要素の輪郭線の幅の設定

#### HTML

```html
<span id="thin">thin</span>
<span id="medium">medium</span>
<span id="thick">thick</span>
<span id="twopixels">2px</span>
<span id="oneex">1ex</span>
<span id="em">1.2em</span>
```

#### CSS

```css
span {
  outline-style: solid;
  display: inline-block;
  margin: 20px;
}

#thin {
  outline-width: thin;
}

#medium {
  outline-width: medium;
}

#thick {
  outline-width: thick;
}

#twopixels {
  outline-width: 2px;
}

#oneex {
  outline-width: 1ex;
}

#em {
  outline-width: 1.2em;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* `outline`
* `outline-color`
* `outline-style`


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

grid-auto-rows
==============

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-auto-rows`** は CSS のプロパティで、暗黙的に生成されたグリッドの列トラックまたはトラックのパターンの大きさを指定します。

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

グリッドアイテムが `grid-template-rows` で明示的に大きさが指定されていない行に配置された場合、暗黙的に grid トラックが作成され、そのアイテムを保持します。これには、範囲外の行に明示的に配置する場合と、自動配置アルゴリズムによって追加の行が作成される場合があります。

構文
--

```css
/\* キーワード値 \*/
grid-auto-rows: min-content;
grid-auto-rows: max-content;
grid-auto-rows: auto;

/\* <length> 値 \*/
grid-auto-rows: 100px;
grid-auto-rows: 20cm;
grid-auto-rows: 50vmax;

/\* <percentage> 値 \*/
grid-auto-rows: 10%;
grid-auto-rows: 33.3%;

/\* <flex> 値 \*/
grid-auto-rows: 0.5fr;
grid-auto-rows: 3fr;

/\* minmax() 値 \*/
grid-auto-rows: minmax(100px, auto);
grid-auto-rows: minmax(max-content, 2fr);
grid-auto-rows: minmax(20%, 80vmax);

/\* multiple track-size 値 \*/
grid-auto-rows: min-content max-content auto;
grid-auto-rows: 100px 150px 390px;
grid-auto-rows: 10% 33.3%;
grid-auto-rows: 0.5fr 3fr 1fr;
grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

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

### 値

`<length>`

負の値ではない長さです。

`<percentage>`

グリッドコンテナーのブロック方向の寸法に対する相対値で、負ではない `<percentage>` です。グリッドコンテナーのブロック方向の寸法が不定の場合は、パーセント値は `auto` のように扱われます。

`<flex>`

`fr` の単位の付いた負の数ではない値で、トラックのフレックス係数を指定します。 `<flex>` の寸法のトラックは、残りの空間をフレックス係数の割合に比例して分け合います。

`minmax()` 表記の外に現れた場合は、最小値が自動として扱われます (つまり `minmax(auto, <flex>)`)。

`max-content`

グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最大値を表すキーワードです。

`min-content`

グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最小値を表すキーワードです。

`minmax(min, max)`

*min* 以上、*max* 以下の寸法の範囲を定義する関数記法です。 *max* が *min* より小さい場合は、 *max* は無視され、 *min* として扱われます。`<flex>` の値は、最大値として、トラックのフレックス係数を設定します。最小値としては、ゼロ（または、グリッドコンテナーの寸法が最小コンテンツの制約を受けている場合は、最小コンテンツ）として扱われます。

`fit-content( [ <length> | <percentage> ] )`

`min(max-content, max(auto, argument))` という式を表します。この式は、トラックの寸法が `auto` の最小値よりも大きい場合に *argument* で固定されることを除いて、`auto` と同様 (すなわち `minmax(auto, max-content)`) に計算されます。

`auto`

最大値であれば最小コンテンツと同一のキーワードです。最小値の場合は、グリッドトラックを占めるグリッドアイテムの最大の最小サイズ（`min-width`/`min-height`で指定されたサイズ）を表します。

**メモ:** トラックの寸法が `auto` の場合は（かつ `auto` の場合のみ）、`align-content`と`justify-content`のプロパティによって引き伸ばすことができます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | グリッドコンテナー |
| 継承 | なし |
| パーセント値 | コンテンツ領域の対応する寸法に対する相対値 |
| 計算値 | 指定されたパーセント値または絶対的な長さ |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

grid-auto-rows =
  <track-size>+

<track-size> =
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )

<track-breadth> =
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto

<inflexible-breadth> =
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto

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

```

例
-

### グリッド行の寸法を設定

#### HTML

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

#### CSS

```css
#grid {
  width: 200px;
  display: grid;
  grid-template-areas: "a a";
  gap: 10px;
  grid-auto-rows: 100px;
}

#grid > div {
  background-color: lime;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # auto-tracks |

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

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

関連情報
----

* 関連する CSS プロパティ: `grid-auto-columns`, `grid-auto-flow`, `grid`
* グリッドレイアウトガイド: CSS グリッドレイアウトでの自動配置 - 暗黙のグリッド内での行の大きさ
* 動画チュートリアル: *Introducing Grid auto-placement and order*