:valid - CSS: カスケーディングスタイルシート

: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 からの検証状態へのアクセス


white-space - CSS: カスケーディングスタイルシート

white-space
===========

**`white-space`** は CSS のプロパティで、要素内のホワイトスペースをどのように扱うかを設定します。

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

このプロパティは 2 つのことを指定します。

* ホワイトスペースを折り畳むかどうか、およびその方法。
* 行を自動折り返しの場面で折り返すことができるかどうか。

**メモ:** *要素の内部で*折り返しを行うには、代わりに `overflow-wrap`, `word-break`, `hyphens` を使用してください。

構文
--

```css
/\* キーワード値 \*/
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

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

`white-space` プロパティは、以下の値の一覧から選択した単一のキーワードで指定します。

### 値

`normal`

連続するホワイトスペースがまとめられます。ソース内の改行文字もホワイトスペースとして扱われます。行ボックスを埋めるために、必要なら行を折り返します。

`nowrap`

`normal` と同じくホワイトスペースを詰めますが、行の折り返しは行いません。

`pre`

連続するホワイトスペースはそのまま残され、行の折り返しは、ソース内の改行文字と、 `<br>` 要素でのみ行います。

`pre-wrap`

連続するホワイトスペースはそのまま残されます。行の折り返しは、改行文字や `<br>` 要素のあるときか、行ボックスを埋めるのに必要なときに行います。

`pre-line`

連続するホワイトスペースは詰められて 1 つになります。行の折り返しは、改行文字や `<br>` 要素のあるときか、行ボックスを埋めるのに必要なときに行われます。

`break-spaces`

下記の点を除いて、動作は `pre-wrap` と同じです。

* そのまま残された連続するホワイトスペースは、行末にあるものを含め、空間を占有します。
* 残されたそれぞれのホワイトスペースの後で、ホワイトスペースの間を含め、改行する可能性があります。
* そのような残された空白は空間を占有し、ぶら下がらず、ボックスの内在の寸法 (min-content および max-content の大きさ) に影響します。

次の表に、`white-space` 値の動作をまとめます。

|  | 改行 | 空白とタブ文字 | テキストの折り返し | 行末の空白 | 行末のその他の空白区切り |
| --- | --- | --- | --- | --- | --- |
| `normal` | まとめる | まとめる | 折り返す | 除去 | ぶら下げる |
| `nowrap` | まとめる | まとめる | 折り返さない | 除去 | ぶら下げる |
| `pre` | そのまま | そのまま | 折り返さない | そのまま | 折り返さない |
| `pre-wrap` | そのまま | そのまま | 折り返す | ぶら下げる | ぶら下げる |
| `pre-line` | そのまま | まとめる | 折り返す | 除去 | ぶら下げる |
| `break-spaces` | そのまま | そのまま | 折り返す | 折り返す | 折り返す |

**メモ:** **空白**と**その他の空白区切り**には違いがあります。以下のように定義されています。

空白

空白 (U+0020)、タブ (U+0009)、区切り文字 (改行など)。

その他の空白区切り

Unicode で定義されているその他の区切り文字で、空白として定義されているもの以外。

ホワイトスペースが*ぶら下げる*とある場合、内在サイズを計算するときにボックスの大きさに影響することがあります。

公式定義
----

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

形式文法
----
```

white-space =
  normal        |
  pre           |
  nowrap        |
  pre-wrap      |
  break-spaces  |
  pre-line

```

例
-

### 基本的な例

```css
code {
  white-space: pre;
}
```

### <pre> 要素内での改行

```css
pre {
  white-space: pre-wrap;
}
```

### 操作

#### HTML
```

<div id="css-code" class="box">
  p { white-space:
  <select>
    <option>normal</option>
    <option>nowrap</option>
    <option>pre</option>
    <option>pre-wrap</option>
    <option>pre-line</option>
    <option>break-spaces</option>
  </select>
  }
</div>
<div id="results" class="box">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>
```

```
.box {
  width: 300px;
  padding: 16px;
  border-radius: 10px;
}

#css-code {
  background-color: rgb(220, 220, 220);
  font-size: 16px;
  font-family: monospace;
}

#css-code select {
  font-family: inherit;
}

#results {
  background-color: rgb(230, 230, 230);
  overflow-x: scroll;
  height: 400px;
  white-space: normal;
  font-size: 14px;
}
```

```
var select = document.querySelector("#css-code select");
var results = document.querySelector("#results p");
select.addEventListener("change", function (e) {
  results.setAttribute("style", "white-space: " + e.target.value);
});
```

```html
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</p>
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Text Module Level 3 # white-space-property |

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

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

関連情報
----

* *内部での*折り返しを定義するプロパティ: `overflow-wrap`, `word-break`, `hyphens`


box-decoration-break - CSS: カスケーディングスタイルシート

box-decoration-break
====================

**`box-decoration-break`** は CSS のプロパティで、要素の断片が複数の行、段、ページに渡る場合に描画する方法を指定します。

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

指定された値は、次のプロパティの表示方法に影響を与えます。

* `background`
* `border`
* `border-image`
* `box-shadow`
* `clip-path`
* `margin`
* `padding`
構文
--

```css
/\* キーワード値 \*/
box-decoration-break: slice;
box-decoration-break: clone;

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

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

### 値

`slice`

要素は最初、ボックスが断片化していないかのように描画され、その後でこの仮想ボックスに描画されたものが、それぞれの行/段/ページの部分に分割されます。なお、仮想ボックスはインライン方向に分割された場合には独自の高さを使用し、ブロック方向に分割された場合は独自の幅を使用するため、それぞれの断片ごとに異なる場合があることに注意してください。詳しくは CSS の仕様書を参照してください。

`clone`

それぞれの断片が、それぞれの断片を囲む指定された境界、パディング、マージンを伴って個別に描画されます。 `border-radius`, `border-image`, `box-shadow` はそれぞれの断片に個別に適用されます。背景もそれぞれの断片で個別に描画されます。つまり、 `background-repeat``: no-repeat` がついた背景画像であっても、複数回繰り返されます。

公式定義
----

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

形式文法
----
```

box-decoration-break =
  slice  |
  clone

```

例
-

### インラインボックスの断片化

改行を含むインライン要素は次のように整形されます。

```html
<style>
 .example {
 background: linear-gradient(to bottom right, yellow, green);
 box-shadow:
 8px 8px 10px 0px deeppink,
 -5px -5px 5px 0px blue,
 5px 5px 15px 0px yellow;
 padding: 0em 1em;
 border-radius: 16px;
 border-style: solid;
 margin-left: 10px;
 font: 24px sans-serif;
 line-height: 2;
 }
</style>
…
<span class="example">The<br />quick<br />orange fox</span>
```

これは次のようになります。

![box-decoration-break:slice と例で与えられたスタイルでスタイル付けされたインライン要素のレンダリングの画面ショット](/ja/docs/Web/CSS/box-decoration-break/box-decoration-break-inline-slice.png)

上記のスタイルに `box-decoration-break: clone` を追加すると、

```css
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
```

これは次のような結果になります。

![box-decoration-break:clone と例で与えられたスタイルでスタイル付けされたインライン要素のレンダリングの画面ショット](/ja/docs/Web/CSS/box-decoration-break/box-decoration-break-inline-clone.png)

ブラウザーで上記の 2 つのインラインの例を試してみることができます。

これはインライン要素に大きな `border-radius` の値を使用した例です。二番目の `"iM"` には、 `"i"` と `"M"` の間に改行があります。それに対して、最初の `"iM"` には改行がありません。なお、２つの断片の描画結果を水平に並べると、断片化されていない描画結果と同じになります。

![2 つ目のインライン要素の例のレンダリングのスクリーンショット。](/ja/docs/Web/CSS/box-decoration-break/box-decoration-break-slice-inline-2.png)

ブラウザーで上の例を試してみることができます。

### ブロックボックスの断片化

上記と同様のスタイルのブロックボックスは、断片化がないと次のような結果になります。

![例で使用したブロック要素を断片化せずにレンダリングした画面です。](/ja/docs/Web/CSS/box-decoration-break/box-decoration-break-block.png)

上記のブロックが 3 つの段に分割されると、次のような結果になります。

![box-decoration-break:slice でスタイル付けされた例で使用されている断片ブロックのレンダリングの画面ショットです。](/ja/docs/Web/CSS/box-decoration-break/box-decoration-break-block-slice.png)

なお、これらの断片を縦に並べると、断片化されていない描画結果と同じになります。

そして、同じ例を `box-decoration-break: clone` で整形すると、次のような結果になります。

![box-decoration-break:clone でスタイル付けされた例で使用されている断片ブロックのレンダリングの画面ショットです。](/ja/docs/Web/CSS/box-decoration-break/box-decoration-break-block-clone.png)

それぞれの断片に同じ境界線、ボックスの影、背景が複製されることに注意してください。

ブラウザーで上の例を試してみることができます。

仕様書
---

| Specification |
| --- |
| CSS Fragmentation Module Level 3 # break-decoration |

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

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

関連情報
----

* `break-after`, `break-before`, `break-inside`


view-timeline-axis - CSS: カスケーディングスタイルシート

view-timeline-axis
==================

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

**`view-timeline-axis`** は CSS のプロパティで、スクロール可能な要素（*スクローラー*）内の要素（主体要素）の可視性の変化に基づいて進行する名前付きビュー進行タイムラインのアニメーションのタイムラインを提供するために使用される、スクロールバーの方向を指定するために使用します。 `view-timeline-axis` は主体要素に設定します。詳しくは CSS スクロール駆動アニメーション (en-US)を参照してください。

**メモ:** スクローラーの軸方向の寸法がコンテナーをあふれていない場合、またはあふれた部分が非表示またはクリッピングされている場合、タイムラインは作成されません。

`view-timeline-axis` および `view-timeline-name` の各プロパティは、 `view-timeline` 一括指定プロパティを使用して設定することもできます。

構文
--

```css
/\* 論理プロパティ値 \*/
view-timeline-axis: block;
view-timeline-axis: inline;
/\* 非論理プロパティ値 \*/
view-timeline-axis: y;
view-timeline-axis: x;
```

### 値

`view-timeline-axis` に許可されている値は次の通りです。

`block`

スクローラー要素のブロック軸にあるスクロールバーで、行内のテキストの流れに垂直な方向の軸です。標準的な英語のような横書きモードでは `y` と同じになり、縦書きモードでは `x` と同じになります。これが既定値です。

`inline`

スクローラー要素のインライン軸にあるスクロールバーで、行内のテキストの流れと並行する方向の軸です。横書きモードでは `x` と同じになり、縦書きモードでは `y` と同じになります。

`y`

スクローラー要素の垂直軸上のスクロールバーです。

`x`

スクローラー要素の水平軸上のスクロールバーです。

公式定義
----

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

形式文法
----
```

view-timeline-axis =
  [ block | inline | x | y ]#

```

例
-

### ビュー進行タイムラインの軸を定義

この例では、`--subjectReveal`という名前のビュー進行タイムラインが、クラスが "animation "である主体要素の `view-timeline-name` プロパティを使用して定義されています。このタイムラインは、同じ要素のアニメーションに適用されます。

`view-timeline-axis` の効果を示すために、この例ではアニメーションを駆動するために水平方向の（既定値ではない）スクロールバーを使用しています。

#### HTML

この例の HTML は以下の通りです。

```html
<div class="content">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </p>

  <p>
    Risus quis varius quam quisque id. Et ligula ullamcorper malesuada proin
    libero nunc consequat interdum varius. Elit ullamcorper dignissim cras
    tincidunt lobortis feugiat vivamus at augue.
  </p>

  <p>
    Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate
    dignissim. Tortor aliquam nulla facilisi cras.
  </p>

  <p>
    A erat nam at lectus urna duis convallis convallis. Nibh ipsum consequat
    nisl vel pretium lectus.
  </p>

  <p>
    Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
    arcu vitae elementum curabitur vitae nunc sed velit.
  </p>

  <div class="subject animation"></div>

  <p>
    Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
    cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
    dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non
    tellus orci ac auctor augue mauris.
  </p>
</div>
```

#### CSS

 CSS では、 `view-timeline-name` プロパティを用いて、 `--subjectReveal` という名前の進行タイムラインの主体要素を設定します。
 スクロール軸は `view-timeline-axis: x;` (Chromium) や `view-timeline-axis: horizontal;` (Firefox) を使用して設定します。これにより、スクロールする祖先要素の水平スクロールバーの位置がアニメーションタイムラインを決定します。

`content` の祖先要素は、 `display: flex;` と `flex-flow: column wrap;` を使用してコンテンツをレイアウトすることで、水平方向にオーバーフローするようになっています。

また、主体要素に `animation-duration` を適用することで、この例が Firefox でうまく動作するようになることにも注意してください。

```css
.subject {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background-color: deeppink;
}

