border-top-left-radius - CSS: カスケーディングスタイルシート

border-top-left-radius
======================

**`border-top-left-radius`** は CSS のプロパティは、角の曲率を定義する楕円の半径 (または半長軸と半短軸の半径) を指定することで、要素の左上の角を丸くします。

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

丸みは円または楕円にすることができ、値のうちの一つが `0` であれば、丸めは行われずに角は四角くなります。

![border-radius.png](/ja/docs/Web/CSS/border-top-left-radius/border-radius.png)

背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 `background-clip` プロパティの値で定義されます。

**メモ:** このプロパティの値が `border-top-left-radius` プロパティの後の `border-radius` 一括指定プロパティで設定されなかった場合、このプロパティは一括指定プロパティによって初期値にリセットされます。

構文
--

```css
/\* 角を円にする \*/
/\* border-top-left-radius: radius \*/
border-top-left-radius: 3px;

/\* 角を楕円にする \*/
/\* border-top-left-radius: horizontal vertical \*/
border-top-left-radius: 0.5em 1em;

border-top-left-radius: inherit;

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

値 1 つで指定する場合:

* 値は `<length>` または `<percentage>` であり、境界の角に使用する円の半径を示します。

値 2 つで指定する場合:

* 最初の値は `<length>` または `<percentage>` であり、境界の角に使用する楕円の水平の軌道長半径を示します。
* 最初の値は `<length>` または `<percentage>` であり、境界の角に使用する楕円の垂直の軌道長半径を示します。
### 値

`<length-percentage>`

円の半径または楕円の長半径および短半径を示します。絶対的な長さの場合は、 CSS の `<length>` データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | すべての要素。ただし、ユーザーエージェントは `border-collapse` が `collapse` である場合に`table` および `inline-table` 要素に適用する必要はない。内部表要素での動作は、今のところ未定義。。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| パーセント値 | 境界ボックスの対応する寸法に対する相対値 |
| 計算値 | ２つの絶対的な `length` または `percentage` 値 |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

border-top-left-radius =
  <length-percentage [0,∞]>{1,2}

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

```

例
-

### 円弧

単一の `<length>` 値は円弧を生成します。
```

<div></div>
```

```css
div {
  border-top-left-radius: 40px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}
```

### 楕円弧

2 つの異なる `<length>` 値は楕円弧を生成します。
```

<div></div>
```

```css
div {
  border-top-left-radius: 40px 20px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}
```

### パーセント値で丸みをつけた正方形の要素

正方形の要素に単一の `<percentage>` 値を指定すると、円弧を生成します。
```

<div></div>
```

```css
div {
  border-top-left-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}
```

### パーセント値で丸みをつけた長方形の要素

正方形ではない要素に単一の `<percentage>` 値を指定すると、楕円弧を生成します。
```

<div></div>
```

```css
div {
  border-top-left-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 200px;
  height: 100px;
}
```

仕様書
---

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

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

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

関連情報
----

CSS の border-radius に関するプロパティ: 一括指定の `border-radius`, 他の角のための `border-top-right-radius`, `border-bottom-right-radius`, `border-bottom-left-radius`


CSS ルビレイアウト - CSS: カスケーディングスタイルシート

CSS ルビレイアウト
===========

**CSS ルビレイアウト** (CSS Ruby Layout) は CSS のモジュールの一つで、ルビ表記の表示に関するレンダリングモデルや整形の制御を提供します。ルビ表記は行間の表記の一種で、ベーステキストに沿った短いテキストで構成されます。これらはふつう東アジアの文書で、発音を示したり、短い説明を提供したりするために使用されます。

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

### プロパティ

* `ruby-align`
* `ruby-position`
仕様書
---

| Specification |
| --- |
| CSS Ruby Annotation Layout Module Level 1  |


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

-moz-image-rect
===============

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

**`-moz-image-rect`** は CSS の `background-image` に対する値で、大きな画像の一部を背景として使用することができます。

構文
--

```css
-moz-image-rect(url(), top, right, bottom, left);
```

### 値

`url()`

部分画像を取得する画像の URI です。

`top`

指定された画像内の部分画像の上端の辺を、 `<integer>` または `<percentage>` で指定します。

`right`

指定された画像内の部分画像の右端の辺を、 `<integer>` または `<percentage>` で指定します。

`bottom`

指定された画像内の部分画像の下端の辺を、 `<integer>` または `<percentage>` で指定します。

`left`

指定された画像内の部分画像の左端の辺を、 `<integer>` または `<percentage>` で指定します。

解説
--

このプロパティを使用すると、例えば、1 つの大きな画像の異なる部分を、コンテンツの異なる部分の背景として使用することができます。

これは、`-moz-image-region` プロパティとよく似た働きをします。このプロパティは、`list-style-image` プロパティと一緒に使用され、画像の一部をリストの箇条書きとして使用します。ただし、これはどのような CSS 背景にも使用できます。

長方形の構文は、`<shape>` を生成する `rect()` 関数に似ています。CSS タイプを生成する関数です。4 つの値はすべて、画像の左上隅に対する相対値です。

例
-

この例では、画像をロードし、それを 4 分割して 4 つの `<div>` ブロックに Firefox ロゴを描画しています。コンテナーをクリックすると、4 つの `background-image` プロパティの値が 4 つの `<div>` ブロック間で入れ替わることで、4 つの区域が回転します。

### CSS

CSS では、1 つのコンテナーのスタイルを定義した後、画像全体を構成する 4 つのボックスのスタイルを定義しています。

コンテナーは次のようになります。

```css
#container {
  width: 267px;
  height: 272px;
  top: 100px;
  left: 100px;
  position: absolute;
  font-size: 16px;
  text-shadow: white 0px 0px 6px;
  text-align: center;
}
```

次に、画像の区域を定義する 4 つのボックスを定義します。1 つずつ見ていきましょう。

```css
#box1 {
  background-image: -moz-image-rect(url(firefox.png), 0%, 50%, 50%, 0%);
  width: 133px;
  height: 136px;
  position: absolute;
}
```

これは画像の左上隅です。ファイル `firefox.jpg` に含まれる画像の左上 1/4 を含む長方形を定義します。

```css
#box2 {
  background-image: -moz-image-rect(url(firefox.png), 0%, 100%, 50%, 50%);
  width: 133px;
  height: 136px;
  position: absolute;
}
```

これは、画像の右上隅を定義します。

他の隅も同様のパターンです。

```css
#box3 {
  background-image: -moz-image-rect(url(firefox.png), 50%, 50%, 100%, 0%);
  width: 133px;
  height: 136px;
  position: absolute;
}
#box4 {
  background-image: -moz-image-rect(url(firefox.png), 50%, 100%, 100%, 50%);
  width: 133px;
  height: 136px;
  position: absolute;
}
```

### HTML

HTML はとてもシンプルです。

```html
<div id="container" onclick="rotate()">
  <div id="box1" style="left:0px;top:0px;">Top left</div>
  <div id="box2" style="left:133px;top:0px;">Top right</div>
  <div id="box3" style="left:0px;top:136px;">Bottom left</div>
  <div id="box4" style="left:133px;top:136px;">Bottom right</div>
</div>
```

これにより、画像の 4 つの区域が 2 × 2 のボックスグリッドに配置されます。これらの 4 つの区域は、大きな `<div>` ブロックの中に含まれており、クリックイベントを受信して JavaScript コードに配信することを主な目的としています。

### JavaScript コード

このコードは、コンテナーがマウスでクリックされたときのクリックイベントを処理します。

```js
function rotate() {
  var prevStyle = window
    .getComputedStyle(document.getElementById("box4"), null)
    .getPropertyValue("background-image");

  // 最後の 1 枚を保存したところで、回転を開始します。

  for (var i = 1; i <= 4; i++) {
    var curId = "box" + i;

    // 背景画像のをずらす

    var curStyle = window
      .getComputedStyle(document.getElementById(curId), null)
      .getPropertyValue("background-image");
    document.getElementById(curId).style.backgroundImage = prevStyle;
    prevStyle = curStyle;
  }
}
```

これは `window.getComputedStyle()` を使って各要素のスタイルを取得し、それを次の要素にシフトしています。この処理を開始する前に、最後のボックスのスタイルのコピーを保存していることに注目してください。3 つ目の要素のスタイルによって上書きされるからです。`background-image` プロパティの値を、マウスをクリックするたびに 1 つの要素から次の要素にコピーすることで、目的の効果を得ることができます。

### どのように見えるか

仕様書
---

どの標準にも含まれていません。

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

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

関連情報
----

* Mozilla CSS 拡張
* CSS 背景と境界モジュール


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

float
=====

**`float`** は CSS のプロパティで、要素を包含ブロックの左右どちらかの側に沿うように設置し、テキストやインライン要素がその周りを回りこめるように定義します。要素はウェブページの通常のフローから外れますが、（絶対位置指定 とは対照的に）フローの一部であり続けます。

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

*浮動要素* (floating element) とは、`float` の計算値が `none` 以外の要素です。

`float` は暗黙的にブロックレイアウトの使用を意味しており、 `display` の計算値を変更する場合があります。

| 指定値 | 計算値 |
| --- | --- |
| `inline` | `block` |
| `inline-block` | `block` |
| `inline-table` | `table` |
| `table-row` | `block` |
| `table-row-group` | `block` |
| `table-column` | `block` |
| `table-column-group` | `block` |
| `table-cell` | `block` |
| `table-caption` | `block` |
| `table-header-group` | `block` |
| `table-footer-group` | `block` |
| `inline-flex` | `flex` |
| `inline-grid` | `grid` |
| *その他* | *変更なし* |

**メモ:** JavaScript で `HTMLElement.style` オブジェクトのメンバーとしてこのプロパティを参照する場合、最近のブラウザーは `float` に対応していますが、古いブラウザーは `cssFloat` という綴りになります。これは、ハイフン区切りの CSS 名は DOM メンバーとしてキャメルケース (en-US)で綴るというルールの例外でした（これは "float" が JavaScript の予約語であるためで、 "class" を "className" とする必要があったり、 <label> の "for" を "htmlFor" とする必要があったりするのと同じです）。

構文
--

```css
/\* キーワード値 \*/
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

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

`float` プロパティは、以下の値からひとつのキーワードを選択して指定します。

### 値

`left`

要素は、必ずその包含ブロックの左側に浮動します。

`right`

要素は、必ずその包含ブロックの右側に浮動します。

`none`

要素は決して浮動しません。

`inline-start`

要素は、必ずその包含ブロックの始端側に浮動します。左書きでは左側、右書きでは右側になります。

`inline-end`

要素は、必ずその包含ブロックの終端側に浮動します。左書きでは右側、右書きでは左側になります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | すべての要素。ただし `display` が `none` なら効果を持ちません。 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

float =
  block-start      |
  block-end        |
  inline-start     |
  inline-end       |
  snap-block       |
  <snap-block()>   |
  snap-inline      |
  <snap-inline()>  |
  left             |
  right            |
  top              |
  bottom           |
  none             |
  footnote

<snap-block()> =
  snap-block( <length> , [ start | end | near ]? )

<snap-inline()> =
  snap-inline( <length> , [ left | right | near ]? )

```

例
-

### 浮動要素の位置をどのように決めるか

上述のとおり、要素は浮動すると、文書の通常のフローから外されます (ただし、フローの一部であり続けます)。浮動要素は、包含ブロックか*他の浮動要素*の辺に触れるまで、左側または右側に移動させられます。

この例では、 3 つの赤い正方形があります。このうち 2 つは左側に浮動しており、 1 つは右側に浮動しています。 2 つめの「左の」赤い正方形は、 1 つめの正方形の右に置かれていることに注意してください。正方形を追加していくと、包含ボックスが埋まるまではその右側に詰め込まれていきますが、その後は次の行に回り込みます。

浮動要素は、少なくともその中に含まれるもっとも高い子の浮動要素と同じ高さでなければなりません。ここでは親を `width: 100%` かつ浮動要素として、その子の浮動要素を配置するのに十分な高さを確保し、親の幅を保証することで、子孫を浮動解除する必要がなくなるようにしています。

#### HTML

```html
<section>
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="right">3</div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique
    sapien ac erat tincidunt, sit amet dignissim lectus vulputate. Donec id
    iaculis velit. Aliquam vel malesuada erat. Praesent non magna ac massa
    aliquet tincidunt vel in massa. Phasellus feugiat est vel leo finibus
    congue.
  </p>
</section>
```

#### CSS

```css
section {
  box-sizing: border-box;
  border: 1px solid blue;
  width: 100%;
  float: left;
}

div {
  margin: 5px;
  width: 50px;
  height: 150px;
}

.left {
  float: left;
  background: pink;
}

.right {
  float: right;
  background: cyan;
}
```

#### 結果

### 浮動の解除

あるアイテムを浮動要素の下へ強制的に移動したいことがあるでしょう。例えば、段落は浮動要素に隣接させたいが、見出しは強制的に単独の行にしたい場合があるでしょう。この例については `clear` をご覧ください。

仕様書
---

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-float |
| CSS Logical Properties and Values Level 1 # float-clear |

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

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

関連情報
----

* ブロック整形コンテキスト
* アイテムを浮動要素の下へ強制的に移動させるには `clear` を使用します。


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

scroll-snap-align
=================

`scroll-snap-align` プロパティは、ボックスのスナップ位置を、そのスナップコンテナーの (配置コンテナーとしての) スナップポート内における (配置主体としての) スナップ領域の配置として指定します。2つの値は、それぞれブロック軸とインライン軸内のスナップ位置合わせを指定します。値が1つだけ指定された場合、2番目の値は同じ値を既定値とします。

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

