recursal/MDN huggingface dataset:
-webkit-mask-repeat-y
=====================

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

The `-webkit-mask-repeat-y` プロパティは、マスク画像を垂直方向に反復 (タイル) するかどうか、どのように反復するかを設定します。


```css
/\* キーワード値 \*/
-webkit-mask-repeat-y: repeat;
-webkit-mask-repeat-y: no-repeat;
-webkit-mask-repeat-y: space;
-webkit-mask-repeat-y: round;

/\* 複数の値 \*/
-webkit-mask-repeat-y: repeat, no-repeat, space;

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

構文
--

### 値

repeat

マスク画像は垂直方向に反復されます。

no-repeat

マスク画像は垂直方向には反復されません。マスク画像のコピーが垂直方向に 1 つだけ描画されます。マスクされた要素の垂直方向に残ったコンテンツは表示されません。

repeat

マスク画像は垂直方向に反復されます。

space

画像を切り取らないように、できる限り反復されます。最初と最後の画像は要素の上と下の辺に固定され、空白は画像の間に均等に分配されます。 `mask-position` プロパティは、切り取ることなく 1 つの画像しか表示できない場合を除き、無視されます。空白を使って切り取りが発生するのは、 1 枚の画像を表示するのに十分な空間がない場合だけです。

round

許可された垂直方向の空間が大きくなると、反復して表示される画像は、次の画像を追加する空間ができるまで（隙間なく）伸びていきます。次の画像が追加されると、現在の画像はすべて圧縮されて空間が確保されます。例えば、元の高さが 260px の画像が 3 回繰り返されると、それぞれの繰り返しが 300px の高さになるまで引き伸ばされ、その後、別の画像が追加されます。その後、 225px の高さに圧縮されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `repeat` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | `length` の場合は絶対的な値、それ以外はパーセント値 |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

### 反復あり・反復なしのマスク画像の使用


```css
.exampleone {
  -webkit-mask-image: url("mask.png");
  -webkit-mask-repeat-y: repeat;
}