.content {
  width: 50%;
  height: 400px;
  margin-top: 30px;
  display: flex;
  flex-flow: column wrap;
  gap: 10px;
}

p {
  font-family: Arial, Helvetica, sans-serif;
}

p {
  font-size: 1.3rem;
  line-height: 1.4;
}

.animation {
  view-timeline-name: --subjectReveal;
  /\* Chromium supports the new x/y syntax \*/
  view-timeline-axis: x;
  /\* Firefox still supports the old horizontal/vertical syntax \*/
  view-timeline-axis: horizontal;

  animation-name: appear;
  animation-fill-mode: both;
  animation-timeline: --subjectReveal;
  animation-duration: 1ms; /\* Firefox では、アニメーションを適用するために必要 \*/
}

@keyframes appear {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1,
    transform: scaleX(1);
  }
}
```

#### 結果

下部の水平バーをスクロールすると、主体要素がアニメーションで表示されます。

仕様書
---

| Specification |
| --- |
| Scroll-driven Animations # view-timeline-axis |

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

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

関連情報
----

* `animation-timeline`
* `timeline-scope` (en-US)
* `view-timeline`, `view-timeline-name`
* CSS スクロール駆動アニメーション (en-US)


direction - CSS: カスケーディングスタイルシート

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: カスケーディングスタイルシート

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 - CSS: カスケーディングスタイルシート

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


justify-items - CSS: カスケーディングスタイルシート

justify-items
=============

CSS の **`justify-items`** プロパティは、ボックスのすべてのアイテムに既定の `justify-self` を定義し、それぞれのボックスの調整を適切な軸に沿って、既定の方法で行ないます。

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

このプロパティの効果は、現在のレイアウトモードに依存します。

* ブロックレベルレイアウトでは、包含ブロック内のアイテムをインライン軸で配置します。
* 絶対位置指定の要素では、 top, left, bottom, right の各オフセット値を反映して、包含ブロック内のアイテムをインライン軸で配置します。
* 表のセルレイアウトでは、このプロパティは*無視されます* (絶対配置及び表レイアウトのブロック内の配置についてはこちら)
* フレックスボックスレイアウトでは、このプロパティは*無視されます* (フレックスボックス内での配置についてはこちら)
* グリッドレイアウトでは、グリッド領域内のアイテムをインライン軸に配置します (グリッドレイアウト内での配置についてはこちら)
構文
--

```css
/\* 基本キーワード \*/
justify-items: auto;
justify-items: normal;
justify-items: stretch;

/\* 位置による配置 \*/
justify-items: center; /\* 中央付近にアイテムを集める \*/
justify-items: start; /\* 先頭側にアイテムを集める \*/
justify-items: end; /\* 末尾側にアイテムを集める \*/
justify-items: flex-start; /\* 'start' と同等です。なお、 justify-items はフレックスボックスレイアウト内では無視されます。 \*/
justify-items: flex-end; /\* 'end' と同等です。なお、 justify-items はフレックスボックスレイアウト内では無視されます。 \*/
justify-items: self-start;
justify-items: self-end;
justify-items: left; /\* 左側にアイテムを集める \*/
justify-items: right; /\* 右側にアイテムを集める \*/

/\* ベースラインの配置 \*/
justify-items: baseline;
justify-items: first baseline;
justify-items: last baseline;

/\* あふれたときの配置 (位置による配置時のみ) \*/
justify-items: safe center;
justify-items: unsafe center;

/\* 従来の配置 \*/
justify-items: legacy right;
justify-items: legacy left;
justify-items: legacy center;

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

このプロパティは 4 つの異なる形式のうち 1 つを取ることができます。

* 基本キーワード: キーワード値 `normal`, `auto`, `stretch` のうちの一つ。
* ベースラインによる配置: `baseline` キーワードに加えて、任意で `first` または `last` のどちらか。
* 位置による配置: `center`, `start`, `end`, `flex-start`, `flex-end`, `self-start`, `self-end`, `left`, `right` のうちの一つ。加えて任意で `safe` または `unsafe`。
* 歴史的な配置: `legacy` キーワードに続いて、 `left` または `right` のどちらかの値。
### 値

`auto`

使用される値は、ボックスに親があれば、親ボックスの `justify-items` プロパティ、そうでなければ絶対位置であり、このような場合、 `auto` は `normal` を表します。

`normal`

このキーワードの効果は、現在のレイアウトモードに依存します。

* ブロックレベルレイアウトでは、このキーワードは `start` の別名です。
* 絶対位置のレイアウトでは、このキーワードは*置換*の絶対位置ボックスには `start` のように動作し、*その他*の絶対位置ボックスには `stretch` のように動作します。
* 表のセルレイアウトでは、このキーワードは意味を持たず、*無視*されます。
* フレックスボックスレイアウトでは、このキーワードは意味を持たず、*無視*されます。
* グリッドレイアウトでは、このキーワードは `stretch` のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスは `start` のように振舞います。

`start`

アイテムは適切な軸で配置コンテナーの先頭側に向かって、互いに接するように詰められます。

`end`

アイテムは適切な軸で配置コンテナーの末尾側に向かって、互いに接するように詰められます。

`flex-start`

フレックスコンテナーの子ではないアイテムにおいては、この値は `start` のように扱われます。

`flex-end`

フレックスコンテナーの子ではないアイテムにおいては、この値は `end` のように扱われます。

`self-start`

アイテムは適切な軸で、アイテムの先頭側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。

`self-end`

アイテムは適切な軸で、アイテムの末尾側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。

`center`

アイテムは配置コンテナーの中央で、互いに接するように詰められます。

`left`

アイテムは配置コンテナーの左端に向かって、互いに接するように詰められます。プロパティの軸がインライン軸に平行でない場合は、この値は `start` のように動作します。

`right`

アイテムは配置コンテナーの右端に向かって、互いに接するように詰められます。プロパティの軸がインライン軸に平行ではない場合は、この値は `start` のように動作します。

`baseline`, `first baseline`, `last baseline`

 first- または last-baseline 配置への参加を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。
 `first baseline` の代替配置は `start`、`last baseline` の代替配置は `end` です。

`stretch`

アイテムの寸法の合計が配置コンテナーの寸法より小さい場合に、寸法が `auto` であるすべてのアイテムは (比例的にではなく) 均等に引き伸ばされます。ただし、 `max-height`/`max-width` (あるいは同等の機能) による制限は尊重します。これにより、寸法の合計が配置コンテナーを主軸に沿って完全に埋めるようになります。

`safe`

アイテムの寸法が配置コンテナーをあふれた場合、アイテムは配置モードが `start` であったかのように配置されます。

`unsafe`

アイテムのと配置コンテナーの寸法の関係にかかわらず、指定した値を尊重します。

`legacy`

値がボックスの子孫に継承されるようにします。なお、子孫が `justify-self: auto` の値を持っている場合、 `legacy` キーワードは子孫からは考慮されず、関連付けられた `left`, `right`, `center` の値のみが継承されます。

公式定義
----

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

形式文法
----
```

justify-items =
  normal                                              |
  stretch                                             |
  <baseline-position>                                 |
  <overflow-position>? [ <self-position> | left | right ]  |
  legacy                                              |
  legacy && [ left | right | center ]                 |
  anchor-center

<baseline-position> =
  [ first | last ]?  &&
  baseline

<overflow-position> =
  unsafe  |
  safe

<self-position> =
  center      |
  start       |
  end         |
  self-start  |
  self-end    |
  flex-start  |
  flex-end

```

例
-

### 単純なデモ

次の例では、シンプルな 2 x 2 のグリッドレイアウトを示します。初期状態では、グリッドコンテナーには `justify-items` の値として `stretch` (既定値) が与えられており、グリッドアイテムはそのセルの幅全体に広がっています。

しかし、グリッドコンテナの上にマウスカーソルを置いたり、タブを押したりすると、グリッドアイテムには `justify-items` の値である `center` が与えられ、グリッドアイテムの幅はコンテンツの幅と同じだけ広がり、セルの中心に整列します。

#### HTML

```html
<article class="container" tabindex="0">
  <span>First child</span>
  <span>Second child</span>
  <span>Third child</span>
  <span>Fourth child</span>
</article>
```

#### CSS

```css
html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
}

article {
  background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  width: 300px;
  justify-items: stretch;
}

article:hover,
article:focus {
  justify-items: center;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
  text-align: center;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

article {
  margin: 20px;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # justify-items-property |

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

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

関連情報
----

* CSS グリッドガイド: *グリッドレイアウトのボックス配置*
* CSS ボックス配置
* `place-items` 一括指定プロパティ
* `justify-self` プロパティ
* `align-items` プロパティ


<system-color> - CSS: カスケーディングスタイルシート

<system-color>
==============

**`<system-color>`** は CSS のデータ型で、ウェブページの様々な部分に通常使用する既定の色を反映します。

しかし、ユーザーエージェントは強制色モードと呼ばれるアクセシビリティ機能を提供することができ、このモードでは色はユーザーとユーザーエージェントが定義したパレットに制限され、特定のプロパティで作者が選択した色を上書きします。強制色モードでは、 `<system-color>` は選択された色を公開するので、ページの残りの部分はそれらと統合することができます。強制色モードの例としては、 Windows の高コントラストモードがあります。

強制色モードでは、作者は `<system-color>` 型の色を、色がオーバーライドされるプロパティの設定にはないすべてのプロパティに使用するべきです。これにより、ページがすべてのプロパティで一貫して同じ色パレットを使用することを保証します。

作者は `forced-colors` メディア特性を使用して、強制色モードを検出することができます。

`<system-color>` 値は、 `<color>` を使用できる場所であればどこでも使用することができます。

構文
--

これらのキーワードは大文字と小文字を区別しませんが、ここでは読み取り可能なように大文字と小文字を混合して掲載しています。

`AccentColor`

アクセント付きユーザーインターフェイスコントロールの背景

`AccentColorText`

アクセント付きユーザーインターフェイスコントロールのテキスト

`ActiveText`

アクティブリンクのテキスト

`ButtonBorder`

コントロールのベース境界色

`ButtonFace`

コントロールの背景色

`ButtonText`

コントロールのテキスト色

`Canvas`

アプリケーションのコンテンツや文書の背景

`CanvasText`

アプリケーションのコンテンツや文書のテキスト色

`Field`

入力フィールドの背景

`FieldText`

入力フィールドのテキスト

`GrayText`

無効なアイテムの文字色（無効なコントロールなど）

`Highlight`

選択項目の背景

`HighlightText`

選択項目のテキスト色

`LinkText`

非アクティブ、未訪問リンクのテキスト

`Mark`

特別にマークされたテキストの背景（HTML の `mark` 要素など）。

`MarkText`

特別にマークされたテキスト（HTML の `mark` 要素など）。

`VisitedText`

訪問済みリンクのテキスト

### 非推奨のシステム色キーワード

以下のキーワードは、以前のバージョンの CSS カラーモジュールで定義されていました。これらを公開ウェブページで使用することは非推奨です。

`ActiveBorder`
非推奨

アクティブウィンドウの境界線。

`ActiveCaption`
非推奨

アクティブウィンドウのキャプション。前景色としては `CaptionText` を使用してください。

`AppWorkspace`
非推奨

複数文書インターフェイスの背景色。

`Background`
非推奨

デスクトップの背景。

`ButtonHighlight`
非推奨

境界線のレイヤーによって立体的に現れる 3D 要素の、光源に面する境界線の色。

`ButtonShadow`
非推奨

境界線のレイヤーによって立体的に現れる 3D 要素の、光源から離れた境界線の色。

`CaptionText`
非推奨

キャプション、サイズボックス、スクロールバーの矢印ボックスのテキスト。 `ActiveCaption` の背景色と一緒に使用してください。

`InactiveBorder`
非推奨

非アクティブウィンドウの境界線。

`InactiveCaption`
非推奨

非アクティブウィンドウのキャプション。 `InactiveCaptionText` の前景色と一緒に使用してください。

`InactiveCaptionText`
非推奨

非アクティブキャプションのテキストの色。 `InactiveCaption` の背景色と一緒に使用してください。

`InfoBackground`
非推奨

ツールチップコントロールの背景色。 `InfoText` の前景色と一緒に使用してください。

`InfoText`
非推奨

ツールチップコントロールの文字色。 `InfoBackground` の背景色と一緒に使用してください。

`Menu`
非推奨

メニューの背景。 `MenuText` または `-moz-MenuBarText` の前景色と一緒に使用してください。

`MenuText`
非推奨

メニューのテキスト。 `Menu` の背景色と一緒に使用してください。

`Scrollbar`
非推奨

スクロールバーの背景色です。

`ThreeDDarkShadow`
非推奨

境界線が同心円状に 2 層になっているために立体的に現れる 3D 要素の、光源から離れた 2 つの境界線のうち、暗い方（一般に外側）の色。

`ThreeDFace`
非推奨

境界線が同心円状に 2 層になっているために立体的に現れる 3D 要素の表面の背景色。 `ButtonText` の前景色と一緒に使用してください。

`ThreeDHighlight`
非推奨

境界線が同心円状に 2 層になっているために立体的に現れる 3D 要素の、光源に面する 2 つの境界線のうち、明るい方（一般に外側）の色。

`ThreeDLightShadow`
非推奨

境界線が同心円状に 2 層になっているために立体的に現れる 3D 要素の、光源に面する 2 つの境界線のうち暗い方（一般に内側）の色。

`ThreeDShadow`
非推奨

境界線が同心円状に 2 層になっているために立体的に現れる 3D 要素の、光源から離れた 2 つの境界線のうち、明るい方（一般に内側）の色。

`Window`
非推奨

ウィンドウの背景です。 `WindowText` の前景色と一緒に使用してください。

`WindowFrame`
非推奨

ウィンドウの枠です。

`WindowText`
非推奨

ウィンドウ内のテキストです。ウィンドウの背景色 `Window` と共に使用してください。

例
-

### システムカラーの使用

この例では、通常 `box-shadow` プロパティを使ってコントラストを取得するボタンがあります。強制色モードでは、 `box-shadow` は強制的に `none` になるので、この例では `forced-colors` メディア特性を使用して、適切な色（この用途では `ButtonBorder`）の境界線が確実に表示されるようにします。

#### HTML

```html
<button class="button">押してください</button>
```

#### CSS

```css
.button {
  border: 0;
  padding: 10px;
  box-shadow:
    -2px -2px 5px gray,
    2px 2px 5px gray;
}