構文
--

```css
/\* キーワード値 \*/
scroll-snap-align: none;
scroll-snap-align: start end; /\* 2 つの値を指定すると、1 番目がブロック、2 番目がインラインとなる \*/
scroll-snap-align: center;

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

### 値

`none`

このボックスでは、その軸のスナップ位置を定義しません。

`start`

このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の先頭位置がこの軸のスナップ位置になります。

`end`

このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の末尾位置がこの軸のスナップ位置になります。

`center`

このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の中央位置がこの軸のスナップ位置になります。

Safari は現在のところ、2 つの値の構文を誤った順序で実装しており、最初の値がインラインで次の値がブロックになっています。bug #191865 を参照してください。

公式定義
----

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

形式文法
----
```

scroll-snap-align =
  [ none | start | end | center ]{1,2}

```

仕様書
---

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # scroll-snap-align |

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

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

関連情報
----

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


段階変数用のCSSカスタムプロパティ - CSS: カスケーディングスタイルシート

段階変数用のCSSカスタムプロパティ
==================

**段階変数用の CSS カスタムプロパティ**とは何度も繰り返して用いられるカスタムプロパティを作成できるCSSモジュールです。

CSS プロパティ
---------

* `--*`
仕様
--

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


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

scroll-padding-block-start
==========================

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

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

構文
--

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

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

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

### 値

`<length-percentage>`

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

`auto`

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

公式定義
----

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

形式文法
----
```

scroll-padding-block-start =
  auto                       |
  <length-percentage [0,∞]>

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

```

仕様書
---

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

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

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

関連情報
----

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


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

:not()
======

**`:not()`** は CSS の擬似クラスで、列挙されたセレクターに一致しない要素を表します。特定の項目が選択されることを防ぐため、否定擬似クラス (*negation pseudo-class*) と呼ばれています。

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

`:not()` 擬似クラスには、使用する前に知っておいた方が良いクセやコツ、予想外の結果がいくつかあります。

構文
--

`:not()` 擬似クラスは引数として、1つまたは複数のセレクターをカンマで区切ったものを要求します。リストには否定セレクターや擬似要素を含めることはできません。

```css
:not(<complex-selector-list>) {
  /\* ... \*/
}
```

解説
--

`:not()` を使用する際のふつうではない効果や結果がいくつかありますので、使用する際には気を付けてください。

* この擬似クラスを使用して無意味なセレクターを書くことができます。例えば、 `:not(*)` は要素ではないすべての要素を選択するので、ルールは適用されません。
* この擬似クラスはルールの詳細度を上げることができます。例えば、 `#foo:not(#bar)` は単純な `#foo` と同じ要素を選択しますが、2 つの `id` セレクターにより、詳細度はより高くなります。
* 擬似クラス `:not()` の詳細度は、カンマで区切られたセレクターの引数の中で最も詳細なセレクターの詳細度に置き換えられます。`:not(:is(argument))` と書かれた場合と同じ詳細度を提供します。
* `:not(.foo)` は `.foo` ではないすべての要素を選択するため、`<html>` や `<body>` も選択します。
* このセレクターは、「Xでない」ものすべてに一致します。これは、子孫結合子と使用すると、対象とする要素を選択する経路が複数できるので、意外な動きをするかもしれません。例えば、`body :not(table) a` は `<table>` 内のリンクにも適用されます。`<tr>`、`<tbody>`、`<th>`、`<td>`、`<caption>` などはすべて `:not(table)` の部分に一致するからです。
* 複数のセレクターを同時に否定することができます。例えば、`:not(.foo, .bar)` は `:not(.foo):not(.bar)` と同じです。
* もし `:not()` 擬似クラスに渡されたセレクターのいずれかが無効であったり、ブラウザーが対応していなかったりした場合、ルール全体が無効となります。この挙動を克服するために有効な方法は、寛容なセレクターリストを受け入れる `:is()` 擬似クラスを使用することです。例えば `:not(.foo, :invalid-pseudo-class)` はルール全体を無効にしてしまいますが、 `:not(is(.foo, :invalid-pseudo-class))` は `.foo` 以外のあらゆる（`<html>` や `<body>` を含む）要素に一致します。
例
-

### 基本的な一連の :not() の例

#### HTML

```html
<p>I am a paragraph.</p>
<p class="fancy">I am so very fancy!</p>
<div>I am NOT a paragraph.</div>
<h2>
  <span class="foo">foo inside h2</span>
  <span class="bar">bar inside h2</span>
</h2>
```

#### CSS

```css
.fancy {
  text-shadow: 2px 2px 3px gold;
}

/\* '.fancy' クラスの中にない <p> 要素 \*/
p:not(.fancy) {
  color: green;
}

/\* <p> 要素ではない要素 \*/
body :not(p) {
  text-decoration: underline;
}

/\* <div> または <span> 要素ではない要素 \*/
body :not(div):not(span) {
  font-weight: bold;
}

/\* <div> でも '.fancy' でもない要素 \*/
body :not(div, .fancy) {
  text-decoration: overline underline;
}

/\* <h2> の中にある要素で <span> に foo クラスでないもの \*/
h2 :not(span.foo) {
  color: red;
}
```

#### 結果

### :not() と無効なセレクター

この例では、無効なセレクターで `:not()` を使用し、無効化を防止する方法を示します。

#### HTML

```html
<p class="foo">I am a paragraph with .foo</p>
<p class="bar">I am a paragraph with .bar</p>
<div>I am a div without a class</div>
<div class="foo">I am a div with .foo</div>
<div class="bar">I am a div with .bar</div>
<div class="foo bar">I am a div with .foo and .bar</div>
```

#### CSS

```css
/\* 無効なルール。何もしない \*/
p:not(.foo, :invalid-pseudo-class) {
  color: red;
  font-style: italic;
}

/\* Select all <p> elements without the `foo` class \*/
p:not(:is(.foo, :invalid-pseudo-class)) {
  color: green;
  border-top: dotted thin currentcolor;
}

/\* <div> 要素のうち `foo` または `bar` クラスの付いていない全てのもの \*/
div:not(.foo, .bar) {
  color: red;
  font-style: italic;
}

/\* <div> 要素のうち `foo` または `bar` クラスの付いていない全てのもの \*/
div:not(:is(.foo, .bar)) {
  border-bottom: dotted thin currentcolor;
}
```

#### 結果

`p:not(.foo, :invalid-pseudo-class)` というルールは、無効なセレクターを含んでいるため、無効です。`:is()` 擬似クラスは寛容なセレクターリストを受け入れるので、 `:is(.foo, :invalid-pseudo-class)` ルールは有効で、 `:is(.foo)` と同等になります。したがって、`p:not(:is(.foo, :invalid-pseudo-class))` というルールは `p:not(.foo)` と等価であり、有効です。

もし `:invalid-pseudo-class` が有効なセレクターであった場合も、上記の最初の 2 つのルールは等価です（後の 2 つのルールはそれを示しています）。`:is()` を使用することで、このルールはより強固なものになります。

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # negation |

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

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

関連情報
----

* 擬似クラス
* 擬似クラスと擬似要素
* 関連する CSS 擬似クラス:
    + `:has()`
    + `:is()`
    + `:where()`


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

break-before
============

CSS の **`break-before`** プロパティは、生成されたボックスの前で、ページ、段、領域をどのように区切るかを設定します。ボックスが生成されない場合は、このプロパティは無視されます。

```css
/\* 一般の区切り値 \*/
break-before: auto;
break-before: avoid;
break-before: always;
break-before: all;

/\* 改ページ値 \*/
break-before: avoid-page;
break-before: page;
break-before: left;
break-before: right;
break-before: recto;
break-before: verso;

/\* 段区切り値 \*/
break-before: avoid-column;
break-before: column;

/\* 領域区切り値 \*/
break-before: avoid-region;
break-before: region;

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

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

区切り位置になる可能性のある場所 (言い換えれば、要素の境界) は、3 つのプロパティに影響されます。前の要素の `break-after` の値、次の要素の `break-before` の値、包含要素の `break-inside` の値です。

区切られるかどうかを判断するために、以下の規則が適用されます。

* 考慮される 3 つの値の中の何れかに*区切りを強制する値* (`always`, `left`, `right`, `page`, `column`, `region` の何れか) がある場合、それが優先されます。そのような区切りが複数ある場合は、フローの中で最も後に現れる要素のものが使用されます (つまり、 `break-before` の値は `break-after` の値より優先し、それは更に `break-inside` よりも優先します)。
* 考慮される 3 つの値の中に*区切りを防止する値* (`avoid`, `avoid-page`, `avoid-region`, `avoid-column` の何れか) が含まれていた場合は、その場所で区切りは適用されません。

強制的な区切りが適用されると、必要に応じてソフトな区切りが追加される場合がありますが、 `avoid` に関する値に解決される要素の境界には追加されません。

構文
--

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

### 値

#### 一般の区切り値

`auto`

該当するボックスの直前に何らかの (ページ、段、領域の) 区切りを挿入することを許可しますが、強制はしません。

`avoid`

該当するボックスの直前に何らかの (ページ、段、領域の) 区切りを挿入することを禁止します。

`always`
Experimental

該当するボックスの直前で強制的に改ページを行います。この区切りの種類は断片化のコンテキストを直接含むものです。段組みコンテナーの中であれば強制的な段区切りとなり、ページ付きメディアの (ただし段組みコンテナーの中ではない) 場合はページ区切りになります。

`all`
Experimental

該当するボックスの直前で強制的に改ページを行います。すべての分断しうるコンテキストを通して区切ります。よって、段組みコンテナーの中での区切りは、ページコンテナーの中であれば強制的に段組みとページを区切ります。

#### 改ページ値

`avoid-page`

該当するボックスの直前の改ページを禁止します。

`page`

該当するボックスの直前で改ページを行います。

`left`

該当するボックスの直前で一つまたは二つの改ページを行い、次のページが左ページになるようにします。

`right`

該当するボックスの直前で一つまたは二つの改ページを行い、次のページが右ページになるようにします。

`recto`
Experimental

該当するボックスの直前で一つまたは二つの改ページを行い、次のページが奇数ページになるようにします。 (奇数ページは左から右に開く場合は右ページになり、右から左に開く場合は左ページになります。)

`verso`
Experimental

該当するボックスの直前で一つまたは二つの改ページを行い、次のページが偶数ページになるようにします。 (奇数ページは左から右に開く場合は左ページになり、右から左に開く場合は右ページになります。)

#### 段区切り値

`avoid-column`

該当するボックスの直前の段区切りを禁止します。

`column`

該当するボックスの直前で段区切りを行います。

#### 領域区切り値

`avoid-region`
Experimental

該当するボックスの直前の領域区切りを禁止します。

`region`
Experimental

該当するボックスの直前で領域区切りを行います。

改ページの別名
-------

互換性のため、古い `page-break-before` はブラウザーから `break-before` の別名として扱われます。これにより、 `page-break-before` を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。

| page-break-before | break-before |
| --- | --- |
| `auto` | `auto` |
| `left` | `left` |
| `right` | `right` |
| `avoid` | `avoid` |
| `always` | `page` |

**メモ:** ブラウザーにおいては `always` の値は `page-break-*` において、段区切りではなくページ区切りとして実装されています。したがって、 Level 4 の仕様書では `always` の値ではなく `page` の別名となっています。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | ブロックレベル要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

break-before =
  auto          |
  avoid         |
  always        |
  all           |
  avoid-page    |
  page          |
  left          |
  right         |
  recto         |
  verso         |
  avoid-column  |
  column        |
  avoid-region  |
  region

```

例
-

### きれいに段を分割

次の例では、すべての段にまたがる `<h1>` (`column-span: all` を使用して実現) と、一連の `<h2>` と段落を `column-width: 200px` を使用して段組みレイアウトしたコンテナーを用意しています。

既定では、小見出しと段落は、見出しの位置が統一されていないため、かなり乱雑にレイアウトされていました。しかし、 `break-before: column` を `<h2>` 要素に使うことで、それぞれの要素の後に強制的に改行するようにしたので、各段の先頭に `<h2>` がきちんと配置されます。

#### HTML

```html
<article>
  <h1>大見出し</h1>

  <h2>小見出し</h2>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae
    fringilla mauris. Quisque commodo eget nisi sed pretium. Mauris luctus nec
    lacus in ultricies. Mauris vitae hendrerit arcu, ac scelerisque lacus.
    Aliquam lobortis in lacus sit amet posuere. Fusce iaculis urna id neque
    dapibus, eu lacinia lectus dictum.
  </p>

  <h2>小見出し</h2>

  <p>
    Praesent condimentum dui dui, sit amet rutrum diam tincidunt eu. Cras
    suscipit porta leo sit amet rutrum. Sed vehicula ornare tincidunt. Curabitur
    a ipsum ac diam mattis volutpat ac ut elit. Nullam luctus justo non
    vestibulum gravida. Morbi metus libero, pharetra non porttitor a, molestie
    nec nisi.
  </p>

  <h2>小見出し</h2>

  <p>
    Vivamus eleifend metus vitae neque placerat, eget interdum elit mattis.
    Donec eu vulputate nibh. Ut turpis leo, malesuada quis nisl nec, volutpat
    egestas tellus.
  </p>

  <h2>小見出し</h2>

  <p>
    In finibus viverra enim vel suscipit. Quisque consequat velit eu orci
    malesuada, ut interdum tortor molestie. Proin sed pellentesque augue. Nam
    risus justo, faucibus non porta a, congue vel massa. Cras luctus lacus nisl,
    sed tincidunt velit pharetra ac. Duis suscipit faucibus dui sed ultricies.
  </p>
</article>
```