.exampletwo {
  -webkit-mask-image: url("mask.png");
  -webkit-mask-repeat-y: no-repeat;
}
```

### 複数のマスク画像の使用

マスク画像ごとに異なる `<repeat-style>` の値を、カンマで区切って指定することができます。


```css
.examplethree {
  -webkit-mask-image: url("mask1.png"), url("mask2.png");
  -webkit-mask-repeat-y: repeat, space;
}
```


各画像は、最初に指定されたものから最後に指定されたものまで、対応する反復スタイルに対応します。

仕様書
---

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

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

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

関連情報
----

`-webkit-mask-repeat` (en-US), `-webkit-mask-repeat-x`
セレクターリスト
========

CSS の **セレクターリスト** (selector list) (`,`) は、すべての一致するノードを選択します。セレクターリストはカンマ区切りのセレクターのリストです。

概要
--

複数のセレクターが同じ宣言を共有しているときは、カンマ区切りのリストにまとめることができます。セレクターリストはいくつかの関数型 CSS 擬似クラスのパラメーターとして与えることもできます。空白文字がカンマの前後に入る場合もあります。

次の 3 つの宣言は等価です:


```css
span {
  border: red 2px solid;
}
div {
  border: red 2px solid;
}
```



```css
span,
div {
  border: red 2px solid;
}
```



```css
:is(span, div) {
  border: red 2px solid;
}
```

例
-

異なる基準でマッチする要素に同じスタイルを適用するときは、セレクターをカンマ区切りのリストにまとめると、一貫性が得られると同時にスタイルシートの容量も削減できます。

### 単一行のグループ化

カンマ区切りのリストを使用して単一行にしたグループ化セレクターです。


```css
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: helvetica;
}
```

### 複数行のグループ化

カンマ区切りのリストを使用して複数行にしたグループ化セレクターです。


```css
#main,
.content,
article,
h1 + p {
  font-size: 1.1em;
}
```

セレクターリストの有効、無効について
------------------

無効なセレクターは、何にもマッチしないことを表します。セレクターリストが無効なセレクターを含むとき、スタイルブロックのすべてが無視されます。寛容なセレクターリストを受け付ける関数型擬似クラスは例外です。

### 無効なセレクターリスト

セレクターリストを使用する欠点は、セレクターリスト内に未対応のセレクターが一つでもあった場合に、ルール全体が無効化されてしまうことです。

次の 2 つの CSS ルールについて考えてみましょう:


```css
h1 {
  font-family: sans-serif;
}
h2:invalid-pseudo {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}
```



```css
h1,
h2:invalid-pseudo,
h3 {
  font-family: sans-serif;
}
```


これらは等価ではありません。1 つ目のルールセットでは `h1` 要素と `h3` 要素にスタイルが適用されますが、`h2:invalid-pseudo` ルールはパースされません。2 つ目のルールセットでは、リスト内の 1 つのセレクターが無効なため、ルール全体がパースされません。リスト内のいずれかのセレクターが無効ならスタイルブロック全体が無視されるため、`h1` 要素にも `h3` 要素にもスタイルが適用されません。

### 寛容なセレクターリスト

無効なセレクターリスト問題を解決する方法は、寛容なセレクターリストを受け付ける `:is()` や `:where()` 擬似クラスを使うことです。寛容なセレクターリストの中のそれぞれのセレクターは個別にパースされます。すると、リスト内の無効なセレクターは無視されますが、有効なセレクターは使用されます。

先程の例と比べ、次の 2 つの CSS ルールセットは等価です:


```css
h1 {
  font-family: sans-serif;
}
h2:maybe-unsupported {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}
```



```css
:is(h1, h2:maybe-unsupported, h3) {
  font-family: sans-serif;
}
```


`:is()` の詳細度は引数の中で最も高いものとなりますが、`:where()` セレクターと寛容なセレクターリストパラメーターは詳細度の重みに作用しません。

### 寛容な相対セレクターリスト

寛容な相対セレクターリストは、寛容なセレクターリストと似ています。リストの要素を、明示的か暗黙的な結合子から始まる相対セレクターとして解釈します。


```css
h2:has(+ p, > ul::after, + ul.red) {
  font-style: italic;
}
```


この例だと `<p>` か `<ul class="red">` がすぐ後にある `h2` は斜体になります。寛容な相対セレクターリスト `:has()` の中で擬似要素は無効ですが、リストが寛容なのでセレクターを壊すことはありません。

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # grouping |

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

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

関連情報
----

* 擬似クラス `:is()`、`:where()`、`:not()`、`:has()` は、寛容なセレクターリストを受け付けます。
* CSS セレクター
rotate
======

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

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

構文
--


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

/\* 角度値 \*/
rotate: 90deg;
rotate: 0.25turn;
rotate: 1.57rad;

/\* x, y, z 軸名と角度 \*/
rotate: x 90deg;
rotate: y 0.25turn;
rotate: z 1.57rad;

/\* ベクトルと角度値 \*/
rotate: 1 1 1 90deg;

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

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

### 値

角度値

`<angle>` で、 z 軸の周囲を該当する要素を貫いて回転させる角度を指定します。`rotate()` (二次元回転) 関数と等価です。

x, y, z 軸と角度値

該当する要素を回転する軸の名前 (`"x"`, "`y`", "`z"`) と、要素を貫いて回転する角度を指定する `<angle>` です。 `rotateX()`/`rotateY()`/`rotateZ()` (三次元回転) 関数と等価です。

ベクトルと角度値

要素を回転させたい直線を表す原点を中心としたベクトルを表す 3 つの数値 `<number>` と、要素を貫いて回転する角度を指定する `<angle>` です。 `rotate3d()` (三次元回転) 関数と等価です。

`none`

回転を適用しないことを表します。

公式定義
----

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

形式文法
----
```

rotate =   
  none                                    |  
  <angle>                                 |  
  [ x | y | z | <number>{3} ] && <angle>    
  
```

例
-

