recursal/MDN huggingface dataset:
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
==============

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

**`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
============

**`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
=====================

`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
=========

**`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
==================

**`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
====================

`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
=========================

**`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`
::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()
=========

**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
===========

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` 属性