#### CSS

```css
html {
  font-family: helvetica, arial, sans-serif;
}

h1 {
  font-size: 3rem;
  letter-spacing: 2px;
  column-span: all;
}

h2 {
  font-size: 1.2rem;
  color: red;
  letter-spacing: 1px;
  break-before: column;
}

p {
  line-height: 1.5;
}

article {
  column-width: 200px;
  gap: 20px;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Fragmentation Module Level 3 # break-between |
| CSS Regions Module Level 1 # region-flow-break |
| CSS Multi-column Layout Module Level 1 # break-before-break-after-break-inside |

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

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

関連情報
----

* 段組みレイアウト
* Breaking Boxes With CSS Fragmentation


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

grid-row-start
==============

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-row-start`** は CSS のプロパティで、グリッドの配置に線または区間を使用したり、使用しなかったりして (自動)、グリッド行内のグリッドアイテムの先頭位置、すなわちグリッド領域のインラインの先頭側の端を指定します。

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

構文
--

```css
/\* キーワード値 \*/
grid-row-start: auto;

/\* <custom-ident> 値 \*/
grid-row-start: somegridarea;

/\* <integer> + <custom-ident> 値 \*/
grid-row-start: 2;
grid-row-start: somegridarea 4;

/\* span + <integer> + <custom-ident> 値 \*/
grid-row-start: span 3;
grid-row-start: span somegridarea;
grid-row-start: 5 somegridarea span;

/\* グローバル値 \*/
grid-row-start: inherit;
grid-row-start: initial;
grid-row-start: revert;
grid-row-start: unset;
```

このプロパティは単一の `<grid-line>` 値で指定します。 `<grid-line>` 値は次のように指定します。

* `auto` キーワード
* `<custom-ident>` 値
* `<integer>` 値
* `<custom-ident>` および `<integer>` を空白で区切ったもの
* `span` キーワードと `<custom-ident>` または `<integer>` またはその両方。
### 値

`auto`

プロパティをグリッドアイテムの配置に影響させず、自動的に配置し、間隔を自動的に取るか、既定の `1` とするためのキーワードです。

`<custom-ident>`

`<custom-ident>-start` という名前の付いた線がある場合、これはそのような線の先頭がグリッドアイテムの配置に関わります。

**メモ:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-row-start: foo;` と指定すると名前付きグリッド領域の先頭側の端を選択します (その前に `foo-start` という名前の線が明示的に存在しない限り)。

そうでなければ、これは `<custom-ident>` に沿って整数の `1` が指定されたものとして扱われます。

`<integer> && <custom-ident>?`

n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。

名前が `<custom-ident>` として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。

`0` の `<integer>` 値は無効です。

`span && [ <integer> || <custom-ident> ]`

グリッドアイテムのグリッド領域の行の先頭の端が終了の端から n 本になるように、グリッドアイテムの配置にグリッドスパンを設定します。

名前が `<custom-ident>` として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。

<integer> が省略された場合の既定値は `1` です。負の数や `0` は無効です。

`<custom-ident>` は `span` の値を取ることができません。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | 包含ブロックがグリッドコンテナーであるグリッドアイテムまたは絶対位置指定のボックス |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

grid-row-start =
  <grid-line>

<grid-line> =
  auto                                                |
  <custom-ident>                                      |
  [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ]  |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]

```

例
-

### グリッドアイテムの行の開始位置の設定

#### HTML

```html
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>
```