### ホバー時に要素を回転

 次の例は、 `rotate` プロパティを使用して、ホバー時に要素を様々な軸にで回転させる方法を示しています。
 1 つ目のボックスはホバー時に Z 軸で 90 度回転し、 2 つ目はホバー時に Y 軸で 180 度回転し、 3 つ目はホバー時に座標を定義したベクトルを中心に 360 度回転します。

#### HTML


```html
<div class="box" id="box1">rotate Z</div>
<div class="box" id="box2">rotate Y</div>
<div class="box" id="box3">vector & angle</div>
```


#### CSS


```css
.box {
  display: inline-block;
  margin: 1em;
  min-width: 6.5em;
  line-height: 6.5em;
  text-align: center;
  transition: 1s ease-in-out;
  border: 0.25em dotted;
}

#box1:hover {
  rotate: 90deg;
}

#box2:hover {
  rotate: y 180deg;
}

#box3:hover {
  rotate: 1 2 1 360deg;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* `translate`
* `scale`
* `transform`

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

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

`math-shift` プロパティは MathML 数式の中の上付き文字を通常のシフトとコンパクトシフトのどちらで上げるべきかを示します。

構文
--


```css
/\* キーワード値 \*/
math-shift: normal;
math-shift: compact;

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

### 値

`normal`

初期値で、通常のレンダリングを示します。 MathML 数式の上付き文字は OpenType MATH テーブルの superscriptShiftUp 引数を用います。

`compact`

コンパクトなレンダリングを示します。 MathML 数式の中の上付き文字は OpenType MATH テーブルの superscriptShiftUpCramped 引数を使い、一般的に小さくなります。

公式定義
----

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

形式文法
----
```

math-shift =   
  normal   |  
  compact    
  
```

例
-

### CSS


```css
math {
  math-shift: compact;
}
```

### MathML

次の MathML は OpenType MATH テーブルを持つフォントを使って "x の 2 乗" の 2 つのバージョンを表示しています。 `math-shift` プロパティを実装しているブラウザーは、上付き文字を少し異なるシフトを使って上げることになります。


```html
<math style="font-size: 64pt;">
  <msup style="math-shift: normal">
    <mi>x</mi>
    <mn>2</mn>
  </msup>
  <msup style="math-shift: compact">
    <mi>x</mi>
    <mn>2</mn>
  </msup>
</math>
```

仕様書
---

| Specification |
| --- |
| MathML Core # the-math-shift |

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

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

関連情報
----

* `math-depth`
* `font-size`
:valid
======

**`:valid`** は CSS の擬似クラスで、内容物の検証に成功した `<input>` 要素 やその他の `<form>` 要素を表します。これにより、有効な入力欄に、データの形式が適切であることをユーザーが確認しやすくなる外観を簡単に適用できるようになります。


```css
/\* 有効な <input> をすべて選択 \*/
input:valid {
  background-color: powderblue;
}
```

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

この擬似クラスは、入力値が正しい入力欄をユーザーに強調表示するのに便利です。

構文
--
```

:user-valid
```

例
-

### 有効／無効なフォームフィールドを示す

この例では、このような構造を使用しています。この構造には、コンテンツを生成するための追加の `<span>` が含まれており、これらを使用して、データが有効であるか無効であるかの表示を提供します。


```html
<div>
  <label for="fname">First name *: </label>
  <input id="fname" name="fname" type="text" required />
  <span></span>
</div>
```


これらの表示を提供するために、以下の CSS を使用します。