@media (forced-colors: active) {
  .button {
    /\* forced-colors モードでは box-shadow は強制的に 'none' になるので、
 代わりに境界を使用します。 \*/
    border: 2px ButtonBorder solid;
  }
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4 # css-system-colors |

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

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

関連情報
----

* `<color>`: これらのキーワードが所属する先のデータ型


:nth-last-of-type() - CSS: カスケーディングスタイルシート

: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 - CSS: カスケーディングスタイルシート

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`


box-sizing - CSS: カスケーディングスタイルシート

box-sizing
==========

**`box-sizing`** は CSS のプロパティで、要素の全体の幅と高さをどのように計算するのかを設定します。

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

CSS ボックスモデルの既定では、要素に割り当てられた `width` および `height` は、要素のコンテンツ領域のみに適用されます。要素に境界やパディングがある場合、画面に表示される矩形の大きさは `width` および `height` にこれらを加えたものになります。つまり、`width` および `height` を設定する際には、境界やパディングが加えられるように値を調整しなければなりません。例えば、`width: 25%;` で左や右のパディングまたは左や右の境界がある 4 つのボックスを並べた場合、既定では親コンテナーの制約の中で 1 行には並びません。

`box-sizing` プロパティは上記の振る舞いを調整するために使用できます。

* `content-box` は CSS の box-sizing における既定の振る舞いです。ある要素の幅を 100 ピクセルに設定した場合、その要素のコンテンツ領域の幅が 100 ピクセルになり、境界やパディングを加えたものが最終的に表示される幅になり、要素が 100px よりも広くなります。
* `border-box` は、境界およびパディングを、要素に指定した width および height の中で取るようブラウザーに指示します。要素の width を 100 ピクセルに設定した場合、100 ピクセルの中に追加した境界やパディングが含まれ、コンテンツ領域はそれらの幅を吸収するために縮小されます。これで普通は、要素に対するサイズ設定をもっと簡単になります。
 `box-sizing: border-box` はブラウザーが `<table>`, `<select>`, `<button>` の各要素、また `<input>` 要素のうち type が `radio`, `checkbox`, `reset`, `button`, `submit`, `color`, `search` であるものに対して使用する既定のスタイル付けです。

**メモ:** 要素をレイアウトする際には、 `box-sizing` を `border-box` に設定しておくと便利です。これにより、要素の寸法の扱いがとても簡単になり、一般的にコンテンツをレイアウトする際につまずく可能性のあるいくつかの落とし穴を排除することができます。 一方、 `position: relative` または `position: absolute` を使用する場合、 `box-sizing: content-box` を使用することで、コンテンツに対する相対的な位置の値を設定することができ、境界やパディングの幅の変更に依存しなくなり、これが望ましい場合もあります。

構文
--

```css
box-sizing: border-box;
box-sizing: content-box;

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

`box-sizing` プロパティは、以下のいずれか 1 つのキーワードを選択して定義します。

### 値

`content-box`

これは、 CSS 標準で規定されている初期値および既定値です。 `width` および `height` プロパティの寸法は、コンテンツ領域のみを含むものとなり、パディング、境界、マージン領域は含みません。例えば `.box {width: 350px; border: 10px solid black;}` とすると 370px の幅のボックスを描画します。

この場合、それぞれの要素の寸法は、*幅 = コンテンツの幅*、*高さ = コンテンツの高さ*として計算されます。 (境界やパディングは計算に含まれません。)

`border-box`

`width` および `height` プロパティは、コンテンツ、パディング、境界の各領域を含みますが、マージンは含みません。なお、パディングと境界はボックスの内側に置かれることに注意してください。例えば `.box {width: 350px; border: 10px solid black;}` とすると、ボックスの幅が 350px、コンテンツ領域の幅が 330px として描画されます。コンテンツボックスは負の値にできず 0 に丸められますので、`border-box` を使用して要素を非表示にすることはできません。

この場合、それぞれの要素の寸法は、*幅 = 境界 + パディング + コンテンツの幅*、*高さ = 境界 + パディング + コンテンツの高さ*として計算されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `content-box` |
| 適用対象 | width および height を受け付ける全ての要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

box-sizing =
  content-box  |
  border-box

```

例
-

### content-box と border-box のボックスサイズ

この例では、2つの `box-sizing` の値が、それ以外の条件が同じ要素のレンダリングの大きさをどのように変えるかを示します。

#### HTML

```html
<div class="content-box">Content box</div>
<br />
<div class="border-box">Border box</div>
```

#### CSS

```css
div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /\* 全体の幅: 160px + (2 \* 20px) + (2 \* 8px) = 216px
 全体の高さ: 80px + (2 \* 20px) + (2 \* 8px) = 136px
 コンテンツ領域の幅: 160px
 コンテンツ領域の高さ: 80px \*/
}

