recursal/MDN huggingface dataset:
::slotted()
===========

**`::slotted()`** は CSS の 擬似要素で、 HTML テンプレート内にあるスロットに配置された任意の要素を表します (詳しくはテンプレートとスロットの利用をご覧ください)。

これは shadow DOM 内に配置された CSS の中で使われた時のみ機能します。なお、このセレクターはスロット内に配置されたテキストノードは選択しません。実際の要素のみを対象にします。


```css
/\* スロット内に配置された任意の要素を選択 \*/
::slotted(\*) {
  font-weight: bold;
}

/\* スロット内に配置された <span> 要素を選択 \*/
::slotted(span) {
  font-weight: bold;
}
```

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

構文
--

Error: could not find syntax for this item例
-

### スロット化された要素を強調

以下のコードの断片は slotted-pseudo-element デモから取られたものです (ライブでもご覧ください)。

このデモでは、 3 つのスロットを持つ単純なテンプレートを使用します。


```html
<template id="person-template">
  <div>
    <h2>Personal ID Card</h2>
    <slot name="person-name">NAME MISSING</slot>
    <ul>
      <li><slot name="person-age">AGE MISSING</slot></li>
      <li><slot name="person-occupation">OCCUPATION MISSING</slot></li>
    </ul>
  </div>
</template>
```


カスタム要素 — `<person-details>` — は以下のように定義されています。


```js
customElements.define(
  "person-details",
  class extends HTMLElement {
    constructor() {
      super();
      let template = document.getElementById("person-template");
      let templateContent = template.content;

      const shadowRoot = this.attachShadow({ mode: "open" });

      let style = document.createElement("style");
      style.textContent =
        "div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }" +
        "h2 { margin: 0 0 10px; }" +
        "ul { margin: 0; }" +
        "p { margin: 10px 0; }" +
        "::slotted(\*) { color: gray; font-family: sans-serif; } ";

      shadowRoot.appendChild(style);
      shadowRoot.appendChild(templateContent.cloneNode(true));
    }
  },
);
```


`style` 要素のコンテンツを埋めると、スロットになるすべての要素を選択し (`::slotted(*)`)、それぞれに異なるフォントと色を与えているのが分かるでしょう。これにより、隣のコンテンツが埋まらなかったスロットよりも目立たせることができます。

この要素がページに挿入されると、以下のように見えます。


```html
<person-details>
  <p slot="person-name">Dr. Shazaam</p>
  <span slot="person-age">Immortal</span>
  <span slot="person-occupation">Superhero</span>
</person-details>
```

仕様書
---

| Specification |
| --- |
| CSS Scoping Module Level 1 # slotted-pseudo |

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

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

関連情報
----

* ウェブコンポーネント
user-select
===========

**`user-select`** は CSS のプロパティで、ユーザーがテキストを範囲選択できるかどうかを制御します。これは、テキストボックスを除いて、クロームとして読み込まれたコンテンツには影響を与えません。

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

構文
--


```css
/\* キーワード値 \*/
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

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


**メモ:** `user-select` は継承されるプロパティではありませんが、多くの場合、初期値の `auto` は継承されているように見えます。 WebKit/Chromium ベースのブラウザーは、仕様書に書かれている動作に従わず、このプロパティを継承するように実装して*おり*、いくつかの問題を発生させています。現在までに、 Chromium はこの問題を修正し、最終的な動作が仕様書に合うようにすることを選択しています。

### 値

`none`

対象要素とその子孫要素の文章は範囲選択できません。 `Selection` オブジェクトはこれらの要素も含むことができることに注意してください。

`auto`

`auto` の使用値は下記のように決められます。

* `::before` と `::after` の擬似要素では、使用値は `none` になります。
* 編集可能な要素の場合、使用値は `contain` になります。
* 上記以外で、親要素の `user-select` の使用値が `all` の場合、対象要素の使用値も `all` になります。
* 上記以外で、親要素の `user-select` の使用値が `none` の場合、対象要素の使用値も `none` になります。
* 上記以外の場合、使用値は `text` になります。

`text`

ユーザーはテキストを範囲選択できます。

`all`

この要素の内容は不可分的に選択されます。選択範囲が要素の一部を含んだ場合、選択範囲はすべての子孫要素を含む要素全体が含まれなければなりません。子孫要素でダブルクリックや右クリックを行うと、この値が付けられている最も上位の先祖要素が範囲選択されます。

`contain`

要素の内部から選択を始めることができます。しかし、選択範囲は要素の境界内のみに限定されます。


**メモ:** CSS UI 4 では、 `user-select: element` が `contain` に名称が変わります。

公式定義
----

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

形式文法
----
```