```css
input + span {
  position: relative;
}

input + span::before {
  position: absolute;
  right: -20px;
  top: 5px;
}

input:invalid {
  border: 2px solid red;
}

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

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


生成されたコンテンツを相対的に配置できるように `<span>` を `position: relative` に設定します。そして、フォームのデータが有効か無効かに応じて、生成されるコンテンツを絶対位置指定で配置します。無効なデータには、さらに軽く緊急性を表すために、無効になったときに太い赤い枠線をつけています。

**メモ:** これらのラベルを追加するために `::before` を使ったのは、すでに `::after` を "required" ラベルに使っていたからです。

以下で試してみることができます。

必須のテキスト入力は、空の状態では無効ですが、何かが記入されている状態では有効であることに注意してください。一方、 email の入力は、必須ではないため、空の場合は有効ですが、適切な email アドレスでないものが含まれている場合は無効となります。

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

緑色は入力が有効であることを示すためによく使われます。色盲の人によっては、それ以外の色によらない識別方法を伴わないと、入力状態が判別できないことがあります。通常、文字列やアイコンを使用して説明します。

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

| Specification |
| --- |
| HTML Standard # selector-valid |
| Selectors Level 4 # validity-pseudos |

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

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

関連情報
----

* 他の検証関連の擬似クラス: `:required`, `:optional`, `:invalid`
* フォームデータの検証
* JavaScript からの検証状態へのアクセス
direction
=========

**`direction`** は CSS のプロパティで、テキスト、表の列、水平方向のはみ出しの方向を設定します。右書きの言語（ヘブライ語やアラビア語など）では `rtl` を、左書きの言語（英語やそれ以外の多くの言語）では `ltr` を使います。

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

なお、テキストの方向はふつうは文書内で（例えば HTML の `dir` 属性 で）定義するものであり、 `direction` プロパティ直接使用して行うものではありません。

このプロパティは、基本的な文章の方向と、 `unicode-bidi` プロパティで作られた埋め込み (embeddings) の方向を設定します。また、テキストやブロックレベル要素の既定の文字揃えや、表の行内にセルが流し込まれる方向を決めます。

HTML の `dir` 属性とは異なり、`direction` プロパティは表の列から表のセルには継承されません。これは CSS の継承が文書木に従うためで、表のセルは表の列の中ではなく、行の中にあるからです。

`direction` プロパティと `unicode-bidi` プロパティのみが、 `all` 一括指定プロパティの影響を受けません。

構文
--


```css
/\* キーワード値 \*/
direction: ltr;
direction: rtl;

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

### 値

`ltr`

テキストやその他の要素は左から右へと進みます。これが既定値です。

`rtl`

テキストやその他の要素は右から左へと進みます。

インラインレベル要素で `direction` プロパティに効果を持たせたいときは、`unicode-bidi` プロパティの値が `embed` もしくは `override` である必要があります。

公式定義
----

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

形式文法
----
```

direction =   
  ltr  |  
  rtl    
  
```

例
-

### 右書きの方向を設定

以下の例では、 2 つのテキスト文字列があり、どちらも `direction: rtl` を使って表示されています。アラビア語のテキストはこの設定で正しく表示されますが、日本語のテキストは句点が異常な位置に表示されるようになりました。


```css
blockquote {
  direction: rtl;
  width: 300px;
}
```



```html
<blockquote>
  <p>この段落は日本語ですが、間違って右から左へ書かれています。</p>
</blockquote>

<blockquote>
  <p>هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.</p>
</blockquote>
```

仕様書
---

| Specification |
| --- |
| CSS Writing Modes Level 4 # direction |

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

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

関連情報
----

* `unicode-bidi`
* `writing-mode`
* HTML の `dir` グローバル属性
CSS Houdini
===========

**CSS Houdini** は、 CSS エンジンの一部を公開する一連の API です。これにより、開発者は CSS の拡張機能を簡単に作成することができます。これらの拡張機能は、ブラウザーでまだ利用できない機能を代替したり、レイアウトの新しい方法を試したり、クリエイティブな境界線やその他の効果を追加したりするものです。

多くの Houdini の例では、 API の創造的な可能性が紹介されていますが、実用的な使用例もたくさんあります。例えば、 Houdini を使って、型のチェックや既定値を持つ高度なカスタムプロパティを作成することができます。

基本的な例
-----

通常の CSS カスタムプロパティは、プロパティの名前と値から成ります。したがって、 `--background-color` というカスタムプロパティを生成し、色の値を取るようにするとします。この値は、 CSS 内で色の値であるかのように扱われます。


```css
:root {
  --background-color: blue;
}

.box {
  background-color: var(--background-color);
}
```


しかし、上記の例では、このプロパティに他の値を使用したり、長さを設定することを止めることはできません。そうすると、 `background-color: 12px` は有効ではないので、このプロパティが使用されている場所には背景色が設定されません。ブラウザーは、有効でないと認識した CSS に出会うと、その行を捨ててしまうからです。