.border-box {
  box-sizing: border-box;
  /\* 全体の幅: 160px
 全体の高さ: 80px
 コンテンツ領域の幅: 160px - (2 \* 20px) - (2 \* 8px) = 104px
 コンテンツ領域の高さ: 80px - (2 \* 20px) - (2 \* 8px) = 24px \*/
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # box-sizing |

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

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

関連情報
----

* CSS 基本ボックスモデル


CSS テキスト - CSS: カスケーディングスタイルシート

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  |


次兄弟結合子 - CSS: カスケーディングスタイルシート

次兄弟結合子
======

**次兄弟結合子** (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.

関連情報
----

* 後続兄弟結合子


border-inline-end - CSS: カスケーディングスタイルシート

border-inline-end
=================

**`border-inline-end`** は CSS のプロパティで、個々の論理的なインライン方向の末尾側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための一括指定プロパティです。

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

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

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

* `border-inline-end-color`
* `border-inline-end-style`
* `border-inline-end-width`
構文
--

```css
border-inline-end: 1px;
border-inline-end: 2px dashed;
border-inline-end: medium dashed blue;

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

`border-inline-end` が対応づけられる物理的な境界は、書字方向やテキストの向きによって決まります。これは `border-top`、`border-right`、`border-bottom`、`border-left` の何れかに対応し、どれに対応するかは `writing-mode`、`direction`、`text-orientation` で定義された値によって決まります。

関連するプロパティとしては、 `border-block-start`、`border-block-end`、`border-inline-start` が要素の他の境界を定義します。

### 値

`border-inline-end` は以下の値のうちの1つ以上を任意の順序で指定します。

`<'border-width'>`

境界の幅です。 `border-width` を参照してください。

`<'border-style'>`

境界線のスタイルです。 `border-style` を参照してください。

`<'color'>`

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `border-width`: 一括指定の次の各プロパティとして
    + `border-top-width`: `medium`
    + `border-right-width`: `medium`
    + `border-bottom-width`: `medium`
    + `border-left-width`: `medium`
* `border-style`: 一括指定の次の各プロパティとして
    + `border-top-style`: `none`
    + `border-right-style`: `none`
    + `border-bottom-style`: `none`
    + `border-left-style`: `none`
* `color`: `canvastext`
 |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `border-width`: 一括指定の次の各プロパティとして
    + `border-bottom-width`: 絶対的な長さ、または `border-bottom-style` が `none` または `hidden` の場合は `0`
    + `border-left-width`: 絶対的な長さ、または `border-left-style` が `none` または `hidden` の場合は `0`
    + `border-right-width`: 絶対的な長さ、または `border-right-style` が `none` または `hidden` の場合は `0`
    + `border-top-width`: 絶対的な長さ、または `border-top-style` が `none` または `hidden` の場合は `0`
* `border-style`: 一括指定の次の各プロパティとして
    + `border-bottom-style`: 指定通り
    + `border-left-style`: 指定通り
    + `border-right-style`: 指定通り
    + `border-top-style`: 指定通り
* `border-inline-end-color`: 色の計算値
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `border-inline-end-color`: 計算値の型による
* `border-inline-end-style`: 離散値
* `border-inline-end-width`: 計算値の型による
 |

形式文法
----
```

border-inline-end =
  <line-width>  ||
  <line-style>  ||
  <color>

<line-width> =
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

<line-style> =
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

```

例
-

### 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;
  border-inline-end: 5px dashed blue;
}
```

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # border-shorthands |

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

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

関連情報
----

* このプロパティは `border-top`、`border-right`、`border-bottom`、`border-left` のうちの 1 つに対応づけられます。
* `writing-mode`、`direction`、`text-orientation`


:first - CSS: カスケーディングスタイルシート

: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 - CSS: カスケーディングスタイルシート

: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 - CSS: カスケーディングスタイルシート

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 グリッドガイド: *グリッドレイアウトとアクセシビリティ*


<hue-interpolation-method> - CSS: カスケーディングスタイルシート

<hue-interpolation-method>
==========================

**`<hue-interpolation-method>`** は CSS のデータ型で、 `<hue>` 値間の補間に用いるアルゴリズムを表します。
 補間方法は、色相環に基づいて 2 つの色相値の中間点を探す方法を指定します。
 これは `<color-interpolation-method>` データ型の成分として使用します。

`<hue>` 値を補間する場合、色相補間アルゴリズムは `shorter` が既定値です。

構文
--

`<hue-interpolation-method>` 値は色相補間アルゴリズムの名前にリテラルトークン `hue` が続くものです。
```

shorter hue
longer hue
increasing hue
decreasing hue
```

### 値

任意の色相角の組は色相環上の 2 つの半径に対応し、円周を補間可能な 2 つの弧に切り分けます。どちらの弧も最初の半径で始まり 2 つ目の半径で終わりますが、一方は時計回りに、もう一方は反時計回りに進みます。

**メモ:** 以下の説明と図は、色相角が時計回りに増加する色相環に基づいています。角度の増加が反時計回りの処理になる色相環があることに注意してください。

色相角 `θ1` と `θ2` のペアは範囲 `[0deg, 360deg)` に正規化され、 `θ1` から `θ2` への補間時にどの円弧を使用するかを決定するアルゴリズムが 4 つあります。

`shorter`

短い方の弧を使用します。 2 つの角が一致すると、弧は単一の点に収れんします。両方の円弧の長さが同じ場合は次のようになります。

* `θ1 < θ2` の場合は、時計回りの弧を使用します。
* `θ1 > θ2` の場合は、反時計回りの弧を使用します。

| `θ1 = 45deg`, `θ2 = 135deg` | `θ1 = 135deg`, `θ2 = 45deg` |
| --- | --- |
| shorter with θ1 = 45deg and θ2 = 135deg | shorter with θ1 = 135deg and θ2 = 45deg |

`longer`

長い方の弧を使用します。 2 つの角が一致した場合は次のようになります。

* `θ1 ≤ θ2`の場合、弧は時計回りの方向で全周となります。
* `θ1 > θ2` の場合、弧は反時計回りの方向で全周となります。

両方の弧の長さが同じである場合は次のようになります。

* `θ1 < θ2` の場合は、時計回りの弧を使用します。
* `θ1 > θ2` の場合は、反時計回りの弧を使用します。

| `θ1 = 45deg`, `θ2 = 135deg` | `θ1 = 135deg`, `θ2 = 45deg` |
| --- | --- |
| longer with θ1 = 45deg and θ2 = 135deg | longer with θ1 = 135deg and θ2 = 45deg |

`increasing`

時計回りの弧を使用します。 2 つの角が一致すると、弧は単一の点に収れんします。

| `θ1 = 45deg`, `θ2 = 135deg` | `θ1 = 135deg`, `θ2 = 45deg` |
| --- | --- |
| increasing with θ1 = 45deg and θ2 = 135deg | increasing with θ1 = 135deg and θ2 = 45deg |

`decreasing`

反時計回りの弧を使用します。 2 つの角が一致すると、弧は単一の点に収れんします。

| `θ1 = 45deg`, `θ2 = 135deg` | `θ1 = 135deg`, `θ2 = 45deg` |
| --- | --- |
| decreasing with θ1 = 45deg and θ2 = 135deg | decreasing with θ1 = 135deg and θ2 = 45deg |

選べる弧が 2 つしかないため、これらのアルゴリズムはある状況下では対等です。特に次の場合です。

* `0deg < θ2 - θ1 < 180deg` または `θ2 - θ1 < -180deg` ならば、 `shorter` と `increasing` は等価で、`longer` と `decreasing` は等価です。
* `-180deg < θ2 - θ1 < 0deg` または `θ2 - θ1 > 180deg` ならば、`shorter` と `decreasing` は等価で、`longer` と `increasing` は等価です。

`increasing` と `decreasing` の特筆すべき特性は、トランジションやアニメーション中に色相角の差が `180deg` を通過するとき、 `shorter` と `longer` のように弧が反対側にならないことです。

### 形式文法
```

<hue-interpolation-method> =
  [ shorter | longer | increasing | decreasing ] hue

```

例
-

### 色相補間アルゴリズムの比較

次の例は、 `linear-gradient()` で様々な色相補間アルゴリズムを使用した場合の効果を示しています。

#### HTML

```html
<div class="hsl">
  <p>HSL</p>
</div>
<div class="hsl-increasing">
  <p>HSL increasing</p>
</div>
<div class="hsl-decreasing">
  <p>HSL decreasing</p>
</div>
<div class="hsl-shorter">
  <p>HSL shorter</p>
</div>
<div class="hsl-longer">
  <p>HSL longer</p>
</div>
<div class="hsl-named">
  <p>HSL named</p>
</div>
<div class="hsl-named-longer">
  <p>HSL named (longer)</p>
</div>
```

#### CSS
```

div {
  border: 1px solid black;
  height: 50px;
  margin: 10px;
  width: 90%;
}
p {
  color: white;
  margin: 6px;
}

/\* Fallback styles \*/
.hsl,
.hsl-shorter,
.hsl-named {
  background: linear-gradient(
    to right,
    hsl(39 100% 50%),
    hsl(46 100% 50%),
    hsl(53 100% 50%),
    hsl(60 100% 50%)
  );
}
.hsl-increasing {
  background: linear-gradient(
    to right,
    hsl(190 100% 50%),
    hsl(225 100% 50%),
    hsl(260 100% 50%),
    hsl(295 100% 50%),
    hsl(330 100% 50%),
    hsl(365 100% 50%),
    hsl(400 100% 50%),
    hsl(435 100% 50%),
    hsl(470 100% 50%),
    hsl(505 100% 50%),
    hsl(540 100% 50%)
  );
}
.hsl-decreasing,
.hsl-longer,
.hsl-named-longer {
  background: linear-gradient(
    to right,
    hsl(399 100% 50%),
    hsl(368 100% 50%),
    hsl(337 100% 50%),
    hsl(307 100% 50%),
    hsl(276 100% 50%),
    hsl(245 100% 50%),
    hsl(214 100% 50%),
    hsl(183 100% 50%),
    hsl(152 100% 50%),
    hsl(122 100% 50%),
    hsl(91 100% 50%),
    hsl(60 100% 50%)
  );
}
```

```css
.hsl {
  background: linear-gradient(
    to right in hsl,
    hsl(39deg 100% 50%),
    hsl(60deg 100% 50%)
  );
}
.hsl-increasing {
  background: linear-gradient(
    to right in hsl increasing hue,
    hsl(190deg 100% 50%),
    hsl(180deg 100% 50%)
  );
}
.hsl-decreasing {
  background: linear-gradient(
    to right in hsl decreasing hue,
    hsl(39deg 100% 50%),
    hsl(60deg 100% 50%)
  );
}
.hsl-shorter {
  background: linear-gradient(
    to right in hsl shorter hue,
    hsl(39deg 100% 50%),
    hsl(60deg 100% 50%)
  );
}
.hsl-longer {
  background: linear-gradient(
    to right in hsl longer hue,
    hsl(39deg 100% 50%),
    hsl(60deg 100% 50%)
  );
}
.hsl-named {
  background: linear-gradient(to right in hsl, orange, yellow);
}
.hsl-named-longer {
  background: linear-gradient(to right in hsl longer hue, orange, yellow);
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4 # hue-interpolation |

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

### css.types.color.color-mix

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

### css.types.image.gradient.conic-gradient.hue\_interpolation\_method

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

### css.types.image.gradient.linear-gradient.hue\_interpolation\_method

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

### css.types.image.gradient.radial-gradient.hue\_interpolation\_method

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

### css.types.image.gradient.repeating-conic-gradient.hue\_interpolation\_method

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

### css.types.image.gradient.repeating-linear-gradient.hue\_interpolation\_method

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

### css.types.image.gradient.repeating-radial-gradient.hue\_interpolation\_method

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

関連情報
----

* `<color-interpolation-method>`
* `<hue>` データ型


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.


scrollbar-color - CSS: カスケーディングスタイルシート

scrollbar-color
===============

**`scrollbar-color`** は CSS のプロパティで、スクロールバーのトラックとつまみの色を設定します。

**トラック**はスクロールバーの背景を表し、一般的にスクロール位置にかかわらず固定されています。

**つまみ**はスクロールバーの動く部分で、ふつうはトラックの上を動きます。

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

構文
--

```css
/\* キーワード値 \*/
scrollbar-color: auto;

/\* <color> 値 \*/
scrollbar-color: rebeccapurple green; /\* 二つの有効な色。
一つ目はスクロールバーのつまみ、二つ目はトラックに適用される。 \*/

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

### 値

`<scrollbar-color>`

スクロールバーの色を定義します。

|  |  |
| --- | --- |
| `auto` | 他にスクロールバーに関する色のプロパティがない場合、スクロールバーの位置を表す既定の表示になります。 |
| `<color> <color>` | 最初の色をスクロールバーのつまみに、 2 番目の色をスクロールバーのトラックに適用します。 |

**メモ:** ユーザーエージェントはビューポートのルート要素に、何らかの `scrollbar-color` の値を適用しなければなりません。

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

`scrollbar-color` プロパティで色の値を指定して使用する場合、指定した色の間に十分なコントラストがあることを確認してください。キーワード値の場合、ユーザーエージェントは使用する色の間に十分なコントラストがあることを保証してください。 Techniques for WCAG 2.0: G183: Using a contrast ratio of 3:1 を参照してください。

公式定義
----

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

形式文法
----
```

scrollbar-color =
  auto        |
  <color>{2}

```

例
-

### あふれた場合のスクロールバーに着色する

#### CSS

```css
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
}
```

#### HTML

```html
<div class="scroller">
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
  earthnut pea peanut soko zucchini.
</div>
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Scrollbars Styling Module Level 1 # scrollbar-color |

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

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

関連情報
----

* `scrollbar-width`
* `overflow`


text-decoration-skip-ink - CSS: カスケーディングスタイルシート

text-decoration-skip-ink
========================

CSS の **`text-decoration-skip-ink`** プロパティは、上線や下線が文字のアセンダーやディセンダーを通過するときにどのように引くのかを指定します。

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

`text-decoration-skip-ink` は `text-decoration` 一括指定の一部ではありません。

構文
--

```css
/\* 単一キーワード \*/
text-decoration-skip-ink: none;
text-decoration-skip-ink: auto;
text-decoration-skip-ink: all;

/\* グローバルキーワード \*/
text-decoration-skip: inherit;
text-decoration-skip: initial;
text-decoration-skip-ink: revert;
text-decoration-skip: unset;
```

### 値

`none`

下線と上線は、アセンダーとディセンダーの部分を含め、テキストコンテンツの全体に渡って引かれます。

`auto`

既定値です。 — ブラウザーは、下線と上線が文字に触れたり近づいたりしないよう、中断を行う*可能性があります*。つまり、線が文字を横切ろうとするところで中断されます。

`all`

ブラウザーは、下線や上線が文字に触れたり近づいたりしないように*必ず*中断を行います。これは、 `auto` の動作が中断を発生させない可能性がある中国語、日本語、韓国語の特定のフォントで有用です。

!["text-decoration-skip-ink" の例](/ja/docs/Web/CSS/text-decoration-skip-ink/decoration-skip-ink.png)

公式定義
----

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

形式文法
----
```

text-decoration-skip-ink =
  auto  |
  none  |
  all

```

例
-

### HTML

```html
<p>You should go on a quest for a cup of coffee.</p>
<p class="no-skip-ink">Or maybe you'd prefer some tea?</p>
<p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p>
<p class="skip-ink-all">
  この文は、 text-decoration-skip-ink: all の使用例を示しています。
</p>
```

### CSS

```css
p {
  font-size: 1.5em;
  text-decoration: underline blue;
  text-decoration-skip-ink: auto; /\* this is the default anyway \*/
}

.no-skip-ink {
  text-decoration-skip-ink: none;
}

.skip-ink-all {
  text-decoration-skip-ink: all;
}
```

### Result

仕様書
---

| Specification |
| --- |
| CSS Text Decoration Module Level 4 # text-decoration-skip-ink-property |

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

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

関連情報
----

* `text-decoration`
* `text-decoration-skip`


animation-composition - CSS: カスケーディングスタイルシート

animation-composition
=====================

**`animation-composition`** は CSS のプロパティで、複数のアニメーションが同じプロパティに同時に影響する場合に使用する合成演算を指定します。

構文
--

```css
/\* 単一のアニメーション \*/
animation-composition: replace;
animation-composition: add;
animation-composition: accumulate;

/\* 複数のアニメーション \*/
animation-composition: replace, add;
animation-composition: add, accumulate;
animation-composition: replace, add, accumulate;

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

**メモ:** 複数の値をカンマ区切りで `animation-*` プロパティに指定すると、`animation-name`が出現した順にアニメーションに適用されます。アニメーションと合成の数が異なる場合、`animation-composition` プロパティに列挙されている値は、最初の `animation-name` から最後の `animation-name` まで循環し、すべてのアニメーションに `animation-composition` 値が割り当てるまで繰り返されます。より詳しい情報は、複数のアニメーションプロパティ値の設定を参照してください。

### 値

`replace`

効果値がプロパティの基盤値を上書きします。これが既定値です。

`add`

効果値は、プロパティの基盤値の上に構築されます。この演算は加算効果をもたらします。加算演算が可換でない種類のアニメーションの場合、オペランドの順序は、基礎値の後に効果値が続きます。

`accumulate`

効果値と基礎値は結合されます。加算処理が可換でない種類のアニメーションでは、オペランドの順序は基礎値の後に効果値が続きます。

解説
--

@keyframes アットルールが対象とする各プロパティは、効果スタックに関連付けられています。効果スタックの値は、 CSS スタイルルールのプロパティの基礎値 (*underlying value*) と、キーフレームのプロパティの効果値 (*effect value*) を組み合わせて計算されます。 `animation-composition` プロパティは、基礎値と効果値の合成方法を指定するのに役立ちます。

例えば、下記の CSS の場合、 `blur(5px)` が基盤値で、 `blur(10px)` が効果値です。 `animation-composition` プロパティは、基礎値と効果値の効果を合成した後、最終的な効果値を生成する処理を指定します。

```css
.icon:hover {
  filter: blur(5px);
  animation: 3s infinite pulse;
  animation-composition: add;
}

@keyframes pulse {
  0% {
    filter: blur(10px);
  }
  100% {
    filter: blur(20px);
  }
}
```

例えばこの例で、 `animation-composition` プロパティに異なる値を設定したとします。それぞれの場合の最終的な効果値は下記で説明するように計算されます。

* `replace` を指定すると、 `blur(10px)` は `0%` のキーフレームで `blur(5px)` を置き換えます。これはプロパティの既定値です。
* `add` を指定すると、 `0%` のキーフレームの合成効果値は `blur(5px) blur(10px)` になります。
* `accumulate` を指定すると、 `0%` のキーフレームの合成効果値は `blur(15px)` になります。

**メモ:** 合成演算は、キーフレーム内で指定することもできます。その場合、指定した合成演算は、まずそのキーフレーム内の各プロパティに対して使用され、次に次のキーフレーム内の各プロパティに対して使用されます。

公式定義
----

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

形式文法
----
```

animation-composition =
  <single-animation-composition>#

<single-animation-composition> =
  replace     |
  add         |
  accumulate

```

例
-

### animation-composition 値の理解

下記の例では、様々な `animation-composition` の値を横に並べて効果を表示しています。

#### HTML

```html
<div class="container">
  replace
  <div id="replace" class="target"></div>
</div>
<div class="container">
  add
  <div id="add" class="target"></div>
</div>
<div class="container">
  accumulate
  <div id="accumulate" class="target"></div>
</div>
```

#### CSS

ここで基盤値は `translateX(50px) rotate(45deg)` です。
```

.container {
  width: 230px;
  height: 200px;
  background: cyan;
  display: inline-block;
  text-align: center;
}

.target {
  width: 20px;
  height: 50px;
  background: green;
  border-radius: 10px;
  margin: 20px 0;
}
```

```css
@keyframes slide {
  20%,
 40% {
    transform: translateX(100px);
    background: yellow;
  }
  80%,
 100% {
    transform: translateX(150px);
    background: orange;
  }
}

.target {
  transform: translateX(30px) rotate(45deg);
  animation: slide 5s linear infinite;
}
.target:hover {
  animation-play-state: paused;
}
#replace {
  animation-composition: replace;
}
#add {
  animation-composition: add;
}
#accumulate {
  animation-composition: accumulate;
}
```

#### 結果

* `replace` を使用すると、 `transform` プロパティの `0%, 20%` のキーフレームでの最終的な効果値は `translateX(100px)` になります（基盤の値である `translateX(30px) rotate(45deg)` を完全に置き換えます）。この場合、要素は 45deg から 0deg まで回転し、要素自体に設定された既定値から 0% マークで設定された回転しない値までアニメーションします。これが既定の動作です。
* `add` を使用すると、 `transform` プロパティの `0%, 20%` のキーフレームでの最終的な効果値は、`translateX(30px) rotate(45deg)` に `translateX(100px)` が続きます。つまり、要素は右に `30px` 移動し、`45deg` 回転し、さらに X 軸方向に `100px` 移動します。
* `accumulate` を称すると、 `0%, 20%` キーフレームでの最終的な効果値は `translateX(130px) rotate(45deg)` になります。つまり、 2 つの X 軸の移動値 `30px` と `100px` が結合または「累積」されます。
仕様書
---

| Specification |
| --- |
| CSS Animations Level 2 # animation-composition |

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

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

関連情報
----

* CSS アニメーションの使用
* KeyFrameEffect の composite プロパティ (en-US)
* 他の関連アニメーションプロパティ: `animation`, `animation-delay`, `animation-direction`, `animation-duration`, `animation-fill-mode`, `animation-iteration-count`, `animation-name`, `animation-play-state`, `animation-timeline`, `animation-timing-function`


border-block-start-width - CSS: カスケーディングスタイルシート

border-block-start-width
========================

**`border-block-start-width`** は CSS のプロパティで、要素の論理的なブロックの先頭側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応づけられます。これは `border-top-width`, `border-right-width`, `border-bottom-width`, `border-left-width` の何れかに対応し、どれに対応するかは `writing-mode`, `direction`, `text-orientation` で定義された値によって決まります。

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

構文
--

```css
/\* <'border-width'> 値 \*/
border-block-start-width: 5px;
border-block-start-width: thick;

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

関連するプロパティとしては、 `border-block-end-width`, `border-inline-start-width`, `border-inline-end-width` が要素の他の境界の幅を定義します。

|  |  |
| --- | --- |
| 初期値 | `medium` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの論理的な幅 |
| 計算値 | 絶対的な長さ、境界スタイルが `none` または `hidden` であれば `0` |
| アニメーションの種類 | 計算値の型による |

### 値

`<'border-width'>`

境界の幅です。 `border-width` を参照してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `medium` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの論理的な幅 |
| 計算値 | 絶対的な長さ、境界スタイルが `none` または `hidden` であれば `0` |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

border-block-start-width =
  <line-width>

<line-width> =
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

```

例
-

### 縦書きテキストの境界の太さ

#### 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: 1px solid blue;
  border-block-start-width: 5px;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # border-width |

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

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

関連情報
----

* このプロパティは `border-top-width`, `border-right-width`, `border-bottom-width`, `border-left-width` のうちの1つに対応づけられます
* `writing-mode`, `direction`, `text-orientation`


CSS リファレンス - CSS: カスケーディングスタイルシート

CSS リファレンス
==========

この **CSS リファレンス** は、すべての標準 CSS プロパティ、擬似クラス、擬似要素、データ型、関数記法、アットルール のアルファベット順の索引として利用できます。また、すべての CSS 種類別セレクター の一覧および 重要な CSS の概念 の一覧もあります。また、簡単な DOM-CSS / CSSOM リファレンス も含まれています。

基本的なルールと構文
----------

### スタイルルールの構文
```

スタイルルール ::=
    セレクターリスト {
      プロパティリスト
    }
```

ここで、
```

セレクターリスト ::=
    セレクター[:擬似クラス] [::擬似要素]
    [, セレクターリスト]

プロパティリスト ::=
    [プロパティ : 値] [; プロパティリスト]
```

下記の *セレクター*、*擬似クラス*、*擬似要素* の一覧を参照してください。 各指定*値*の構文は、各指定*プロパティ*に定義されたデータ型に依存します。

#### スタイルルールの例

```css
strong {
  color: red;
}

div.menu-bar li:hover > ul {
  display: block;
}
```

初心者レベルの CSS セレクター構文への入門については、 CSS セレクターのガイドをご覧ください。ルール定義内での CSS 構文 エラーは、そのルール全体を無効にするので十分に注意してください。無効なルールはブラウザーにより無視されます。 CSS ルールの定義はすべて (ASCII) テキストベース であり、DOM-CSS / CSSOM (ルール管理システム) は オブジェクトベース なので注意してください。

### アットルールの構文

アットルールの構造は様々であるため、知りたい構文について調べるにはアットルールのページをご覧ください。

索引
--

**メモ:** この索引でのプロパティ名は、CSS 標準の名前と異なる JavaScript の名前は含んでいません。

### -

* `--*`
* `-webkit-line-clamp`

### A

* `abs()` (en-US)
* `accent-color`
* `acos()` (en-US)
* `:active`
* `additive-symbols (@counter-style)`
* `::after (:after)`
* `align-content`
* `align-items`
* `align-self`
* `align-tracks`
* `all`
* `<an-plus-b>`
* `<angle>`
* `<angle-percentage>`
* `animation`
* `animation-composition`
* `animation-delay`
* `animation-direction`
* `animation-duration`
* `animation-fill-mode`
* `animation-iteration-count`
* `animation-name`
* `animation-play-state`
* `animation-range`
* `animation-range-end`
* `animation-range-start`
* `animation-timeline`
* `animation-timing-function`
* `@annotation`
* `:any-link`
* `appearance`
* `ascent-override (@font-face)`
* `asin()` (en-US)
* `aspect-ratio`
* `atan()` (en-US)
* `atan2()` (en-US)
* `attr()`

### B

* `::backdrop`
* `backdrop-filter`
* `backface-visibility`
* `background`
* `background-attachment`
* `background-blend-mode`
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position`
* `background-position-x`
* `background-position-y`
* `background-repeat`
* `background-size`
* `base-palette (@font-palette-values)` (en-US)
* `<basic-shape>`
* `::before (:before)`
* `:blank`
* `bleed (@page)`
* `<blend-mode>`
* `block-size`
* `blur()`
* `border`
* `border-block`
* `border-block-color`
* `border-block-end`
* `border-block-end-color`
* `border-block-end-style`
* `border-block-end-width`
* `border-block-start`
* `border-block-start-color`
* `border-block-start-style`
* `border-block-start-width`
* `border-block-style`
* `border-block-width`
* `border-bottom`
* `border-bottom-color`
* `border-bottom-left-radius`
* `border-bottom-right-radius`
* `border-bottom-style`
* `border-bottom-width`
* `border-collapse`
* `border-color`
* `border-end-end-radius`
* `border-end-start-radius`
* `border-image`
* `border-image-outset`
* `border-image-repeat`
* `border-image-slice`
* `border-image-source`
* `border-image-width`
* `border-inline`
* `border-inline-color`
* `border-inline-end`
* `border-inline-end-color`
* `border-inline-end-style`
* `border-inline-end-width`
* `border-inline-start`
* `border-inline-start-color`
* `border-inline-start-style`
* `border-inline-start-width`
* `border-inline-style`
* `border-inline-width`
* `border-left`
* `border-left-color`
* `border-left-style`
* `border-left-width`
* `border-radius`
* `border-right`
* `border-right-color`
* `border-right-style`
* `border-right-width`
* `border-spacing`
* `border-start-end-radius`
* `border-start-start-radius`
* `border-style`
* `border-top`
* `border-top-color`
* `border-top-left-radius`
* `border-top-right-radius`
* `border-top-style`
* `border-top-width`
* `border-width`
* `bottom`
* `@bottom-center`
* `box-decoration-break`
* `box-shadow`
* `box-sizing`
* `break-after`
* `break-before`
* `break-inside`
* `brightness()`

### C

* `calc()`
* `caption-side`
* `caret`
* `caret-color`
* `caret-shape`
* `@character-variant`
* `@charset`
* `:checked`
* `circle()`
* `clamp()`
* `clear`
* `clip`
* `clip-path`
* `<color>`
* `color`
* `color-scheme`
* `column-count`
* `column-fill`
* `column-gap`
* `column-rule`
* `column-rule-color`
* `column-rule-style`
* `column-rule-width`
* `column-span`
* `column-width`
* `columns`
* `conic-gradient()`
* `contain`
* `contain-intrinsic-block-size` (en-US)
* `contain-intrinsic-height` (en-US)
* `contain-intrinsic-inline-size` (en-US)
* `contain-intrinsic-size`
* `contain-intrinsic-width` (en-US)
* `container`
* `container-name`
* `container-type`
* `content`
* `content-visibility`
* `contrast()`
* `cos()` (en-US)
* `<counter>`
* `counter-increment`
* `counter-reset`
* `counter-set`
* `@counter-style`
* `counters()`
* `cross-fade()`
* `cubic-bezier()`
* `::cue`
* `::cue-region`
* `:current` (en-US)
* `cursor`
* `<custom-ident>`
* `length#cap`
* `length#ch`
* `length#cm`

### D

* `angle#deg`
* `<dashed-ident>`
* `:default`
* `:defined`
* `descent-override (@font-face)`
* `<dimension>`
* `:dir`
* `direction`
* `:disabled`
* `display`
* `<display-box>`
* `<display-inside>`
* `<display-internal>`
* `<display-legacy>`
* `<display-listitem>`
* `<display-outside>`
* `drop-shadow()`
* `resolution#dpcm`
* `resolution#dpi`
* `resolution#dppx`

### E

* `<easing-function>`
* `element()`
* `ellipse()`
* `:empty`
* `empty-cells`
* `:enabled`
* `env()`
* `exp()` (en-US)
* `length#em`
* `length#ex`

### F

* `fallback (@counter-style)`
* `filter`
* `<filter-function>`
* `:first`
* `:first-child`
* `::first-letter (:first-letter)`
* `::first-line (:first-line)`
* `:first-of-type`
* `fit-content()`
* `<flex>`
* `flex`
* `flex-basis`
* `flex-direction`
* `flex-flow`
* `flex-grow`
* `flex-shrink`
* `flex-wrap`
* `flex_value#fr`
* `float`
* `:focus`
* `:focus-visible`
* `:focus-within`
* `font`
* `font-display (@font-face)`
* `@font-face`
* `font-family`
* `font-family (@font-face)`
* `font-family (@font-palette-values)` (en-US)
* `font-feature-settings`
* `font-feature-settings (@font-face)` (en-US)
* `@font-feature-values`
* `font-kerning`
* `font-language-override`
* `font-optical-sizing`
* `font-palette` (en-US)
* `@font-palette-values` (en-US)
* `font-size`
* `font-size-adjust`
* `font-stretch`
* `font-stretch (@font-face)`
* `font-style`
* `font-style (@font-face)`
* `font-synthesis`
* `font-synthesis-position` (en-US)
* `font-synthesis-small-caps` (en-US)
* `font-synthesis-style` (en-US)
* `font-synthesis-weight` (en-US)
* `font-variant`
* `font-variant-alternates`
* `font-variant-caps`
* `font-variant-east-asian`
* `font-variant-emoji` (en-US)
* `font-variant-ligatures`
* `font-variant-numeric`
* `font-variant-position`
* `font-variation-settings`
* `font-variation-settings (@font-face)`
* `font-weight`
* `font-weight (@font-face)`
* `forced-color-adjust`
* `format()`
* `<frequency>`
* `<frequency-percentage>`
* `:fullscreen`
* `:future` (en-US)

### G

* `angle#grad`
* `gap`
* `<gradient>`
* `::grammar-error`
* `grayscale()`
* `grid`
* `grid-area`
* `grid-auto-columns`
* `grid-auto-flow`
* `grid-auto-rows`
* `grid-column`
* `grid-column-end`
* `grid-column-start`
* `grid-row`
* `grid-row-end`
* `grid-row-start`
* `grid-template`
* `grid-template-areas`
* `grid-template-columns`
* `grid-template-rows`

### H

* `frequency#Hz`
* `hanging-punctuation`
* `:has`
* `height`
* `@historical-forms`
* `:host()`
* `:host-context()`
* `:hover`
* `hsl()`
* `hsla()`
* `hue-rotate()`
* `hwb()`
* `hyphenate-character`
* `hyphenate-limit-chars` (en-US)
* `hyphens`
* `hypot()` (en-US)

### I

* `<ident>`
* `<image>`
* `image()`
* `image-orientation`
* `image-rendering`
* `image-resolution`
* `image-set()`
* `@import`
* `:in-range`
* `:indeterminate`
* `inherit`
* `inherits (@property)`
* `initial`
* `initial-letter`
* `initial-letter-align`
* `initial-value (@property)`
* `inline-size`
* `input-security`
* `inset`
* `inset()`
* `inset-block`
* `inset-block-end`
* `inset-block-start`
* `inset-inline`
* `inset-inline-end`
* `inset-inline-start`
* `<integer>`
* `:invalid`
* `invert()`
* `:is`
* `isolation`
* `length#ic`
* `length#in`

### J

* `justify-content`
* `justify-items`
* `justify-self`
* `justify-tracks`

### K

* `frequency#kHz`
* `@keyframes`

### L

* `lab()`
* `:lang`
* `:last-child`
* `:last-of-type`
* `@layer`
* `layer()`
* `layer() (@import)`
* `lch()`
* `leader()`
* `:left`
* `left`
* `@left-bottom`
* `<length>`
* `<length-percentage>`
* `letter-spacing`
* `light-dark()`
* `line-break`
* `line-clamp`
* `line-gap-override (@font-face)`
* `line-height`
* `line-height-step`
* `<line-style>` (en-US)
* `linear-gradient()`
* `:link`
* `list-style`
* `list-style-image`
* `list-style-position`
* `list-style-type`
* `local()`
* `:local-link` (en-US)
* `log()` (en-US)

### M

* `length#mm`
* `margin`
* `margin-block`
* `margin-block-end`
* `margin-block-start`
* `margin-bottom`
* `margin-inline`
* `margin-inline-end`
* `margin-inline-start`
* `margin-left`
* `margin-right`
* `margin-top`
* `margin-trim`
* `::marker`
* `marks (@page)`
* `mask`
* `mask-border`
* `mask-border-mode`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-slice`
* `mask-border-source`
* `mask-border-width`
* `mask-clip`
* `mask-composite`
* `mask-image`
* `mask-mode`
* `mask-origin`
* `mask-position`
* `mask-repeat`
* `mask-size`
* `mask-type`
* `masonry-auto-flow`
* `math-depth`
* `math-shift`
* `math-style`
* `matrix()`
* `matrix3d()`
* `max()`
* `max-block-size`
* `max-height`
* `max-inline-size`
* `max-lines`
* `max-width`
* `@media`
* `min()`
* `min-block-size`
* `min-height`
* `min-inline-size`
* `min-width`
* `minmax()`
* `mix-blend-mode`
* `mod()` (en-US)
* `time#ms`

### N

* `@namespace`
* `negative (@counter-style)`
* `:not`
* `:nth-child`
* `:nth-last-child`
* `:nth-last-of-type`
* `:nth-of-type`
* `<number>`

### O

* `object-fit`
* `object-position`
* `offset`
* `offset-anchor`
* `offset-distance`
* `offset-path`
* `offset-position`
* `offset-rotate`
* `:only-child`
* `:only-of-type`
* `opacity`
* `opacity()`
* `:optional`
* `order`
* `@ornaments`
* `orphans`
* `:out-of-range`
* `outline`
* `outline-color`
* `outline-offset`
* `outline-style`
* `outline-width`
* `<overflow>`
* `overflow-anchor`
* `overflow-block`
* `overflow-clip-margin`
* `overflow-inline`
* `overflow-wrap`
* `overflow-x`
* `overflow-y`
* `overlay` (en-US)
* `override-colors (@font-palette-values)` (en-US)
* `overscroll-behavior`
* `overscroll-behavior-block`
* `overscroll-behavior-inline`
* `overscroll-behavior-x`
* `overscroll-behavior-y`

### P

* `Pseudo-classes`
* `Pseudo-elements`
* `length#pc`
* `length#pt`
* `length#px`
* `pad (@counter-style)`
* `padding`
* `padding-block`
* `padding-block-end`
* `padding-block-start`
* `padding-bottom`
* `padding-inline`
* `padding-inline-end`
* `padding-inline-start`
* `padding-left`
* `padding-right`
* `padding-top`
* `@page`
* `page` (en-US)
* `page-break-after`
* `page-break-before`
* `page-break-inside`
* `page-orientation (@page)` (en-US)
* `paint()`
* `paint-order`
* `::part`
* `:past` (en-US)
* `path()`
* `:paused`
* `<percentage>`
* `perspective`
* `perspective()`
* `perspective-origin`
* `:picture-in-picture`
* `place-content`
* `place-items`
* `place-self`
* `::placeholder`
* `:placeholder-shown`
* `:playing`
* `pointer-events`
* `polygon()`
* `<position>`
* `position`
* `pow()` (en-US)
* `prefix (@counter-style)`
* `print-color-adjust`
* `@property`

### Q

* `length#Q`
* `quotes`

### R

* `angle#rad`
* `length#rem`
* `radial-gradient()`
* `range (@counter-style)`
* `<ratio>`
* `ray()` (en-US)
* `:read-only`
* `:read-write`
* `rect()`
* `rem()` (en-US)
* `repeat()`
* `repeating-conic-gradient()` (en-US)
* `repeating-linear-gradient()`
* `repeating-radial-gradient()`
* `:required`
* `resize`
* `<resolution>`
* `reversed()`
* `revert`
* `rgb()`
* `rgba()`
* `:right`
* `right`
* `@right-bottom`
* `:root`
* `rotate`
* `rotate()`
* `rotate3d()`
* `rotateX()`
* `rotateY()`
* `rotateZ()`
* `round()` (en-US)
* `row-gap`
* `ruby-align`
* `ruby-merge`
* `ruby-position`

### S

* `saturate()`
* `scale`
* `scale()`
* `scale3d()`
* `scaleX()`
* `scaleY()`
* `scaleZ()`
* `:scope`
* `@scope` (en-US)
* `scroll()` (en-US)
* `scroll-behavior`
* `scroll-margin`
* `scroll-margin-block`
* `scroll-margin-block-end`
* `scroll-margin-block-start`
* `scroll-margin-bottom`
* `scroll-margin-inline`
* `scroll-margin-inline-end`
* `scroll-margin-inline-start`
* `scroll-margin-left`
* `scroll-margin-right`
* `scroll-margin-top`
* `scroll-padding`
* `scroll-padding-block`
* `scroll-padding-block-end`
* `scroll-padding-block-start`
* `scroll-padding-bottom`
* `scroll-padding-inline`
* `scroll-padding-inline-end`
* `scroll-padding-inline-start`
* `scroll-padding-left`
* `scroll-padding-right`
* `scroll-padding-top`
* `scroll-snap-align`
* `scroll-snap-stop`
* `scroll-snap-type`
* `scroll-timeline`
* `scroll-timeline-axis`
* `scroll-timeline-name`
* `scrollbar-color`
* `scrollbar-gutter` (en-US)
* `scrollbar-width`
* `::selection`
* `selector()`
* `sepia()`
* `<shape>`
* `shape-image-threshold`
* `shape-margin`
* `shape-outside`
* `sign()` (en-US)
* `sin()` (en-US)
* `size (@page)`
* `size-adjust (@font-face)`
* `skew()`
* `skewX()`
* `skewY()`
* `::slotted`
* `speak-as (@counter-style)`
* `::spelling-error`
* `sqrt()` (en-US)
* `src (@font-face)`
* `@starting-style` (en-US)
* `steps()`
* `<string>`
* `@styleset`
* `@stylistic`
* `suffix (@counter-style)`
* `@supports`
* `supports() (@import)`
* `@swash`
* `symbols (@counter-style)`
* `symbols()`
* `syntax (@property)`
* `system (@counter-style)`
* `time#s`

### T

* `angle#turn`
* `tab-size`
* `table-layout`
* `tan()` (en-US)
* `:target`
* `target-counter()`
* `target-counters()`
* `::target-text`
* `target-text()`
* `:target-within` (en-US)
* `text-align`
* `text-align-last`
* `text-combine-upright`
* `text-decoration`
* `text-decoration-color`
* `text-decoration-line`
* `text-decoration-skip`
* `text-decoration-skip-ink`
* `text-decoration-style`
* `text-decoration-thickness`
* `text-emphasis`
* `text-emphasis-color`
* `text-emphasis-position`
* `text-emphasis-style`
* `text-indent`
* `text-justify`
* `text-orientation`
* `text-overflow`
* `text-rendering`
* `text-shadow`
* `text-size-adjust`
* `text-transform`
* `text-underline-offset`
* `text-underline-position`
* `text-wrap` (en-US)
* `<time>`
* `<time-percentage>`
* `timeline-scope` (en-US)
* `top`
* `@top-center`
* `touch-action`
* `transform`
* `transform-box`
* `<transform-function>`
* `transform-origin`
* `transform-style`
* `transition`
* `transition-behavior` (en-US)
* `transition-delay`
* `transition-duration`
* `transition-property`
* `transition-timing-function`
* `translate`
* `translate()`
* `translate3d()`
* `translateX()`
* `translateY()`
* `translateZ()`
* `type()`

### U

* `unicode-bidi`
* `unicode-range (@font-face)`
* `unset`
* `<url>`
* `url()`
* `:user-invalid`
* `user-select`
* `:user-valid`

### V

* `length#vh`
* `length#vmax`
* `length#vmin`
* `length#vw`
* `:valid`
* `var()`
* `vertical-align`
* `view()`
* `view-timeline`
* `view-timeline-axis`
* `view-timeline-inset`
* `view-timeline-name`
* `::view-transition`
* `::view-transition-group`
* `::view-transition-image-pair`
* `view-transition-name`
* `::view-transition-new`
* `::view-transition-old`
* `visibility`
* `:visited`

### W

* `:where`
* `white-space`
* `white-space-collapse` (en-US)
* `widows`
* `width`
* `will-change`
* `word-break`
* `word-spacing`
* `word-wrap`
* `writing-mode`

### X

* `resolution#x`

### Z

* `z-index`

### Others

* `--*`

セレクター
-----

以下は様々なセレクターで、 DOM 内の要素の様々な特徴に基づいた条件付きのスタイル付けを可能にします。

### 基本セレクター

**基本セレクター**は基礎的なセレクターです。これらは最も基本的なセレクターで、他のより複雑なセレクターを作成するために頻繁に組み合わせられます。

* 全称セレクター `*`
* 要素型セレクター `elementname`
* クラスセレクター `.classname`
* ID セレクター `#idname`
* 属性セレクター `[attr=value]`
### グループ化セレクター

セレクターリスト `A, B`

`A` と `B` の両方の要素が選択されることを指定します。これは複数の一致する要素をグループ化する方法です。

### 結合子

結合子 (Combinator) は 2 つ以上の単純セレクターの関係、例えば「`A` は `B` の子である」や「`A` は `B` の子孫である」などを確立し、複合セレクターを作成するためのセレクターです。

次兄弟結合子 `A + B`

`A` と `B` のそれぞれで選択された要素が同じ親を持ち、かつ `B` で選択された要素が `A` で選択された要素の水平的な直後にあることを指定します。

後続兄弟結合子 `A ~ B`

`A` と `B` のそれぞれで選択された要素が同じ親を共有しており、かつ `A` で選択された要素が `B` の前に — ただし直前である必要はありませんが — 来た場合を指定します。

子結合子 `A > B`

`B` で選択された要素のうち、 `A` で選択された要素の直接の子であるものを指定します。

子孫結合子 `A B`

`B` で選択された要素のうち、 `A`で選択された要素の子孫であるものを指定します。直接の子である必要はありません。

列結合子 `A || B`
Experimental

`B` で指定された要素のうち、 `A` で指定された表の列にあるものを指定します。複数の列にまたがる要素は、そのすべての列のメンバーであるとみなされます。

### 擬似クラスと擬似要素

擬似クラス `:`

選択された要素が特別な状態にあることを指定します。

擬似要素 `::`

HTML に含まれていないエンティティを表します。

**メモ:** **関連情報:** Selectors Level 4 仕様書におけるセレクター。

概念
--

### 構文と意味

* CSS 構文
* アットルール
* カスケード
* コメント
* 記述子
* 継承
* 一括指定プロパティ
* 優先度
* 値定義構文
* CSS 単位と値の種類
* CSS 関数記法
### 値

* 実効値
* 算出値
* 初期値
* 解決値
* 指定値
* 使用値
### レイアウト

* ブロック整形コンテキスト
* ボックスモデル
* 包含ブロック
* レイアウトモード
* マージンの相殺
* 置換要素
* 重ね合わせコンテキスト
* 視覚整形モデル
DOM-CSS / CSSOM
---------------

### 主なオブジェクトの種類

* `Document.styleSheets`
* `styleSheets[i].cssRules`
* `cssRules[i].cssText` (セレクターとスタイル)
* `cssRules[i].selectorText`
* `HTMLElement.style`
* `HTMLElement.style.cssText` (スタイルのみ)
* `Element.className`
* `Element.classList`
### 重要なメソッド

* `CSSStyleSheet.insertRule()`
* `CSSStyleSheet.deleteRule()`
関連情報
----

* Mozilla CSS 拡張 (`-moz-` 接頭辞付き)
* WebKit CSS 拡張 (ほとんどが `-webkit-` 接頭辞付き)
外部リンク
-----

* CSS 目次 (w3.org)


inset-block-end - CSS: カスケーディングスタイルシート

inset-block-end
===============

**`inset-block-end`** は CSS のプロパティで、要素における末尾からの論理的なオフセットを定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 `top`, `right`, `bottom`, `left` のいずれかのプロパティに、 `writing-mode`, `direction`, `text-orientation` で定義された値に従って対応します。

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

構文
--

```css
/\* <length> 値 \*/
inset-block-end: 3px;
inset-block-end: 2.4em;

/\* 包含ブロックの幅または高さに対する <percentage> 値 \*/
inset-block-end: 10%;

/\* キーワード値 \*/
inset-block-end: auto;

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

### 値

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | 位置指定要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの論理的な高さ |
| 計算値 | 方向が論理的である以外はボックスのオフセット、 `top`, `right`, `bottom`, `left` と同じ |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

inset-block-end =
  auto                 |
  <length-percentage>

<length-percentage> =
  <length>      |
  <percentage>

```

例
-

### ブロック方向の末尾のオフセットの設定

#### HTML

```html
<div>
  <p class="exampleText">テキストの例</p>
</div>
```

#### CSS

```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  position: relative;
  inset-block-end: 20px;
  background-color: #c8c800;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # position-properties |

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

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

関連情報
----

* 内部位置を定義する他のプロパティ: `inset-block-start`, `inset-inline-start`, `inset-inline-end`
* 対応する物理的プロパティ: `top`, `right`, `bottom`, `left`
* `writing-mode`, `direction`, `text-orientation`


text-rendering - CSS: カスケーディングスタイルシート

text-rendering
==============

**`text-rendering`** は CSS のプロパティで、テキストを描画するときの最適化方法に関する情報をレンダリングエンジンに提供します。

ブラウザーは速さ、読みやすさ、位置の正確さをトレードオフにします。

```css
/\* キーワード値 \*/
text-rendering: auto;
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;

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

**メモ:** `text-rendering` プロパティは SVG のプロパティであり、 CSS 標準では定義されていません。しかし、 Windows, MacOS, Linux の Gecko や WebKit のブラウザーでは、このプロパティを HTML や XML のコンテンツに適用することができます。

とても目に見えやすい効果は `optimizeLegibility` で、一部のフォント (例えば、 Microsoft の *Calibri*, *Candara*, *Constantia*, *Corbel*、または *DejaVu* フォントファミリー) において 20px より小さい文字に合字 (ff, fi, fl, など) を適用します。

構文
--

### 値

`auto`

ブラウザーはテキストを描画する際に、速さ、読みやすさ、位置の正確さの最適化について経験的な推測を行います。この値のブラウザーによる解釈の違いについては、ブラウザーの対応をご覧ください。

`optimizeSpeed`

ブラウザーは文字を描画する際に、読みやすさや位置の正確さよりも、速さを強調します。カーニングや合字を無効にします。

`optimizeLegibility`

ブラウザーは速さや位置の正確さよりも、読みやすさを強調します。カーニングを有効にし、合字は任意です。

`geometricPrecision`

ブラウザーは速さや読みやすさよりも、位置の正確さを強調します。フォントの一部の側面 — カーニングなど — は、倍率に比例しません。そのため、この値はこれらのフォントを使ったテキストを美しくすることができます。

SVG では、テキストが拡大または縮小されるとき、ブラウザーはテキストの最終的な寸法 (特定のフォントの大きさと適用される倍率によって決まる) を計算し、プラットフォームのフォントシステムに計算値のフォントを要求します。しかし、大きさ 9 で倍率 140% のフォントを要求すると、フォントの大きさの結果は 12.6 となり、フォントシステムに存在するものではなくなるので、ブラウザーはフォントの大きさを 12 に丸めます。結果的に、テキストは段階的な倍率になります。

しかし、 `geometricPrecision` は — レンダリングエンジンが完全に対応していれば — なめらかにテキストを拡縮することができます。倍率が大きい場合、文字列の描画があまり美しくならないかもしれませんが、寸法は Windows や Linux が対応しているフォントの大きさに切り上げられたり切り捨てられたりせず、期待通りになります。

**メモ:** WebKit は指定された値を厳密に適用しますが、 Gecko は値を `optimizeLegibility` と同様に扱います。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | テキスト要素 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

text-rendering =
  auto                |
  optimizeSpeed       |
  optimizeLegibility  |
  geometricPrecision

```

例
-

### optimizeLegibility の自動的な適用

`font-size` が `20px` 未満の場合にブラウザーが自動的に `optimizeLegibility` を使用する方法を紹介します。

#### HTML

```html
<p class="small">LYoWAT - ff fi fl ffl</p>
<p class="big">LYoWAT - ff fi fl ffl</p>
```

#### CSS

```css
.small {
  font:
    19.9px "Constantia",
    "Times New Roman",
    "Georgia",
    "Palatino",
    serif;
}
.big {
  font:
    20px "Constantia",
    "Times New Roman",
    "Georgia",
    "Palatino",
    serif;
}
```

#### 結果

### optimizeSpeed と optimizeLegibility

この例は、 `optimizeSpeed` と `optimizeLegibility` の (このブラウザーでの) 表示方法の違いを紹介します (ブラウザーによって違います)。

#### HTML

```html
<p class="speed">LYoWAT - ff fi fl ffl</p>
<p class="legibility">LYoWAT - ff fi fl ffl</p>
```

#### CSS

```css
p {
  font:
    1.5em "Constantia",
    "Times New Roman",
    "Georgia",
    "Palatino",
    serif;
}

.speed {
  text-rendering: optimizeSpeed;
}
.legibility {
  text-rendering: optimizeLegibility;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # TextRenderingProperty |

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

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

関連情報
----

* `<canvas>` に文字を描く
* CSS テキスト装飾 モジュール
* 関連する CSS プロパティ
    + `text-decoration` (および `text-decoration-line`, `text-decoration-style`, `text-decoration-thickness` などの個別指定プロパティ)
    + `text-emphasis` (および `text-emphasis-color`, `text-emphasis-position`, and `text-emphasis-style` などの個別指定プロパティ)
    + `text-shadow`
    + `text-transform`
* SVG の `text-rendering (en-US)` 属性
* SVG と CSS (en-US)


<position> - CSS: カスケーディングスタイルシート

<position>
==========

**`<position>`** (または **`<bg-position>`**) は CSS の データ型で、二次元の座標を表し、要素ボックスからの相対的な位置を示すために用いられます。 `background-position` および `offset-anchor` で使用されています。

**メモ:** `<position>` 値で記述される最終的な位置は、要素ボックスの中である必要はありません。

構文
--

![](/ja/docs/Web/CSS/position_value/position_type.png)`<position>` データ型は 1 ～ 2 つのキーワードと、任意のオフセットで定義されます。

キーワード値は `center`、 `top`、 `right`、 `bottom`、 `left` です。それぞれのキーワードは要素ボックスの辺または2辺の中心線を表します。使われる場所によって、 `center` は左右の辺の中心か、上下の辺の中心を表します。

オフセット値を指定する場合は、相対的な `<percentage>` 値か絶対的な `<length>` 値のどちらかで指定することができます。正の数は右または下（適切な方）に向けたオフセットで、負の数は逆方向のオフセットです。

単一のオフセット値のみが指定された場合は X 座標を定義し、もう一方の軸は既定値の `center` に設定されます。

```css
/\* 値 1 つの構文 \*/
keyword                  /\* 水平位置または垂直位置。もう一方の軸は既定値の center になる \*/
value                    /\* X 座標の位置。 Y 座標は既定値の 50% になる \*/

/\* 値 2 つの構文 \*/
keyword keyword          /\* それぞれの方向のキーワード（順不同） \*/
keyword value            /\* キーワードで定義された辺からのオフセット \*/
value keyword            /\* 水平位置を表す値、垂直位置を表すキーワード \*/
value value              /\* それぞれの方向（水平、垂直）の距離の値 \*/

/\* 値 4 つの構文 \*/
keyword value keyword value /\* それぞれの値はその前のキーワードからのオフセット \*/
```

### 形式文法

```css
[
 [ left | center | right ] || [ top | center | bottom ]
|
 [ left | center | right | <length> | <percentage> ]
 [ top | center | bottom | <length> | <percentage> ]?
|
 [ [ left | right ] [ <length> | <percentage> ] ] &&
 [ [ top | bottom ] [ <length> | <percentage> ] ]
]
```

**メモ:** `background-position` プロパティも3つの値の構文を受け付けます。これは `<position>` を使用する他のプロパティでは許可されません。

補間
--

アニメーション時、座標の横軸と縦軸の値が独立して補間されます。ただし、補間の速度は両方の座標で1つのタイミング関数が用いられるため、座標は直線に移動します。

例
-

### 有効な位置
```

center
left
center top

right 8.5%
bottom 12vmin right -6px

10% 20%
8rem 14px
```

### 無効な位置
```

left right
bottom top
10px 15px 20px 15px
```

仕様書
---

| Specification |
| --- |
| CSS Values and Units Module Level 4 # position |

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

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

関連情報
----

* CSS 値と単位
* CSS 値と単位の紹介
* `background-position`
* `radial-gradient()`
* `conic-gradient()`


grid-template-rows - CSS: カスケーディングスタイルシート

grid-template-rows
==================

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

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

* Learn more
* See full compatibility
* Report feedback
**`grid-template-rows`** は CSS のプロパティで、グリッド行の線名とトラックのサイズ変更機能を定義します。

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

構文
--

```css
/\* キーワード値 \*/
grid-template-rows: none;

/\* <track-list> 値 \*/
grid-template-rows: 100px 1fr;
grid-template-rows: [linename] 100px;
grid-template-rows: [linename1] 100px [linename2 linename3];
grid-template-rows: minmax(100px, 1fr);
grid-template-rows: fit-content(40%);
grid-template-rows: repeat(3, 200px);
grid-template-rows: subgrid;
grid-template-rows: masonry;

/\* <auto-track-list> 値 \*/
grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
grid-template-rows:
  minmax(100px, max-content)
  repeat(auto-fill, 200px) 20%;
grid-template-rows:
  [linename1] 100px [linename2]
  repeat(auto-fit, [linename3 linename4] 300px)
  100px;
grid-template-rows:
  [linename1 linename2] 100px
  repeat(auto-fit, [linename1] 300px) [linename3];

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

このプロパティは以下のように指定することができます。

* キーワード値 `none`
* `<track-list>` 値
* `<auto-track-list>` 値のいずれか
### 値

`none`

明示的なグリッドがないことを示すキーワードです。どの列も暗黙的に生成され、それらのサイズは `grid-auto-rows` プロパティによって決定されます。

`[線名]`

`<custom-ident>` で、その位置にある線の名称を指定します。識別子には、予約語の `span` と `auto` 以外の有効な文字列を指定してください。行は、`[line-name-a line-name-b]`のように、角括弧内のスペースで区切られた複数の名前を持つことができます。

`<length>`

負の値ではない長さで、列の幅を指定します。

`<percentage>`

グリッドコンテナーのブロック方向の寸法に対する相対値で、負ではない `<percentage>` です。グリッドコンテナーのサイズがそのトラックのサイズに依存している場合、グリッドコンテナーの内在サイズを計算するために、パーセント値は `auto` として扱われなければなりません。トラックの内在的なサイズの寄与によって、グリッドコンテナーの寸法に合わせられ、パーセント値を尊重した結果、最小の大きさによってトラックの最終的な寸法を増加させる可能性があります。

`<flex>`

`fr` の単位の付いた負の数ではない距離で、トラックのフレックス係数を指定します。 `<flex>` の寸法のトラックは、残りの空間をフレックス係数の割合に比例して共有します。 `minmax()` 表記の外に現れた場合は、最小値が自動として扱われます (つまり `minmax(auto, <flex>)`)。

`max-content`

グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最大値を表すキーワードです。

`min-content`

グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最小値を表すキーワードです。

`minmax(min, max)`

*min* 以上、 *max* 以下の寸法の範囲を定義する関数表記法です。 *max* が *min* より小さい場合、 *max* は無視され、関数は *min* として扱われます。最大値として、 `<flex>` 値はトラックのフレックス係数を設定します。最小値としては無効です。

`auto`

最大値であれば max-content と同一のキーワードです。

最小値の場合は、グリッドトラックを占めるグリッドアイテムの最大の最小寸法 (`min-width`/`min-height` で指定されたもの) を表します。ふつうは `min-content` ですが、必ずそうとは限りません。

`minmax()` の外で使われた場合、 `auto` は上記の最小値と最大値の間の範囲を表します。これはほとんどの場合、`minmax(min-content,max-content)` と同じように動作します。

**メモ:** トラックの寸法が `auto` の場合 (そして `auto` の場合だけ)、 `align-content` および`justify-content` プロパティによって引き伸ばされることがあります。

`fit-content( [ <length> | <percentage> ] )`

`min(max-content, max(auto, argument))` の式を表し、 `auto` と同様に（すなわち `minmax(auto, max-content)` と）計算されますが、トラックの寸法が `auto` の最小値よりも大きい場合は *argument* でクランプされるところが異なります。

`repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )`

トラックリストの繰り返しフラグメントを表し、繰り返しパターンを示す多数の行をよりコンパクトな形式で記述できるようにします。

`masonry`
Experimental

masonry の値は、この軸が組積アルゴリズムに従ってレイアウトされるべきであることを示します。

subgrid

`subgrid` の値は、グリッドがその軸に親グリッドのスパン部分を採用することを示します。グリッドの行や列のサイズは、明示的に指定されるのではなく、親グリッドの定義から取得されます。

**警告:** `masonry`の値は、グリッド仕様のレベル 3 のもので、現在は Firefox のフラグに隠された実験的な実装があるだけです。

サブグリッドの値はグリッド仕様書のレベル 2 にあり、現在のところ Firefox 71 以降でのみ実装されています。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | グリッドコンテナー |
| 継承 | なし |
| パーセント値 | コンテンツ領域の対応する寸法に対する相対値 |
| 計算値 | 指定通り。ただし相対的な長さはは絶対的な長さに変換される |
| アニメーションの種類 | 長さ、パーセント値、 calc の単純なリストであり、唯一の違いはリスト内の長さ、パーセント値、 calc の部分の値のみ |

形式文法
----
```

grid-template-rows =
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?

<track-list> =
  [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?

<auto-track-list> =
  [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]\* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]\* <line-names>?

<line-name-list> =
  [ <line-names> | <name-repeat> ]+

<line-names> =
  '[' <custom-ident>\* ']'

<track-size> =
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )

<track-repeat> =
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )

<fixed-size> =
  <fixed-breadth>                                   |
  minmax( <fixed-breadth> , <track-breadth> )       |
  minmax( <inflexible-breadth> , <fixed-breadth> )

<fixed-repeat> =
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

<auto-repeat> =
  repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

<name-repeat> =
  repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )

<track-breadth> =
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto

<inflexible-breadth> =
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto

<length-percentage> =
  <length>      |
  <percentage>

<fixed-breadth> =
  <length-percentage [0,∞]>

```

例
-

### グリッド行の寸法の指定

#### HTML

```html
<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>
```

#### CSS

```css
#grid {
  display: grid;
  height: 100px;
  grid-template-rows: 30px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # track-sizing |
| CSS Grid Layout Module Level 2 # subgrids |
| CSS Grid Layout Module Level 3 # masonry-layout |

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

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

関連情報
----

* 関連する CSS プロパティ: `grid-template-columns`, `grid-template-areas`, `grid-template`
* グリッドレイアウトガイド: グリッドレイアウトの基本概念 - グリッドトラック
* 動画チュートリアル: Defining a Grid
* サブグリッド


border-block-end-width - CSS: カスケーディングスタイルシート

border-block-end-width
======================

**`border-block-end-width`** は CSS のプロパティで、要素の論理的なブロックの終端側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応づけられます。これは `border-top-width`, `border-right-width`, `border-bottom-width`, `border-left-width` の何れかに対応し、どれに対応するかは `writing-mode`, `direction`, `text-orientation` で定義された値によって決まります。

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