#### CSS

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 5;
}
```

```
\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.nested {
  border: 2px solid #ffec99;
  border-radius: 5px;
  background-color: #fff9db;
  padding: 1em;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # line-placement |

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

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

関連情報
----

* 関連する CSS プロパティ: `grid-row-end`, `grid-row`, `grid-column-start`, `grid-column-end`, `grid-column`
* グリッドレイアウトガイド: 線に基づく配置を使用したグリッドレイアウト
* 動画チュートリアル: *Line-based placement*


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

padding-inline-end
==================

**`padding-inline-end`** は CSS のプロパティで、要素のインライン方向の論理的な末尾側のパディングを定義し、それが要素の書字方向やテキストの方向に応じて物理的なパディングに対応づけられます。

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

構文
--

```css
/\* <length> 値 \*/
padding-inline-end: 10px; /\* 絶対的な長さ \*/
padding-inline-end: 1em; /\* テキストの大きさに対する相対値 \*/

/\* <percentage> 値 \*/
padding-inline-end: 5%; /\* ブロックコンテナーの幅に対する割合のパディング \*/

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

### 値

`<length>`

パディングの寸法を固定値で指定します。負の値は指定できません。

`<percentage>`

パディングの寸法を包含ブロックのインラインサイズ（`writing-mode` で横書き言語と定義されている場合は *width*）に対するパーセント値で示したものです。負の数であってはいけません。

解説
--

`padding-inline-end` プロパティは、`padding-top` プロパティと同じ値を取ると仕様で定義されています。しかし、このプロパティが対応づけられる物理的なプロパティは、 `writing-mode`, `direction`, `text-orientation` に設定された値に依存します。したがって、`padding-bottom`, `padding-right`, `padding-left` の何れかに対応づけられる可能性があります。

関連プロパティとして、要素の他のマージンを定義する `padding-block-start`, `padding-block-end`, `padding-inline-start` があります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group`, `table-column` を除くすべての要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの論理的な幅 |
| 計算値 | `length` 通り |
| アニメーションの種類 | length |

形式文法
----
```

padding-inline-end =
  <'padding-top'>

```

例
-

### 縦書きテキストにおけるインライン方向の末尾のパディングの設定

#### 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;
  padding-inline-end: 20px;
  background-color: #c8c800;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* CSS 論理的プロパティと値
* 対応づけ先の物理的プロパティ: `padding-top`, `padding-right`, `padding-bottom`, `padding-left`
* `writing-mode`, `direction`, `text-orientation`


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

-webkit-text-stroke
===================

**`-webkit-text-stroke`** は CSS のプロパティで、テキスト文字の輪郭線の幅と色を指定します。これは個別指定プロパティ `-webkit-text-stroke-width` および `-webkit-text-stroke-color` の一括指定プロパティです。

```css
/\* 幅と色の値 \*/
-webkit-text-stroke: 4px navy;
text-stroke: 4px navy;

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

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

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

* `-webkit-text-stroke-color`
* `-webkit-text-stroke-width`
構文
--

### 値

`<length>`

輪郭線の幅です。

`<color>`

輪郭線の色です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `-webkit-text-stroke-width`: `0`
* `-webkit-text-stroke-color`: `currentcolor`
 |
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 一括指定の次の各プロパティとして* `-webkit-text-stroke-width`: 絶対的な`長さ`
* `-webkit-text-stroke-color`: 色の計算値
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `-webkit-text-stroke-width`: 離散値
* `-webkit-text-stroke-color`: 色
 |

形式文法
----
```

-webkit-text-stroke =
  <line-width>  ||
  <color>

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

```

例
-

### テキストに赤い輪郭線を追加

#### HTML

```html
<p id="example">このテキストの輪郭線は赤です。</p>
```

#### CSS

```css
#example {
  font-size: 3em;
  margin: 0;
  -webkit-text-stroke: 2px red;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| Compatibility Standard # the-webkit-text-stroke |

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

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

関連情報
----

* Surfin' Safari blog post announcing this feature
* CSS-Tricks article explaining this feature
* `-webkit-text-stroke-width`
* `-webkit-text-stroke-color`
* `-webkit-text-fill-color`


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

overflow-wrap
=============

**`overflow-wrap`** は CSS のプロパティで、インライン要素に対して、テキストが行ボックスをあふれないように、ブラウザーが分割できない文字列の途中で改行を入れるかどうかの設定を適用します。

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

**メモ:** `word-break` とは対照的に、 `overflow-wrap` は単語全体があふれずに行内に配置できない場合にのみ、改行を生成します。

このプロパティはもともと、標準外かつ接頭辞のない `word-wrap` と呼ばれる Microsoft 拡張であり、多くのブラウザーはこの名前で実装していました。 `overflow-wrap` に改名されたため、 `word-wrap` は別名になりました。

構文
--

```css
/\* キーワード値 \*/
overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;

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

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

### 値

`normal`

通常の単語の分割位置 (2 つの単語の間の空白など) でのみ改行することを示します。

`anywhere`

あふれることを避けるために、行内にその他の分割可能な位置がない場合、その他の分割できない文字列 — 長い単語や URL — が任意の場所で分割されることがあります。分割位置にハイフン文字は挿入されません。コンテンツの最小固有寸法を計算する時には、単語分割によって導入された折り返し可能位置が考慮されます。

`break-word`

`anywhere` の値と同様に、行内にその他の分割可能な位置がない場合、通常は分割可能でない単語が任意の場所で分割されますが、コンテンツの最小固有寸法を計算する時に、単語分割によって導入された折り返し可能位置が考慮されません。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | 置換でないインライン要素 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

overflow-wrap =
  normal      |
  break-word  |
  anywhere

```

例
-

### overflow-wrap, word-break, hyphens の比較

この例は、長い単語が分割されるときの `overflow-wrap`, `word-break`, `hyphens` の結果を比較するものです。

#### HTML

```html
<p>
  They say the fishing is excellent at Lake
  <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
  I've never been there myself. (<code>normal</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>overflow-wrap: anywhere</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>overflow-wrap: break-word</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>word-break</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
  I've never been there myself. (<code>hyphens</code>, without
  <code>lang</code> attribute)
</p>
<p lang="en">
  They say the fishing is excellent at Lake
  <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
  I've never been there myself. (<code>hyphens</code>, English rules)
</p>
<p class="hyphens" lang="de">
  They say the fishing is excellent at Lake
  <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
  I've never been there myself. (<code>hyphens</code>, German rules)
</p>
```

#### CSS

```css
p {
  width: 13em;
  margin: 2px;
  background: gold;
}

.ow-anywhere {
  overflow-wrap: anywhere;
}

.ow-break-word {
  overflow-wrap: break-word;
}

.word-break {
  word-break: break-all;
}

.hyphens {
  hyphens: auto;
}
```

#### 例

仕様書
---

| Specification |
| --- |
| CSS Text Module Level 3 # overflow-wrap-property |

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

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

関連情報
----

* `word-break`
* `hyphens`
* `text-overflow`
* テキストの分割と折り返しのガイド


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

::-moz-progress-bar
===================

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

**`::-moz-progress-bar`** は CSS の擬似要素で Mozilla 拡張であり、 `<progress>` 要素の中のプログレスバーを表します。 (バーは進捗した量を表します。)

`<progress>` のまだ終了していない部分を Mozilla で選択したい場合は、 `<progress>` で直接選択してください。

構文
--

Error: could not find syntax for this item例
-

### HTML

```html
<progress value="30" max="100">30%</progress>
<progress max="100">Indeterminate</progress>
```

### CSS

```css
::-moz-progress-bar {
  background-color: red;
}

/\* 不確実なバーは強制的に幅をゼロにする \*/
:indeterminate::-moz-progress-bar {
  width: 0;
}
```

### 結果

仕様書
---

どの標準にも含まれていません。

関連情報
----

* `<progress>`
* `::-ms-fill`
* `::-webkit-progress-bar` (en-US)
* `::-webkit-progress-value`
* `::-webkit-progress-inner-element` (en-US)


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

::first-letter
==============

**`::first-letter`** は CSS の擬似要素で、ブロックコンテナーの最初の行の最初の文字にスタイルを適用します。ただし、最初の文字より前に他のコンテンツ（画像やインラインテーブルなど）がないときに限ります。

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

要素の最初の文字は、常に単純に識別できるとは限りません。

* 最初の文字のすぐ前後にある記号 (punctuation) も範囲に含まれます。記号とは、 Unicode の *open* (Ps), *close* (Pe), *initial quote* (Pi), *final quote* (Pf), and *other punctuation* (Po) の各クラスで定義されているすべての文字です。
* 言語によっては常に一緒に大文字化される連字があります。例えばオランダ語の `IJ` などです。この場合、連字の両方の文字が `::first-letter` 擬似要素で選択されます。
* `::before` 擬似要素と `content` プロパティの組み合わせにより、要素の先頭にテキストが挿入されることがあります。この場合、 `::first-letter` は生成されたこのコンテンツの最初の文字に一致します。

**メモ:** CSS では擬似クラスと擬似要素を見分けやすくするために、 `::first-letter` の表記法（二重コロン付き）が導入されました。後方互換性のため、ブラウザーは以前に導入された `:first-letter` も受け付けます。

オランダ語の `IJ` のような連字に対するブラウザーの対応は貧弱です。下記の互換性一覧表で、現在の対応状況を確認してください。

利用可能なプロパティ
----------

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

* フォントの全プロパティ: `font`, `font-style`, `font-feature-settings`, `font-kerning`, `font-language-override`, `font-stretch`, `font-synthesis`, `font-variant`, `font-variant-alternates`, `font-variant-caps`, `font-variant-east-asian`, `font-variant-ligatures`, `font-variant-numeric`, `font-variant-position`, `font-weight`, `font-size`, `font-size-adjust`, `line-height` and `font-family`
* 背景の全プロパティ: `background`, `background-color`, `background-image`, `background-clip`, `background-origin`, `background-position`, `background-repeat`, `background-size`, `background-attachment`, and `background-blend-mode`
* マージンの全プロパティ: `margin`, `margin-top`, `margin-right`, `margin-bottom`, `margin-left`
* パディングの全プロパティ: `padding`, `padding-top`, `padding-right`, `padding-bottom`, `padding-left`
* 境界の全プロパティ: 一括指定プロパティである `border`, `border-style`, `border-color`, `border-width`, `border-radius`, `border-image`, および個別指定プロパティ
* `color` プロパティ
* `text-decoration`, `text-shadow`, `text-transform`, `letter-spacing`, `word-spacing` (when appropriate), `line-height`, `text-decoration-color`, `text-decoration-line`, `text-decoration-style`, `box-shadow`, `float`, `vertical-align` （`float` が `none` の場合のみ） の CSS プロパティ
構文
--

```css
::first-letter {
  /\* ... \*/
}
```

例
-

### 単純なドロップキャップ

この例では、 `::first-letter` 擬似要素を使用して、 `<h2>` の直後の段落の最初の文字にドロップキャップ効果を作成します。

#### HTML

```html
<h2>My heading</h2>
<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est.
</p>
<p>
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  consequat.
</p>
```

#### CSS

```css
p {
  width: 500px;
  line-height: 1.5;
}

h2 + p::first-letter {
  color: white;
  background-color: black;
  border-radius: 2px;
  box-shadow: 3px 3px 0 red;
  font-size: 250%;
  padding: 6px 3px;
  margin-right: 6px;
  float: left;
}
```

#### 結果

### 特殊な記号と非ラテン文字への効果

この例では、特殊な記号や非ラテン文字に対する `::first-letter` の効果を説明しています。

#### HTML

```html
<p>
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  consequat.
</p>
<p>-The beginning of a special punctuation mark.</p>
<p>_The beginning of a special punctuation mark.</p>
<p>"The beginning of a special punctuation mark.</p>
<p>'The beginning of a special punctuation mark.</p>
<p>*The beginning of a special punctuation mark.</p>
<p>#The beginning of a special punctuation mark.</p>
<p>「先頭が特殊区切り記号です。</p>
<p>《先頭が特殊区切り記号です。</p>
<p>“先頭が特殊区切り記号です。</p>
```

#### CSS

```css
p::first-letter {
  color: red;
  font-size: 150%;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # first-letter-pseudo |

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

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

関連情報
----

* `::first-line`


CSS カスケードと継承 - CSS: カスケーディングスタイルシート

CSS カスケードと継承
============

**CSS カスケードと継承** (CSS cascade and inheritance) モジュールは、カスケードと継承によってプロパティに値を割り当てるルールを定義します。このモジュールは、すべての要素のすべてのプロパティの指定値を探すルールを指定します。

CSS の基本設計原則の一つに、ルールのカスケードがあります。これにより、複数のスタイルシートが文書の表示に影響を与えることができます。 CSS のプロパティ値の宣言は、文書の表示方法を定義します。複数の宣言が、同じ要素とプロパティの組み合わせに異なる値を設定することができますが、どの CSS プロパティでも適用できる値は 1 つだけです。 CSS カスケードモジュールは、これらの競合をどのように解決するかを定義します。

逆のことも起こりえます。プロパティの値を定義する宣言がないこともあります。 CSS カスケードモジュールは、これらの欠落した値を、継承またはプロパティの初期値からどのように設定するかを定義します。

**メモ:** ページコンテキストとそのマージンボックスの指定値を探すルールは、CSS ページモジュールに記述されています。

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

### プロパティ

* `all`
### アットルール

* `@import`
* `@layer`
### キーワード

* `initial`
* `inherit`
* `revert`
* `revert-layer`
Experimental
* `unset`
* `!important` フラグ
### インターフェイス

* `CSSLayerBlockRule`
* `CSSGroupingRule`
* `CSSLayerStatementRule`
* `CSSRule`
### 主要概念と定義

* `詳細度`
* カスケードオリジンと重要性
* 値
    + 実効値
    + 計算値
    + 初期値
    + 解決値
    + 指定値
    + 使用値
* オリジンの種類
    + ユーザーエージェントオリジン
    + 作者オリジン
    + ユーザーオリジン
* レイヤーの宣言
    + 名前付きレイヤー
    + 無名レイヤー
* 用語集: スタイルオリジン
ガイド
---

CSS カスケード入門

ユーザーエージェントが異なる元から来たプロパティ値をどのように結合するかを定義するカスケードアルゴリズムのガイドです。

学習: カスケード、詳細度、継承

CSS の最も基本的な概念であるカスケード、詳細度、継承は、 CSS を HTML に適用する方法や競合を解決する方法を制御します。

学習: カスケードレイヤー

カスケードレイヤー の紹介です。 CSS カスケードと CSS 詳細度の基本概念の上に構築された、より高度な機能です。

CSS 継承

CSS 継承のガイドです。

関連する概念
------

* 要素に装着されたスタイル
* インラインスタイルとカスケード
* @imports の条件付きルール
仕様書
---

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4  |
| CSS Cascading and Inheritance Level 5  |

関連情報
----

* CSS セレクターモジュール
* CSS 議事要素モジュール
* CSS ページ付きメディアモジュール
* CSS 条件付きルールモジュール
* CSS ネストモジュール
* 一括指定プロパティ


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

mask-clip
=========

**`mask-clip`** は CSS のプロパティで、マスクが影響する領域を指定します。要素の描画されるコンテンツはこの領域に制限されます。

```css
/\* <geometry-box> 値 \*/
mask-clip: content-box;
mask-clip: padding-box;
mask-clip: border-box;
mask-clip: margin-box;
mask-clip: fill-box;
mask-clip: stroke-box;
mask-clip: view-box;

/\* キーワード値 \*/
mask-clip: no-clip;

/\* 標準外のキーワード値 \*/
-webkit-mask-clip: border;
-webkit-mask-clip: padding;
-webkit-mask-clip: content;
-webkit-mask-clip: text;

/\* 複数の値 \*/
mask-clip: padding-box, no-clip;
mask-clip: view-box, fill-box, border-box;

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

構文
--

1 つまたは複数の以下に挙げたキーワード値を、カンマで区切って指定します。

### 値

`content-box`

描画されるコンテンツは、コンテンツボックスで切り取られます。

`padding-box`

描画されるコンテンツは、パディングボックスで切り取られます。

`border-box`

描画されるコンテンツは、境界ボックスで切り取られます。

`margin-box`

描画されるコンテンツは、マージンボックスで切り取られます。

`fill-box`

描画されるコンテンツは、オブジェクトの囲みボックスで切り取られます。

`stroke-box`

描画されるコンテンツは、オブジェクトの輪郭線ボックスで切り取られます。

`view-box`

直近の SVG ビューポートを参照ボックスとして使用します。 `viewBox` 属性が SVG ビューポートを作成している要素に指定されると、参照ボックスは `viewBox` 属性で示された座標系の原点に配置され、参照ボックスの寸法は `viewBox` 属性の幅と高さに設定されます。

`no-clip`

描画されるコンテンツは切り取られません。

`border`
Non-standard

このキーワードは `border-box` と同じ動作をします。

`padding`
Non-standard

このキーワードは `padding-box` と同じ動作をします。

`content`
Non-standard

このキーワードは `content-box` と同じ動作をします。

`text`
Non-standard

このキーワードは要素のテキストでマスク画像を切り取ります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `border-box` |
| 適用対象 | すべての要素。 SVG の場合は `defs` 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

mask-clip =
  [ <coord-box> | no-clip ]#

<coord-box> =
  <paint-box>  |
  view-box

<paint-box> =
  <visual-box>  |
  fill-box      |
  stroke-box

<visual-box> =
  content-box  |
  padding-box  |
  border-box

```

例
-

### 境界ボックスでマスクを切り取る

`mask-clip` の値を、上記の許容値のいずれかに変更してください。Chromium ベースのブラウザーでこの例を表示する場合は、`-webkit-mask-clip` の値を変更してください。

仕様書
---

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

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

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

関連情報
----

* Clipping and Masking in CSS


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

grid-auto-columns
=================

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-auto-columns`** は CSS のプロパティで、暗黙的に生成されたグリッドの列トラックまたはトラックのパターンの大きさを指定します。

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

グリッドアイテムが `grid-template-columns` で明示的に大きさが指定されていない列に配置された場合、暗黙的に grid トラックが作成され、そのアイテムを保持します。これには、範囲外の列に明示的に配置する場合と、自動配置アルゴリズムによって追加の列が作成される場合があります。

構文
--

```css
/\* キーワード値 \*/
grid-auto-columns: min-content;
grid-auto-columns: max-content;
grid-auto-columns: auto;

/\* <length> 値 \*/
grid-auto-columns: 100px;
grid-auto-columns: 20cm;
grid-auto-columns: 50vmax;

/\* <percentage> 値 \*/
grid-auto-columns: 10%;
grid-auto-columns: 33.3%;

/\* <flex> 値 \*/
grid-auto-columns: 0.5fr;
grid-auto-columns: 3fr;

/\* minmax() 値 \*/
grid-auto-columns: minmax(100px, auto);
grid-auto-columns: minmax(max-content, 2fr);
grid-auto-columns: minmax(20%, 80vmax);

/\* fit-content() 値 \*/
grid-auto-columns: fit-content(400px);
grid-auto-columns: fit-content(5cm);
grid-auto-columns: fit-content(20%);

/\* multiple track-size 値 \*/
grid-auto-columns: min-content max-content auto;
grid-auto-columns: 100px 150px 390px;
grid-auto-columns: 10% 33.3%;
grid-auto-columns: 0.5fr 3fr 1fr;
grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

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

### 値

`<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>` の値は、最大値として、トラックのフレックス係数を設定します。最小値としては、ゼロ（または、グリッドコンテナーの寸法が最小コンテンツの制約を受けている場合は、最小コンテンツ）として扱われます。

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

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

`auto`

最大値としては、そのトラック内のアイテムの最大の `max-content` のサイズを表します。

最小値としては、そのトラック内のアイテムの最大の最小サイズ（アイテムの `min-width`/`min-height` で指定します）を表します。これは常にではありませんが、 `min-content` のサイズであることが多いです。

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

**メモ:** トラックの寸法が `auto` の場合は、`align-content`と`justify-content`のプロパティによって引き伸ばすことができます。従って既定では、 `auto` サイズのトラックはグリッドコンテナーの残りの空間を占めます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | グリッドコンテナー |
| 継承 | なし |
| パーセント値 | コンテンツ領域の対応する寸法に対する相対値 |
| 計算値 | 指定されたパーセント値または絶対的な長さ |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

grid-auto-columns =
  <track-size>+

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

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

```

例
-

### グリッド列の寸法を設定

#### HTML

```html
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>
```

#### CSS

```css
#grid {
  height: 100px;
  display: grid;
  grid-template-areas: "a a";
  gap: 10px;
  grid-auto-columns: 200px;
}

#grid > div {
  background-color: lime;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # auto-tracks |

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

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

関連情報
----

* 関連する CSS プロパティ: `grid-auto-rows`, `grid-auto-flow`, `grid`
* グリッドレイアウトガイド: グリッドレイアウトでの自動配置 - 暗黙のグリッド内での行の大きさ
* 動画チュートリアル: *Introducing Grid auto-placement and order*


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

line-height
===========

**`line-height`** は CSS のプロパティで、行ボックスの高さを設定します。これは主にテキストの行間を設定するために使用します。ブロックレベル要素では、要素に含まれる行ボックスの最小の高さを指定します。非置換インライン要素では、行ボックスの高さの計算に使われる高さを指定します。

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

構文
--

```css
/\* キーワード値 \*/
line-height: normal;

/\* 単位のない値: この値を要素のフォントサイズに
掛けたものを使用する \*/
line-height: 3.5;

/\* <length> 値 \*/
line-height: 3em;

/\* <percentage> 値 \*/
line-height: 34%;

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

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

* 一つの `<number>`
* 一つの `<length>`
* 一つの `<percentage>`
* キーワード `normal`
### 値

`normal`

ユーザーエージェントに依存します。デスクトップブラウザー (Firefox を含む) は 要素の `font-family` によって決まる、おおよそ **`1.2`** という既定値を使います。

`<number>` (単位なし)

使用値は、この単位のない `<number>` に要素のフォントサイズを掛けたものになります。計算値は、指定された `<number>` と同じです。ほとんどの場合、継承時の予期しない結果を避けるために、これが `line-height` を設定する**好ましい方法です**。

`<length>`

行ボックスの高さの計算に、指定した `<length>` が使われます。**em** の単位で値が与えられると予期しない結果をになることがあります (下記の例を参照してください)。

`<percentage>`

要素自身のフォントサイズに対する相対値です。計算値はこの `<percentage>` に要素のフォントサイズの計算値を掛けたものです。**パーセント値**は予期しない結果を生む可能性があります (下記の第 2 の例を参照してください)。

`-moz-block-height`
Non-standard

行の高さを現在のブロックのコンテンツの高さにします。

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

主要な段落コンテンツでは、 `line-height` の値が `1.5` 以上になるようにしてください。これは弱視の人や、認知障碍を負った人に有用です。ページがテキストの寸法が大きくなるように拡大した場合、単位なしの値を使用すれば行の高さも同じ割合で拡大します。

W3C Understanding WCAG 2.1

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | すべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | あり |
| パーセント値 | 要素自身のフォントサイズに対する相対値 |
| 計算値 | パーセンテージか length を指定すると絶対的な値、それ以外は指定通り |
| アニメーションの種類 | 数値または長さ |

形式文法
----
```

line-height =
  normal                     |
  <number [0,∞]>             |
  <length-percentage [0,∞]>

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

```

例
-

### 基本的な例

```css
/\* 以下のルールの結果はすべて、同じ line height です \*/

div {
  line-height: 1.2;
  font-size: 10pt;
} /\* 数値/単位なし \*/
div {
  line-height: 1.2em;
  font-size: 10pt;
} /\* 長さ \*/
div {
  line-height: 120%;
  font-size: 10pt;
} /\* パーセント値 \*/
div {
  font:
    10pt/1.2 Georgia,
    "Bitstream Charter",
    serif;
} /\* 一括指定 \*/
```

`line-height` を設定するには、上記の `font` 一括指定プロパティがより便利なことが多いのですが、この場合は同時に `font-family` プロパティも指定しなければなりません。

### line-height の値は単位なしの数値が好ましい

以下の例は、`<number>` を使用したほうが `<length>` よりも好ましい理由を示しています。 2 つの `<div>` 要素を使用しています。最初のものには緑色の境界があり、単位なしの `line-height` の値を使用しています。2 番目には赤色の境界があり、 `line-height` の値を `em` で定義して使用しています。

#### HTML

```html
<div class="box green">
  <h1>予期しない結果を避けるために、単位なしの line-height を使いましょう。</h1>
  length と percentage で line-height を指定すると、継承動作がうまくいきません。
  ...
</div>

<div class="box red">
  <h1>予期しない結果を避けるために、単位なしの line-height を使いましょう。</h1>
  length と percentage で line-height を指定すると、継承動作がうまくいきません。
  ...
</div>

<!-- 1 つ目の <h1> の line-height はそれ自身のフォントサイズから計算されます (30px × 1.1) = 33px -->
<!-- 2 つ目の <h1> の line-height は red div のフォントサイズから計算されます (15px × 1.1) = 16.5px おそらく、望む結果ではないでしょう -->
```

#### CSS

```css
.green {
  line-height: 1.1;
  border: solid limegreen;
}

.red {
  line-height: 1.1em;
  border: solid red;
}

h1 {
  font-size: 30px;
}

.box {
  width: 18em;
  display: inline-block;
  vertical-align: top;
  font-size: 15px;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Inline Layout Module Level 3 # line-height-property |

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

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

関連情報
----

* `font`, `font-size`


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

transition-property
===================

**`transition-property`** は CSS のプロパティで、トランジション効果を適用する CSS プロパティを指定します。

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

**メモ:** アニメーション可能なプロパティのセットは変更される可能性があります。これにより、将来意図しない結果を引き起こす可能性があるため、リストで現状アニメーションしないとしているプロパティを使用することは避けてください。

一括指定プロパティ (例えば `background`) を指定すると、その個別指定のサブプロパティすべてをアニメーションさせることができます。

構文
--

```css
/\* キーワード値 \*/
transition-property: none;
transition-property: all;

/\* <custom-ident> 値 \*/
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;

/\* 複数の値 \*/
transition-property: test1, animation4;
transition-property: all, height, color;
transition-property:
  all,
  -moz-specific,
  sliding;

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

### 値

`none`

どのプロパティもトランジションを行いません。

`all`

トランジションが可能なすべてのプロパティで、トランジションを行います。

`<custom-ident>`

値が変更されたとき、トランジション効果を適用するプロパティを識別する文字列です。

公式定義
----

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

形式文法
----
```

transition-property =
  none                           |
  <single-transition-property>#

<single-transition-property> =
  all             |
  <custom-ident>

```

例
-

### 単純な例

この例では、ユーザーが要素の上にカーソルを置いたときに、 4 秒間でフォントサイズの遷移を行います。 `transition-property` は `font-size` です。

#### HTML

```html
<a class="target">ここにマウスポインターを置いてください</a>
```

#### CSS

```css
.target {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
}

.target:hover {
  font-size: 36px;
}
```

#### 結果

`transition-property` のその他の例は、主となる CSS トランジションの記事にあります。

仕様書
---

| Specification |
| --- |
| CSS Transitions # transition-property-property |

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

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

関連情報
----

* CSS トランジションの使用
* `transition`
* `transition-duration`
* `transition-timing-function`
* `transition-delay`
* `TransitionEvent`


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

::grammar-error
===============

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

**`::grammar-error`** は CSS の擬似要素で、ユーザーエージェントが文法的に正しくないとしたテキストの区間を示します。

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

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

* `color`
* `background-color`
* `cursor`
* `caret-color`
* `outline` およびその個別指定プロパティ
* `text-decoration` および関連プロパティ
* `text-emphasis-color`
* `text-shadow`
構文
--

```css
::grammar-error {}
```

例
-

### 単純な文書の文法チェック

この例では、最終的に対応しているブラウザーでは、フラグの立った文法エラーがあれば、示したスタイルで強調表示されます。

#### HTML

```html
<p>My friends is coming to the party tonight.</p>
```

#### CSS

```css
::grammar-error {
  text-decoration: underline red;
  color: red;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-grammar-error |

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

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

関連情報
----

* `::spelling-error`


CSS 封じ込め - CSS: カスケーディングスタイルシート

CSS 封じ込め
========

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

Newly availableSince February 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

 CSS 封じ込め (CSS Containment) 仕様の目的は、ウェブページの表示性能を向上させるために、開発者がページの任意のサブツリーをページのそれ以外の部分から独立させることができるようにすることです。もしページの一部が独立していることをブラウザーが知っていれば、レンダリングを最適化し、表示性能を向上させることができます。この仕様では、単一の CSS プロパティ `contain` を定義しています。この文書では、その仕様の基本的な目的を説明しています。
基本的な例
-----

多くのウェブページは、互いに独立したいくつかのセクションで構成されています。例えば、記事の見出しと内容の一覧が、以下のようなマークアップで存在していたとします。

```html
<h1>私のブログ</h1>
<article>
  <h2>良い記事の見出し</h2>
  <p>内容はこちら。</p>
</article>
<article>
  <h2>他の記事の他の見出し</h2>
  <p>さらなる内容はこちら。</p>
</article>
```

それぞれの記事には CSS で `contain` プロパティに `content` という値が設定されています。

```css
article {
  contain: content;
}
```

それぞれの記事は、ページ上の他の記事と独立していますので、 `contain: content` がこのことをブラウザーに伝えるために指定されています。それでブラウザーはこの情報を使用して、どのようにして内容を描画するかを決定します。例えば、表示される領域の外側にある記事は描画しない場合があります。

それぞれの `<article>` の `contain` プロパティを `content` の値に設定すると、新しい要素が挿入されたとき、ブラウザーはそれを含む要素のサブツリー以外の領域を再レイアウトまたは再描画する必要がないことを判断します。ただし、もし `<article>` が（`height: auto` の場合のように）そのコンテンツによってサイズが変わるようスタイル付けされている場合は、ブラウザーがサイズの変化に対応する必要があるかもしれません。

各記事が独立していることを `contain` プロパティで伝えています。

`content` の値は `contain: layout paint` の短縮形です。これはブラウザーに、要素の内部レイアウトがページの他の部分と完全に分離しており、要素に関するすべてがその境界の内側で描画されることを伝えます。視覚的にはみ出るようなものはありません。

この情報は、ページを作成するウェブ開発者にとっては、通常知っていることであり、実際、非常に明白なことです。しかし、ブラウザーはその意図を推測することができず、記事が完全に自己完結していると仮定することはできません。したがって、このプロパティは、この事実をブラウザーに説明し、その知識に基づいて表示性能を最適化することを可能にする良い方法を提供します。

主要概念と用語
-------

この仕様では `contain` というプロパティのみを定義しています。このプロパティの値には、封じ込めの種類を指定します。

### レイアウトの封じ込め

```css
article {
  contain: layout;
}
```

レイアウトは通常、文書全体がスコープになっています。つまり、文書全体の中から 1 つの要素を動かしただけで、すべてが動かされたかのように扱われます。 `contain: layout` を使うことで、ブラウザーに対して必要な要素のみを伝えることができます。このプロパティを指定した要素の中の全てがその要素によって封じ込められ、その他の要素には影響せず、そしてその包含ブロックは独立した整形コンテキストになります。

加えて、以下の点に注意する必要があります。

* `float` レイアウトはこのプロパティとは独立して作用します。
* レイアウトの封じ込めの境界でマージンが相殺されることはありません。
* レイアウトのコンテナーは `absolute`/`fixed` による位置指定の子要素の包含ブロックになります。
* この包含ボックスは重ね合わせコンテキストを作ります。従って `z-index` を使用することができます。
### ペイントの封じ込め

```css
article {
  contain: paint;
}
```

ペイントの封じ込めは、基本的に、ボックスを主要ボックスのパディングエッジでクリッピングします。視覚的なはみ出しは許されません。 `paint` 封じ込めにも `layout` 封じ込めと同じことが当てはまります（上記を参照）。

もうひとつの利点は、包含ボックスが画面外にある場合、ブラウザーはその内包する要素を描く必要がないことです — これらはそのボックスによって完全に内包されているので、画面外にあるに違いないからです。

### サイズの封じ込め

```css
article {
  contain: size;
}
```

サイズの封じ込めを単独で使用した場合、表示性能の最適化はあまり期待できません。しかし、要素の子のサイズが要素自体のサイズに影響しないことを意味し、そのサイズは子がないものとして計算されます。

もし、`contain: size` をオンにした場合は、これを適用した要素のサイズも指定する必要があります。もし、手動でサイズを指定しない場合は、ほとんどの場合、サイズがゼロになってしまいます。

### スタイルの封じ込め

```css
article {
  contain: style;
}
```

名前に反して、スタイルの封じ込めは、 Shadow DOM で得られるようにスタイルを封じ込めるわけではありません。主な使用例は、 CSS カウンター がある要素で変更され、それがツリーの残りの部分に影響する可能性がある状況を防ぐことです。

`contain: style` を使用すると、`counter-increment` と `counter-set` プロパティがそのサブツリーにのみ限定された新しいカウンターを作成することを保証します。

**メモ:** `style` の封じ込め仕様上「リスクがあり」、どこでも対応しているとは限りません (現在 Firefox は対応していません)。

### 特殊な値

封じ込めの特殊な値が 2 つあります。

* `content`
* `strict`

1 つ目は上記の例で既に見ました。 `contain: content` を使用すると、 `layout` と `paint` の封じ込めが有効になります。仕様書では、この値を「広く適用してもそれなりに安全である」と説明しています。この値は `size` の封じ込めを適用しないので、子要素のサイズに依存して、ボックスのサイズがゼロになる危険性はありません。

できるだけ多くの封じ込めを得るには、 `contain: strict` を使用します。これは `contain: size layout paint` と同じ動作をしますが、おそらく以下のようにすると、 `style` に対応しているブラウザーでは封じ込めを追加することができます。

```css
contain: strict;
contain: strict style;
```

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

### CSS プロパティ

* `contain`
* `content-visibility`
仕様書
---

| Specification |
| --- |
| CSS Containment Module Level 2 # contain-property |
| CSS Containment Module Level 2 # content-visibility |

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

### css.properties.contain

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

### css.properties.content-visibility

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

### css.properties.contain

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

### css.properties.content-visibility

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

外部リソース
------

* An Introduction to CSS Containment
* Everything You Need to Know About the CSS `will-change` Property


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

max-content
===========

`max-content` は大きさのキーワードで、コンテンツの内在的な最大幅や高さを表します。テキストコンテンツの場合、これはオーバーフローが発生しても、コンテンツがまったく折り返されないことを意味します。

構文
--

```css
/\* 長さとして使用 \*/
width: max-content;
inline-size: max-content;
height: max-content;
block-size: max-content;

/\* グリッドトラックで使用 \*/
grid-template-columns: 200px 1fr max-content;
```

例
-

### max-content をボックスの大きさに使用

#### HTML

```html
<div id="container">
  <div class="item">Item</div>
  <div class="item">
    Item with more text in it which will overflow the fixed width box.
  </div>
</div>
```

#### CSS

```css
#container {
  background-color: #8cffa0;
  padding: 10px;
  width: 200px;
}