しかし `@property` を使用すると、 `syntax` に `<color>` を指定してカスタムプロパティを設定することができます。これは、このプロパティが有効な色である値を持つ必要があることを示します。


```css
@property --background-color {
  syntax: "<color>";
  inherits: false;
  initial-value: blue;
}
```

Houdini ワークレット
--------------

Houdini の機能の一つにワークレット (`Worklet`) があります。ワークレットとは JavaScript で書かれたモジュールで、 Houdini の API の一つを使って CSS を拡張するものです。ワークレットの例は `PaintWorklet.registerPaint()` (en-US) のページで見ることができます。いったんワークレットが登録されると、他の値と同様に CSS で使用することができます。つまり、 JavaScript の開発者でなくても、他の人が作成したワークレットを使って Houdini API にアクセスすることができます。

Houdini.how のウェブサイトには、自分のサイトで試すことができるたくさんのワークレットがあります。

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

### CSS アット規則と記述子

`@property` アット規則で高度なカスタムプロパティを登録することができます。

* `@property`
* `inherits`
* `initial-value`
* `syntax`
### Houdini API リファレンス

* `CSS_Properties_and_Values_API`
* `CSS_Typed_OM_API`
* `CSS_Painting_API`
* `Worklet` のリファレンス
### Houdini ガイド

* プロパティと値 API ガイド
* 型付き OM API ガイド
* CSS Painting API の使用
外部リソース
------

* Interactive introduction to Houdini
* A Practical Overview of CSS Houdini
* Smarter custom properties with Houdini's new API
::-moz-list-bullet
==================

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

**`::-moz-list-bullet`** は CSS の擬似要素で、 Mozilla 拡張であり、順序なしリスト (`<ul>`) のリスト項目 (`<li>`) のマーカー（通常は点）を表します。

構文
--


```css
li::-moz-list-bullet
```

例
-

### リスト項目のマーカーのスタイル設定

#### HTML


```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
```


#### CSS


```css
::-moz-list-bullet {
  color: red;
  font-size: 1.5em;
}
```


#### 結果

仕様書
---

どの仕様にも含まれていません。

関連情報
----

* `:-moz-list-number` (en-US)
* `::marker`
:nth-last-of-type()
===================

**`:nth-last-of-type()`** は CSS の擬似クラスで、兄弟要素のグループの中で指定された型の要素を、最後から数えた位置に基づいて選択します。
```

/* 兄弟の <p> 要素の中で、
   後ろから数えて 3 つおきに選択 */
p:nth-last-of-type(4n) {
  color: lime;
}
```

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

**メモ:** この擬似クラスは、最初から後に向けてではなく*最後*から前に向けて数えるという点を除けば、本質的に `:nth-of-type` と同じです。

構文
--

`nth-last-of-type` 擬似クラスは、要素を選択する最後から数えるパターンを表す引数を 1 つ取ります。

構文の詳しい説明は `:nth-last-child` を参照してください。
```

:nth-last-of-type( <an-plus-b> | even | odd )
```

例
-

### HTML


```html
<div>
  <span>This is a span.</span>
  <span>This is another span.</span>
  <em>This is emphasized.</em>
  <span>Wow, this span gets limed!!!</span>
  <del>This is struck through.</del>
  <span>Here is one last span.</span>
</div>
```

### CSS


```css
span:nth-last-of-type(2) {
  background-color: lime;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* `:nth-last-child`, `:nth-of-type`
inline-size
===========

**`inline-size`** は CSS のプロパティで、書字方向に応じた要素ブロックの水平または垂直方向の寸法を定義します。これは `width` または `height` プロパティに相当し、 `writing-mode` の値によって変わります。

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

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

構文
--


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

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

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

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

### 値

`inline-size` プロパティは、`width` や `height` プロパティと同じ値を取ります。

公式定義
----

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

形式文法
----
```

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

例
-

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

#### HTML


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


#### CSS


