recursal/MDN huggingface dataset:
:focus-within
=============

**`:focus-within`** は CSS の擬似クラスで、その要素または子孫要素にフォーカスがある場合に一致します。言い換えれば、それ自身が `:focus` 擬似クラスに該当するか、子孫に `:focus` に該当する要素がある要素を表します。（これはシャドウツリーにおける子孫も含みます。）

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

このセレクターは、よくある例のように、 `<input>` 欄の一つにユーザーがフォーカスを置いたときに、それを含む `<form>` 全体を強調する場合に便利です。

構文
--


```css
:focus-within {
  /\* ... \*/
}
```

例
-

この例では、何れかの入力欄にフォーカスが当たった時、特殊な色のスタイルにします。

### HTML


```html
<p>このフォームに入力してみてください。</p>

<form>
  <label for="given\_name">名前:</label>
  <input id="given\_name" type="text" />
  <br />
  <label for="family\_name">苗字:</label>
  <input id="family\_name" type="text" />
</form>
```

### CSS


```css
form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-within {
  background: #ff8;
  color: black;
}

input {
  margin: 4px;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # the-focus-within-pseudo |

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

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

関連情報
----

* `:focus`
* `:focus-visible`
* Grab your user's attention with the focus-within selector
max-inline-size
===============

**`max-inline-size`** は CSS のプロパティで、書字方向に応じて要素ブロックの水平または垂直方向の最大の寸法を定義します。これは `max-width` または `max-height` のどちらかのプロパティと、 `writing-mode` の値に応じて対応します。

書字方向が垂直方向であった場合、 `max-inline-size` の値は要素の最大の高さに対応します。そうでなければ、要素の最大幅に対応します。関連プロパティとして、 `max-block-size` が要素のもう一方の寸法を定義します。

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

構文
--


```css
/\* <length> 値 \*/
max-inline-size: 300px;
max-inline-size: 25em;

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

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

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

### 値

`max-inline-size` プロパティは `max-width` および `max-height` の各プロパティと同じ値を取ります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | `width` および `height` と同じ |
| 継承 | なし |
| パーセント値 | 包含ブロックの inline-size |
| 計算値 | `max-width` および `max-height` と同じ |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

max-inline-size =   
  <'max-width'>    
  
```

例
-

### インライン方向の最大寸法をピクセル単位で設定

#### HTML


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


#### CSS


```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 100%;
  max-inline-size: 200px;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-max-inline-size |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

関連情報
----

* 対応付けされる物理的プロパティ: `max-width` および `max-height`
* `writing-mode`
empty-cells
===========

**`empty-cells`** は CSS のプロパティで、表のセルが目に見える内容を持たない場合に、周囲の境界と背景をユーザーエージェントがどのように描画するかを指定します。

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

このプロパティは、 `border-collapse` プロパティが `separate` であった場合のみ効果があります。

構文
--


```css
/\* キーワード値 \*/
empty-cells: show;
empty-cells: hide;

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


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

### 値

`show`

通常のセルのように、境界や背景を描くことを示すキーワードです。

`hide`

境界や背景を描かないことを示すキーワードです。

公式定義
----

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

形式文法
----
```

empty-cells =   
  show  |  
  hide    
  
```

例
-

### 表の空のセルの表示・非表示

#### HTML


```html
<table class="table\_1">
  <tr>
    <td>Moe</td>
    <td>Larry</td>
  </tr>
  <tr>
    <td>Curly</td>
    <td></td>
  </tr>
</table>
<br />
<table class="table\_2">
  <tr>
    <td>Moe</td>
    <td>Larry</td>
  </tr>
  <tr>
    <td>Curly</td>
    <td></td>
  </tr>
</table>
```


#### CSS


```css
.table\_1 {
  empty-cells: show;
}

.table\_2 {
  empty-cells: hide;
}