構文
--

```css
/\* <'border-width'> 値 \*/
border-block-end-width: 5px;
border-block-end-width: thick;

/\* グローバル値 \*/
border-block-end-width: inherit;
border-block-end-width: initial;
border-block-end-width: revert;
border-block-end-width: unset;
```

関連するプロパティとしては、 `border-block-start-width`, `border-inline-start-width`, `border-inline-end-width` が要素の他の境界の幅を定義します。

### 値

`<'border-width'>`

境界の幅です。 `border-width` を参照してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `medium` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの論理的な幅 |
| 計算値 | 絶対的な長さ、境界スタイルが `none` または `hidden` であれば `0` |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

border-block-end-width =
  <line-width>

<line-width> =
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

```

例
-

### 縦書きテキストの境界線の幅

#### 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: 1px solid blue;
  border-block-end-width: 5px;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # border-width |

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

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

関連情報
----

* このプロパティは `border-top-width`, `border-right-width`, `border-bottom-width`, `border-left-width` のうちの 1 つに対応づけられます
* `writing-mode`, `direction`, `text-orientation`


mask-type - CSS: カスケーディングスタイルシート

mask-type
=========

**`mask-type`** は CSS のプロパティで、 SVG の `<mask>` 要素を*輝度*マスクと*アルファ*マスクのどちらとして扱うかを設定します。これは `<mask>` 要素自身に設定します。

```css
/\* キーワード値 \*/
mask-type: luminance;
mask-type: alpha;

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

