recursal/MDN huggingface dataset:
speak-as
========

**`speak-as`** 記述子は、与えられた `@counter-style` で構築されたカウンター記号が、どのように話し言葉で表現されるかを指定します。例えば、カウンター記号を数値として話すか、あるいは単にオーディオキューで表現するかを指定することができます。

構文
--


```css
/\* キーワード値 \*/
speak-as: auto;
speak-as: bullets;
speak-as: numbers;
speak-as: words;
speak-as: spell-out;

/\* @counter-style 名の値 \*/
speak-as: <counter-style-name>;
```

### 値

`auto`

もし `speak-as` の値が `auto` と指定された場合、`speak-as` の有効値は `system` 記述子の値に基づいて決定されます。

* `system` の値が `alphabetic` の場合、 `speak-as` の有効な値は `spell-out` になります。
* `system` が `cyclic` の場合、 `speak-as` の有効な値は `bullets` です。
* `system` が `extends` の場合、 `speak-as` の値は拡張スタイルで `speak-as: auto` が指定されている場合と同じになります。
* 他の場合はすべて、 `auto` を設定すると `speak-as: numbers` を設定するのと同じ効果になります。

`bullets`

順序なしリストの項目を表すためにユーザーエージェントで定義されたフレーズまたはオーディオキューが読み上げられます。

`numbers`

カウンターの数値が、文書の言語で読み上げられます。

`words`

ユーザーエージェントは、通常通りカウンター値を生成し、それを文書の言語の単語として読み上げます。

`spell-out`

ユーザーエージェントは通常通りカウンター表現を生成し、それを 1 文字ずつ読み上げます。ユーザーエージェントが特定のカウンター記号を読み上げる方法を知らない場合、ユーザーエージェントは `speak-as` の値が `numbers` であるかのように読み上げるかもしれません。

`<counter-style-name>`

別のカウンタースタイルの名前を `<custom-ident>` として指定します。もし含まれていれば、カウンターはそのカウンタースタイルで指定された形式で発声されます。これは、 `fallback` 記述子を指定するのと同じようなものです。指定されたスタイルが存在しない場合、 `speak-as` の既定値は `auto` です。

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

`speak-as` プロパティに対する支援技術は非常に限られています。ページの目的を理解するために重要な情報を伝えるためには、このプロパティに依存しないようにしてください。

Let's Talk About Speech CSS | CSS Tricks

公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@counter-style` |
| 初期値 | `auto` |
| 計算値 | 指定通り |

形式文法
----
```

auto                 |
bullets              |
numbers              |
words                |
spell-out            |
<counter-style-name>

<counter-style-name> = <custom-ident>
```

例
-

### カウンターの読み上げ方を設定

#### HTML


```html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
```


#### CSS


```css
@counter-style speak-as-example {
  system: fixed;
  symbols:     ;
  suffix: " ";
  speak-as: numbers;
}