user-select =   
  auto     |  
  text     |  
  none     |  
  contain  |  
  all        
  
```

例
-

### HTML


```html
<p>このテキストを選択できるはずです。</p>
<p class="unselectable">ちょっと、このテキストの選択はできませんよ！</p>
<p class="all">一度クリックすると、このテキスト全体を選択します。</p>
```

### CSS


```css
.unselectable {
  -webkit-user-select: none; /\* Safari \*/
  user-select: none;
}

.all {
  -webkit-user-select: all;
  user-select: all;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # content-selection |

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

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

関連情報
----

* `user-select: contain` のポリフィル
* `::selection` 擬似要素
* JavaScript の `Selection` オブジェクト
-webkit-overflow-scrolling
==========================

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

`-webkit-overflow-scrolling` は CSS のプロパティは、指定された要素で惰性付き (momentum-based) スクロールを使用するかどうかを制御します。

構文
--

### 値

`auto`

「通常」のスクロールで、タッチパネルから指を離すとすぐにコンテンツはスクロールが停止します。

`touch`

惰性付きのスクロールで、コンテンツはスクロールのジェスチャーが終了し、タッチパネルから指を離した後もスクロールを続けます。スクロールを続ける速度と期間は、スクロールのジェスチャーがどれだけすばやく行われたかによります。また、新しい重ね合わせコンテキストを生成します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | スクロールするボックス |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

### HTML


```html
<div class="scroll-touch">
  <p>This paragraph has momentum scrolling</p>
</div>
<div class="scroll-auto">
  <p>This paragraph does not.</p>
</div>
```

### CSS


```css
div {
  width: 100%;
  overflow: auto;
}

p {
  width: 200%;
  background: #f5f9fa;
  border: 2px solid #eaf2f4;
  padding: 10px;
}

.scroll-touch {
  -webkit-overflow-scrolling: touch; /\* Lets it scroll lazy \*/
}

.scroll-auto {
  -webkit-overflow-scrolling: auto; /\* Stops scrolling immediately \*/
}
```

### 結果

仕様書
---

仕様書では定義されていません。 Apple には Safari CSS Reference に説明があります。

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

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

関連情報
----

* CSS-Tricks article with demo
* Smashing Magazine - describing the effect of scroll bouncing and how it works on different web browsers
* Safari 13 Release notes: すべてのフレームと `overflow:scroll` 要素に、一本指による高速スクロールの対応が追加され、`-webkit-overflow-scrolling: touch` を設定する必要がなくなったことを示しています。
padding-block
=============

**`padding-block`** は CSS の一括指定プロパティで、論理的なブロック方向の先頭と末尾のパディングを設定します。これは要素の書字方向やテキストの向きに応じて物理的なパディングに変換されます。

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

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

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

* `padding-block-start`
* `padding-block-end`
構文
--


```css
/\* <length> 値 \*/
padding-block: 10px 20px; /\* 絶対的な長さ \*/
padding-block: 1em 2em; /\* テキストの大きさに対する相対値 \*/
padding-block: 10px; /\* 先頭と末尾の両方を設定 \*/

/\* <percentage> 値 \*/
padding-block: 5% 2%; /\* 直近のブロックコンテナーの幅に対する相対値 \*/

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


`padding-block` プロパティでは、1 つまたは 2 つの値を指定できます。1 つの値が指定された場合は、 `padding-block-start` と `padding-block-end` の両方の値として使用されます。2 つの値が指定された場合、1 つ目の値が `padding-block-start` に、2 つ目の値が `padding-block-end` に使用されます。

### 値

`padding-block` プロパティは、 `padding-left` プロパティと同じ値を取ります。

解説
--

これらの値は、 `padding-top` と `padding-bottom`、または `padding-right` と `padding-left` プロパティに、 `writing-mode`, `direction`, `text-orientation` で定義された値に従って対応します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `padding-block-start`: `0`
* `padding-block-end`: `0`
 |
| 適用対象 | `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group`, `table-column` を除くすべての要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの論理的な幅 |
| 計算値 | 一括指定の次の各プロパティとして* `padding-block-start`: `length` 通り
* `padding-block-end`: `length` 通り
 |
| アニメーションの種類 | length |

形式文法
----
```

padding-block =   
  <'padding-top'>{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-rl;
  padding-block: 20px 40px;
  background-color: #c8c800;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-padding-block |

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

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

関連情報
----

* CSS 論理的プロパティと値
* 対応する物理的プロパティ: `padding-top`, `padding-right`, `padding-bottom`, `padding-left`
* `writing-mode`, `direction`, `text-orientation`
var()
=====

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

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

* Learn more
* See full compatibility
* Report feedback
CSS の **`var()`** 関数は、他のプロパティの値の一部に代わってカスタムプロパティ (「CSS 変数」と呼ばれることもあります) の値を挿入できます。

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

`var()` 関数は、プロパティ名、セレクター、またはプロパティ値以外のところでは使用できません。 (使用してしまうと、無効な構文が生成されるか、もしくはその変数に接続していない値が生成されてしまいます。)

構文
--

関数の最初の引数は、置換されるカスタムプロパティの名前です。関数のオプションの 2 番目の引数は、代替値として機能します。最初の引数で参照されるカスタムプロパティが無効な場合、関数は2番目の値を使用します。
```

<var()> =   
  var( <custom-property-name> , <declaration-value>? )    
  
```


**メモ:** 代替の構文は、カスタムプロパティの構文と同様にカンマを使用できます。たとえば `var(--foo, red, blue)` では、 `red, blue` を代替として定義します。つまり、最初のカンマから関数の最後にかけてのすべてが、代替値と見なされます。

### 値

`<custom-property-name>`

カスタムプロパティの名前で、 2 つのハイフンで始まる識別子で表されます。カスタムプロパティは、作成者とユーザーだけが使用できます。 CSS はここに提示されているものを超えて意味を与えません。

`<declaration-value>`

カスタムプロパティの代替値。カスタムプロパティが使用されているコンテキストが無効な場合に使用されます。この値には、改行、不等式の閉じ括弧、つまり `)`, `]`, `}`, トップレベルのセミコロン、感嘆符などの特別な意味を持つ文字を除く任意の文字を含めることができます。

例
-

### :root に設定されたカスタムプロパティの使用


```css
:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}
```

### プロパティが設定されていなかったときに使用するための代替値つきのカスタムプロパティ


```css
/\* 代替 \*/
/\* コンポーネント内のスタイル: \*/
.component .header {
  color: var(
    --header-color,
    blue
  ); /\* header-color という変数は設定されていないため、代替値である blue がセットされます \*/
}

.component .text {
  color: var(--text-color, black);
}

/\* より規模の大きなアプリケーションのスタイルでは \*/
.component {
  --text-color: #080;
}
```

仕様書
---

| Specification |
| --- |
| CSS Custom Properties for Cascading Variables Module Level 1 # using-variables |

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

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

関連情報
----

* `env(…)` – ユーザーエージェントによって制御される読み取り専用環境変数
* CSS 変数の利用
transform-box
=============

**`transform-box`** は CSS のプロパティで `transform`、独立した変換プロパティである `translate`、`scale`、`rotate`、および `transform-origin` プロパティが相対するレイアウトボックスを定義します。

構文
--


```css
/\* キーワード値 \*/
transform-box: content-box;
transform-box: border-box;
transform-box: fill-box;
transform-box: stroke-box;
transform-box: view-box;

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


`transform-box` プロパティは、以下のいずれかのキーワードで指定されます。

### 値

`content-box`

コンテンツボックスを参照ボックスとして使用します。 `<table>` の参照ボックスはテーブルのボックスではなく、テーブルを囲んでいるボックスの境界ボックスになります。

`border-box`

境界ボックスを参照ボックスとして使用します。 `<table>` の参照ボックスはテーブルのボックスではなく、テーブルを囲んでいるボックスの境界ボックスになります。

`fill-box`

そのオブジェクトのバウンディングボックスを参照ボックスとして使用します。

`stroke-box`

ストロークのバウンディングボックスを参照ボックスとして使用します。

`view-box`

直近の SVG のビューポートを参照ボックスとして使用します。 SVG ビューポートに `viewBox` 属性が指定されていた場合、参照ボックスは `viewBox` 属性によって設定された座標系の原点に配置されます。また、参照ボックスの寸法は `viewBox` 属性の幅と高さの値に設定されます。関連する CSS レイアウトボックスを持つ要素の場合、 `border-box` として動作します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `view-box` |
| 適用対象 | 座標変換可能要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

transform-box =   
  content-box  |  
  border-box   |  
  fill-box     |  
  stroke-box   |  
  view-box       
  
```

例
-

### SVG の transform-origin のスコープ

この例では、以下のような SVG があるとします。


```html
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
  <g>
    <circle id="center" fill="red" r="1" transform="translate(25 25)" />
    <circle id="boxcenter" fill="blue" r=".5" transform="translate(15 15)" />
    <rect
 id="box"
 x="10"
 y="10"
 width="10"
 height="10"
 rx="1"
 ry="1"
 stroke="black"
 fill="none" />
  </g>
</svg>
```


CSS では、長方形を無限に回転させるために変換を使用するアニメーションがあります。 `transform-box: fill-box` は `transform-origin` をバウンディングボックスの中心にするために使用しているので、長方形は配置されたまま回転します。これがないと、座標変換の原点は SVG キャンバスの中心になるので、極めて異なる効果になります。


```css
svg {
  width: 80vh;
  border: 1px solid #d9d9d9;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#box {
  transform-origin: 50% 50%; /\* 効果を見るには `0 0` 以外を指定する \*/
  transform-box: fill-box;
  animation: rotateBox 3s linear infinite;
}

@keyframes rotateBox {
  to {
    transform: rotate(360deg);
  }
}
```


この例は Pogany 氏によるものです。ライブ版はこの codepen をご覧ください。

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 1 # transform-box |

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

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

関連情報
----

* CSS 変換の使用
* `transform`, `transform-origin`
* 独立した座標変換プロパティ:
    + `translate`
    + `scale`
    + `rotate`
masonry-auto-flow
=================

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

**`masonry-auto-flow`** は CSS のプロパティで、CSS グリッドレイアウトにおいて組積を使用する際のアイテムの配置方法を変更します。

構文
--


```css
/\* キーワード値 \*/
masonry-auto-flow: pack;
masonry-auto-flow: next;
masonry-auto-flow: ordered;
masonry-auto-flow: definite-first;
masonry-auto-flow: next ordered;

/\* グローバル値 \*/
masonry-auto-flow: inherit;
masonry-auto-flow: initial;
maosnry-auto-flow: revert;
masonry-auto-flow: unset;
```


このプロパティは 2 つの形式のうちの 1 つから成ります。

* 単一のキーワード: `pack`, `next`, `definite-first`, `ordered` のうちの何れか
* 2 つのキーワード。例えば `next ordered`。
### 値

`pack`

既定の組積アルゴリズムで、アイテムは最も余裕のあるトラックに配置されます。

`next`

アイテムはグリッド軸に次々と配置されていきます。

`definite-first`

既定の組積アルゴリズムのように、場所が確定しているアイテムを最初に配置してから、他の組積アイテムを配置するように表示します。

`ordered`

配置が確定しているものは無視して、すべてを order で変更した文書順に従って配置します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `pack` |
| 適用対象 | マソンリーレイアウトのグリッドコンテナー |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

masonry-auto-flow =   
  [ pack | next ]               ||  
  [ definite-first | ordered ]    
  
```

例
-

### next キーワードの使用

#### HTML


```html
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
  <div id="item4"></div>
  <div id="item5"></div>
</div>
<select id="flow">
  <option value="pack">pack</option>
  <option value="next">next</option>
</select>
```


#### CSS


```css
#grid {
  height: 200px;
  width: 200px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  masonry-auto-flow: pack;
}

#item1 {
  background-color: lime;
  height: 2em;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
  height: 3em;
}