このプロパティは、マスクが使用される要素に適用され、同じ効果を持つ `mask-mode` プロパティによって上書きされることがあります。アルファマスクは全般的に表示が高速です。

構文
--

`mask-type` プロパティは以下に示すキーワード値のうちの一つで指定します。

### 値

`luminance`

関連付けられたマスク画像が輝度マスクであることを示すキーワードです。すなわち、適用時に相対輝度値が使用されます。

`alpha`

関連付けられたマスク画像がアルファマスクであることを示すキーワードです。すなわち、適用時にアルファチャネル値が使用されます。

公式定義
----

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

形式文法
----
```

mask-type =
  luminance  |
  alpha

```

例
-

### アルファマスクの設定

#### HTML

```html
<div class="redsquare"></div>
<svg
 version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="0"
 height="0">
  <defs>
    <mask id="m" maskContentUnits="objectBoundingBox" style="mask-type:alpha">
      <rect
 x=".1"
 y=".1"
 width=".8"
 height=".8"
 fill="red"
 fill-opacity="0.7" />
    </mask>
  </defs>
</svg>
```

#### CSS

```css
.redsquare {
  height: 100px;
  width: 100px;
  background-color: rgb(128, 128, 128);
  border: solid 1px black;
  mask: url("#m");
}
```