.item {
  width: max-content;
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
}
```

#### 結果

### max-content をグリッド列の大きさに使用

#### HTML

```html
<div id="container">
  <div>Item</div>
  <div>Item with more text in it.</div>
  <div>Flexible item</div>
</div>
```

#### CSS

```css
#container {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # valdef-width-max-content |

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

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

関連情報
----

* 関連する大きさのキーワード: `min-content`, `fit-content`


CSS スクロールスナップ - CSS: カスケーディングスタイルシート

CSS スクロールスナップ
=============

**CSS スクロールスナップ** (CSS Scroll Snap) は CSS モジュールの一つで、スクロール操作の完了後にスクロールコンテナーのスクロールポートが終了するスクロール位置を強制する、スクロールスナップ位置を導入します。

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

### コンテナーの CSS プロパティ

* `scroll-snap-type`
* `scroll-padding`
* `scroll-padding-top`
* `scroll-padding-right`
* `scroll-padding-bottom`
* `scroll-padding-left`
* `scroll-padding-inline`
* `scroll-padding-inline-start`
* `scroll-padding-inline-end`
* `scroll-padding-block`
* `scroll-padding-block-start`
* `scroll-padding-block-end`
### 子の CSS プロパティ

* `scroll-snap-align`
* `scroll-margin`
* `scroll-margin-top`
* `scroll-margin-right`
* `scroll-margin-bottom`
* `scroll-margin-left`
* `scroll-margin-inline`
* `scroll-margin-inline-start`
* `scroll-margin-inline-end`
* `scroll-margin-block`
* `scroll-margin-block-start`
* `scroll-margin-block-end`
* `scroll-snap-stop`
ガイド
---