#item4 {
  background-color: red;
  height: 2.5em;
}

#item5 {
  background-color: aqua;
  height: 4em;
}
```



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

function changeMasonryFlow() {
  var grid = document.getElementById("grid");
  var direction = document.getElementById("flow");
  var masonryAutoFlow = direction.value === "pack" ? "pack" : "next";

  grid.style.masonryAutoFlow = masonryAutoFlow;
}

selectElem.addEventListener("change", changeMasonryFlow);
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Grid Layout Module Level 3 # masonry-auto-flow |

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

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

関連情報
----

* 関連する CSS プロパティ: `align-tracks`, `justify-tracks`
-moz-orient
===========

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

**`-moz-orient`** は CSS のプロパティで、適用される要素の向きを指定します。

構文
--

`-moz-orient` プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。

### 値

`inline`

要素をテキストの軸と同じ方向に描画します。横書きモードでは水平方向に、縦書きモードでは垂直方向に描画します。

`block`

要素をテキストの軸と直交するように描画します。横書きモードでは垂直方向に、縦書きモードでは水平方向に描画します。

`horizontal`

要素が水平方向に描画される

`vertical`

要素が垂直方向に描画される

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `inline` |
| 適用対象 | 任意の要素。これは `progress` および `meter` には効果がありますが、 <input type="range"> やその他の要素には効果がありません |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

### HTML


```html
<p>The following progress meter is horizontal (the default):</p>
<progress max="100" value="75"></progress>