```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  inline-size: 110px;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # dimension-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

関連情報
----

* 対応付けされる物理的プロパティ: `width` および `height`
* `writing-mode`
CSS テキスト
========

**CSS テキスト** (CSS Text) は CSS のモジュールの一つで、どのようにテキストを扱うか、例えば改行、位置揃えと配置、空白の扱い、テキストの変換などを定義します。

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

### プロパティ

* `hanging-punctuation`
* `hyphens`
* `letter-spacing`
* `line-break`
* `overflow-wrap`
* `tab-size`
* `text-align`
* `text-align-last`
* `text-indent`
* `text-justify`
* `text-size-adjust`
* `text-transform`
* `white-space`
* `word-break`
* `word-spacing`
仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1  |
| CSS Text Module Level 3  |
| CSS Text Module Level 4  |
次兄弟結合子
======

**次兄弟結合子** (next-sibling combinator, `+`) は 2 つのセレクターを接続し、 2 つ目の要素が 1 つ目の要素の *直後* にあって、両者が同じ親`要素`の子同士である場合に一致します。


```css
/\* 画像の直後に来る段落 \*/
img + p {
  font-weight: bold;
}
```

構文
--


```css
/\* 結合子の前後の空白はオプションですが、推奨されます。 \*/
直前の要素 + 対象の要素 { スタイルプロパティ }
```

例
-

### CSS


```css
li:first-of-type + li {
  color: red;
}
```

### HTML


```html
<ul>
  <li>One</li>
  <li>Two!</li>
  <li>Three</li>
</ul>
```

### 結果

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # adjacent-sibling-combinators |

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

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

関連情報
----

* 後続兄弟結合子
:first
======

**`:first`** は CSS の擬似クラスで、`@page` アットルールで使用され、印刷文書の最初のページを表します。 (一般的なノードの最初の要素については `:first-child` を参照してください。)


```css
/\* 印刷時に最初のページを選択 \*/
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}
```


**メモ:** この擬似クラスを使用してすべての CSS プロパティを変更できるわけではありません。変更できるのは文書のマージン、 `orphans`、`widows`、ページ区切りのみです。さらに、マージンを定義するときには絶対的な長さの単位のみしか使用できません。他のすべてのプロパティは無視されます。

構文
--
```

:first
```

例
-

### HTML


```html
<p>最初のページです。</p>
<p>2 枚目のページです。</p>
<button>印刷</button>
```

### CSS


```css
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

p {
  page-break-after: always;
}
```

### JavaScript


```js
document.querySelector("button").addEventListener("click", () => {
  window.print();
});
```

### 結果

［印刷］ボタンを押すと、例を印刷します。最初のページの言葉は中央付近に印刷されますが、他のページのコンテンツは既定の位置に印刷されます。

仕様書
---

| Specification |
| --- |
| CSS Paged Media Module Level 3 # left-right-first |

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

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

関連情報
----

* `@page`
* ページに関する他の擬似クラス: `:left`, `:right`
:default
========

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
**`:default`** は CSS の擬似クラスで、関連する要素のグループ内で既定となっているフォーム上の要素を選択します。

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

このセレクターが何に一致するかについては、 HTML Standard §4.16.3 Pseudo-classes で定義されています。 — `<button>`、`<input type="checkbox">`、`<input type="radio">`、`<option>` 要素に一致させることができます。

* 既定の option 要素は `selected` 属性が付いた最初のもの、または DOM 順で最初の有効な選択肢です。 `multiple` が付いた `<select>` は、複数の `selected` がついた選択肢を持つことができますので、すべてが `:default` に一致します。
* `<input type="checkbox">` と `<input type="radio">` は `checked` 属性があるときに一致します。
* `<button>` は `<form>` の 既定の送信ボタンである場合に一致します。フォームに所属する `<button>` のうち、 DOM 順で最初のものです。これはフォームを送信する `<input>` 型、例えば `image` または `submit` にも適用されます。
構文
--
```