#### 結果

### 輝度マスクの設定

#### HTML

```html
<div class="redsquare"></div>
<svg
 version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="0"
 height="0">
  <defs>
    <mask
 id="m"
 maskContentUnits="objectBoundingBox"
 style="mask-type:luminance">
      <rect
 x=".1"
 y=".1"
 width=".8"
 height=".8"
 fill="red"
 fill-opacity="0.7" />
    </mask>
  </defs>
</svg>
```

#### CSS

```css
.redsquare {
  height: 100px;
  width: 100px;
  background-color: rgb(128, 128, 128);
  border: solid 1px black;
  mask: url("#m");
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-type |

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

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

関連情報
----

* その他のマスクに関するプロパティ: `mask`, `mask-mode`


image-resolution - CSS: カスケーディングスタイルシート

image-resolution
================

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

**`image-resolution`** は CSS のプロパティで、この要素で使用されているすべてのラスター画像の内在解像度を指定します。これは置換要素や生成コンテンツ、`background-image` のような装飾画像などのコンテンツ画像に作用します。

画像の解像度は、単位の長さあたりの画像ピクセル数として定義されています (例: 1 インチあたりのピクセル数)。既定では、CSS は CSS ピクセル単位に 1 つの画像ピクセルの解像度を想定していますが、`image-resolution` プロパティを使用することで、異なる解像度を指定することができます。

構文
--

```css
image-resolution: from-image;
image-resolution: 300dpi;
image-resolution: from-image 300dpi;
image-resolution: 300dpi snap;

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

### 値

``<resolution>``

内在解像度を明示的に指定します。

`from-image`

画像形式で指定された内在解像度を使用します。画像が自身の解像度を指定しなかった場合、明示的に指定された解像度が (与えられていれば) 使用し、そうでなければ既定で `1dppx` (1 画像ピクセル毎 CSS ピクセル)となります。

`snap`

`snap` キーワードが指定された場合、計算された解像度は、指定された解像度を、画像の 1 ピクセルを端末の整数のピクセルにマッピングする最も近い値に丸めたものになります。解像度が画像から取得された場合、使用される固有の解像度は、画像のネイティブ解像度を同様に調整したものになります。

**メモ:** SVG などのベクター形式は内在解像度を持たないので、このプロパティはベクター画像には影響しません。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `1dppx` |
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 指定通り、ただし <resolution> は 'snap' の値に変更されることがある |
| アニメーションの種類 | 離散値 |

形式文法
----
```

image-resolution =
  [ from-image || <resolution> ]  &&
  snap?

```

例
-

### 印刷用に高い dpi を設定

文書を印刷する場合、より高い解像度を使用します。

```css
@media print {
  .myimage {
    image-resolution: 300dpi;
  }
}
```

### フォールバック付きの画像の解像度を使用する

画像から解像度を使用します。画像に解像度がない場合は、既定の 1dppx ではなく 300dpi を使用します。

```css
.myimage {
  image-resolution: from-image 300dpi;
}
```

仕様書
---

| Specification |
| --- |
| CSS Images Module Level 4 # the-image-resolution |

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

このプロパティに対応しているブラウザーは今のところありません。

関連情報
----

* その他の画像に関する CSS プロパティ: `object-fit`, `object-position`, `image-orientation`, `image-rendering`.
* Chromium bug: 1086473.