* CSS スクロールスナップの基本概念
* ブラウザーの互換性とスクロールスナップ
仕様書
---

| Specification |
| --- |
| CSS Scroll Snap Module Level 1  |

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

個々のプロパティページにて、それぞれのプロパティのブラウザー互換性情報を詳しく説明しています。

**メモ:** このモジュールの以前のバージョンはスクロールスナップ点と呼ばれており、非推奨になりました。CSS スクロールスナップが現在の実装です。新旧の仕様の対応方法の概要については、ブラウザーの互換性のガイドを参照してください。


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

overscroll-behavior
===================

**`overscroll-behavior`** は CSS のプロパティで、スクロール領域の境界に達したときにブラウザーが何をするかを設定します。これは `overscroll-behavior-x` および `overscroll-behavior-y` の一括指定です。

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

既定で、モバイルブラウザーはページの上端または下端（または他のスクロール領域）に到達したときに「跳ね返り」効果や、ページの更新を行う傾向があります。また、スクロールするコンテンツのあるページの上にスクロールするコンテンツのあるダイアログボックスがある場合、ダイアログボックスのスクロールの境界線に達すると、その下にあるページがスクロールを開始することにお気づきかもしれませんが、これは **スクロール連鎖** と呼ばれます。

場合によっては、この動きが望ましくないことがあります。 `overscroll-behavior` を使用すると、望ましくないスクロール連鎖を抑止したり、ブラウザー版の Facebook や Twitter アプリなどに見られる「引いて更新」の類の動きを実現したりすることができます。

構文
--

```css
/\* キーワード値 \*/
overscroll-behavior: auto; /\* 既定 \*/
overscroll-behavior: contain;
overscroll-behavior: none;

/\* 2 つの値 \*/
overscroll-behavior: auto contain;

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

`overscroll-behavior` プロパティは、次に挙げた値の一覧のうち 1 つまたは 2 つのキーワードで指定します。

2 つのキーワードでは、 `overscroll-behavior` のそれぞれ `x` 及び `y` 軸の値を指定します。値が 1 つだけ指定された場合は、 x および y が同じ値とみなされます。

### 値

`auto`

スクロールの末端における既定の振る舞いが通常通りに発生します。

`contain`

この値が設定された要素の内部では、スクロールの末端における既定の振る舞いが見られますが、隣接するスクロール領域に対するスクロール連鎖はありません。例えば、基底となる要素はスクロールしません。

`none`

隣接するスクロール領域に対するスクロール連鎖はなく、スクロールの末端における既定の振る舞いが抑制されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | 非置換ブロックレベル要素と非置換インラインブロック要素 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `overscroll-behavior-x`: 指定通り
* `overscroll-behavior-y`: 指定通り
 |
| アニメーションの種類 | 離散値 |

形式文法
----
```

overscroll-behavior =
  [ contain | none | auto ]{1,2}

```

例
-

### 下の要素がスクロールするのを抑止する

overscroll-behavior の例 (ソースコードはこちら) は、全画面で擬似連絡先の一覧を、ダイアログボックスでチャットウィンドウを表示します。

!['Active chat' と題されたポップアップチャットウィンドウで、 Chris と Bob の会話が表示されています。チャットウィンドウの背後には、 'overscroll-behavior demo' と題された連絡先リストが掲載されています。](/ja/docs/Web/CSS/overscroll-behavior/example.png)

どちらの領域もスクロールします。ふつう、チャットウィンドウをスクロール境界に当たるまでスクロールすると、下の連絡先ウィンドウもスクロールを始めます。これは望ましくないことです。これは、次のようにチャットウィンドウに `overscroll-behavior-y` （`overscroll-behavior` でも可）を使用することで抑止することができます。

```css
.messages {
  height: 220px;
  overflow: auto;
  overscroll-behavior-y: contain;
}
```

連絡先が先頭または末端までスクロールしたときの標準のスクロール末端効果を抑止したいかもしれません（例えば Android 版 Chrome は、冒頭の境界を超えてスクロールしようとするとページを再読み込みします）。これは `overscroll-behavior: none` を `<html>` 要素に設定することで抑止することができます。

```css
html {
  margin: 0;
  overscroll-behavior: none;
}
```

仕様書
---

| Specification |
| --- |
| CSS Overscroll Behavior Module Level 1 # overscroll-behavior-properties |

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

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

関連情報
----

* スクロールを制御する: 引いて更新や末端の効果のカスタマイズ（英語）


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

background-position-x
=====================

**`background-position-x`** は CSS のプロパティで、各背景画像における水平の初期位置を設定します。位置は `background-origin` によって設定された位置レイヤーに対する相対位置です。

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

このプロパティの値は、その後で一括指定の `background` または `background-position` プロパティが定義されると上書きされます。

構文
--

```css
/\* キーワード値 \*/
background-position-x: left;
background-position-x: center;
background-position-x: right;

/\* <percentage> 値 \*/
background-position-x: 25%;

/\* <length> 値 \*/
background-position-x: 0px;
background-position-x: 1cm;
background-position-x: 8em;

/\* 辺からの相対値 \*/
background-position-x: right 3px;
background-position-x: left 25%;

/\* 複数の値 \*/
background-position-x: 0px, center;

/\* グローバル値 \*/
background-position-x: inherit;
background-position-x: initial;
background-position-x: revert;
background-position-x: unset;
```

`background-position-x` プロパティは、1 つ以上の値をカンマで区切って指定します。

### 値

`left`

背景画像の左端を、背景位置レイヤーの左端に配置します。

`center`

背景画像を背景位置レイヤーの方向の中央に配置します。

`right`

背景画像の右端を、背景位置レイヤーの右端に配置します。

`<length>`

指定された背景画像の左辺の、背景位置レイヤーの左辺からのオフセットです。 (ブラウザーによってはオフセットに右辺を割り当てることもできます)。

`<percentage>`

指定された背景画像の水平位置のオフセットで、コンテナーからの相対値です。 0% の値は背景画像の左端がコンテナーの左端の位置に配置されることを意味し、 100% の値は背景画像の*右端*が、コンテナーの*右端*の位置に配置されることを意味します。したがって、 50% の値では、背景画像を水平方向の中央に配置します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0%` |
| 適用対象 | すべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | なし |
| パーセント値 | 背景配置領域の幅から背景画像の高さを引いたものに対する相対値 |
| 計算値 | 絶対長とパーセント値の組み合わせで与えられるオフセットと原点のキーワードを、各項目として構成されるリスト。 |
| アニメーションの種類 | 反復可能リスト |

形式文法
----
```

background-position-x =
  [ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]#

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

```

例
-

### 基本的な例

次の例は、シンプルな背景画像の実装で、background-position-x と background-position-y を使って、画像の水平方向と垂直方向の位置を別々に定義しています。

#### HTML

```html
<div></div>
```

#### CSS

```css
div {
  width: 300px;
  height: 300px;
  background-color: skyblue;
  background-image: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: bottom 10px;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 4 # background-position-longhands |

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

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

関連情報
----

* `background-position`
* `background-position-y`
* `background-position-inline`
* `background-position-block`
* 複数の背景の使用


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

:lang()
=======

**`:lang()`** は CSS の擬似クラスで、指定された言語に基づいて要素に一致します。

```css
/\* <p> のうち English (en) のものをすべて選択 \*/
p:lang(en) {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
```

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

**メモ:** HTML では、言語は `lang` 属性と `<meta>` 要素、それに、可能であればプロトコルから得られる情報 (HTTP ヘッダーなど) の組み合わせで決められます。他の文書型では、文書の言語を決定する他の方法があるかもしれません。

構文
--

### 形式文法
```

:lang( <language-code> )
```

### 引数

`<language-code>`

`<string>` で、ターゲットにしたい言語を表します。受付可能な値は HTML 仕様書で定義されています。

例
-

この例では、 `:lang()` 擬似クラスを使用して引用要素 (`<q>`) の親を選択するために 子結合子 を使用しています。なお、この例はこの目的のための唯一の方法でも、文書型における最適な方法を示しているわけでもありません。また、 Unicode の値は特殊な引用符を指定するために使用していることに注意してください。

### HTML

```html
<div lang="en">
  <q>This English quote has a <q>nested</q> quote inside.</q>
</div>
<div lang="fr">
  <q>This French quote has a <q>nested</q> quote inside.</q>
</div>
<div lang="ja">
  <q>この日本語の引用には内部に<q>入れ子</q>の引用があります。</q>
</div>
```

### CSS

```css
:lang(en) > q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
  quotes: "« " " »";
}
:lang(ja) > q {
  quotes: "「" "」" "『" "』";
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # lang-pseudo |

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

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

関連情報
----

* 言語に関する擬似クラス: `:lang`, `:dir`
* HTML の `lang` 属性
* HTML の `translate` 属性
* RFC 5646: Tags for Identifying Languages (also known as BCP 47)


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

font-kerning
============

**`font-kerning`** CSS プロパティはフォントに存在するカーニング情報の使用を制御します。

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

*カーニング*は、文字の間隔をどれだけ取るかを定義します。*well-kerned* フォントでは、この機能は文字間を他と比較してより整った読みやすい間隔にします。

例えば、下の画像では、左の例ではカーニングが使われていませんが、右の例ではカーニングが使われています。

![font-kerning の例](/ja/docs/Web/CSS/font-kerning/font-kerning.png)

構文
--

```css
font-kerning: auto;
font-kerning: normal;
font-kerning: none;

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

### 値

`auto`

このキーワードは、カーニングを使用するかをブラウザーに任せます。フォントサイズが小さい場合はカーニングが不自然になることがあるため、ブラウザーは無効化するでしょう。これは既定値です。

`normal`

このキーワードは、カーニングを適用するよう要求します。

`none`

このキーワードは、ブラウザーがフォントのカーニング情報を使用しないようにします。

公式定義
----

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

形式定義
----
```

font-kerning =
  auto    |
  normal  |
  none

```

例
-

### カーニングの有無

#### HTML

```html
<div id="kern"></div>
<div id="nokern"></div>
<textarea id="input">AV T. ij</textarea>
```

#### CSS

```css
div {
  font-size: 2rem;
  font-family: serif;
}

#nokern {
  font-kerning: none;
}

#kern {
  font-kerning: normal;
}
```

#### JavaScript

```js
let input = document.getElementById("input");
let kern = document.getElementById("kern");
let nokern = document.getElementById("nokern");

input.addEventListener("keyup", function () {
  kern.textContent = input.value; /\* Update content \*/
  nokern.textContent = input.value;
});

kern.textContent = input.value; /\* Initialize content \*/
nokern.textContent = input.value;
```

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-kerning-prop |

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

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

関連情報
----

* `font-variant`, `font-variant-position`, `font-variant-east-asian`, `font-variant-caps`, `font-variant-ligatures`, `font-variant-numeric`, `font-variant-alternates`, `font-synthesis`, `letter-spacing`


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

scroll-timeline-axis
====================

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

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

**メモ:** スクローラー要素が軸方向のコンテナーをはみ出さないか、はみ出した部分が隠されているかクリップされている場合、スクロール進行タイムラインは作成されません。

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

構文
--

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

### 値

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

`block`

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

`inline`

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

`y`

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

`x`

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `block` |
| 適用対象 | スクロールコンテナー |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | アニメーション不可 |

形式文法
----
```

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

```

例
-

### スクロール進行タイムラインの軸の定義

この例では、`--myScroller` という名前のスクロール進行タイムラインが `:root` 要素 (`<html>`) の `scroll-timeline-name` プロパティを使用して定義されています。そして、このタイムラインは `animation` クラスを持つ要素のアニメーションに `animation-timeline: --myScroller` を使用して適用されます。

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

#### HTML

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

```html
<body>
  <div class="content"></div>
  <div class="box animation"></div>
</body>
```

#### CSS

 コンテナーの CSS は、 `:root` を `--myScroller` という名前のスクロール進行タイムラインのソースとして設定するために、`scroll-timeline-name` プロパティを使用します。
 スクロール軸は `scroll-timeline-axis: x;` (Chromium) および `scroll-timeline-axis: horizontal;` (Firefox) を使用して設定します - これにより、水平スクロールバーの位置がアニメーションタイムラインを決定します。

`.content` 要素の幅を大きく設定することで、 `:root` 要素からはみ出すようにします。

また、 `.animation` 要素には、 `animation-timeline: --myScroller;` を使用してタイムラインが適用されており、 Firefox でこの例がうまくいくように `animation-duration` も適用されています。

```css
:root {
  scroll-timeline-name: --myScroller;

  /\* Chromium は新しい x/y 構文に対応 \*/
  scroll-timeline-axis: x;
  /\* Firefox はまだ古い horizontal/vertical 構文に対応 \*/
  scroll-timeline-axis: horizontal;
}

body {
  margin: 0;
  overflow-y: hidden;
}

.content {
  height: 100vh;
  width: 2000px;
}

.box {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: rebeccapurple;
  position: fixed;
  top: 25px;
  left: 25px;
}

.animation {
  animation: rotate-appear;
  animation-timeline: --myScroller;
  animation-duration: 1ms; /\* Firefox では、アニメーションを適用するために必要 \*/
}