:default
```

例
-

### HTML


```html
<fieldset>
  <legend>Favorite season</legend>

  <input type="radio" name="season" id="spring" />
  <label for="spring">Spring</label>

  <input type="radio" name="season" id="summer" checked />
  <label for="summer">Summer</label>

  <input type="radio" name="season" id="fall" />
  <label for="fall">Fall</label>

  <input type="radio" name="season" id="winter" />
  <label for="winter">Winter</label>
</fieldset>
```

### CSS


```css
input:default {
  box-shadow: 0 0 2px 1px coral;
}

input:default + label {
  color: coral;
}
```

### 結果

仕様書
---

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

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

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

関連情報
----

* ウェブフォーム — ユーザーデータでの作業
* ウェブフォームのスタイル付け
* 関連する HTML 要素: `<button>`, `<input type="checkbox">`, `<input type="radio">`, `<option>`
order
=====

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
**`order`** は CSS のプロパティで、フレックスコンテナーやグリッドコンテナーの中で、アイテムを並べる順序を設定します。コンテナー内のアイテムは `order` の値の昇順に配置され、さらにソースコード内の順序で配置されます。

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

構文
--


```css
/\* <integer> 値 \*/
order: 5;
order: -5;

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


`order` は要素の*視覚上の順序*にのみ影響を与えるものであり、論理的な順序やタブオーダーには影響を与えません。`order` を speech など、視覚的ではないメディアで使用してはいけません。

### 値

`<integer>`

アイテムが割り当てられる順序グループを表します。

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

`order` プロパティを使うと、視覚上の表示と DOM の順序が一致しなくなります。これは、スクリーンリーダーなどの支援技術を使っている視覚障害者に不利な影響を及ぼします。視覚的な (CSS の) 順序が重要である場合は、スクリーンリーダーの利用者は正しい読み上げ順序でアクセスすることができなくなります。

* Flexbox & the keyboard navigation disconnect — Tink
* Source Order Matters | Adrian Roselli
* MDN "WCAG を理解する ― ガイドライン 1.3 の解説"
* Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0
公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | フレックスアイテム、グリッドアイテム、フレックスおよびグリッドコンテナーの絶対位置指定の子 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | integer |

形式文法
----
```

order =   
  [ <'layout-order'> <'reading-order'>? ]  |  
  [ [ reading || layout ] && <integer> ]     
  
```

例
-

### フレックスコンテナー内のアイテムの並べ替え

以下の CSS コードは伝統的な、コンテンツブロックを囲む 2 つのサイドバーによるレイアウトを生成します。 Flexible Box Layout モジュールでは、垂直方向のサイズが同じで水平方向の空間を可能な限り多く使用するブロックを、自動的に作成します。

#### HTML


```html
<header>...</header>
<main>
  <article>Article</article>
  <nav>Nav</nav>
  <aside>Aside</aside>
</main>
<footer>...</footer>
```


#### CSS


```css
main {
  display: flex;
  text-align: center;
}
main > article {
  flex: 1;
  order: 2;
}
main > nav {
  width: 200px;
  order: 1;
}
main > aside {
  width: 200px;
  order: 3;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Display Module Level 3 # order-property |

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

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

関連情報
----

* CSS フレックスボックスガイド: *フレックスボックスの基本概念*
* CSS フレックスボックスガイド: *フレックスアイテムの順序*
* CSS グリッドガイド: *グリッドレイアウトとアクセシビリティ*
CSS モーションパス
===========

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

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

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

**モーションパス** (Motion Path) は CSS のモジュールの一つで、任意のグラフィックオブジェクトを独自の経路に沿って動作させるためのものです。

この概念は、ある経路に従って動作する要素をアニメーションさせたい場合、以前は裁量権がアニメーションの推移や位置などしかなかったのですが、これは理想的はなく、単純な動作しかできませんでした。 `offset-path` によって、任意の形状の特定の経路を定義することができます。そして、 `offset-distance` により経路に沿って動かすことができ、 `offset-rotate` を用いて任意の位置での向きを選択することができます。

基本的な例
-----


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



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

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

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

### プロパティ

* `offset`
* `offset-anchor`
* `offset-distance`
* `offset-path`
* `offset-position`
* `offset-rotate`
仕様書
---

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

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

offset プロパティ
------------

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