<p>The following progress meter is vertical:</p>
<progress class="vert" max="100" value="75"></progress>
```

### CSS


```css
.vert {
  -moz-orient: vertical;
  width: 16px;
  height: 150px;
}
```

### 結果

仕様書
---

W3C に提出され、最初の反応は肯定的でしたが、このプロパティはまだ仕様書には含まれていません。今のところ、 Mozilla 独自の拡張 (つまり、 `-moz-orient`) です。

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

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

関連情報
----

* `box-orient`
アニメーション可能な CSS プロパティ
====================

CSS アニメーションおよびトランジション**アニメーション可能な**プロパティの概念に頼っており、特に指定しない限り、すべての CSS プロパティはアニメーション可能です。各プロパティのアニメーションの種類は、このプロパティに対する値の結合方法（補間、追加、累積）を決定します。トランジションは補間のみを使用しますが、アニメーションは 3 つの組み合わせ方法をすべてを使用することができます。

**メモ:** 各 CSS プロパティのアニメーションの種類は、その「公式定義」表に掲載されています（例: `color`）。

**メモ:** 各 CSS データ型の補間方法は、その「補間」節に記述されています（例: `<length>`）。

アニメーションの種類
----------

Web Animations 仕様で定義されているアニメーションの種類は主に 4 つあります。

アニメーション不可

このプロパティはアニメーション可能ではありません。アニメーションのキーフレームに掲載されていても処理されず、ビュートランジションのアニメーションにも影響されません。

**メモ:** アニメーション可能でないプロパティのみを対象とするアニメーション効果は、アニメーション効果の通常の動作（例えば、 `animationstart` イベントを発行する）を示します。

離散

プロパティの値は加算されず、補間は `50%` で開始値から終了値に入れ替わります。具体的には、 `p` で進行値を表すと次のようになります。

* `p < 0.5` であれば `V_result = V_start`
* `p ≥ 0.5` であれば `V_result = V_end`

計算値による

計算値の対応する各成分は、その値の型に対して示された手順で結合されます。成分の数または対応する成分の型が一致しない場合、またはいずれかの成分値が離散アニメーションを使用し、対応する 2 つの値が一致しない場合、プロパティ値は離散として結合されます。

繰り返し可能なリスト

計算値による場合と同じですが、2つのリストの項目数が異なる場合は、最初の項目の最小公倍数まで繰り返されます。その後、各項目は計算値によって結合されます。値の組が結合できない場合や、いずれかの成分値が離散アニメーションを使用している場合は、プロパティ値は離散として結合されます。

プロパティによっては、これら 4 つの種類に当てはまらない固有の補間動作を持つものもあります。この場合、プロパティの「補間」節を参照してください（例: `visibility`）。

カスタムプロパティのアニメーション
-----------------

`registerProperty()` メソッドを使用して登録されたカスタムプロパティの場合、アニメーションの種類は計算値によるもので、計算値の型はプロパティの構文定義によって決定されます。

未登録のカスタムプロパティでは、アニメーションの種類は離散です。

関連情報
----

* CSS アニメーションの使用
* CSS トランジションの使用
-webkit-mask-repeat-x
=====================

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

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


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

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

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

構文
--

### 値

repeat

マスク画像は水平方向と垂直方向の両方に反復されます。

no-repeat

マスク画像は反復されず、マスク画像のコピーが 1 つだけ描画されます。マスクされた要素の残りのコンテンツは表示されません。

repeat

マスク画像は水平方向と垂直方向の両方に反復されます。

space

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

round

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

公式定義
----

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

形式文法
----

Error: could not find syntax for this item例
-

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


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

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

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

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


```css
.examplethree {
  -webkit-mask-image: url("mask1.png"), url("mask2.png");
  -webkit-mask-repeat-x: 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-y`
counter-reset
=============

**`counter-reset`** は CSS のプロパティで、 CSS カウンターを指定された値で初期化します。
 このプロパティは新しいカウンターや逆行カウンターを、指定された要素の指定された名前で生成します。

 通常のカウンターは、初期値が 0 になっています。
 逆行カウンターはカウントダウンのためのものであり、既定の初期値は現在のレベルでの要素の数に設定されます。
 既定の初期値により、 2 つの最も一般的な数値のパターン、 1 から要素の数までのカウントアップと、要素の数から 1 までのカウントダウンを簡単に実装することができます。

カウンターの値は CSS の `counter-increment` プロパティを使用して増加または減少させ、既存のカウンターの値は `counter-set` を使用して設定することができます。

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

 独自に作成したカウンターに加え、このプロパティは（`<ol>` 要素で作成される）順序付きリストで使用される `list-item` カウンターもリセットすることができます。
 これらは独自に作成したカウンタと同じ動作をしますが、それぞれのリスト要素で自動的に 1 ずつ増加または減少する点が異なります。
 この動作は `counter-increment` で上書きすることができます。

構文
--


```css
/\* "my-counter" を 0 に設定 \*/
counter-reset: my-counter;

/\* "my-counter" を -1 に設定 \*/
counter-reset: my-counter -3;

/\* 逆行の "my-counter" を counter1" を 1 に、 "counter2" を 4 に設定 \*/
counter-reset: reversed(my-counter);

/\* 逆行の "my-counter" を -1 に設定 \*/
counter-reset: reversed(my-counter) -1;

/\* counter2 を 9 に、逆行の "counter1" と "counter3" をそれぞれ 1 と 4 に設定\*/
counter-reset: reversed(counter1) 1 counter2 9 reversed(counter3) 4;

/\* より詳細度が低い規則による値の初期化をキャンセル \*/
counter-reset: none;

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


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

* `<custom-ident>` または `reversed(<custom-ident>)` でカウンターに名前を付けます。 `<integer>` を続けることもできます。
 なお、 `reversed()` メソッドは「逆行」カウンターを生成するために使用することができます。
 初期化するカウンターや逆行カウンターはいくつでも指定することができ、それぞれのカウンターとカウンター値の組は空白で区切ります。
* キーワード値 `none`。

`list-item` という名前の「暗黙的な」カウンターを使用すると、 `<ol>` を使用して生成される順序付きリストの番号付けを制御に使用することができます。

### 値

`<custom-ident>`

初期化の対象となる、カウンターの名前です。

`<integer>`

要素が出現するごとに、カウンターを初期化するための値です。与えられない場合、初期値の `0` なります。

`none`

カウンターの初期化は行われません。これはより詳細度の低い規則によって定義された `counter-reset` を上書きするために使用することができます。

公式定義
----

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

形式文法
----
```

counter-reset =   
  [ <counter-name> <integer>? | <reversed-counter-name> <integer>? ]+  |  
  none                                                  
  
<reversed-counter-name> =   
  reversed( <counter-name> )    
  
```

例
-

以下の例はカウンターの初期化方法を紹介していますが、増加、減少、表示の方法は示していません。

もっと完全な例は、 CSS カウンターの使用を参照してください。

### 名前付きカウンターの初期化


```css
h1 {
  counter-reset: chapter section 1 page;
  /\* chapter と page カウンターを 0 に、
 section カウンターを 1 に設定します。 \*/
}
```

### 逆行カウンター


```css
h1 {
  counter-reset: reversed(chapter) reversed(section) 1 page;
  /\* chapter カウンターと section カウンターに逆行フラグを設定します。
 chapter カウンターと page カウンターを 0 に、section カウンターを
 1 に設定します \*/
}
```

仕様書
---

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # counter-reset |

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

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

関連情報
----

* CSS カウンターの使用
* `counter-increment`
* `counter-set`
* `@counter-style`
* `counter()` および `counters()` 関数
* `content` プロパティ
scroll-margin-block-start
=========================

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

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

構文
--


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

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

### 値

`<length>`

スクロールコンテナーのブロック方向における先頭側の辺からみた外部の距離です。

公式定義
----

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

形式文法
----
```

scroll-margin-block-start =   
  <length>    
  
```

仕様書
---

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

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

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

関連情報
----

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