@keyframes rotate-appear {
  from {
    rotate: 0deg;
    top: 0%;
  }

  to {
    rotate: 720deg;
    top: 100%;
  }
}
```

#### 結果

下部の水平バーをスクロールすると、正方形がアニメーションします。

仕様書
---

| Specification |
| --- |
| Scroll-driven Animations # propdef-scroll-timeline-axis |

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

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

関連情報
----

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


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

pointer-events
==============

**`pointer-events`** は CSS のプロパティで、特定のグラフィック要素がポインターイベントの対象になる可能性のある環境（存在する場合）を設定します。

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

構文
--

```css
/\* キーワード値 \*/
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /\* SVG のみ \*/
pointer-events: visibleFill; /\* SVG のみ \*/
pointer-events: visibleStroke; /\* SVG のみ \*/
pointer-events: visible; /\* SVG のみ \*/
pointer-events: painted; /\* SVG のみ \*/
pointer-events: fill; /\* SVG のみ \*/
pointer-events: stroke; /\* SVG のみ \*/
pointer-events: all; /\* SVG のみ \*/

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

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

### 値

`auto`

要素は、 `pointer-events` プロパティが指定されていないときと同様にふるまいます。SVG コンテンツ内では `visiblePainted` を指定したときと同じ効果になります。

`none`

要素がポインターイベントの対象になることはありません。しかし、子孫要素が `pointer-events` の別の値をセットされていた場合は、その子孫要素自体はポインターイベントのターゲットとなりえます。その場合、ポインターイベントはイベントキャプチャ/バブリングの過程で必要に応じて親要素のイベントリスナーをトリガーします。

#### SVG のみ（HTML では実験的）

`visiblePainted`

SVG の場合のみ（HTML では実験的）の値です。要素の `visibility` プロパティに `visible` が設定されていて、かつ、例えば `fill` プロパティに `none` 以外の値が設定されている時の塗り (`fill`)、もしくは `stroke` プロパティが `none` 以外の時の線 (`stroke`) の上にマウスカーソルがある場合のみ、要素がポインターイベントのターゲットになりえます。

`visibleFill`

SVG の場合のみの値です。 `visibility` プロパティが `visible` にセットされていて、塗り (`fill`) の上にマウスカーソルがある場合にのみ、要素がポインターイベントのターゲットになりえます。 `fill` プロパティの値でイベント処理が変化することはありません。

`visibleStroke`

SVG の場合のみの値です。 `visibility` プロパティが `visible` にセットされていて、線 (`stroke`) の上にマウスカーソルがある場合にのみ、要素がポインターイベントのターゲットになりえます。 `stroke` プロパティの値でイベント処理が変化することはありません。

`visible`

SVG の場合のみ（HTML では実験的）の値です。 `visibility` プロパティが `visible` にセットされていて、塗り (`fill`) か線 (`stroke`) の上にマウスカーソルがある場合にのみ要素がポインターイベントのターゲットになりえます。 `fill` プロパティや `stroke` プロパティの値でイベント処理が変化することはありません。

`painted`

SVG の場合のみ（HTML では実験的）の値です。 `fill` プロパティが `none` 以外にセットされている塗りの（すなわち `fill` ）要素、もしくは `stroke` のプロパティが `none` 以外にセットされている線の（すなわち `stroke` ）要素の上にマウスカーソルがいる場合にのみ要素がポインターイベントのターゲットになりえます。 `visibility` プロパティの値はイベントプロセスに影響を与えません。

`fill`

SVG の場合のみの値です。塗り (`fill`) の上にマウスカーソルがある場合にのみ要素がポインターイベントのターゲットになりえます。 `fill` プロパティや `visibility` プロパティの値でイベント処理が変化することはありません。

`stroke`

SVG の場合のみの値です。線 (`stroke`) の上にマウスカーソルがある場合にのみ要素がポインターイベントのターゲットになりえます。 `stroke` プロパティや `visibility` の値でイベント処理が変化することはありません。

`all`

SVG の場合のみ（HTML では実験的）の値です。塗り (`fill`) と線 (`stroke`) の上にマウスカーソルがある場合にのみ要素がポインターイベントのターゲットになりえます。 `fill` や `stroke` や `visibility` の値でイベント処理が変化することはありません。

解説
--

このプロパティが指定されないと、 `visiblePainted` の値の同じ性質が SVG コンテンツに適用されます。

値を `none` に設定すると、要素がポインターイベントのターゲットではないことを示すのに加え、ポインターイベントが要素を「通過」して、代わりに要素の「下」をターゲットにすることを指示します。

`pointer-events` を使用して要素がポインターイベントのターゲットとなることを防止するということは、必ずしもその要素のイベントリスナーが起動されない、することができないという意味ではありません。仮に要素の子要素のひとつで、 `pointer-events` がポインターイベントのターゲットになるよう明示的に設定されていた場合、その子要素をターゲットにするどのようなイベントも親要素を通過し、その際に親要素に設定されたイベントリスナーを起動します。もちろん、これらの子要素に触れず親要素にだけ触れるマウスの動きは、子要素と親要素のどちらにも捕まえられることはありません (親要素を「通過」し、その下にあるものがターゲットになります)。

`pointer-events: none` を持った要素は、 `Tab` キーを使用したキーボードナビゲーションによってフォーカスを受け取ります。

公式定義
----

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

形式文法
----
```

pointer-events =
  auto            |
  bounding-box    |
  visiblePainted  |
  visibleFill     |
  visibleStroke   |
  visible         |
  painted         |
  fill            |
  stroke          |
  all             |
  none

```

例
-

### 基本的な例

この例では、すべての画像のポインターイベント (クリック、ドラッグ、ホバー等) を無効にします。

```css
img {
  pointer-events: none;
}
```

### リンクの無効化

この例では、 `http://example.com` へのリンクのポインターイベントを無効にします。

#### HTML

```html
<ul>
  <li><a href="https://developer.mozilla.org">MDN</a></li>
  <li><a href="http://example.com">example.com</a></li>
</ul>
```

#### CSS

```css
a[href="http://example.com"]
{
  pointer-events: none;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # pointer-events-control |
| Scalable Vector Graphics (SVG) 2 # PointerEventsProperty |

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

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

関連情報
----

* SVG 属性 `pointer-events (en-US)`
* SVG 属性 `visibility (en-US)`
* (X)HTML で使うことを踏まえた WebKit の PointerEventsProperty の仕様書
* `user-select` - ユーザーがテキストを選択できるかどうかの制御


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

outline-color
=============

**`outline-color`** は CSS のプロパティで、要素の輪郭線の色を設定します。

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

構文
--

```css
/\* <color> 値 \*/
outline-color: #f92525;
outline-color: rgb(30 222 121);
outline-color: blue;

/\* キーワード値 \*/
outline-color: auto;

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

`outline-color` プロパティは、以下に挙げた値のうちの一つで指定します。

### 値

`<color>`

輪郭線の色で、`<color>` で指定します。

`auto`
Experimental

`outline-style` が `auto` でない限り `currentcolor` に、さらにアクセントカラーに計算されます。

解説
--

輪郭線は要素の周囲、 `border` の外側に描かれる線です。要素の境界線とは異なり、輪郭線は要素の枠の外側に描かれ、他のコンテンツと重複することがあります。一方、境界線はページのレイアウトに実際に影響を与え、他のどの要素とも (明示的に重複させない限り) 重複しないように合わせます。

輪郭線の表示方法を定義する際は、一括指定プロパティの `outline` を使用したほうが普通は便利です。

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

独自のフォーカススタイルを作成するときに、ふつう `outline` プロパティを調整します。輪郭線の色を変更するのであれば、輪郭線と、それが配置される部分の背景のコントラスト比が、弱視の人でも知覚できるよう高くなっているか確認することが重要です。

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

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

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | キーワード `auto` の場合は、計算値も `currentcolor`。色の場合は、半透明であれば、計算値はそれに一致する `rbga()` で、不透明であれば、それに一致する `rgb()`。キーワード `transparent` は `rgba(0,0,0,0)` に対応付けられる。 |
| アニメーションの種類 | 色 |

形式文法
----
```

outline-color =
  auto                      |
  [ <color> | <image-1D> ]

<image-1D> =
  <stripes()>

<stripes()> =
  stripes( <color-stripe># )

<color-stripe> =
  <color>                            &&
  [ <length-percentage> | <flex> ]?

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

```

例
-

### 青い実線の輪郭線の設定

#### HTML

```html
<p>見ての通り、輪郭線は青です。</p>
```

#### CSS

```css
p {
  outline: 2px solid; /\* 輪郭線の幅と種類 \*/
  outline-color: #0000ff; /\* 輪郭線を青にする \*/
  margin: 5px;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline-color |

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

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

関連情報
----

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


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

計算値
===

**計算値** (computed value) は CSS プロパティにおいて、継承の過程で親から子へと伝えられる値です。これは指定値から計算されます。

1. 特殊な値である `inherit`, `initial`, `revert`, `revert-layer`, `unset` を扱います。
2. プロパティの概要の「計算値」に記載された値に達するのに必要な計算を行います。

プロパティの計算値に達するのに必要な計算は、一般に (`em` の単位やパーセントなどの) 相対値を絶対値に変換する計算を含みます。例えば、ある要素に `font-size: 16px` と `padding-top: 2em` が指定された場合、 `padding-top` の計算値は `32px` (フォントサイズの倍) になります。

しかしながら、いくつかのプロパティ (`width`, `margin-right`, `text-indent`, `top` など、レイアウトの定義に必要ものに対する割合が相対的なもの) でパーセント値で指定された値はパーセント値で計算された値に変わります。さらに、 `line-height` に指定された単位なしの値は、指定された計算値になります。これらの計算値に残った相対的な値は、使用値が定義された場合、絶対値になります。

**メモ:** DOM の `getComputedStyle()` API は解決値を返しますが、これはプロパティによって計算値であるか使用値であるかが変わります。

仕様書
---

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # computed-value |

関連情報
----

* `window.getComputedStyle`
* CSS の主要概念:
    + CSS の構文
    + アットルール
    + コメント
    + 詳細度
    + 継承
    + ボックスモデル
    + レイアウトモード
    + 視覚整形モデル
    + マージンの相殺
    + 値
        - 初期値
        - 使用値
        - 実効値
    + 値の定義構文
    + 一括指定プロパティ
    + 置換要素


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

border-style
============

**`border-style`** は 一括指定 の CSS プロパティで、要素の境界線の 4 辺すべての線のスタイルを設定します。

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

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

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

* `border-bottom-style`
* `border-left-style`
* `border-right-style`
* `border-top-style`
構文
--

```css
/\* キーワード値 \*/
border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

/\* 上下 | 左右 \*/
border-style: dotted solid;

/\* 上 | 左右 | 下 \*/
border-style: hidden double dashed;

/\* 上 | 右 | 下 | 左 \*/
border-style: none solid dotted dashed;

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

`border-style` プロパティは 1 つ、 2 つ、 3 つ、 4 つの値を使って指定することができます。

* 値が **1 つ**指定された場合、**全 4 辺**に同じスタイルが適用される。
* 値が **2 つ**指定された場合、1 つ目のスタイルは**上下**、2 つ目は**左右**の辺に適用される。
* 値が **3 つ**指定された場合、1 つ目のスタイルは**上**、2 つ目は**左右**、3 つ目は**下**の辺に適用される。
* 値が **4 つ**指定された場合、スタイルはそれぞれ**上**、**右**、**下**、**左**の順（時計回り）に適用される。

それぞれの値は以下の一覧にあるキーワードです。

### 値

`<line-style>`

境界のスタイルを記述します。以下の値を使用することができます。

`none`

`hidden` キーワードと同様に、境界線を表示しません。 `background-image` を設定している場合を除き、プロパティで別に指定していても `border-width` の同じ辺の計算値は `0` になります。テーブルのセルで境界線が collasped 形式である場合は、 `none` 値はもっとも低い優先度になります。ほかに競合する境界線が設定されている場合も、そちらが表示されます。

`hidden`

`none` キーワードと同様に、境界線を表示しません。 `background-image` を設定している場合を除き、プロパティで別に指定していても `border-width` の同じ辺の計算値は `0` になります。テーブルのセルで境界線が collasped 形式である場合は、 `hidden` 値はもっとも高い優先度になります。ほかに競合する境界線が設定されている場合も、非表示になります。

`dotted`

連続した丸い点を表示します。点の間の空白の量は仕様書で定義されておらず、実装依存です。点の半径は、同じ辺の `border-width` の計算値の半分です。

`dashed`

短く角が四角い連続したダッシュや線分を表示します。線分の実寸や長さは仕様書で定義されておらず、実装依存です。

`solid`

1 本の直線、実線を表示します。

`double`

2 本の直線を表示し、幅の合計は `border-width` で定義したピクセル数になります。

`groove`

凹んだように見える境界線を表示します。 `ridge` の逆です。

`ridge`

出っ張ったように見える境界線を表示します。 `groove` の逆です。

`inset`

要素が埋め込まれて見える境界線を表示します。 `outset` の逆です。 `border-collapse` が `collapsed` に設定されたテーブルのセルに適用すると、この値は `groove` のようにふるまいます。

`outset`

要素が出っ張って見える境界線を表示します。 `inset` の逆です。 `border-collapse` を `collapsed` に設定したテーブルセルに適用すると、この値は `ridge` のようにふるまいます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `border-top-style`: `none`
* `border-right-style`: `none`
* `border-bottom-style`: `none`
* `border-left-style`: `none`
 |
| 適用対象 | すべての要素。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `border-bottom-style`: 指定通り
* `border-left-style`: 指定通り
* `border-right-style`: 指定通り
* `border-top-style`: 指定通り
 |