.list {
  list-style: speak-as-example;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-speak-as |

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

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

関連情報
----

* `list-style`, `list-style-image`, `list-style-position`
* `symbols()`、無名のカウンタースタイルを生成する関数記法
symbols
=======

**`symbols`** は CSS の記述子で、指定されたカウンターシステムがカウンター表現を構築するために使用する記号を指定するために使用します。

構文
--

`symbols` 記述子は、 1 つ以上の `<symbol>` で指定します。

### 値

`<symbol>`

そのカウンターシステムで使用される記号を表します。これは以下のデータ型のうちの一つである必要があります。

* `<string>`
* `<image>` (注: この値は「リスクあり」であり、仕様書から削除されるかもしれません。これはまだ実装されていません。)
* `<custom-ident>`

解説
--

記号は文字列、画像、識別子の何れかで指定することができます。これは `@counter-style` アットルールの中で使用されます。


```css
symbols: A B C D E;
symbols: "\24B6" "\24B7" "\24B8" D E;
symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
symbols: url("first.svg") url("second.svg") url("third.svg");
symbols: indic-numbers;
```


`symbols` 記述子は、 `system` 記述子の値が `cyclic`, `numeric`, `alphabetic`, `symbolic`, `fixed` の何れかである場合に指定する必要があります。 `additive` システムを使用する場合は、 symbols を指定する代わりに `additive-symbols` を使用してください。

公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@counter-style` |
| 初期値 | `n/a (required)` |
| 計算値 | 指定通り |

形式文法
----
```

<symbol>+

<symbol> =
  <string>       |
  <image>        |
  <custom-ident>
```

例
-

### カウンター記号の設定

#### HTML


```html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
```


#### CSS


```css
@counter-style symbols-example {
  system: fixed;
  symbols: A "1" "\24B7" D E;
}

.list {
  list-style: symbols-example;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-symbols |

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

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

関連情報
----

* `symbols` 記述子は `@counter-style` アットルールの中で使用されます。
* `list-style`, `list-style-image`, `list-style-position`
* `symbols()`, 無名のカウンタースタイルを生成する関数記法
* `url()` 関数
range
=====

カスタムカウンターのスタイルを定義する際、 **`range`** 記述子により、スタイルが適用されるカウンター値の範囲を指定することができます。カウンターの値が指定された範囲の外にある場合、代替スタイルがそのマーカーの表現を構築するために使用されます。

構文
--


```css
/\* キーワード値 \*/
range: auto;

/\* 範囲の値 \*/
range: 2 5;
range: infinite 10;
range: 6 infinite;
range: infinite infinite;

/\* 複数の範囲の値 \*/
range:
  2 5,
  8 10;
range:
  infinite 6,
  10 infinite;
```

### 値

`auto`

範囲はカウンターシステムによって決まります。

* cyclic, numeric, fixed の各システムでは、範囲は負の無限大から正の無限大までです。
* alphabetic および symbolic システムでは、範囲は 1 から正の無限大までです。
* additive システムでは、範囲は 0 から正の無限大までです。
* extends システムでは、範囲は拡張されたシステムのために自動的に生成されます。 複雑な定義済みスタイル（§7 複雑な定義済みカウンタースタイル）を拡張する場合、範囲はスタイルの定義範囲になります。

`[ [ | infinite ]{2} ]#`

 カンマで区切られた範囲のリストを定義します。個々の範囲については、最初の値が下限、 2 番目の値が上限となります。範囲は包括的であり、常に下限と上限の両方の数値を含むことを意味します。範囲の最初の値として無限大が使用された場合は負の無限大を表し、 2 番目の値として使われた場合は正の無限大を表します。カウンタースタイルの範囲は，リストで定義されたすべての範囲を合わせたものとなります。
 いずれかの範囲の下限が上限より大きい場合は、その記述子全体は無効となり、無視されます。


解説
--

range 記述子の値は、 auto またはカンマで区切られた下限値と上限値を整数で指定することができます。

auto の場合、 cyclic, numeric, fixed システムでは、負の無限大から正の無限大までの範囲になります。 alphabetic および symbolic システムでは， 1 から正の無限大の範囲になります。 additive システムでは、 auto は 0 から正の無限大の範囲になります。 extends システムの場合，範囲は auto が拡張システムに対して生成するすべてのものになります。

range を整数で指定する場合、無限大を表す値として `infinite` を使用することができます。もし *infinite* が範囲の最初の値として指定された場合、負の無限大として解釈されます。上限値として使われた場合は、正の無限大とみなされます。

公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@counter-style` |
| 初期値 | `auto` |
| 計算値 | 指定通り |

形式文法
----
```

[ [ <integer> | infinite ]{2} ]# |
auto
```

例
-

### 範囲を超えるカウンタースタイルを設定


```html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ul>
```



```css
@counter-style range-multi-example {
  system: cyclic;
  symbols: "\25A0" "\25A1";
  range:
    2 4,
    7 9;
}

.list {
  list-style: range-multi-example;
}
```


上記のリストは次のように表示されます。

:仕様書
---

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-range |

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

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

関連情報
----

* `list-style`, `list-style-image`, `list-style-position`
* `symbols()`、無名のカウンタースタイルを生成する関数記法
suffix
======

**`suffix`** は `@counter-style` ルールの記述子で、マーカーの表現に追加されるものを指定します。

構文
--


```css
/\* <symbol> values \*/
suffix: "";
suffix: ") ";
suffix: url(bullet.png);
```

### 値

`<symbol>`

マーカー表現に追加される記号を指定します。 `<string>`, `<image>`, `<custom-ident>` が指定できます。

公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@counter-style` |
| 初期値 | ". " (ピリオドの後に空白) |
| 計算値 | 指定通り |

形式文法
----
```

<symbol>

<symbol> =
  <string>       |
  <image>        |
  <custom-ident>
```

例
-

### カウンターの接尾辞を設定

#### HTML


```html
<ul class="choices">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>None of the above</li>
</ul>
```


#### CSS


```css
@counter-style options {
  system: fixed;
  symbols: A B C D;
  suffix: ") ";
}

.choices {
  list-style: options;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-suffix |

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

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

関連情報
----

* `list-style`, `list-style-image`, `list-style-position`
* `symbols()`, 無名のカウンタースタイルを生成する関数記法
fallback
========

**`fallback`** 記述子は、現在のカウンタースタイルが特定のカウンター値でマーカー表現を生成できなかった場合に、代替で使用されるカウンタースタイルを指定するために使用します。

構文
--


```css
/\* キーワード値 \*/
fallback: lower-alpha;
fallback: custom-gangnam-style;
```

解説
--

指定された代替スタイルも表現を構築できなかった場合、そのさらに代替スタイルが使用されます。有効な代替スタイルが指定されていなかった場合は、既定で `decimal` になります。

代替スタイルが使用される場面は 2 つあります。

* カウンタースタイルに `range` 記述子が指定されていた場合、その範囲を外れた値を表現するのに代替スタイルが使用されます。
* `fixed` が `system` で使用され、すべてのリスト項目に対応させる記号が不足した場合、残りのリスト項目に代替スタイルが使用されます。
公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@counter-style` |
| 初期値 | `decimal` |
| 計算値 | 指定通り |

形式文法
----
```

<counter-style-name>

<counter-style-name> = <custom-ident>
```

例
-

### カウンターの代替スタイルの指定

#### HTML


```html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
```


#### CSS


```css
@counter-style fallback-example {
  system: fixed;
  symbols: "\24B6" "\24B7" "\24B8";
  fallback: upper-alpha;
}

.list {
  list-style: fallback-example;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-fallback |

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

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

関連情報
----

* `list-style`, `list-style-image`, `list-style-position`
* `symbols()`: 無名のカウンタースタイルを生成する関数記法
additive-symbols
================

**`additive-symbols`** 記述子は、カウンターの `system` (en-US) 記述子が加算的 (`additive`) な場合の記号を指定することができます。 `additive-symbols` 記述子では*加算的なタプル*を、それぞれ記号と非負数の整数による重みの組で定義します。加算的なシステムは、ローマ数字のような sign-value numbering を構築するために使われます。

構文
--


```css
additive-symbols: 3 "0";
additive-symbols:
  3 "0",
  2 "\2E\20";
additive-symbols:
  3 "0",
  2 url(symbol.png);
```


`system` 記述子が `cyclic`, `numeric`, `alphabetic`, `symbolic`, `fixed` の場合は、 `symbols()` 記述子を `additive-symbols` の代わりに使用してください。

公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@counter-style` |
| 初期値 | `n/a (required)` |
| 計算値 | 指定通り |

形式文法
----
```

[ <integer [0,∞]> && <symbol> ]#

<symbol> = <string> | <image> | <custom-ident>
```

例
-

### 加算的シンボルの指定

#### HTML


```html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
```


#### CSS


```css
@counter-style additive-symbols-example {
  system: additive;
  additive-symbols:
    V 5,
    IV 4,
    I 1;
}
.list {
  list-style: additive-symbols-example;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-symbols |

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

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

関連情報
----

* `list-style`, `list-style-image`, `list-style-position`
* `symbols()`、無名のカウンタースタイルを作成する関数記法
pad
===

**`pad`** 記述子を使用すると、マーカー表現に最小限の長さが必要な場合に、カスタムカウンターのスタイル定義を行うことができます。

構文
--


```css
pad: 3 "0";
```

### 値

`<integer> && <symbol>`

`<integer>` で、すべてのカウンター表現が到達しなければならない最小の長さを指定します。負の値は使用できません。最小の長さに達しない場合は、指定した `<symbol>` で埋め尽くされます。

解説
--

マーカー表現が指定されたパッド長より短い場合、指定されたパッド記号で埋められます。パッド長より長いマーカ表現は、通常通り構築される。 pad 記述子では、最小マーカー長を整数で、パッドに使用する記号を第 2 引数として指定します。 pad 記述子の一般的な使用法は、リストが 1、2、3... ではなく、 01 から始まって 02、03... と続くような番号付けが必要な場合です。

公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@counter-style` |
| 初期値 | `0 ""` |
| 計算値 | 指定通り |

形式文法
----
```

<integer> && <symbol>

<symbol> =
  <string>       |
  <image>        |
  <custom-ident>
```

例
-

### カウンターをゼロ埋めにする

#### HTML


```html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
```


#### CSS


```css
@counter-style pad-example {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5";
  pad: 2 "0";
}

.list {
  list-style: pad-example;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-pad |

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

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

関連情報
----

* `list-style`, `list-style-image`, `list-style-position`
* `symbols()`、無名のカウンタースタイルを生成する関数記法
prefix
======

**`prefix`** は `@counter-style` ルールの記述子で、マーカーに先立って表示される内容を指定します。指定されていない場合、既定値は `""` (空文字列) になります。

構文
--


```css
/\* <symbol> 値 \*/
prefix: "»";
prefix: "Page ";
prefix: url(bullet.png);
```

### 値

`<symbol>`

マーカーに先立って表示される `<symbol>` を指定します。 `<string>`, `<image>`, `<custom-ident>` の何れかです。

公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@counter-style` |
| 初期値 | "" (空文字列) |
| 計算値 | 指定通り |

形式文法
----
```

<symbol>

<symbol> =
  <string>       |
  <image>        |
  <custom-ident>
```

例
-

### カウンターに接頭辞を追加

#### HTML


```html
<ul class="index">
  <li>The Boy Who Lived</li>
  <li>The Vanishing Glass</li>
  <li>The Letters from No One</li>
  <li>The Keeper of the Keys</li>
  <li>Diagon Alley</li>
</ul>
```


#### CSS


```css
@counter-style chapters {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  prefix: "Chapter ";
}

.index {
  list-style: chapters;
  padding-left: 15ch;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-prefix |

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

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

関連情報
----

* `list-style`, `list-style-image`, `list-style-position`
* `symbols()`、無名のカウンタースタイルを作成する関数記法
size
====

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

CSS の **`size`** アット規則記述子は、 `@page` アット規則で使用し、ページを表現するために使用するボックスの寸法と向きを定義します。多くの場合、この寸法は印刷ページの適用可能な対象の寸法に対応します。

寸法は「拡縮可能な」キーワード (この場合、ページの有効な大きさ全体を使用します) 又は絶対的な長さのどちらかで定義します。

構文
--


```css
/\* 拡縮可能な寸法のキーワード値 \*/
size: auto;
size: portrait;
size: landscape;

/\* <length> 値 \*/
/\* 1 値: 高さ = 幅 \*/
size: 6in;

/\* 2 値: 幅の後に高さ\*/
size: 4in 6in;

/\* 絶対寸法のキーワード値 \*/
size: A4;
size: B5;
size: JIS-B4;
size: letter;

/\* 寸法と方向の混合 \*/
size: A4 portrait;
```

### 値

`auto`

ユーザーエージェントがページの寸法を決定します。多くの場合、対象となる用紙の寸法と向きが使用されます。

`landscape`

ページのコンテンツは横向きモード (ボックスの長辺が水平) で表示されます。

`portrait`

ページのコンテンツは縦向きモード (ボックスの長辺が垂直) で表示されます。これが既定の向きです。

`<length>`

何らかの長さの値 (`<length>` を参照)。最初の値はページボックスの幅に対応し、二番目の値は高さに対応します。一つしか値が提供されない場合は、幅と高さの両方に使用されます。

`<page-size>`

A5

これは標準の ISO の寸法 148mm x 210mm に一致します。

A4

これは標準の ISO の寸法 210mm x 297mm に一致します。 (個人の印刷では最もよく使われる寸法です。)

A3

これは標準の ISO の寸法 297mm x 420mm に一致します。

B5

これは標準の ISO の寸法 176mm x 250mm に一致します。

B4

これは標準の ISO の寸法 250mm x 353mm に一致します。

JIS-B5

これは JIS 標準の寸法 182mm x 257mm に対応します。

JIS-B4

これは JIS 標準の寸法 257mm x 364mm に対応します。

letter

このキーワードは北米のレター用紙の寸法、すなわち 8.5in x 11in と同等です。

legal

このキーワードは北米のリーガル用紙の寸法、すなわち 8.5in x 14in と同等です。

ledger

このキーワードは北米の ledger 用紙の寸法、すなわち 11in x 17in と同等です。


公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@page` |
| 初期値 | `auto` |
| 計算値 | 指定通り。ただし相対的な長さはは絶対的な長さに変換される |

形式文法
----
```

size =   
  <length [0,∞]>{1,2}                          |  
  auto                                         |  
  [ <page-size> || [ portrait | landscape ] ]    
  
```

例
-

### 寸法と向きの指定


```css
@page {
  size: 4in 6in landscape;
}
```

### @media 規則内部の入れ子


```css
@media print {
  @page {
    size: 50mm 150mm;
  }
}
```

仕様書
---

| Specification |
| --- |
| CSS Paged Media Module Level 3 # page-size-prop |

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

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

関連情報
----

* `bleed`
* `marks`
メイソンリーレイアウト
===========

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

CSS グリッドレイアウト仕様書の Level 3 では、 `masonry` の値が `grid-template-columns` と `grid-template-rows` に含まれています。このガイドでは、メイソンリー（組積）レイアウトとは何か、どのように使用するかについて詳しく説明します。

メイソンリーレイアウトとは、一方の軸（多くの場合は列）が一般的な厳格なグリッドレイアウトを使用し、もう一方の軸がメイソンリーレイアウトを使用するレイアウト方法です。メイソンリーレイアウトでは、短いアイテムの後に隙間ができるような厳密なグリッドではなく、次の行のアイテムが隙間を完全に埋めるように立ち上がっていきます。

メイソンリーレイアウトの作成
--------------

最も一般的なメイソンリーレイアウトを作成するには、列がグリッドの軸、行が組積の軸になります。このレイアウトは `grid-template-columns` と `grid-template-rows` で定義します。


```css
.container {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-template-rows: masonry;
}
```


このコンテナーの子要素は、通常のグリッドレイアウトの自動配置と同じように、アイテムごとに行に沿って配置されます。しかし、新しい行に移動すると、アイテムは組積アルゴリズムに従って表示されます。アイテムは最も余裕のある列に配置されるため、厳密な行のトラックがなくてもぎっしりとしたレイアウトになります。

また、アイテムを列にして読み込むメイソンリーレイアウトも可能です。

グリッド軸の制御
--------

グリッド軸では、グリッドレイアウトで期待した通りに動作します。キーワード `span` を使えば、自動配置を維持したまま、アイテムを複数のトラックにまたがって配置することができます。また、線ベースの位置指定を使ってアイテムを配置することもできます。

### アイテムをまたがらせるメイソンリーレイアウト

この例では、 2 つのアイテムが 2 本のトラックにまたがり、組積アイテムがそれを取り囲むように配置されています。

この例では、柱の位置が決まっているアイテムが含まれています。配置が確定しているアイテムは、メイソンリーレイアウトが行われる前に配置されます。

組積軸の制御
------

組積軸は、通常のグリッドの自動配置ルールではなく、組積のレイアウトルールに従っているため、異なるルールで動作します。この軸を制御するために、グリッド Level 3 仕様で定義されている 3 つの追加プロパティ `align-tracks`、`justify-tracks`、`masonry-auto-flow` があります。

### masonry-auto-flow

`masonry-auto-flow` プロパティでは、組積アルゴリズムの動作を変更することができます。`next` という値を与えると、アイテムは空きスペースのあるトラックに入るのではなく、グリッド軸上に順番に表示されます。また、`positioned` という値を与えると、配置が確定しているアイテムを無視して、order で変更した文書順でアイテムを配置します。

### align-tracks

`align-tracks` プロパティは、グリッドコンテナー内のアイテムをブロック軸の組積で整列させることができます。このプロパティは、フレックスレイアウトの動作と同じように、トラック内のアイテムを整列させます。このプロパティは `align-content` と同じ値を取りますが、複数の値を指定して、グリッド軸のトラックごとに異なる整列値を設定することができます。

トラックよりも多くの値を指定すると、追加の値は無視されます。値よりもトラックの数が多い場合、追加のトラックは最後に指定した値を使用します。

### justify-tracks

`justify-tracks` プロパティは、 align-tracks と同じように動作しますが、組積の軸がインライン軸の場合に使用されます。

代替
--

組積に対応していないブラウザーでは、代わりに通常のグリッドの自動配置が使用されます。

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

### css.properties.grid-template-columns.masonry

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

### css.properties.grid-template-rows.masonry

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

関連情報
----

* Native CSS Masonry Layout In CSS Grid
image-set()
===========

**`image-set()`** は CSS の関数表記で、主に高解像度の画面において、指定されたセットから最も適切な CSS 画像をブラウザーに選択させる方法です。

解像度や帯域幅は、端末や ネットワークのアクセスによって異なります。`image-set()` 関数は、ユーザーの端末に最も適した画像解像度を提供します。画像オプションの集合を提供し、それぞれに関連する解像度宣言を付けて、そこからブラウザーが端末や設定に最も適したものを選び出します。解像度はファイルサイズのプロキシーとして使用することができます。高解像度の画面を持つ遅いモバイル接続のユーザーエージェントは、高解像度の画像を読み込むのを待つよりも、低解像度の画像を受信することを好むかもしれません。

`image-set()` はそれぞれのユーザーが必要なことを判断するのではなく、オプションを提供することができます。

構文
--


```css
/\* 解像度に基づいて画像を選択 \*/
image-set(
  "image1.jpg" 1x,
  "image2.jpg" 2x
);

image-set(
  url("image1.jpg") 1x,
  url("image2.jpg") 2x
);

/\* 解像度に基づいてグラデーションを選択 \*/
image-set(
  linear-gradient(blue, white) 1x,
  linear-gradient(blue, green) 2x
);

/\* 対応しているファイル形式に基づいて画像を選択 \*/
image-set(
  url("image1.avif") type("image/avif"),
  url("image2.jpg") type("image/jpeg")
);
```

### 値

`<image>`

`<image>` は画像セット以外のあらゆる画像を指定できます。 `image-set()` 関数は他の `image-set()` 関数の中に入れ子にすることはできません。

`<string>`

画像への URL です。

`<resolution>` 省略可

`<resolution>` の単位には、`x` や `dppx` (dots per pixel 単位)、dpi (dots per inch)、dpcm (dots per centimeter) があります。 `image-set()` 内の画像はすべて、解像度が固有でなければなりません。

`type(<string>)`省略可

有効な MIME タイプの文字列、例えば "image/jpeg" です。

### 形式文法
```

<image-set()> =   
  image-set( <image-set-option># )    
  
<image-set-option> =   
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?    
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

例
-

### image-set() を使用して代替の background-image オプションの提供

この例は `image-set()` を使用して 2 つの代替 `background-image` オプションを提供する方法を示しています。解像度の必要性に応じて、通常版と高解像度版から選択します。

**メモ:** 上記の例では、 `-webkit` の接頭辞が付いた版を Chrome および Safari に対応させるために併用しています。 Firefox 90 では（標準のプロパティを追加していない開発者の互換性を確保するために） `-webkit-image-set()` を `image-set()` の別名として使用する対応が追加されました。

### image-set() を使用して別な画像形式を提供

次の例では `type()` 関数を使用して画像を AVIF および JPEG 形式で提供しています。ブラウザーが avif に対応している場合は、このバージョンが選択されます。それ以外の場合は jpeg バージョンを使用します。

#### 代替画像の提供

`image-set()` には内蔵のフォールバックはありません。したがって、この関数に対応していないブラウザーのための背景画像を設定するには、`image-set()` を使用する行の前に別の宣言が必要です。


```css
.box {
  background-image: url("large-balloons.jpg");
  background-image: image-set(
    "large-balloons.avif" type("image/avif"),
    "large-balloons.jpg" type("image/jpeg")
  );
}
```

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

ブラウザーは支援技術に対して、背景画像についての特別な情報を何も提供しません。これは主に読み上げソフトにとって重要であり、読み上げソフトは背景画像が存在することをアナウンスせず、したがってユーザーには何も伝えられません。もし画像がページ全体の目的を理解するのに重要な情報を含んでいる場合は、文書中に意味的に記述するようにしてください。

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

| Specification |
| --- |
| CSS Images Module Level 4 # image-set-notation |

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

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

関連情報
----

* `<image>`
* `image()`
* `element()`
* `url()`
* `<gradient>`
* `cross-fade()`
paint()
=======

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

**`paint()`** は CSS の関数で、 PaintWorklet で生成された `<image>` の値を定義します。

構文
--


```css
paint(workletName, parameters)
```


凡例

*workletName*

登録された Worklet の名前です。

*parameters*

PaintWorklet へ渡される省略可能な追加の引数です。

例
-

### 基本的な使用例

CSS の paint() 関数で追加の引数を渡すことができます。この例では、 2 つの引数を渡しています。リストアイテムのグループの背景画像が塗りつぶしか輪郭線だけかと、輪郭線の太さです。
```

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
  <li>item 11</li>
  <li>item 12</li>
  <li>item 13</li>
  <li>item 14</li>
  <li>item 15</li>
  <li>item 16</li>
  <li>item 17</li>
  <li>item 18</li>
  <li>item 19</li>
  <li>item 20</li>
</ul>
```


```
CSS.paintWorklet.addModule(
  "https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js",
);
```



```css
li {
  --boxColor: hsla(55, 90%, 60%, 1);
  background-image: paint(hollowHighlights, stroke, 2px);
}

li:nth-of-type(3n) {
  --boxColor: hsla(155, 90%, 60%, 1);
  background-image: paint(hollowHighlights, filled, 3px);
}

li:nth-of-type(3n + 1) {
  --boxColor: hsla(255, 90%, 60%, 1);
  background-image: paint(hollowHighlights, stroke, 1px);
}
```


boxColor を定義しているセレクターブロックにカスタムプロパティを設定しました。カスタムプロパティは PaintWorklet にアクセスすることができます。

仕様書
---

| Specification |
| --- |
| CSS Painting API Level 1 # paint-notation |

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

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

関連情報
----

* `PaintWorklet` (en-US)
* `CSS Painting API`
* CSS Painting API の使用
* `<image>`
* `canvas` (en-US)
polygon()
=========

**`polygon()`** は CSS の関数で、`<basic-shape>` データ型の一つです。

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

構文
--


```css
clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%);
```

### 値

`<fill-rule>`

オプションで `nonzero` (省略時の既定値) または `evenodd` のどちらかであり、塗りつぶしルール (en-US)を指定します。

`[<length-percentage><length-percentage>]#`

3 組以上の値です (多角形は少なくとも三角形を描く必要があります)。これらの値は、リファレンスボックスを基準にして描かれる座標です。

例
-

### 基本的な polygon() の例

この例では、`polygon()` を使って、テキストを回り込ませるシェイプを作成しています。値を変更するとシェイプの変化を確認することができます。

仕様書
---

| Specification |
| --- |
| CSS Shapes Module Level 1 # funcdef-basic-shape-polygon |

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

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

関連情報
----

* このデータ型を使用するプロパティ: `clip-path`, `shape-outside`
* 基本シェイプのガイド
inset()
=======

**`inset()`** は CSS の関数で、`<basic-shape>` データ型の一つです。内部の矩形を定義します。

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

構文
--


```css
shape-outside: inset(20px 50px 10px 0 round 50px);
```

### 値

`<length-percentage>{1,4}`

4 つの引数がすべて与えられた場合、参照ボックスの内側に向けた上、右、下、左のオフセットを表し、内部の矩形の辺の位置を定義します。これらの引数は margin 一括指定の構文に従っており、4 つの内側の位置すべてに 1 つ、2 つ、または 4 つの値を設定することができます。

`<border-radius>`

オプションの `<border-radius>` 引数は、 border-radius 一括指定の構文を使用して内部の矩形の角の丸みを定義します。

例
-

### 基本的な内側の矩形の例

下記の例では、浮動要素の上にコンテンツを引き寄せるために、`inset()` のシェイプを使用しています。オフセット値を変更するとシェイプの変化を確認することができます。

仕様書
---

| Specification |
| --- |
| CSS Shapes Module Level 1 # funcdef-basic-shape-inset |

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

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

関連情報
----

* このデータ型を使用するプロパティ: `clip-path`, `shape-outside`
* 基本シェイプのガイド
circle()
========

**`circle()`** は CSS の関数で、`<basic-shape>` データ型の一つです。

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

構文
--


```css
shape-outside: circle(50%);
clip-path: circle(6rem at 12rem 8rem);
```

### 値

`<shape-radius>`

`<length>`、`<percentage>`、または `closest-side` および `farthest-side` の値の何れかです。

`closest-side`

シェイプの中心から参照ボックスの最も近い辺までの長さを使用します。円の場合は、あらゆる軸で最も近い辺となります。

`farthest-side`

シェイプの中心から参照ボックスの最も遠い辺までの長さを使用します。円の場合は、あらゆる軸で最も近い辺となります。


`<position>`

円の中心を移動します。`<length>`、`<percentage>`、または `left` のような値の何れかです。

例
-

### 基本的な円

下の例では、`shape-outside` プロパティの値が `circle(50%)` となっており、浮動要素に円を定義して、テキストが回り込むようになっています。

仕様書
---

| Specification |
| --- |
| CSS Shapes Module Level 1 # funcdef-basic-shape-circle |

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

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

関連情報
----

* このデータ型を使用するプロパティ: `clip-path`, `shape-outside`
* 基本シェイプのガイド