td,
th {
  border: 1px solid gray;
  padding: 0.5rem;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # empty-cells |

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

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

関連情報
----

* `border-collapse`
* 表のスタイル付け
line-height-step
================

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

**`line-height-step`** は CSS のプロパティで、行ボックスの高さにおける刻みの単位を設定します。このプロパティが設定された場合、行ボックスの高さは単位の倍数のうち最も近いものに切り上げられます。


```css
/\* ポイント値 \*/
line-height-step: 18pt;

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

構文
--

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

* `<length>` です。
### 値

`<length>`

指定された `<length>` が、行ボックスの高さの刻みの計算に使用されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | ブロックコンテナー |
| 継承 | あり |
| 計算値 | 絶対的な`長さ` |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

line-height-step =   
  <length [0,∞]>    
  
```

例
-

### 行ボックスの高さに刻みの単位を設定

以下の例では、それぞれの段落の行ボックスの高さは、刻みの単位に切り上げられます。 `<h1>` の行ボックスの高さは 1 つの刻みに収まらないので 2 つ分を占有しますが、その中の中央に配置されます。


```css
:root {
  font-size: 12pt;
  --my-grid: 18pt;
  line-height-step: var(--my-grid);
}
h1 {
  font-size: 20pt;
  margin-top: calc(2 * var(--my-grid));
}
```


これらのルールの結果は、次のスクリーンショットのようになります。

![どのように line-height-step プロパティがテキストの表示に影響するか](/ja/docs/Web/CSS/line-height-step/line-grid-center.png)

仕様書
---

| Specification |
| --- |
| CSS Rhythmic Sizing # line-height-step |

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

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

関連情報
----

* `font`
* `font-size`
* `line-height`
border-top-color
================

**`border-top-color`** は CSS のプロパティで、要素の上側の境界線の色を設定します。一括指定プロパティの `border-color` または `border-top` でも設定することができます。

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

構文
--


```css
/\* <color> 値 \*/
border-top-color: red;
border-top-color: #ffbb00;
border-top-color: rgb(255, 0, 0);
border-top-color: hsla(100%, 50%, 25%, 0.75);
border-top-color: currentcolor;
border-top-color: transparent;

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


`border-top-color` プロパティは 1 つの値で指定します。

### 値

`<color>`

上の境界線の色を定義します。

公式定義
----

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

形式文法
----
```

border-top-color =   
  <color>     |  
  <image-1D>    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># )    
  
<color-stripe> =   
  <color>                            &&  
  [ <length-percentage> | <flex> ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### 境界線が付いた単純な div

#### HTML


```html
<div class="mybox">
  <p>
    これは周囲に境界線があるボックスです。 なお、ボックスのその辺が
    <span class="redtext">赤</span>になっています。
  </p>
</div>
```


#### CSS


```css
.mybox {
  border: solid 0.3em gold;
  border-top-color: red;
  width: auto;
}

.redtext {
  color: red;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* 境界に関する CSS 一括指定プロパティ: `border`, `border-top`, `border-color`.
* 他の境界線の色に関する CSS プロパティ: `border-right-color`, `border-bottom-color`, `border-left-color`
* 同じ境界線に適用される他の境界関連の CSS プロパティ: `border-top-style`, `border-top-width`
border-inline-color
===================

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

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

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

構文
--


```css
border-inline-color: yellow;
border-inline-color: #f5f6f7;

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

### 値

`<'color'>`

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

公式定義
----

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

形式文法
----
```

border-inline-color =   
  <'border-top-color'>{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: 10px solid blue;
  border-inline-color: red;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* このプロパティは `border-top-color`、`border-right-color`、`border-bottom-color`、`border-left-color` のうちの 1 つに対応します
* `writing-mode`、`direction`、`text-orientation`+ bug 1297097
scroll-padding-top
==================

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

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

構文
--


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

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

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

### 値

``<length-percentage>``

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

`auto`

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

公式定義
----

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

形式文法
----
```

scroll-padding-top =   
  auto                       |  
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

仕様書
---

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # padding-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
color
=====

CSS の **`color`** プロパティは、要素のテキストやテキスト装飾における前景色の色の値を設定し、 `currentcolor` の値を設定します。`currentcolor` は*他の*プロパティの間接的な値として使用される可能性があり、 `border-color` のような他の色に関するプロパティの既定値にもなったりします。

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

HTML における色の使用の概要については、CSS を使用した HTML 要素への色の適用をご覧ください。

構文
--


```css
/\* キーワード値 \*/
color: currentcolor;

/\* <named-color> 値 \*/
color: red;
color: orange;
color: tan;
color: rebeccapurple;

/\* <hex-color> 値 \*/
color: #090;
color: #009900;
color: #090a;
color: #009900aa;

/\* <rgb()> 値 \*/
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);

/\* <hsl()> 値 \*/
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

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


`color` プロパティは単一の `<color>` 値で指定します。

なお、値は `color` の形でなければなりません。 `<gradient>` は実際の型が `<image>` であるため使用できません。

### 値

`<color>`

要素のテキストや装飾部分の色を設定します。

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

背景色とその上に配置されたテキストの色のコントラスト比が、弱視の人がページのコンテンツを読むことができる程度に高いことを確認することが重要です。

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

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

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

形式文法
----
```

color =   
  <color>    
  
```

例
-

### テキストを赤くする

以下の例はすべて、要素のテキストを赤色にします。


```css
p {
  color: red;
}
p {
  color: #f00;
}
p {
  color: #ff0000;
}
p {
  color: rgb(255, 0, 0);
}
p {
  color: rgb(100%, 0%, 0%);
}
p {
  color: hsl(0, 100%, 50%);
}

/\* 50% 透過 \*/
p {
  color: #ff000080;
}
p {
  color: rgba(255, 0, 0, 0.5);
}
p {
  color: hsla(0, 100%, 50%, 0.5);
}
```

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4 # the-color-property |

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

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

関連情報
----

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

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

**`webkit-mask-composite`** プロパティは、同じ要素に適用された複数のマスク画像を互いに合成する方法を指定します。マスク画像は、`-webkit-mask-image` (en-US) プロパティで宣言された順序とは逆に合成されます。


```css
/\* キーワード値 \*/
-webkit-mask-composite: clear;
-webkit-mask-composite: copy;
-webkit-mask-composite: source-over;
-webkit-mask-composite: source-in;
-webkit-mask-composite: source-out;
-webkit-mask-composite: source-atop;
-webkit-mask-composite: destination-over;
-webkit-mask-composite: destination-in;
-webkit-mask-composite: destination-out;
-webkit-mask-composite: destination-atop;
-webkit-mask-composite: xor;

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


**メモ:** この標準外のプロパティの一部を別のキーワードでカバーする、標準化された `mask-composite` プロパティがあります。

構文
--

### 値

`clear`

元のマスク画像と合成用マスク画像の重なり合ったピクセルがクリアされます。

`copy`

コピー元のマスク画像をコピー先のマスク画像に置き換えます。

`source-over`

元のマスク画像を合成用のマスク画像の上にレンダリングします。

`source-in`

元のマスク画像と合成用マスク画像の重なり合ったピクセルが、元のマスク画像のピクセルで置き換えられ、それ以外のピクセルはクリアされます。

`source-out`

元のマスク画像と合成用マスク画像の重なり合ったピクセルがクリアされ、元のマスク画像の残りのピクセルがすべてレンダリングされます。

`source-atop`

合成用マスク画像のピクセルがレンダリングされます。元のマスク画像のピクセルは、合成用マスク画像の非透過部分と重なっている場合にのみレンダリングされます。これにより、元のマスク画像の効果はありません。

`destination-over`

合成用マスク画像は、元のマスク画像の上にレンダリングされます。

`destination-in`

元のマスク画像と合成用マスク画像で重複するピクセルは、合成用マスク画像のピクセルのままとなり、それ以外のピクセルはクリアされます。

`destination-out`

元のマスク画像と合成用マスク画像の重なり合ったピクセルはクリアされ、元のマスク画像の残りのピクセルはすべてレンダリングされます。

`destination-atop`

元のマスク画像のピクセルがレンダリングされます。合成用マスク画像のピクセルは、合成用マスク画像の非透過部分と重なっている場合にのみレンダリングされます。これにより、合成用マスク画像は何の影響も受けません。

`xor`

元のマスク画像と合成用マスク画像の重なっているピクセルは、両者が完全に不透明であれば完全に透明になります。

公式定義
----

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

形式文法
----

Error: could not find syntax for this item例
-

### XOR で合成する


```css
.example {
  -webkit-mask-image: url(mask1.png), url("mask2.png");
  -webkit-mask-composite: xor, source-over;
}
```

仕様書
---

標準には含まれていません。このプロパティは `mask-composite` として異なる値で定義されています。

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

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

関連情報
----

* `mask-composite`
:user-valid (:-moz-ui-valid)
============================

**`:user-valid`** は CSS の擬似クラスで、制約検証に基づき値の検証が正しく行われた有効なフォーム要素を表します。ただし、 `:valid` とは異なり、ユーザーが操作した後にのみ一致します。

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

この擬似クラスは、以下の基準に則って適用されます。

* そのコントロールにフォーカスがなく、値が有効な場合は、この擬似クラスが適用されます。
* そのコントロールにフォーカスがあり、フォーカスを受けた時点でその値が有効であった場合（空欄の場合も含む）、この擬似クラスが適用されます。
* そのコントロールにフォーカスがあり、フォーカスを受けた時点でその値が無効であった場合、キーを入力するごとに再検証が行われます。
* その要素が必須 (required) であった場合は、ユーザーが値を変更した場合、またはフォームを送信しようとした場合にのみ適用されます。

その結果、ユーザーがコントロールを操作し始めたときに有効であった場合、ユーザーが他のコントロールにフォーカスを移したときにのみ、有効性のスタイルが変更されることになります。しかし、ユーザーが以前にフラグを立てた値を修正しようとしている場合、その値が有効になるとコントロールは直ちに表示されます。必須項目は、ユーザーが変更した場合、または変更されていない無効な値を送信しようとした場合にのみ、無効であるとフラグが立てられます。

構文
--
```

:user-invalid
```

例
-

### :user-valid で色と記号を設定

 次の例では、緑の境界と✅が、ユーザーがフィールドを操作した後にのみ表示されます。
 メールアドレスを他の有効なメールに変更して、その動作を確認してみてください。


```html
<form>
  <label for="email">Email *: </label>
  <input
 id="email"
 name="email"
 type="email"
 value="test@example.com"
 required />
  <span></span>
</form>
```



```css
input:user-valid {
  border: 2px solid green;
}

input:user-valid + span::before {
  content: "✓";
  color: green;
}
```

仕様書
---

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

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

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

関連情報
----

* `:valid`
* `:invalid`
* `:required`
* `:optional`
* `:user-invalid`
::view-transition-group
=======================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

**`::view-transition-group`** は CSS の擬似要素で、単一のビュートランジショングループを表します。

ビュートランジションの間、 `::view-transition-group` はは、ビュートランジションプロセス で説明されているように、関連する擬似要素ツリーに含まれています。これは`::view-transition`の唯一の子であり、`::view-transition-image-pair`を子として持ちます。

`::view-transition-group` は UA スタイルシートで以下の既定のスタイルを与えられています。


```css
html::view-transition-group(\*) {
  position: absolute;
  top: 0;
  left: 0;

  animation-duration: 0.25s;
  animation-fill-mode: both;
}
```


既定では、選択された要素は、「古い｝ビュー状態を表す `::view-transition-old` 擬似要素、または「古い」ビュー状態がない場合は「新しい」ビュー状態を表す `::view-transition-new` 擬似要素のサイズと位置を最初に反映します。

「古い」ビュー状態と「新しい」ビュー状態の両方がある場合、ビュートランジションスタイルシートのスタイルは、この擬似要素の `width` と `height` を「古い」ビュー状態の境界ボックスのサイズから「新しい」ビュー状態の境界ボックスのサイズにアニメーションさせます。

**メモ:** ビュートランジションスタイルシートのスタイルは、ビューのトランジション中に動的に生成されます。詳細については、仕様書のトランジション擬似要素の設定および擬似要素スタイルの更新の節を参照してください。

さらに、要素の変換は、「古い」ビュー状態の画面空間変換から新しいビュー状態の画面空間変換へアニメーションします。アニメーションしているプロパティの値はトランジションを始める時点に決定されるため、このスタイル設定は動的に生成されます。

構文
--


```css
::view-transition-group(<pt-name-selector>) {
  /\* ... \*/
}
```


`<pt-name-selector>` は以下の値のうちのいずれかです。

`*`

擬似要素が、すべてのビュートランジショングループに一致するようにします。

`root`

擬似要素が、ページ全体のビュートランジションを含むためにユーザエージェントによって作成された既定の `root` ビュートランジショングループに一致するようにします。すなわち、 `view-transition-name` プロパティによって自分自身を固有のビュートランジショングループに割り当てていない要素を意味します）。

`<custom-ident>`

擬似要素が、指定された `<custom-ident>` を `view-transition-name` プロパティを通して要素に割り当てることによって作成された固有のビュートランジショングループに一致するようにします。

例
-


```css
view-transition-group(embed-container) {
  animation-duration: 0.3s;
  animation-timing-function: ease;
  z-index: 1;
}
```

仕様書
---

| Specification |
| --- |
| CSS View Transitions Module Level 1 # ::view-transition-group |

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

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

関連情報
----

* ビュートランジション API
* ビュートランジション API によるスムーズでシンプルなトランジション
::marker
========

**`::marker`** は CSS の擬似要素で、リスト項目の箇条書き記号ボックス (ふつうは黒丸や番号) を選択します。これは `[display: list-item](/ja/docs/Web/CSS/display)` が設定された要素や擬似要素、例えば `<li>` 要素や `<summary>` 要素で利用できます。


```css
::marker {
  color: blue;
  font-size: 1.2em;
}
```

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

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

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

* すべてのフォントプロパティ
* `white-space` プロパティ
* `color`
* `text-combine-upright`, `unicode-bidi`, `direction` の各プロパティ
* `content` プロパティ
* すべてのアニメーションおよびトランジションプロパティ

**メモ:** この仕様書は、将来追加の CSS プロパティにも対応する可能性があることを示しています。

構文
--

Error: could not find syntax for this item例
-

### HTML


```html
<ul>
  <li>Peaches</li>
  <li>Apples</li>
  <li>Plums</li>
</ul>
```

### CSS


```css
ul li::marker {
  color: red;
  font-size: 1.5em;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # marker-pseudo |

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

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

関連情報
----

* 既定で箇条書き記号ボックスがある HTML 要素: `<ol>`, `<li>`, `<summary>`
counter-increment
=================

**`counter-increment`** は CSS のプロパティで、指定された値によって CSS カウンターの値を増加または減少させるためのプロパティです。

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

**メモ:** カウンターの値は CSS の `counter-reset` プロパティを使用して任意の値にリセットすることができます。

構文
--


```css
/\* "my-counter" を 1 増加 \*/
counter-increment: my-counter;

/\* "my-counter" を 1 減少 \*/
counter-increment: my-counter -1;

/\* "counter1" を 1 増加、 "counter2" を 4 減少 \*/
counter-increment: counter1 counter2 -4;

/\* 増加または減少させない。より詳細度が低い規則を上書きするために使用 \*/
counter-increment: none;

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


`counter-increment` プロパティは、以下の何れかで指定します。

* カウンターの名前を指定する `<custom-ident>` と、その後に任意で `<integer>`。カウンターはいくつでも指定することができ、それぞれの名前や名前と数値の組は空白で区切ります。
* キーワード値 `none`。
### 値

`<custom-ident>`

増加の対象となる、カウンターの名前です。

`<integer>`

カウンタに加える値です。指定されない場合は既定値の `1` になります。

`none`

カウンターは増加しません。これは既定値として使用されたり、より詳細度の高いルールで増加を取り消したりするために使用されたりします。

公式定義
----

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

形式文法
----
```

counter-increment =   
  [ <counter-name> <integer>? ]+  |  
  none                              
  
```

例
-

### 名前付きカウンターの増加


```css
h1 {
  counter-increment: chapter section 2 page;
  /\* chapter と page カウンターの値を 1、
 section カウンターの値を 2 増加させます。 \*/
}
```

仕様書
---

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # increment-set |

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

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

関連情報
----

* CSS カウンターの使用
* `counter-reset`
* `counter-set`
* `@counter-style`
* `counter()` および `counters()` 関数
:focus
======

**`:focus`** は CSS の擬似クラスで、フォーカスを持っている (フォームの input のような) 要素を表します。普通はユーザーが要素をクリックやタップをしたり、キーボードの `Tab` キーで選択したりしたときです。

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

**メモ:** この擬似クラスはフォーカスを持つ要素に対してのみ適用されます。フォーカスを持つ要素を*含む*要素を選択したい場合は、`:focus-within` を使用してください。

構文
--


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

例
-

### HTML


```html
<div><input class="red-input" value="フォーカスで赤くなります。" /></div>
<div><input class="blue-input" value="フォーカスで青くなります。" /></div>
```

### CSS


```css
.red-input:focus {
  background: yellow;
  color: red;
}

.blue-input:focus {
  background: yellow;
  color: blue;
}
```

### 結果

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

視覚的なフォーカスインジケーターが、弱視の人々からも見えるように確認してください。これは外光が明るい場所 (太陽の下の屋外など) で画面を使用するすべての人にも利益になります。 WCAG 2.1 SC 1.4.11 Non-Text Contrast は、視覚的なフォーカスインジケーターを少なくとも 3:1 にすることを要求しています。

* Accessible Visual Focus Indicators: Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators
### `:focus { outline: none; }`

WCAG 2.1 SC 1.4.11 Non-Text Contrast を満たすフォーカスの輪郭線で置き換えることなしに、フォーカスの輪郭線（視覚的なフォーカスインジケーター）を削除しないでください。

* Quick Tip: Never remove CSS outlines
仕様書
---

| Specification |
| --- |
| HTML Standard # selector-focus |
| Selectors Level 4 # focus-pseudo |

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

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

関連情報
----

* `:focus-visible`
* `:focus-within`