| アニメーションの種類 | 離散値 |

形式文法
----
```

border-style =
  <line-style>{1,4}

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

```

例
-

### プロパティのすべての値

プロパティのすべての値のサンプルです。

#### HTML

```html
<pre class="b1">none</pre>
<pre class="b2">hidden</pre>
<pre class="b3">dotted</pre>
<pre class="b4">dashed</pre>
<pre class="b5">solid</pre>
<pre class="b6">double</pre>
<pre class="b7">groove</pre>
<pre class="b8">ridge</pre>
<pre class="b9">inset</pre>
<pre class="b10">outset</pre>
```

#### CSS

```css
pre {
  height: 80px;
  width: 120px;
  margin: 20px;
  padding: 20px;
  display: inline-block;
  background-color: palegreen;
  border-width: 5px;
  box-sizing: border-box;
}

/\* border-style の例示用クラス \*/
.b1 {
  border-style: none;
}

.b2 {
  border-style: hidden;
}

.b3 {
  border-style: dotted;
}

.b4 {
  border-style: dashed;
}

.b5 {
  border-style: solid;
}

.b6 {
  border-style: double;
}

.b7 {
  border-style: groove;
}

.b8 {
  border-style: ridge;
}

.b9 {
  border-style: inset;
}

.b10 {
  border-style: outset;
}
```

### 結果

仕様書
---

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

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

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

関連情報
----

* 境界に関する CSS 一括指定プロパティ: `border`, `border-width`, `border-color`, `border-radius`


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

<resolution>
============

**`<resolution>`** は CSS の データ型 で、メディアクエリの resolution で使われ、出力端末のピクセル密度である、解像度を表します。

画面では、長さは物理的な値ではなく、 *CSS* のインチ、センチメートル、またはピクセルと関連づけられます。

構文
--

`<resolution>` データ型は、厳密に正の `<number>` のすぐ後ろに解像度の単位を続けます。他の CSS の寸法と同じく、単位のリテラルと数字の間に空白はありません。

### 単位

`dpi`

1 インチあたりのドット数 を表します。画面でよく使われるのは 72 または 96 dpi です。印刷物の dpi は通常、これより大きくなります。1 インチは 2.54 cm なので、`1dpi ≈ 0.39dpcm` です。

`dpcm`

センチメートルあたりのドット数 を表します。1 インチは 2.54 cm なので、`1dpcm ≈ 2.54dpi` です。

`dppx`

ピクセル (`px`) あたりのドット数を表します。CSS の `in` と CSS の `px` の比率は 1:96 で固定なので、`1dppx` は `96dpi` と同じです。これは `image-resolution` で定義される、CSS の画像の既定の解像度に一致します。

`x`

`dppx` の別名です。

**メモ:** 仮に値 `0` に対しすべての単位が同じ解像度を表すとしても、単位を省略してはいけません。言い換えると `0` は無効で、`0dpi`、`0dpcm`、`0dppx` のどれも表しません。

例
-

### メディアクエリーで使用する

```css
@media print and (min-resolution: 300dpi) { ... }
```

### 有効な解像度
```

96dpi
50.82dpcm
3dppx
```

### 無効な解像度
```

72 dpi     数値と単位の間に空白は許可されていません。
ten dpi    数値は10進数しか使えません。
0          単位は必須です。
```

仕様書
---

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

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

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

関連情報
----

* resolution メディア特性
* `image-resolution` プロパティ
* メディアクエリーの使用


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

-webkit-mask-position-x
=======================

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

`-webkit-mask-position-x` は CSS のプロパティで、マスク画像の初期の水平方向の位置を設定します。

```css
/\* キーワード値 \*/
-webkit-mask-position-x: left;
-webkit-mask-position-x: center;
-webkit-mask-position-x: right;

/\* <percentage> 値 \*/
-webkit-mask-position-x: 100%;
-webkit-mask-position-x: -50%;

/\* <length> 値 \*/
-webkit-mask-position-x: 50px;
-webkit-mask-position-x: -1cm;

/\* 複数の値 \*/
-webkit-mask-position-x:
  50px,
  25%,
  -3em;

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

|  |  |
| --- | --- |
| 初期値 | `0%` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | ボックス自身の寸法に対する相対値 |
| 計算値 | `length` の場合は絶対的な値、それ以外はパーセント値 |
| アニメーションの種類 | 離散値 |

構文
--

### 値

`<length-percentage>`

ボックスの左パディングの辺から見た画像の左端の位置を示す長さです。パーセント値の場合は、ボックスのパディング領域の水平方向の寸法に対して計算されます。つまり、 `0%` という値は、画像の左端がボックスの左パディングの辺と一致していることを意味し、`100%` という値は、画像の右端がボックスの右パディングの辺と一致していることを意味します。

**`left`**

`0%` と同等です。

**`center`**

`50%` と同等です。

**`right`**

`100%` と同等です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0%` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | ボックス自身の寸法に対する相対値 |
| 計算値 | `length` の場合は絶対的な値、それ以外はパーセント値 |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

### マスク画像の水平方向の位置指定

```css
.exampleOne {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-x: right;
}

.exampleTwo {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-x: 25%;
}
```

仕様書
---

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

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

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

関連情報
----

`-webkit-mask-position` (en-US), `-webkit-mask-position-y`, `-webkit-mask-origin` (en-US), `-webkit-mask-attachment`


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

hyphenate-character
===================

**`hyphenate-character`** は CSS のプロパティで、ハイフンによる改行の前で行末に使用される文字（または文字列）を設定します。

自動ハイフネーション、ソフトハイフネーションのどちらでも、指定された hyphenate-character の値に従って表示されます。

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

構文
--

この値は、ハイフンの代わりに使用する文字列を設定するか、またはユーザーエージェントが現在の書体の慣習に基づいて適切な文字列を選択することを示します（既定値）。

```css
hyphenate-character: <string>;
hyphenate-character: auto;
```

### 値

`<string>`

`<string>` で、ハイフンによる改行の前で行末に使用されるものを表します。
 使用される文字が長すぎる場合は、ユーザーエージェントが切り落とすことがあります。

`auto`

 ユーザーエージェントは、内容の言語における書体の規則に基づいて適切な文字列を選択します。
 これは既定のプロパティ値であり、明示的に指定する必要があるのは、異なる継承値を上書きする場合のみです。

公式定義
----

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

形式文法
----
```

hyphenate-character =
  auto      |
  <string>

```

例
-

 この例では、 2 つの同じテキストブロックに `hyphens` を設定して、必要な場所で確実に改行し、（``を使って作成した）ソフトハイフンで改行するようにしています。
 最初のブロックは、ハイフンの値が等号（"`*`"）に変更されています。
 これは、このプロパティに対応しているユーザーエージェントでは `hyphenate-character: auto` と同じ意味になります。

#### HTML

```html
<dl>
  <dt><code>hyphenate-character: "*"</code></dt>
  <dd id="string" lang="en">Supercalifragilisticexpialidocious</dd>
  <dt><code>hyphenate-character の設定なし</code></dt>
  <dd lang="en">Supercalifragilisticexpialidocious</dd>
</dl>
```

#### CSS

```css
dd {
  width: 90px;
  border: 1px solid black;
  hyphens: auto;
}

dd#string {
  -webkit-hyphenate-character: "\*";
  hyphenate-character: "\*";
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Text Module Level 4 # propdef-hyphenate-character |

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

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

関連情報
----

* 関連する CSS プロパティ: `hyphens`, `overflow-wrap`


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

page-break-inside
=================

**警告:** このプロパティは `break-inside` プロパティによって置き換えられました。

CSS の **`page-break-inside`** プロパティは、現在の要素の*内側の* 改ページを調整します。

```css
/\* キーワード値 \*/
page-break-inside: auto;
page-break-inside: avoid;

/\* グローバル値 \*/
page-break-inside: inherit;
page-break-inside: initial;
page-break-inside: revert;
page-break-inside: unset;
```

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

構文
--

### 値

`auto`

初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。

`avoid`

要素の内側で改ページされないようにします。

改ページの別名
-------

`page-break-inside` プロパティは古いプロパティとなり、 `break-inside` によって置き換えられました。

互換性のため、 `page-break-inside` はブラウザーから `break-inside` の別名として扱われます。これにより、 `page-break-inside` を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。

| page-break-inside | break-inside |
| --- | --- |
| `auto` | `auto` |
| `avoid` | `avoid` |

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | ルート要素の通常フロー内におけるブロックレベル要素。ユーザーエージェントは他の要素に `table-row` 要素のように適用することがあります。 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

page-break-inside =
  avoid    |
  auto     |
  inherit

```

例
-

### 要素の途中の改ページを防ぐ

#### HTML

```html
<div class="page">
  <p>これは最初の段落です。</p>
  <section class="list">
    <span>リスト</span>
    <ol>
      <li>one</li>
      <!-- <li>two</li> -->
    </ol>
  </section>
  <ul>
    <li>one</li>
    <!-- <li>two</li> -->
  </ul>
  <p>Tこれは第二段落です。</p>
  <p>これは第三段落です。文章の量が多くなっています。</p>
  <p>
    これは第四段落です。第三段落よりも、さらにもう少しだけ、文章の量が多くなっています。
  </p>
</div>
```

#### CSS

```css
.page {
  background-color: #8cffa0;
  height: 90px;
  width: 200px;
  columns: 1;
  column-width: 100px;
}

.list,
ol,
ul,
p {
  break-inside: avoid;
}

p {
  background-color: #8ca0ff;
}

ol,
ul,
.list {
  margin: 0.5em 0;
  display: block;
  background-color: orange;
}

p:first-child {
  margin-top: 0;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Paged Media Module Level 3 # page-break-inside |

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

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

関連情報
----

* `break-before`, `break-after`, `break-inside`
* `page-break-after`, `page-break-before`
* `orphans`, `widows`


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

animation-duration
==================

**`animation-duration`** は CSS のプロパティで、 1 回のアニメーション周期が完了するまでの所要時間を設定します。

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

アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである `animation` プロパティを使用すると便利です。

構文
--

```css
/\* 単一のアニメーション \*/
animation-duration: auto; /\* 既定値 \*/
animation-duration: 6s;
animation-duration: 120ms;

/\* 複数のアニメーション \*/
animation-duration: 1.64s, 15.22s;
animation-duration: 10s, 35s, 230ms;

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

### 値

`auto`
Experimental

時間ベースのアニメーションでは、 `auto` は `0s` の値と等価です（下記参照）。 CSS スクロール駆動アニメーション (en-US)では、 `auto` はタイムライン全体をアニメーションで埋めます。

``<time>``

1 回のアニメーションの周期にかかる時間。この値は、秒 (`s`) またはミリ秒 (`ms`) で指定することができます。値は正の数か 0 でなければならず、単位は必須です。

値が指定されなかった場合、既定値である `0s` が使用され、この場合でもアニメーションは実行されます（`animationStart` と `animationEnd` イベントが発生します）。長さが `0s` のときにアニメーションが表示されるかどうかは、下記で説明する `animation-fill-mode` の値によります。

* `animation-fill-mode` を `backwards` または `both` に設定した場合、 `animation-direction` で定義したアニメーションの最初のフレームが `animation-delay`(/ja/docs/Web/CSS/animation-delay) のカウントダウン中に表示されます。
* `animation-fill-mode` が `forwards` または `both` に設定した場合、アニメーションの最後のフレームは `animation-delay` が経過した後に、 `animation-direction` で定義したように表示されます。
* `animation-fill-mode` を `none` に設定すると、アニメーションは目に見える効果はありません。

**メモ:** 負の数は無効であり、宣言が無視されます。一部、初期の接頭辞付きの実装は `0s` と等価に解釈するかもしれません。

**メモ:** `animation-*` プロパティにカンマ区切りで複数の値を指定した場合、 `animation-name` に現れる順にアニメーションに適用されます。アニメーションの数と `animation-*` プロパティの値が一致しない場合は、複数のアニメーションプロパティ値の設定 を参照してください。

**メモ:** CSS スクロール駆動アニメーション (en-US)を作成するとき、`animation-duration` の値を秒やミリ秒で指定することは実際には意味がありません。テストしたところ、スクロール進行タイムラインアニメーションには効果がないように見えましたが、ビュー進行タイムラインアニメーションでは、アニメーションがタイムラインの終わりに近づいて起こるようになるようでした。しかし、Firefox がアニメーションを正常に適用するには `animation-duration` の設定が要求されます。そのため、Firefoxでアニメーションが動作するように `animation-duration` を `1ms` に設定することをお勧めします。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0s` |
| 適用対象 | すべての要素、`::before` / `::after` 擬似要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | アニメーション不可 |

形式文法
----
```

animation-duration =
  <time [0s,∞]>#

```

例
-

### アニメーション時間の設定

これは animation-duration が 0.7 秒のアニメーションです。

#### HTML

```html
<div class="box"></div>
```

#### CSS

```css
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
```

#### 結果

矩形の上にカーソルを当てると、アニメーションを開始します。

他の例については、 CSS アニメーションを参照してください。

仕様書
---

| Specification |
| --- |
| CSS Animations Level 1 # animation-duration |

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

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

関連情報
----

* CSS アニメーションの使用
* JavaScript の `AnimationEvent` API
* その他のアニメーション関連プロパティ: `animation`, `animation-composition`, `animation-delay`, `animation-direction`, `animation-fill-mode`, `animation-iteration-count`, `animation-name`, `animation-play-state`, `animation-timeline`, `animation-timing-function`