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

animation-range
===============

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

**`animation-range`** は CSS の一括指定プロパティで、タイムラインに沿ったアニメーションの適用範囲の先頭と末尾を設定します。つまり、タイムラインのどこでアニメーションが始まり、どこで終わるかを設定するために使用します。

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

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

* `animation-range-start`
* `animation-range-end`
構文
--

```css
/\* キーワードまたは長さのパーセント値 \*/
animation-range: normal; /\* normal normal と同等 \*/
animation-range: 20%; /\* 20% normal と同等 \*/
animation-range: 100px; /\* 100px normal と同等 \*/

/\* 単一の名前付きタイムライン範囲の値 \*/
animation-range: cover; /\* cover 0% cover 100% と同等 \*/
animation-range: contain; /\* contain 0% contain 100% と同等 \*/
animation-range: cover 20%; /\* cover 20% cover 100% と同等 \*/
animation-range: contain 100px; /\* contain 100px cover 100% と同等 \*/

/\* 2 つの値で範囲の先頭と末尾 \*/
animation-range: normal 25%;
animation-range: 25% normal;
animation-range: 25% 50%;
animation-range: entry exit; /\* entry 0% exit 100% と同等 \*/
animation-range: cover cover 200px; /\* cover 0% cover 200px と同等 \*/
animation-range: entry 10% exit; /\* entry 10% exit 100% と同等 \*/
animation-range: 10% exit 90%;
animation-range: entry 10% 90%;
```

`animation-range` の一括指定では、コンテナー要素に `<animation-range-start>` と `<animation-range-end>` の値の組み合わせを適用することができます。両方の値を指定した場合、 `<animation-range-start>`、`<animation-range-end>` の順に解釈されます。

上の構文ブロックのコメントで示したように、 1 つの値しか提供されなかった場合、いくつかの解釈の可能性があります。

* その値が `<length-percentage>` または `normal` である場合、 `<animation-range-start>` はその値を取り、 `<animation-range-end>` は `normal` と等しくなります。
* その値が `<length-percentage>` 以下が続かない名前付きタイムラインの範囲である場合、その範囲はその名前付きタイムラインの範囲の 0% と 100% の間になります。
* もし値が `<length-percentage>` 以下の名前付きタイムライン範囲であれば、範囲はその名前付きタイムライン範囲の指定したパーセント値で始まり、その名前付きタイムライン範囲の 100% で終わります。
### 値

`animation-range-start` や `animation-range-end` を表す 1 つまたは 2 つの値です。これらの値は以下のいずれかになります。

`normal`

`animation-range-start` の場合はタイムラインの始まり、 `animation-range-end` の場合はタイムラインの終わりを表します。これが既定値です。

`<length-percentage>`

タイムラインの始めからの長さまたはパーセント値。

`<timeline-range-name>`

全体のタイムライン内の固有のタイムライン範囲です。可能な値は次の通りです。

`cover`

名前付きビュー進行タイムラインの全範囲を表します（詳細は CSS スクロール駆動アニメーション (en-US)を参照）。主体要素が最初にスクロールポートのビュー進行の可視範囲に入り始めた時点（進行度 0%）から、完全にその範囲から離れた時点（進行度 100%）までです。

`contain`

名前付きビュー進行タイムラインの範囲で、主体要素がスクロールポートのビュー進行状況の可視範囲に完全に収まっている、または完全に格納している範囲を表します。

* 主体要素がスクロールポートより小さい場合は、主体要素が最初にスクロールポートに完全に収まった点（進行度 0%）から、スクロールポートに完全に収まらなくなった点（進行度 100%）までの範囲になります。
* 主体要素がスクロールポートより大きい場合は、主体要素が最初にスクロールポートに完全に応じた点（進行度 0%）から、スクロールポートに完全に応じた点（進行度 100%）まで、この範囲になります。

`entry`

名前付きビュー進行タイムラインの範囲で、主体要素が最初にスクロールポートに入り始めた点（進行度 0%）から、完全にスクロールポートに入った点（進行度 100%）までを表します。

`exit`

名前付きビュー進行タイムラインの範囲で、主体要素が最初にスクロールポートを出始めた点（進行度 0%）から、完全にスクロールポートを出た点（進行度 100%）までを表します。

`entry-crossing`

名前付きビュー進行タイムラインの範囲で、主体要素が最初にスクロールポートの始点を横切り始めた点（進行度 0%）から、完全にスクロールポートの始点を横切った点（進行度 100%）までを表します。

`exit-crossing`

名前付きビュー進行タイムラインの範囲で、主体要素が最初にスクロールポートの終端を横切り始めた点（進行度 0%）から、 スクロールポートの終端を完全に横切った点（進行度 100%）までを表します。

`<timeline-range-name>` の値に `<length-percentage>` が含まれていない場合、それが `animation-range-start` の値であれば `0%`、`animation-range-end` の値であれば `100%` が既定値になります。

**メモ:** 上記の説明からこれらの値が意味していることを視覚化するのはとても難しいです。幸いなことに、 View Timeline Ranges Visualizer はこれらが意味していることを視覚的に分かりやすく表示してくれます。

`<timeline-range-name> <length-percentage>`

指定したタイムライン範囲の開始から測定された、指定したタイムライン範囲内の指定したパーセント値または距離に等しい組み合わせ値。

**メモ:** スクロールポート（詳細はスクロールコンテナーを参照）とは、名前付きビュー進行タイムラインのアニメーションの主体要素が可視であるとみなされる範囲のことです。既定値では、これはスクロールポートの全範囲ですが、 `view-timeline-inset` プロパティを使用して調整することができます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `animation-range-start`: `normal`
* `animation-range-end`: `normal`
 |
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | 名前付きタイムラインが指定されていればその範囲、そうでない場合はタイムライン全体からの相対値 |
| 計算値 | 一括指定の次の各プロパティとして* `animation-range-start`: リストで、それぞれの項目は 'normal'、長さのパーセント値、タイムラインの範囲名と長さのパーセント値のいずれか。
* `animation-range-end`: リストで、それぞれの項目は 'normal'、長さのパーセント値、タイムラインの範囲名と長さのパーセント値のいずれか。
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `animation-range-start`: アニメーション不可
* `animation-range-end`: アニメーション不可
 |

形式文法
----
```

animation-range =
  [ <'animation-range-start'> <'animation-range-end'>? ]#

```

例
-

### View Timeline Ranges Visualizer

View Timeline Ranges Visualizer では、すべての値のタイプの意味を視覚的にわかりやすく説明しています。

### 範囲を指定した名前付き進行タイムラインの作成

`view-timeline` プロパティを `class` が `animation` の主体要素に用いて `--subjectReveal` という名前のビュー進行タイムラインを定義します。
 これを同じ要素のタイムラインとして設定するには `animation-timeline: --subjectReveal;` を使用します。その結果、主体要素は文書をスクロールしながら上方向に移動してアニメーションします。

`animation-range` 宣言も設定することで、アニメーションの開始を遅くし、終了を早くすることができます。

#### HTML

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

```html
<div class="content">
  <h1>Content</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Risus quis varius quam
    quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat
    interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat
    vivamus at augue.
  </p>

  <p>
    Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate
    dignissim. Tortor aliquam nulla facilisi cras. A erat nam at lectus urna
    duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus.
    Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
    arcu vitae elementum curabitur vitae nunc sed velit.
  </p>

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

  <p>
    Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
    cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
    dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non
    tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam
    vel quam elementum. Nibh praesent tristique magna sit amet purus gravida
    quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat
    imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi
    scelerisque. Netus et malesuada fames ac.
  </p>
</div>
```

#### CSS

`subject` 要素とそのコンテンツを含む `content` 要素は最小限のスタイル設定で、テキストコンテンツには基本的なフォント設定がされています。

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

.content {
  width: 75%;
  max-width: 800px;
  margin: 0 auto;
}

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

h1 {
  font-size: 3rem;
}

p {
  font-size: 1.5rem;
  line-height: 1.5;
}
```

`subject` というクラスを持つ `<div>` には `animation` というクラスも指定されています。ここには `view-timeline` が設定されており、ビューの進行タイムラインを定義しています。また、同じ値で `animation-timeline` という名前も指定され、ビュー進行タイムラインが進むにつれてアニメーションする要素であることを宣言します。また、アニメーションが予想よりも遅く始めるように `animation-range-start` 宣言も与えます。

最後に、要素の透過率と変倍をアニメーションで指定し、スクロール移動されるたびにフェードインしたり変倍させたりします。

```css
.animation {
  view-timeline: --subjectReveal block;
  animation-timeline: --subjectReveal;

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

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

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

#### 結果

スクロールすると、主体要素のアニメーションを確認することができます。

仕様書
---

| Specification |
| --- |
| Scroll-driven Animations # animation-range |

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

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

関連情報
----

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


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

view-transition-name
====================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

**`view-transition-name`** は CSS のプロパティで、選択された要素に識別名 (`<custom-ident>`) を与え、ルートビュートランジションとは別のビュートランジションに参加させます。 `none` の値が指定された場合はビュートランジションを行いません。

構文
--

```css
/\* <custom-ident> 値の例 \*/
view-transition-name: header;
view-transition-name: figure-caption;

/\* キーワード値 \*/
view-transition-name: none;
```

### 値

`<custom-ident>`

選択した要素を、ルートビュートランジションとは別のビュートランジションに参加させるための識別名です。識別子は一意でなければなりません。 2 つのレンダリング要素が同時に同じ `view-transition-name` を持つ場合、 `ViewTransition.ready` は拒否され、トランジションはスキップされます。

`none`

選択された要素はビュートランジションに参加しません。

公式定義
----

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

形式文法
----
```

view-transition-name =
  none            |
  auto            |
  <custom-ident>

```

例
-

```css
figcaption {
  view-transition-name: figure-caption;
}
```

仕様書
---

| Specification |
| --- |
| CSS View Transitions Module Level 1 # view-transition-name-prop |

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

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

関連情報
----

* ビュートランジション API
* Smooth and simple transitions with the View Transitions API


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

text-size-adjust
================

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

**`text-size-adjust`** は CSS のプロパティで、一部のモバイル端末で使われる、テキストの自動拡大アルゴリズムを制御します。他のブラウザーはこのプロパティを無視します。

```css
/\* キーワード値 \*/
text-size-adjust: none;
text-size-adjust: auto;

/\* <percentage> 値 \*/
text-size-adjust: 80%;

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

モバイル端末のことを考慮していないウェブページは今でも多いため、モバイル端末のブラウザーはデスクトップブラウザーとは異なる表示をすることがあります。例えば端末の画面幅ではなく、800px や 1000px などのより広い幅のビューポートでレイアウトを行います。この広いレイアウトを元の機器の大きさに対応させるため、ブラウザーはその一部を表示するか、縮小して表示することになります。

こうして小さい画面に合わせて縮小したテキストはとても小さくなるため、モバイル端末のブラウザーの多くはテキストを拡大して読みやすくします。テキストを含む要素が画面幅の全体を占めている時、レイアウトを変更することなく、読みやすい大きさまで文字サイズが拡大されます。 `text-size-adjust` プロパティを使うことで、この挙動が不要なページで無効化したり、挙動を変更したりすることができます。

構文
--

`text-size-adjust` プロパティは `none`, `auto`, `<percentage>` の何れかで指定します。

### 値

`none`

ブラウザーのテキスト自動拡大アルゴリズムを無効化します。

`auto`

ブラウザーのテキスト自動拡大アルゴリズムを有効化します。この値は CSS で設定した `none` 値を取り消すのに使います。

`<percentage>`

ブラウザーのテキスト自動拡大アルゴリズムを有効化し、パーセント値で文字サイズの倍率を指定します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 文字拡大に対応しているスマートフォンブラウザーならば `auto`、それ以外の場合は `none` (そして変更不可)。 |
| 適用対象 | すべての要素 |
| 継承 | あり |
| パーセント値 | 可、テキストのフォントの対応する寸法に対する相対値 |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

text-size-adjust =
  auto                |
  none                |
  <percentage [0,∞]>

```

例
-

### 基本的な無効化の使用方法

上記に示すとおり、適切に設計されたレスポンシブサイトでは、`text-size-adjust` の動作は必要ありませんので、開発者は none の値を指定してこれをオフにすることができます。

```css
p {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
```

仕様書
---

| Specification |
| --- |
| CSS Mobile Text Size Adjustment Module Level 1 # adjustment-control |

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

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

関連情報
----

* Apple のドキュメント
* Gecko's behavior description, by L. David Baron
* Microsoft のドキュメント


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

max()
=====

**`max()`** は CSS の関数で、 CSS プロパティの値としてカンマで区切られた式のリストから最大の (最も正である) 値を設定できます。 `max()` 関数は `<length>`、`<frequency>`、`<angle>`、`<time>`、`<percentage>`、`<number>`、`<integer>` が使用できるところならばどこでも使用することができます。

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

上の例では、幅が 400px 以上になりますが、ビューポートが 2000px よりも広い場合 (1vw が 20px になるため、 20vw が 400px になる場合) はより広くなります。 `max()` の値はプロパティが取りうる*最小の*値を提供するものとして考えてください。

構文
--

`max()` 関数は、引数としてカンマで区切った 1 つ以上の式を取り、もっとも大きい (最も正である) 式の値をプロパティに割り当てられた値として使用します。

式は、 (算術演算子を用いた) 数式、リテラル値、あるいは、有効な引数の型 (`<length>` など) に評価される `attr()` などの式や、ネストされた `min()` や `max()` 関数を用いることができます。

式の各値に異なる単位を使用することができます。必要に応じて、計算順序を決めるために括弧を使用することもできます。

メモ
--

* 表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも `auto` が指定されていたかのように扱われる*可能性があります*。
* `min()` や他の `max()` 関数を式の値として入れ子にすることが認められています。式は完全な数式なので、 `calc()` 関数自体を使わずに直接加算、減算、乗算、除算を使うことができます。
* 式は、標準的な演算子の優先順位規則を使用して、加算 ( + )、減算 ( - )、乗算 ( \* )、除算 ( / ) の各演算子を組み合わせた値にすることができます。オペランドの + と - の両側には必ず空白を入れてください。式の中のオペランドは、任意の `<length>` 構文値を使用できます。
* `min()` と `max()` の値を組み合わせたり、 `max()` を `clamp()` や `calc()` 関数の中で使用したりすることができます (そしてよく必要になります)。
### 形式文法
```

<max()> =
  max( <calc-sum># )

<calc-sum> =
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*

<calc-product> =
  <calc-value> [ [ '*' | '/' ] <calc-value> ]\*

<calc-value> =
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )

<calc-keyword> =
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

```

例
-

### フォントに最小値を設定する

CSS 関数のもう一つの使用例は、少なくとも最小サイズを確保しながらフォントサイズを拡大していくことで、読みやすさを確保しながらレスポンシブなフォントサイズを可能にします。

多少の CSS を見てみましょう。

```css
h1 {
  font-size: 2rem;
}
h1.responsive {
  font-size: max(4vw, 2em, 2rem);
}
```

フォントサイズは最小で 2rem、ページの既定のフォントサイズの 2 倍になります。これは、それが読みやすく、アクセシビリティを確保することを保証します。

```html
<h1>このテキストは常に読みやすいですが、サイズは変わりません。</h1>
<h1 class="responsive">
  このテキストは、常に読みやすく、ある意味でレスポンシブです。
</h1>
```

`max()` 関数はプロパティに許される最小値を探るものと考えてください。

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

`max()` を使用してテキストのサイズを制御する場合は、テキストが常に十分に読める大きさであることを確認してください。提案としては、 `min()` 関数を `max()` の中で入れ子にして使用し、その二番目の値として常に十分な大きさの相対的な長さの単位を持つようにします。

```css
small {
  font-size: max(min(0.5vw, 0.5em), 1rem);
}
```

これにより、ページが拡大縮小されたときにテキストの大きさが拡大縮小され、最小サイズは *1rem* になります。

* MDN Understanding WCAG, Guideline 1.4 explanations
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
仕様書
---

| Specification |
| --- |
| CSS Values and Units Module Level 4 # calc-notation |

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

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

関連情報
----

* `calc()`
* `clamp()`
* `min()`
* CSS 値


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

構文
==

カスケーディングスタイルシート (CSS) 言語の基本的な狙いは、ブラウザーのエンジンがページの要素を、色、位置、装飾などの特定の特性をもって描けるようにすることです。 *CSS の構文*はこの目的を反映し、以下のような基本的な構成要素があります。

* 識別子である**プロパティ**。人間が読むことができ、人間が読むことができる*名前*であり、どの機能が考慮されるかを定義します。
* 特性がどのようにエンジンに操作されなければならないか表す**値**。どのプロパティも、形式文法および意味論的に定義され、ブラウザーに実装された妥当な値を対として持ちます。
CSS の宣言
-------

CSS のプロパティを特定の値に設定することは、 CSS 言語の核となる仕組みです。プロパティと値の組は**宣言**と呼ばれ、どの CSS エンジンも、 1 つ 1 つのページの要素を適切に配置し、形作るために、どの宣言を要素に適用するかを計算します。

CSS では、プロパティと値の両方とも、既定で大文字と小文字を区別しません。組はコロン '`:`' (`U+003A COLON`) で分割され、プロパティと値の前、間、後のホワイトスペースは (内部のものを除き) 無視されます。

![CSS の構文 - declaration.png](/ja/docs/Web/CSS/Syntax/css_syntax_-_declaration.png)

CSS には 100 を超える種類のプロパティと、無限に近い種類の値があります。すべてのプロパティと値の組み合わせが許されるわけではなく、どのプロパティも、何が妥当な値であるか定義されています。与えられたプロパティの値が妥当ではなかったとき、その宣言は*妥当ではない*と見なされ、 CSS エンジンから完全に無視されます。

CSS の宣言ブロック
-----------

宣言は、左中括弧 '`{`' (`U+007B LEFT CURLY BRACKET`) と右中括弧 '`}`' (`U+007D RIGHT CURLY BRACKET`) で区切られた構造の中で、**ブロック**にグループ化されます。ブロックは入れ子になることがあるため、左中括弧と右中括弧が対応していなければなりません。

![css syntax - block.png](/ja/docs/Web/CSS/Syntax/css_syntax_-_block.png)

このようなブロックは必然的に**宣言ブロック**と呼ばれ、その中の宣言はセミコロン '`;`' (`U+003B SEMICOLON`) で区切ります。宣言ブロックは宣言を持たず、空になることもあります。宣言の周囲のホワイトスペースは無視されます。ブロックの最後の宣言は、セミコロンで終わらせる必要はありませんが、セミコロンで終わらせればブロックを他の宣言で拡張するときにセミコロンを付け忘れることを防げるため、*良い書き方*とみなされます。

CSS 宣言ブロックは以下の図のように表すことができます。

![css syntax - declarations block.png](/ja/docs/Web/CSS/Syntax/declaration-block.png)

**メモ:** 左中括弧と右中括弧を除いた、セミコロンで分割された宣言のリストである CSS 宣言ブロックの内容は、 HTML の `style` 属性の中に置くことができます。

CSS のルールセット
-----------

もしスタイルシートが、1 つの宣言をウェブページのどの要素にも適用するとしたら、それはひどく使えないものになるでしょう。本当の目的は、それぞれの宣言を文書のそれぞれの部品に適用することです。

CSS ではこれを、宣言ブロックと条件を関連付けることで実現します。それぞれの（妥当な）宣言ブロックの前に、ページの要素を選択する条件である**セレクター**を置きます。セレクターのグループと宣言ブロックの組を**ルールセット**、またはしばしば単に**ルール**と呼びます。

CSS のルールセット (またはルール) は下記の図のように表現することができます。

![css syntax - ruleset.png](/ja/docs/Web/CSS/Syntax/ruleset.png)

ページの要素は複数のセレクターに一致する可能性があり、あるプロパティが複数のルールで異なる値で複数回現れる可能性があるため、 CSS 標準ではあるプロパティが他のプロパティより優先され、適用しなければならないことを定義しています。これをカスケードアルゴリズムと呼びます。

**メモ:** 単一のセレクターで構成されるルールセットを複数まとめて表記する方法の一つとして、ルールセットをセレクターの集合で記述することが挙げられますが、各ルールセットの妥当性を上手くまとめるものではない点に注意しましょう。

基本セレクターのうちの一つが妥当ではなかった場合 (架空の要素や架空のセレクターを使った際など)、*セレクター*全体が妥当ではないこととなり、ルール全体も (妥当ではないものとして) 無視されます。

CSS の文
------

ルールセットはスタイルシートの主な構成要素であり、よく大きな一連のルールセットのみから成ります。しかし、ウェブ制作者がスタイルシートで伝えたい情報としては、他にも文字セット、インポートする他の外部スタイルシート、フォントフェイス、リストカウンターの記述などがあります。このためには別の、特定の種類の文を使用します。

**文**は、空白ではないすべての文字で始まり、（文字列の外にあり、エスケープされておらず、別の {} または () または [] の対の中に含まれていない）最初の右中括弧またはセミコロンで終わる構成要素です。

![css syntax - statements Venn diag.png](/ja/docs/Web/CSS/Syntax/css_syntax_-_statements_venn_diag.png)

文には二種類があります。

* **ルールセット** (または*ルール*)。ここまで見てきたように、 CSS の宣言の集合を、セレクターによって記述された条件に関連付けています。
* **アットルール**。アットマーク '`@`' (`U+0040 COMMERCIAL AT`) で始まり、識別子が後続し、ブロックの外のセミコロンまたは次のブロックの終わりに至るまで続きます。それぞれの種類の アットルールは、識別子によって定義され、当然ながら独自の内部構文や意味を持つことがあります。アットルールはメタデータ情報 (`@charset` や `@import` など) を伝えたり、条件情報 (`@media` や `@document`) など) を伝えたり、記述的情報 (`@font-face` など) を伝えたりするために使用します。

ルールまたはアットルールではない文は、すべて妥当ではなく、無視されます。

入れ子の文
-----

他にも文のグループとして、**入れ子の文**があります。これらはアットルール特有のサブセットである*条件付きグループルール*の中で使用することができます。これらの文は、特定の条件が一致した場合にのみ適用されます。例えば、 `@media` アットルールの内容は、示された条件に一致するブラウザーが実行されている端末でのみ適用されるなどです。 CSS1 と CSS2.1 では、条件付きグループルール内では*ルールセット*のみが利用できました。それではあまりに厳しかったので、 *CSS Conditionals Level 3* では、この制約は撤廃されました。現在、それは今でも試験的でどのブラウザーでも対応しているわけではないものの、条件付きグループルールはより広い範囲の内容を持つことができ、ルールセットだけではなく、すべてではないものの、一部のアットルールを含むこともできます。

関連情報
----

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


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

mask-border-slice
=================

**`mask-border-slice`** は CSS のプロパティで、`mask-border-source` で設定された画像を複数の領域に分割します。これらの領域は要素のマスク境界の部品を構成するために使用されます。

構文
--

```css
/\* すべての辺 \*/
mask-border-slice: 30%;

/\* 垂直 | 水平 \*/
mask-border-slice: 10% 30%;

/\* 上 | 水平 | 下 \*/
mask-border-slice: 30 30% 45;

/\* 上 | 右 | 下 | 左 \*/
mask-border-slice: 7 12 14 5;

/\* `fill` キーワードの使用 \*/
mask-border-slice: 10% fill 7 12;

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

`mask-border-slice` プロパティは 1 ～ 4 つの `<number-percentage>` 値で指定し、それぞれの画像スライスの位置を表すことができます。負の数は無効です。対応する寸法よりも大きな値は `100%` に丸められます。

* 位置が **1 つ**指定された場合、全 4 本の分割線がそれぞれの辺から同じ距離で作成されます。
* 位置が **2 つ**指定された場合、1 つ目の値を**上下**の辺からの距離として、2 つ目を**左右**の辺からの距離として分割線を作成します。
* 位置が **3 つ**指定された場合、1 つ目の値を**上**の辺からの距離として、2 つ目を**左右**の辺からの距離、3 つ目は**下**の辺からの距離として分割線を作成します。
* 位置が **4 つ**指定された場合、**上**、**右**、**下**、**左**の順 (時計回り) でそれぞれの辺からの距離として分割線を作成します。

`fill` の値は任意であり、使用される場合は、宣言のどこにでも置くことができます。

### 値

`<number>`

縁からのオフセットを、ラスター画像の場合はピクセル数で、ベクター画像の場合は座標で表します。ベクター画像の場合、数値は元の画像の寸法ではなく、要素の寸法に対する相対値になるので、この場合は一般にパーセント値の方が適しています。

`<percentage>`

縁からのオフセットを、元の画像の寸法、つまり水平方向のオフセットであれば画像の幅、垂直方向のオフセットであれば画像の高さに対するパーセント値で表します。

`fill`

中央の画像領域を維持します。幅と高さは、画像領域のそれぞれ上と左に一致するように拡縮されます。

解説
--

分割する過程で、4 つの角、4 つの辺、それに中央領域の計 9 つの領域を作成します。それぞれの辺からの距離で設定される 4 本の分割線が、領域の寸法を制御します。

![border-image または border-image-slice プロパティで定義された 9 つの領域](/ja/docs/Web/CSS/mask-border-slice/border-image-slice.png)

上の図は、それぞれの領域の位置を説明しています。

* 1-4 の領域は角の領域です。それぞれが 1 回ずつ使用され、最終的な境界画像の中で四隅を形成します。
* 5-8 の領域は辺の領域です。これらは最終的な境界画像の中で、要素の寸法に合わせて反復、拡縮、その他の加工が行われます。
* 9 の領域は中央領域です。既定では描画されませんが、キーワード `fill` が設定されていれば背景画像のように使用されます。

`mask-border-repeat`、`mask-border-width`、`mask-border-outset` の各プロパティは、最終的な境界画像を構成するためにこれらの領域が使用される方法を指定します。

公式定義
----

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

形式文法
----
```

mask-border-slice =
  [ <number> | <percentage> ]{1,4} fill?

```

例
-

### 基本的な使用

このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、ソース画像から取られるスライスの大きさを定義する役割を果たし、境界マスクを生成するために使用されるようになります。

```css
mask-border-slice: 30 fill;
```

Chromium ベースのブラウザーは、このプロパティの古い版 — `mask-box-image-slice` — に接頭辞つきで対応しています。

```css
-webkit-mask-box-image-slice: 30 fill;
```

**メモ:** `mask-border` ページでは動作する例を (Chromium で対応している古い接頭辞つきの境界マスクプロパティを使用して) 挙げていますので、効果について分かるでしょう。

**メモ:** fill キーワードは、要素の内容を表示したい場合には設定する必要があります。

仕様書
---

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-border-slice |

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

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

関連情報
----

* `mask-border`
* `mask-border-mode`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-source`
* `mask-border-width`
* 値 1 ～ 4 つの構文の説明


CSS の Mozilla 拡張 - CSS: カスケーディングスタイルシート

CSS の Mozilla 拡張
================

Firefox などの Mozilla アプリケーションは、いくつもの特別な **CSS の Mozilla 拡張**に対応しています。これには、プロパティ、値、擬似要素、擬似クラス、アットルール、メディアクエリーが含まれます。これらの拡張には `-moz-` の接頭辞が付いています。

Mozilla 独自のプロパティと擬似クラス (ウェブサイトで使用しないでください)
------------------------------------------

**メモ:** これらのプロパティと擬似クラスは、Firefox などの Mozilla アプリケーション内でのみ動作するものであり、標準化されていません。これら標準外のプロパティの一部は、XUL 要素にのみ適用されます。

### B

* `-moz-binding`
非推奨
* `-moz-border-bottom-colors`
非推奨
* `-moz-border-left-colors` (en-US)
非推奨
* `-moz-border-right-colors`
非推奨
* `-moz-border-top-colors`
非推奨
* `-moz-box-align` (en-US)
* `-moz-box-direction` (en-US)
* `-moz-box-flex` (en-US)
* `-moz-box-ordinal-group`
* `-moz-box-orient` (en-US)
* `-moz-box-pack` (en-US)
### C–I

* `-moz-context-properties`
* `-moz-float-edge`
* `-moz-force-broken-image-icon`
* `-moz-image-region`
### O

* `-moz-orient`
* `-moz-osx-font-smoothing` (en-US)
* `-moz-outline-radius`
* `-moz-outline-radius-bottomleft`
* `-moz-outline-radius-bottomright`
* `-moz-outline-radius-topleft`
* `-moz-outline-radius-topright`
* `overflow-clip-box`
* `overflow-clip-box-block`
* `overflow-clip-box-inline`
### S–Z

* `-moz-stack-sizing`
* `:-moz-system-metric(images-in-menus)`
非推奨
* `:-moz-system-metric(mac-graphite-theme)`
非推奨
* `:-moz-system-metric(scrollbar-end-backward)`
非推奨
* `:-moz-system-metric(scrollbar-end-forward)`
非推奨
* `:-moz-system-metric(scrollbar-start-backward)`
非推奨
* `:-moz-system-metric(scrollbar-start-forward)`
非推奨
* `:-moz-system-metric(scrollbar-thumb-proportional)`
非推奨
* `:-moz-system-metric(touch-enabled)`
非推奨
* `:-moz-system-metric(windows-default-theme)`
非推奨
* `-moz-user-focus`
* `-moz-user-input`
* `-moz-user-modify` (en-US)
* `-moz-window-dragging`
* `-moz-window-shadow`
以前は独自だったが標準化されたもの
-----------------

**メモ:** CSS の互換性を最大化するため、以下の接頭辞付きのものではなく、接頭辞なしの標準プロパティを使用してください。これらは、標準化されて接頭辞なしの形式が対応され次第、接頭辞付きのバージョンは順次破棄されます。

### A

* `-moz-animation`
非推奨
 [接頭辞付きも許容]
* `-moz-animation-delay`
非推奨
 [接頭辞付きも許容]
* `-moz-animation-direction`
非推奨
 [接頭辞付きも許容]
* `-moz-animation-duration`
非推奨
 [接頭辞付きも許容]
* `-moz-animation-fill-mode`
非推奨
 [接頭辞付きも許容]
* `-moz-animation-iteration-count`
非推奨
 [接頭辞付きも許容]
* `-moz-animation-name`
非推奨
 [接頭辞付きも許容]
* `-moz-animation-play-state`
非推奨
 [接頭辞付きも許容]
* `-moz-animation-timing-function`
非推奨
 [接頭辞付きも許容]
* `-moz-appearance`
Experimental
### B

* `-moz-backface-visibility`
非推奨
 [接頭辞付きも許容]
* `-moz-background-clip`
非推奨
* `-moz-background-origin`
非推奨
* `-moz-background-inline-policy`
非推奨
 [標準化された `box-decoration-break` に置き換え]
* `-moz-background-size`
非推奨
* `-moz-border-end`
非推奨
 [標準化された `border-inline-end` に置き換え]
* `-moz-border-end-color`
非推奨
 [標準化された `border-inline-end-color` に置き換え]
* `-moz-border-end-style`
非推奨
 [標準化された `border-inline-end-style` に置き換え]
* `-moz-border-end-width`
非推奨
 [標準化された `border-inline-end-width` に置き換え]
* `-moz-border-image`
非推奨
* `-moz-border-start`
非推奨
 [標準化された `border-inline-start` に置き換え]
* `-moz-border-start-color`
非推奨
 [標準化された `border-inline-start-color` に置き換え]
* `-moz-border-start-style`
非推奨
 [標準化された `border-inline-start-style` に置き換え]
* `-moz-border-start-width`
非推奨
 [標準化された `border-inline-start-width` に置き換え]
* `-moz-box-sizing`
非推奨
 [接頭辞付きも許容]
### C

* `clip-path`
Experimental
 [SVG 以外にも適用]
* `-moz-column-count`
非推奨
 [接頭辞付きも許容]
* `-moz-column-fill`
非推奨
 [接頭辞付きも許容]
* `-moz-column-gap`
非推奨
 [接頭辞付きも許容]
* `-moz-column-width`
非推奨
 [接頭辞付きも許容]
* `-moz-column-rule`
非推奨
 [接頭辞付きも許容]
* `-moz-column-rule-width`
非推奨
 [接頭辞付きも許容]
* `-moz-column-rule-style`
非推奨
 [接頭辞付きも許容]
* `-moz-column-rule-color`
非推奨
 [接頭辞付きも許容]
* `-moz-context-properties`
Experimental
### F–M

* `filter`
Experimental
 [SVG 以外にも適用]
* `-moz-font-feature-settings`
非推奨
 [接頭辞付きも許容]
* `-moz-font-language-override`
非推奨
 [接頭辞付きも許容]
* `-moz-hyphens`
非推奨
 [接頭辞付きも許容]
* `-moz-margin-end`
非推奨
 [標準化された `margin-inline-end` に置き換え]
* `-moz-margin-start`
非推奨
 [標準化された `margin-inline-start` に置き換え]
* `mask`
Experimental
 [SVG 以外にも適用]
### O

* `-moz-opacity`
非推奨
* `-moz-outline`
非推奨
* `-moz-outline-color`
非推奨
* `-moz-outline-offset`
非推奨
* `-moz-outline-style`
非推奨
* `-moz-outline-width`
非推奨
### P

* `-moz-padding-end`
非推奨
 [標準化された `padding-inline-end` に置き換え]
* `-moz-padding-start`
非推奨
 [標準化された `padding-inline-start` に置き換え]
* `-moz-perspective`
非推奨
 [接頭辞付きも許容]
* `-moz-perspective-origin`
非推奨
 [接頭辞付きも許容]
* `pointer-events`
Experimental
 [SVG 以外にも適用]
### T–U

* `-moz-tab-size`
Experimental
* `-moz-text-align-last`
非推奨
* `-moz-text-decoration-color`
非推奨
* `-moz-text-decoration-line`
非推奨
* `-moz-text-decoration-style`
非推奨
* `-moz-text-size-adjust`
Experimental
* `-moz-transform`
非推奨
 [接頭辞付きも許容]
* `-moz-transform-origin`
非推奨
 [接頭辞付きも許容]
* `-moz-transform-style`
非推奨
 [接頭辞付きも許容]
* `-moz-transition`
非推奨
 [接頭辞付きも許容]
* `-moz-transition-delay`
非推奨
 [接頭辞付きも許容]
* `-moz-transition-duration`
非推奨
 [接頭辞付きも許容]
* `-moz-transition-property`
非推奨
 [接頭辞付きも許容]
* `-moz-transition-timing-function`
非推奨
 [接頭辞付きも許容]
* `-moz-user-select`
Experimental
値
-

### グローバル値

* `-moz-initial`
### `-moz-appearance`

* `button`
* `button-arrow-down`
* `button-arrow-next`
* `button-arrow-previous`
* `button-arrow-up`
* `button-bevel`
* `checkbox`
* `checkbox-container`
* `checkbox-label`
* `checkmenuitem`
* `dialog`
* `groupbox`
* `listbox`
* `menuarrow`
* `menucheckbox`
* `menuimage`
* `menuitem`
* `menuitemtext`
* `menulist`
* `menulist-button`
* `menulist-text`
* `menulist-textfield`
* `menupopup`
* `menuradio`
* `menuseparator`
* `-moz-mac-unified-toolbar`
* `-moz-win-borderless-glass`
* `-moz-win-browsertabbar-toolbox`
* `-moz-win-communications-toolbox`
* `-moz-win-glass`
* `-moz-win-media-toolbox`
* `-moz-window-button-box`
* `-moz-window-button-box-maximized`
* `-moz-window-button-close`
* `-moz-window-button-maximize`
* `-moz-window-button-minimize`
* `-moz-window-button-restore`
* `-moz-window-titlebar`
* `-moz-window-titlebar-maximized`
* `progressbar`
* `progresschunk`
* `radio`
* `radio-container`
* `radio-label`
* `radiomenuitem`
* `resizer`
* `resizerpanel`
* `scale-horizontal`
* `scalethumb-horizontal`
* `scalethumb-vertical`
* `scale-vertical`
* `scrollbarbutton-down`
* `scrollbarbutton-left`
* `scrollbarbutton-right`
* `scrollbarbutton-up`
* `scrollbar-small`
* `scrollbarthumb-horizontal`
* `scrollbarthumb-vertical`
* `scrollbartrack-horizontal`
* `scrollbartrack-vertical`
* `separator`
* `spinner`
* `spinner-downbutton`
* `spinner-textfield`
* `spinner-upbutton`
* `statusbar`
* `statusbarpanel`
* `tab`
* `tabpanels`
* `tab-scroll-arrow-back`
* `tab-scroll-arrow-forward`
* `textfield`
* `textfield-multiline`
* `toolbar`
* `toolbarbutton-dropdown`
* `toolbox`
* `tooltip`
* `treeheadercell`
* `treeheadersortarrow`
* `treeitem`
* `treetwisty`
* `treetwistyopen`
* `treeview`
* `window`
### `background-image`

#### グラデーション

* `-moz-linear-gradient`
非推奨
* `-moz-radial-gradient`
非推奨

#### 要素

* `-moz-element`

#### サブ画像

* `-moz-image-rect()`
### `border-color`

* `-moz-use-text-color`
非推奨
 (Firefox バグ 1306214 で削除)、代わりに `currentcolor` を使用してください。
### `border-style` と `outline-style`

* `-moz-bg-inset`
非推奨
* `-moz-bg-outset`
非推奨
* `-moz-bg-solid`
非推奨
### `<color>` キーワード

* `-moz-activehyperlinktext`
* `-moz-hyperlinktext`
* `-moz-visitedhyperlinktext`
* `-moz-buttondefault`
* `-moz-buttonhoverface`
* `-moz-buttonhovertext`
* `-moz-default-background-color`
* `-moz-default-color`
* `-moz-cellhighlight`
* `-moz-cellhighlighttext`
* `-moz-field`
* `-moz-fieldtext`
* `-moz-dialog`
* `-moz-dialogtext`
* `-moz-dragtargetzone`
* `-moz-mac-accentdarkestshadow`
* `-moz-mac-accentdarkshadow`
* `-moz-mac-accentface`
* `-moz-mac-accentlightesthighlight`
* `-moz-mac-accentlightshadow`
* `-moz-mac-accentregularhighlight`
* `-moz-mac-accentregularshadow`
* `-moz-mac-chrome-active`
* `-moz-mac-chrome-inactive`
* `-moz-mac-focusring`
* `-moz-mac-menuselect`
* `-moz-mac-menushadow`
* `-moz-mac-menutextselect`
* `-moz-menuhover`
* `-moz-menuhovertext`
* `-moz-win-communicationstext`
* `-moz-win-mediatext`
* `-moz-nativehyperlinktext`
### `display`

* `-moz-box`
非推奨
* `-moz-inline-block`
非推奨
* `-moz-inline-box`
非推奨
* `-moz-inline-grid`
非推奨
* `-moz-inline-stack`
非推奨
* `-moz-inline-table`
非推奨
* `-moz-grid`
非推奨
* `-moz-grid-group`
非推奨
* `-moz-grid-line`
非推奨
* `-moz-groupbox`
非推奨
* `-moz-deck`
非推奨
* `-moz-popup`
非推奨
* `-moz-stack`
非推奨
* `-moz-marker`
非推奨
### `empty-cells`

* `-moz-show-background` (後方互換モードでは既定値)
### `font`

* `-moz-button`
* `-moz-info`
* `-moz-desktop`
* `-moz-dialog` (色も)
* `-moz-document`
* `-moz-workspace`
* `-moz-window`
* `-moz-list`
* `-moz-pull-down-menu`
* `-moz-field` (色も)
### `font-family`

* `-moz-fixed`
### `image-rendering`

* `-moz-crisp-edges`
### `<length>`

* `-moz-calc()` (en-US)
### `list-style-type`

* `-moz-arabic-indic`
* `-moz-bengali`
* `-moz-cjk-earthly-branch`
* `-moz-cjk-heavenly-stem`
* `-moz-devanagari`
* `-moz-ethiopic-halehame`
* `-moz-ethiopic-halehame-am`
* `-moz-ethiopic-halehame-ti-er`
* `-moz-ethiopic-halehame-ti-et`
* `-moz-ethiopic-numeric`
* `-moz-gujarati`
* `-moz-gurmukhi`
* `-moz-hangul`
* `-moz-hangul-consonant`
* `-moz-japanese-formal`
* `-moz-japanese-informal`
* `-moz-kannada`
* `-moz-khmer`
* `-moz-lao`
* `-moz-malayalam`
* `-moz-myanmar`
* `-moz-oriya`
* `-moz-persian`
* `-moz-simp-chinese-formal`
* `-moz-simp-chinese-informal`
* `-moz-tamil`
* `-moz-telugu`
* `-moz-thai`
* `-moz-trad-chinese-formal`
* `-moz-trad-chinese-informal`
* `-moz-urdu`
### `overflow`

* `-moz-scrollbars-none` (en-US)
非推奨
* `-moz-scrollbars-horizontal` (en-US)
非推奨
* `-moz-scrollbars-vertical` (en-US)
非推奨
* `-moz-hidden-unscrollable` (en-US)
### `text-align`

* `-moz-center`
* `-moz-left`
* `-moz-right`
### `text-decoration`

* `-moz-anchor-decoration`
### `-moz-user-select` (en-US)

* `-moz-all`
* `-moz-none`
### `width`, `min-width`, `max-width`

* `-moz-min-content`
* `-moz-fit-content`
* `-moz-max-content`
* `-moz-available`
擬似要素と擬似クラス
----------

### A – D

* `::-moz-anonymous-block`
* `::-moz-anonymous-positioned-block`
* `:-moz-any` (en-US)
* `:-moz-any-link` (en-US) [`:link` と `:visited` に一致する]
* `:-moz-broken`
* `::-moz-canvas`
* `::-moz-color-swatch`
* `::-moz-cell-content`
* `:-moz-drag-over`
### F – I

* `:-moz-first-node`
* `::-moz-focus-inner` (en-US)
* `::-moz-focus-outer`
* `:-moz-focusring`
* `:-moz-full-screen` (en-US)
* `:-moz-full-screen-ancestor`
* `:-moz-handler-blocked` (en-US)
* `:-moz-handler-crashed` (en-US)
* `:-moz-handler-disabled` (en-US)
* `::-moz-inline-table`
### L

* `:-moz-last-node`
* `:-moz-list-bullet`
* `:-moz-list-number` (en-US)
* `:-moz-loading`
* `:-moz-locale-dir(ltr)`
* `:-moz-locale-dir(rtl)`
* `:-moz-lwtheme`
* `:-moz-lwtheme-brighttext`
* `:-moz-lwtheme-darktext`
### N – R

* `:-moz-native-anonymous`
* `:-moz-only-whitespace`
* `::-moz-page` (en-US)
* `::-moz-page-sequence` (en-US)
* `::-moz-pagebreak`
* `::-moz-pagecontent`
* `:-moz-placeholder`
非推奨
* `::-moz-placeholder`
非推奨
* `::-moz-progress-bar`
* `::-moz-range-progress` (en-US)
* `::-moz-range-thumb` (en-US)
* `::-moz-range-track`
* `:-moz-read-only`
* `:-moz-read-write`
### S

* `::-moz-scrolled-canvas`
* `::-moz-scrolled-content`
* `::-moz-scrolled-page-sequence` (en-US)
* `::-moz-selection`
非推奨
* `:-moz-submit-invalid`
* `:-moz-suppressed` (en-US)
* `::-moz-svg-foreign-content`
### T

* `::-moz-table`
* `::-moz-table-cell`
* `::-moz-table-column`
* `::-moz-table-column-group`
* `::-moz-table-outer`
* `::-moz-table-row`
* `::-moz-table-row-group`
* `:-moz-tree-cell`
* `:-moz-tree-cell-text`
* `:-moz-tree-cell-text(hover)`
* `:-moz-tree-checkbox`
* `:-moz-tree-column`
* `:-moz-tree-drop-feedback`
* `:-moz-tree-image`
* `:-moz-tree-indentation`
* `:-moz-tree-line`
* `:-moz-tree-progressmeter`
* `:-moz-tree-row`
* `:-moz-tree-row(hover)`
* `:-moz-tree-separator`
* `:-moz-tree-twisty`
### U – X

* `:-moz-ui-invalid` (en-US)
* `:-moz-ui-valid`
* `:-moz-user-disabled` (en-US)
* `::-moz-viewport`
* `::-moz-viewport-scroll`
* `:-moz-window-inactive` (en-US)
* `::-moz-xul-anonymous-block`
アットルール
------

* `@-moz-document` (en-US)
メディア特性
------

* `-moz-device-pixel-ratio`
* `-moz-os-version`
* `-moz-touch-enabled`
* `-moz-windows-glass`
その他
---

* `-moz-alt-content` (see Firefox バグ 11011)
関連情報
----

* Chrome 専用 CSS リファレンス
* CSS の Microsoft 拡張
* CSS の WebKit 拡張


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

view-timeline-name
==================

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

**`view-timeline-name`** は CSS のプロパティで、スクロール可能な要素（*スクローラー*）内の要素（主体要素として呼ばれる）の可視性の変化に基づいて進行する名前付きビュー進行タイムラインの名前を定義するために使用します。 `view-timeline` は主体要素に設定します。

 既定では、主体要素がスクローラーの一方の端に初めて表示されるとタイムラインは 0% になり、反対側の端に達すると 100% になります。
 この名前は `animation-timeline` 宣言で参照され、タイムラインの進行に合わせてアニメーションする要素を示します。これは主体要素である場合もありますが、そうである必要はありません。主体がスクロール領域を移動する際に異なる要素をアニメーションさせることができます。

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

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

構文
--

```css
view-timeline-name: none;
view-timeline-name: --custom_name_for_timeline;
```

### 値

`view-timeline-name` に指定できる値は次の通りです。

`none`

タイムラインには名前がありません。

`<dashed-ident>`

ビュー進行タイムラインの名前を定義する任意のカスタム識別子で、`animation-timeline` プロパティで参照することができます。

**メモ:** `<dashed-ident>` の値は `--` から始める必要があり、これによって CSS の標準キーワードとの名前の衝突を避けることができます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | `none` または識別子の順序付きリスト |
| アニメーションの種類 | アニメーション不可 |

形式文法
----
```

view-timeline-name =
  [ none | <dashed-ident> ]#

```

例
-

### 名前付きビュー進行タイムラインの作成

`--subjectReveal` という名前のビュー進行タイムラインは、 `view-timeline-name` プロパティを使用して、`class` が `animation` の主体要素に定義します。
 これを同じ要素のタイムラインとして設定するには `animation-timeline: --subjectReveal;` を使用します。その結果、主体要素は文書がスクロールされるにつれて上方向に移動するアニメーションが表示されます。

#### HTML

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

```html
<div class="content">
  <h1>Content</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Risus quis varius quam
    quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat
    interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat
    vivamus at augue.
  </p>

  <p>
    Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate
    dignissim. Tortor aliquam nulla facilisi cras. A erat nam at lectus urna
    duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus.
    Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
    arcu vitae elementum curabitur vitae nunc sed velit.
  </p>

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

  <p>
    Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
    cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
    dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non
    tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam
    vel quam elementum. Nibh praesent tristique magna sit amet purus gravida
    quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat
    imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi
    scelerisque. Netus et malesuada fames ac.
  </p>
</div>
```

#### CSS

`subject` 要素とそれを含む `content` 要素には最小限のスタイルを設定し、テキストコンテンツには基本的なフォントを設定します。

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

.content {
  width: 75%;
  max-width: 800px;
  margin: 0 auto;
}

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

h1 {
  font-size: 3rem;
}

p {
  font-size: 1.5rem;
  line-height: 1.5;
}
```

`subject` クラスのついた `<div>` には、`animation` クラスも指定されています。ここで `view-timeline-name` を設定し、名前付きビュー進行タイムラインを定義しています。また、同じ値で `animation-timeline` の名前を指定して、ビュー進行タイムラインが進むにつれてアニメーションする要素であることを宣言します。

最後に、要素の透過率と変倍をアニメーションで指定し、スクロール移動されるたびにフェードインしたり変倍させたりします。

```css
.animation {
  view-timeline-name: --subjectReveal;
  animation-timeline: --subjectReveal;

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

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

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

#### 結果

スクロールすると、主体要素がアニメーションします。

仕様書
---

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

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

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

関連情報
----

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


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

min()
=====

**`min()`** は CSS 関数で、 CSS プロパティの値としてカンマで区切られた式のリストから最小の (最も負である) 値を設定できます。 `min()` 関数は `<length>`、`<frequency>`,、`<angle>`、`<time>`、`<percentage>`、`<number>`、`<integer>` が利用できるところならばどこでも使用することができます。

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

上の例では、幅は最大 80px ですが、ビューポートの幅が 800px 未満または em の幅が 20px 未満の場合は狭くなります。言い換えれば、最大幅は 80px です。 `min()` の値はプロパティが取りうる*最大の*値を提供するものとして考えてください。

構文
--

`min()` 関数は、引数としてカンマで区切った 1 つ以上の式を取り、もっとも小さい (最も負である) 式の値の結果を値として使用します。

式は (`<length>` などの) 有効な引数の型として評価される、 (算術演算子を使用した) 数式、リテラル値、 `attr()` などのその他の式にすることができます。

必要に応じて、式の各値に異なる単位を使用することができます。必要に応じて、計算順序を決めるために括弧を使用することもできます。

### メモ

* 表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも `auto` が指定されていたかのように扱われる*可能性があります*。
* `max()` や他の `min()` 関数を式の値として入れ子にすることが認められています。式は完全な数式なので、 `calc()` 関数自体を使わずに直接加算、減算、乗算、除算を使うことができます。
* 式は、標準的な演算子の優先順位規則を使用して、加算 ( + )、減算 ( - )、乗算 ( \* )、除算 ( / ) の各演算子を組み合わせた値にすることができます。オペランドの + と - の両側には必ず空白を入れてください。式の中のオペランドは、任意の `<length>` 構文値を使用できます。
* `min()` と `max()` の値を組み合わせたり、 `min()` を `clamp()` や `calc()` 関数の中で使用したりすることができます (そしてよく必要になります)。
* 複数の制約を適用する場合は、3 つ以上の引数を与えることができます。
### 形式文法
```

<min()> =
  min( <calc-sum># )

<calc-sum> =
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*

<calc-product> =
  <calc-value> [ [ '*' | '/' ] <calc-value> ]\*

<calc-value> =
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )

<calc-keyword> =
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

```

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

`min()` を使用して最大フォントサイズを設定する場合、読めるようにするためにフォントが少なくとも 200% まで拡大できるようにしてください (ズーム機能などの支援技術なしで)。

* MDN WCAG を理解する、ガイドライン 1.4 の解説
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
例
-

### ラベルと入力欄のために最大値を設定する

CSS 関数のもう一つの使用例は、レスポンシブなフォームコントロールに最大サイズを設定します。ラベルと入力欄の幅をフォームの幅の縮小に合わせて縮小できるようにします。

いくらか CSS を見てください。

```css
input,
label {
  padding: 2px;
  box-sizing: border-box;
  display: inline-block;
  width: min(40%, 400px);
  background-color: pink;
}

form {
  margin: 4px;
  border: 1px solid black;
  padding: 4px;
}
```

ここでは、フォーム自体は、マージン、境界、パディングを含めて、親の幅の 100% になります。入力欄とラベルは、フォームのパディングまでの幅の 40% または幅 400px のどちらか小さい方になるように宣言します。言い換えれば、ラベルと入力欄の幅の最大値は 400px です。最も狭くなるのはフォームの幅の 40% であり、スマートウォッチの画面では非常に小さくなります。

```html
<form>
  <label>Type something:</label>
  <input type="text" />
</form>
```

仕様書
---

| Specification |
| --- |
| CSS Values and Units Module Level 4 # calc-notation |

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

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

関連情報
----

* `calc()`
* `clamp()`
* `max()`
* CSS 値


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

shape-margin
============

**`shape-margin`** は CSS のプロパティで、`shape-outside` を使用して作成された CSS シェイプのマージンを設定します。

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

マージンで、シェイプ (**浮動要素**) の縁と周囲のコンテンツとの間隔を調整することができます。

構文
--

```css
/\* <length> 値 \*/
shape-margin: 10px;
shape-margin: 20mm;

/\* <percentage> 値 \*/
shape-margin: 60%;

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

### 値

`<length-percentage>`

シェイプのマージンを `<length>` 値または要素の包含ブロックの幅に対する `<percentage>` で設定します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | 浮動要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの幅に対する相対値 |
| 計算値 | 指定通り。ただし相対的な長さはは絶対的な長さに変換される |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

shape-margin =
  <length-percentage [0,∞]>

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

```

例
-

### 多角形にマージンを追加

#### HTML

```html
<section>
  <div class="shape"></div>
  We are not quite sure of any one thing in biology; our knowledge of geology is
  relatively very slight, and the economic laws of society are uncertain to
  every one except some individual who attempts to set them forth; but before
  the world was fashioned the square on the hypotenuse was equal to the sum of
  the squares on the other two sides of a right triangle, and it will be so
  after this world is dead; and the inhabitant of Mars, if one exists, probably
  knows its truth as we know it.
</section>
```

#### CSS

```css
section {
  max-width: 400px;
}

.shape {
  float: left;
  width: 150px;
  height: 150px;
  background-color: maroon;
  clip-path: polygon(0 0, 150px 150px, 0 150px);
  shape-outside: polygon(0 0, 150px 150px, 0 150px);
  shape-margin: 20px;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Shapes Module Level 1 # shape-margin-property |

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

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

関連情報
----

* CSS シェイプ
* CSS シェイプの概要
* `shape-outside`
* `shape-image-threshold`
* `<basic-shape>`


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

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

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

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

他の方向の境界の幅は `border-inline-width` で設定でき、これは `border-inline-start-width` および `border-inline-end-width` を設定します。

構文
--

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

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

### 値

`<'border-width'>`

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

公式定義
----

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

形式文法
----
```

border-block-width =
  <'border-top-width'>{1,2}

```

例
-

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

#### HTML

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

#### CSS

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

.exampleText {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-block-width: 5px;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

:out-of-range
=============

**`:out-of-range`** は CSS の擬似クラスで、 `<input>` 要素のうち、現在の値が `min` および `max` 属性で指定された範囲を外れているものを表します。

```css
/\* 入力範囲が設定されていて、値がその範囲外である
 <input> 要素をすべて選択 \*/
input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
}
```

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

この擬似クラスは。入力欄の現在の値が許可された範囲外にあることをユーザーに視覚的に示すのに便利です。

**メモ:** この擬似クラスは範囲制限を持つ (または設定できる) 要素にのみ適用されます。そのような制限がない場合は、要素は "in-range" にも "out-of-range" にもなりません。

構文
--
```

:out-of-range
```

例
-

### HTML

```html
<form action="" id="form1">
  <p>1 から 10の間の値が有効です。</p>
  <ul>
    <li>
      <input
 id="value1"
 name="value1"
 type="number"
 placeholder="1 to 10"
 min="1"
 max="10"
 value="12" />
      <label for="value1">あなたの値は</label>
    </li>
  </ul>
</form>
```

### CSS

```css
li {
  list-style: none;
  margin-bottom: 1em;
}

input {
  border: 1px solid black;
}

input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}

input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
  border: 2px solid red;
}

input:in-range + label::after {
  content: "範囲内です。";
}

input:out-of-range + label::after {
  content: "範囲外です！";
}
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # selector-out-of-range |
| Selectors Level 4 # out-of-range-pseudo |

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

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

関連情報
----

* `:in-range`
* フォームデータの検証


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

::target-text
=============

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

**`::target-text`** は CSS の擬似要素で、ブラウザーが scroll-to-text フラグメントに対応している場合にスクロール先のテキストを表します。これによって、節のテキストを強調表示させることができます。

```css
::target-text {
  background-color: pink;
}
```

構文
--

Error: could not find syntax for this item例
-

### scroll-to-text を強調表示

```css
::target-text {
  background-color: rebeccapurple;
  color: white;
}
```

この CSS を確認するには、 scroll-to-text demo へのリンクを辿ってください。

仕様書
---

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-target-text |

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

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

関連情報
----

* Text fragments


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

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

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

**`-webkit-text-stroke-width`** は CSS のプロパティで、テキストの線の太さを指定します。

構文
--

```css
/\* キーワード値 \*/
-webkit-text-stroke-width: thin;
-webkit-text-stroke-width: medium;
-webkit-text-stroke-width: thick;

/\* <length> 値 \*/
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-width: 0.1em;
-webkit-text-stroke-width: 1mm;
-webkit-text-stroke-width: 5pt;

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

### 値

`<line-width>`

線の太さ。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 絶対的な`長さ` |
| アニメーションの種類 | 離散値 |

形式文法
----
```

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

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

```

例
-

### 線の幅を変更

#### CSS

```css
p {
  margin: 0;
  font-size: 4em;
  -webkit-text-stroke-color: red;
}

#thin {
  -webkit-text-stroke-width: thin;
}

#medium {
  -webkit-text-stroke-width: 3px;
}

#thick {
  -webkit-text-stroke-width: 1.5mm;
}
```

#### HTML

```html
<p id="thin">Thin stroke</p>
<p id="medium">Medium stroke</p>
<p id="thick">Thick stroke</p>
```

#### 結果

仕様書
---

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

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

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-color`
* `-webkit-text-stroke`
* `-webkit-text-fill-color`


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

:-moz-loading
=============

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

**`:-moz-loading`** は CSS の擬似クラスで、 Mozilla 拡張であり、読み込みが開始されていないために表示できない要素、例えばまだ到着が開始されていない画像などに一致します。なお、読み込み*中*の画像は、この擬似クラスには一致*しません*。

**メモ:** このセレクターは主にテーマ開発者が使用するためのものです。

構文
--

```css
:-moz-loading {}
```

例
-

### 読み込み中の画像に背景を設定

```css
:-moz-loading {
  background-color: #aaa;
  background-image: url(loading-animation.gif) center no-repeat;
}
```

仕様書
---

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

関連情報
----

* `:-moz-broken`, `:-moz-suppressed` (en-US), `:-moz-user-disabled` (en-US)


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

container-type
==============

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
要素は、コンテナーサイズの問い合わせのためのクエリーコンテナーとして、 **`container-type`** という CSS プロパティを使用して確立することができます。 `container-type` は、コンテナークエリーで使用するサイズ格納方法の種類を定義するために使用します。

これはコンテナークエリーで無限ループを避けるために重要です。もしそうでなければ、コンテナークエリーの中にある CSS ルールがコンテンツサイズを変更する可能性があり、その結果、クエリーが偽に評価されて親要素のサイズが変更され、そして、コンテンツサイズが変更されてクエリーが真に戻る、といった動作になります。

コンテナーサイズは、明示的に、あるいはコンテキストによって設定されます。例えば、ブロック要素、フレックスコンテナー、グリッドコンテナーは、親の幅いっぱいに伸びます。明示的またはコンテキストによるサイズが利用できない場合、サイズ抑制のある要素は折りたたまれます。

構文
--

```css
/\* キーワード値 \*/
container-type: normal;
container-type: size;
container-type: inline-size;

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

### 値

`size`

インラインおよびブロックの両方の寸法で コンテナーサイズクエリーのためのクエリー コンテナーを確立します。
 コンテナーにレイアウト抑制、スタイル抑制、サイズ抑制を適用します。

サイズ抑制は、インライン方向とブロック方向の両方で要素に適用されます。要素のサイズは、子要素を無視して単独で計算できます。

`inline-size`

 コンテナーのインライン軸上の寸法クエリー用のクエリーコンテナーを確立します。
 要素にレイアウト、スタイル、インラインサイズ抑制を適用します。

インラインサイズ抑制が要素に適用されます。要素のインラインサイズは、子要素を無視して単独で計算されます。

`normal`

この要素はコンテナーサイズクエリーのクエリーコンテナーではありませんが、コンテナースタイルクエリーのクエリーコンテナーであることに変わりはありません。

公式定義
----

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

形式文法
----
```

container-type =
  normal       |
  size         |
  inline-size

```

例
-

### インラインサイズ抑制の確立

次の HTML 例は、画像、タイトル、テキストを持つカード部品があります。

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

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

コンテナーコンテキストを作成するには、要素に `container-type` プロパティを追加します。以下は、 `inline-size` 値を使用してコンテナーのインライン軸の格納コンテキストを作成しています。

```css
.container {
  container-type: inline-size;
  width: 300px;
  height: 120px;
}

.wide {
  width: 500px;
}
```

```
h3 {
  height: 2rem;
  margin: 0.5rem;
}

.card {
  height: 100%;
}

.content {
  background-color: wheat;
  height: 100%;
}

.container {
  margin: 1rem;
  border: 2px dashed red;
  overflow: hidden;
}
```

コンテナークエリーを `@container` アットルールで書くと、コンテナーの横幅が 400px を超える場合に、コンテナーの要素にスタイルが適用されます。

```css
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}
```

仕様書
---

| Specification |
| --- |
| CSS Containment Module Level 3 # container-type |

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

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

関連情報
----

* CSS コンテナークエリー
* `@container` アットルール
* CSS `container` 一括指定プロパティ
* CSS `container-name` プロパティ
* CSS `content-visibility` プロパティ


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

padding-left
============

**`padding-left`** は CSS のプロパティで、要素のパディング領域における左側の幅を設定します。

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

要素のパディング領域とは、コンテンツと境界との間の領域のことです。

**メモ:** `padding` プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。

構文
--

```css
/\* <length> の値 \*/
padding-left: 0.5em;
padding-left: 0;
padding-left: 2cm;

/\* <percentage> の値 \*/
padding-left: 10%;

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

`padding-left` プロパティは、以下のリストから選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。

### 値

`<length>`

パディングの寸法を固定値で表したものです。負の数であってはいけません。

`<percentage>`

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group`, `table-column` を除くすべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | なし |
| パーセント値 | 包含ブロックの幅に対する相対値 |
| 計算値 | 指定されたパーセント値または絶対的な長さ |
| アニメーションの種類 | length |

形式文法
----
```

padding-left =
  <length-percentage [0,∞]>

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

```

例
-

### 左パディングをピクセル数とパーセント値で設定

```css
.content {
  padding-left: 5%;
}
.sidebox {
  padding-left: 10px;
}
```

仕様書
---

| Specification |
| --- |
| CSS Box Model Module Level 3 # padding-physical |

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

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

関連情報
----

* CSS 基本ボックスモデル入門
* `padding-top`, `padding-right`, `padding-bottom` および `padding` 一括指定
* 対応付けられる論理的プロパティ: `padding-block-start`, `padding-block-end`, `padding-inline-start`, `padding-inline-end` および一括指定の `padding-block` と `padding-inline`


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

math-depth
==========

**`math-depth`** プロパティは、数式の各要素について、その数式の最上位コンテナーに対する *深さ* の概念を記述します。これは、 `font-size: math` が適用されたとき、要素の font-size の計算値を調整するために使用されます。

**メモ:** `font-size: math` は MathML Core のユーザーエージェントスタイルシートにおける `<math>` 要素の既定値ですので、明示的に指定する必要はありません。

構文
--

```css
/\* キーワード値 \*/
math-depth: auto-add;

/\* 相対値 \*/
math-depth: add(2);
math-depth: add(-2);

/\* 絶対値 \*/
math-depth: 4;

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

### 値

`auto-add`

継承された math-style が `compact` の場合、継承された `math-depth` に 1 を足した値を設定します。

`add(`<integer>`)`

継承された `math-depth` に指定した整数を足した値に設定します。

`<integer>`

指定された整数に設定します。

公式定義
----

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

形式文法
----
```

math-depth =
  auto-add          |
  add( <integer> )  |
  <integer>

```

例
-

### 数式の深さの指定

 以下の例では、`math-depth`プロパティを変更したときのサブ数式のフォントサイズへの影響を示しています。
 各サブ数式の数字は適用された `math-depth` と拡大率を示しています。

 最初の `<mtext>` 要素は他のサブ数式への参照として使用され、特定のスタイルは適用されていません。
 2番目と3番目のサブ数式は `math-depth` が `auto-add` に設定され、`math-style` に応じた倍率の効果が表示されます。

最後の2つのサブ数式は、 `math-depth` を特定の値に設定した場合の効果を示しています。

#### HTML

```html
<p style="font-size: 3rem; margin: 1rem 0">
  <math>
    <mtext>0</mtext>

    <!-- auto-add value has no effect when math-style is normal -->
    <mrow style="math-style: normal">
      <mrow style="math-depth: auto-add">
        <mtext>0</mtext>
      </mrow>
    </mrow>

    <!-- the inherited math-style is compact, so math-depth is set to 1 -->
    <mrow style="math-depth: auto-add">
      <mtext>1</mtext>
    </mrow>

    <mrow style="math-depth: add(2)">
      <mtext>2</mtext>
      <mrow style="math-depth: add(-1)">
        <mtext>1</mtext>
      </mrow>
      <mrow style="math-depth: 0">
        <mtext>0</mtext>
      </mrow>
    </mrow>
  </math>
</p>
```

#### 結果

仕様書
---

| Specification |
| --- |
| MathML Core # the-math-script-level-property |

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

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

関連情報
----

* `font-size`
* `math-style`


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

opacity
=======

**`opacity`** は CSS のプロパティで、要素の不透明度を設定します。不透明度は要素の裏にあるコンテンツが隠れる度合いであり、透明度の逆です。

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

構文
--

```css
opacity: 0.9;
opacity: 90%;

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

### 値

`<alpha-value>`

`<number>` を `0.0` 以上 `1.0` 以下で、また `<percentage>` を `0%` 以上 `100%` 以下で、チャネルの不透明度（つまり、アルファチャネルの値）を表します。範囲外の数値も有効ですが、近い方の限界値に丸められます。

| 値 | 意味 |
| --- | --- |
| `0` | 要素は完全に透明です（つまり、不可視です）。 |
| `0` と `1` の中間にある何れかの `<number>` | 要素は半透明です（つまり、要素の背後のコンテンツが見えます）。 |
| `1` （既定値） | 要素は完全に不透明です（中身が詰まって見えます）。 |

解説
--

`opacity` の値は子要素に継承されませんが、要素のコンテンツを含む全体に適用されます。すなわち、ある要素とその子の不透明度が互いに異なっていたとしても、その要素の背景に対してはすべて同じ不透明度になります。

このプロパティを `1` 以外の値で用いると、その要素は新しい重ね合わせコンテキストを作ります。

背景の不透明度のみを変更したい場合は、`background` プロパティでアルファチャネルを使用できる`色の値`を使用してください。

```css
background: rgba(0, 0, 0, 0.4);
```

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

テキストの opacity を調整した場合、テキストの色と、テキストが配置されている背景の色とのコントラスト比が、弱視の人がページの内容を読むことができる程度に十分高くなるよう確認することが重要です。

色のコントラスト比は、透明度を調整したテキストと背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (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
公式定義
----

|  |  |
| --- | --- |
| 初期値 | `1` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | map to the range `[0,1]` |
| 計算値 | 指定値の `number` が [0.0, 1.0] の範囲内にクリップされたものと同じ |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

opacity =
  <alpha-value>

<alpha-value> =
  <number>      |
  <percentage>

```

例
-

### 基本的な例

次の例では、`opacity` プロパティで要素とその内容全体の不透明度を変更することで、テキストを非常に読みにくくしています。

#### HTML

```html
<div class="light">何とか見える程度でしょう。</div>
<div class="medium">簡単に見えるでしょう。</div>
<div class="heavy">とても見やすいでしょう。</div>
```

#### CSS

```css
div {
  background-color: yellow;
  font-weight: bold;
  font-size: 130%;
}
.light {
  opacity: 0.2; /\* Barely see the text over the background \*/
}
.medium {
  opacity: 0.5; /\* See the text more clearly over the background \*/
}
.heavy {
  opacity: 0.9; /\* See the text very clearly over the background \*/
}
```

#### 結果

### ホバー時の透明度の設定

次の例では、ホバー時に不透明度を変更し、親要素の縞模様の背景画像が透けて見えるようにしています。

#### HTML

```html
<div class="wrapper">
  <img
 src="//interactive-examples.mdn.mozilla.net/media/dino.svg"
 alt="MDN Dino"
 width="128"
 height="146"
 class="opacity" />
</div>
```

#### CSS

```css
img.opacity {
  opacity: 1;
}

img.opacity:hover {
  opacity: 0.5;
}

.wrapper {
  width: 200px;
  height: 160px;
  background-color: #f03cc3;
  background-image: linear-gradient(
    90deg,
    transparent 50%,
    rgba(255, 255, 255, 0.5) 50%
  );
  background-size: 20px 20px;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4 # transparency |

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

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


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

perspective-origin
==================

**`perspective-origin`** は CSS のプロパティで、閲覧者の視点の位置を決めます。これは `perspective` プロパティによって*消点*として使われます。

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

**`perspective-origin`** および `perspective` の各プロパティは、三次元空間で座標変換される子の親に設定するものであり、座標変換される要素に設定される `perspective()` 変換関数とは異なります。

構文
--

```css
/\* 1 値構文 \*/
perspective-origin: x-position;

/\* 2 値構文 \*/
perspective-origin: x-position y-position;

/\* x-position と y-position がキーワードである場合は、
 以下の構文も有効 \*/
perspective-origin: y-position x-position;

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

### 値

*x-position*

*消失点*の横座標上の位置を示します。次のいずれかの値です。

* `<length-percentage>` は、絶対的な length 値、または要素の幅に対する相対値で位置を示します。負の数も使えます。
* `left` キーワードは、length 値 `0` を示すショートカットです。
* `center` キーワードは、パーセント値 `50%` を示すショートカットです。
* `right` キーワードは、パーセント値 `100%` を示すショートカットです。

*y-position*

*消失点*の縦座標上の位置を示します。次のいずれかの値です。

* `<length-percentage>` は、絶対的な length 値、または要素の高さに対する相対値で位置を示します。負の数も使えます。
* `top` キーワードは、 length 値 `0` を示すショートカットです。
* `center` キーワードは、パーセント値 `50%` を示すショートカットです。
* `bottom` キーワードは、パーセント値 `100%` を示すキーワードです。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `50% 50%` |
| 適用対象 | 座標変換可能要素 |
| 継承 | なし |
| パーセント値 | 囲みボックスの寸法に対する相対値 |
| 計算値 | `length` の場合は絶対的な値、それ以外の場合はパーセント値 |
| アニメーションの種類 | 長さ、パーセント値、 calc の単純なリスト |

形式文法
----
```

perspective-origin =
  <position>

<position> =
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

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

```

例
-

### 視点の原点の変更

`perspective-origin` の変更方法を示す例は、 CSS 座標変換の使用 > 視点の変更にあります。

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 2 # perspective-origin-property |

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

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

関連情報
----

* CSS 座標変換の使用
* `transform-style`
* `<transform-function>`
* `perspective`
* `transform: perspective()` 関数


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

使用値
===

**使用値** (used value) は CSS プロパティにおいて、計算値で行われたすべての計算が実行された後の値です。

ユーザーエージェントが計算を終了した後、すべての CSS プロパティは使用値を持ちます。長さ (`width` や `line-height` など) の使用値はピクセル数です。一括指定プロパティ (`background` など) の使用値は、各成分 (`background-color` や `background-size` など) のプロパティに、 `position` や `float` が加味されたものと一致します。

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

例
-

この例は、3 つの要素の `width` の使用値を計算および表示します (大きさを変更すると更新されます)。

### HTML

```html
<div id="no-width">
  <p>明示的な幅の指定なし</p>
  <p class="show-used-width">..</p>

  <div id="width-50">
    <p>明示的な幅: 50%</p>
    <p class="show-used-width">..</p>

    <div id="width-inherit">
      <p>明示的な幅: inherit</p>
      <p class="show-used-width">..</p>
    </div>
  </div>
</div>
```

### CSS

```css
#no-width {
  width: auto;
}

#width-50 {
  width: 50%;
}

#width-inherit {
  width: inherit;
}

/\* 結果を見やすくする \*/
div {
  border: 1px solid red;
  padding: 8px;
}
```

### JavaScript

```js
function updateUsedWidth(id) {
  const div = document.getElementById(id);
  const par = div.querySelector(".show-used-width");
  const wid = window.getComputedStyle(div)["width"];
  par.textContent = `Used width: ${wid}.`;
}

function updateAllUsedWidths() {
  updateUsedWidth("no-width");
  updateUsedWidth("width-50");
  updateUsedWidth("width-inherit");
}

updateAllUsedWidths();
window.addEventListener("resize", updateAllUsedWidths);
```

### 結果

計算値との違い
-------

CSS 2.0 では、プロパティの計算の最後のステップとして*計算値*のみを定義していました。そして CSS 2.1 では、使用値を別な定義として導入しました。そして、計算値がパーセント値である親の幅や高さを、要素が明確に継承できるようになりました。レイアウトに依存しない CSS プロパティ (`display`, `font-size`, `line-height` など) に関しては、計算値と使用値は同じです。以下のものは CSS 2.1 のプロパティのうち、レイアウトに依存し、計算値と使用値が異なるものです。 (CSS 2.1 Changes: Specified, computed, and actual values より取得)。

* `background-position`
* `bottom`, `left`, `right`, `top`
* `height`, `width`
* `margin-bottom`, `margin-left`, `margin-right`, `margin-top`
* `min-height`, `min-width`
* `padding-bottom`, `padding-left`, `padding-right`, `padding-top`
* `text-indent`
仕様書
---

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

関連情報
----

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


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

<time-percentage>
=================

**`<time-percentage>`** は CSS のデータ型で、 `<time>` または `<percentage>` が取りうる値を表します。

構文
--

この型に利用できる個々の構文の詳細は、 `<time>` および `<percentage>` の文書を参照してください。

例
-

### calc() での使用

許可されている型として `<time-percentage>` が指定されているところでは、これはパーセント値が時間として解決されるので、 `calc()` の式で利用することができます。

### 有効なパーセント値
```

50%
+50%        + 記号は任意
-50%        負号はパーセント値を受け入れるすべてのプロパティで有効とは限らない
```

### 無効なパーセント値
```

50 %        数値とパーセント記号の間に空白は許可されない
```

### 有効な時間
```

12s         正の整数
-456ms      負の整数
4.3ms       非整数
14mS        単位には大文字・小文字の区別がないが、大文字は推奨されない。
+0s         先頭に + がついたゼロと単位
-0ms        先頭に - がついたゼロと単位
```

### 無効な時間
```

0           単位のない <length> は有効だが、 <time> では無効。
12.0        これは単位がないので <number> であって <time> ではない。
7 ms        数値と単位の間に空白は許可されない。
```

仕様書
---

| Specification |
| --- |
| CSS Values and Units Module Level 4 # mixed-percentages |

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

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

関連情報
----

* `<percentage>`
* `<time>`
* CSS 値と単位


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

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

**`overscroll-behavior-inline`** は CSS のプロパティで、スクロール領域のインライン方向の境界に達したときのブラウザーの挙動を設定します。

全体的な説明は `overscroll-behavior` を参照してください。

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

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

構文
--

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

### 値

`auto`

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

`contain`

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

`none`

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

公式定義
----

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

形式文法
----
```

overscroll-behavior-inline =
  contain  |
  none     |
  auto

```

例
-

### インライン方向のオーバースクロールの抑止

このデモでは、一方がもう一方の中にある二つのブロックレベルボックスがあります。外側のボックスは広い `width` を持っているので、ページは水平にスクロールします。内側のボックスは width (と `height`) が小さく、ビューポート内にきちんと収まりますが、内容は広い幅を持ち、水平にスクロールします。

既定では、内側のボックスがスクロールして境界に達すると、ページ全体がスクロールし始めますが、これはおそらく望ましくない動きです。インライン方向でこれが発生することを防ぐために、内側のボックスに `overscroll-behavior-inline: contain` を設定しました。

#### HTML

```html
<main>
  <div>
    <div>
      <p>
        <code>overscroll-behavior-inline</code> has been used to make it so that
        when the scroll boundaries of the yellow inner box are reached, the
        whole page does not begin to scroll.
      </p>
    </div>
  </div>
</main>
```

#### CSS

```css
main {
  height: 400px;
  width: 3000px;
  background-color: white;
  background-image: repeating-linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 19px,
    rgba(0, 0, 0, 0.5) 20px
  );
}

main > div {
  height: 300px;
  width: 400px;
  overflow: auto;
  position: relative;
  top: 50px;
  left: 50px;
  overscroll-behavior-inline: contain;
}

div > div {
  height: 100%;
  width: 1500px;
  background-color: yellow;
  background-image: repeating-linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 19px,
    rgba(0, 0, 0, 0.5) 20px
  );
}

p {
  padding: 10px;
  background-color: rgba(255, 0, 0, 0.5);
  margin: 0;
  width: 360px;
  position: relative;
  top: 10px;
  left: 10px;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

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

**警告:** このプロパティは `break-before` プロパティによって置き換えられました。

**`page-break-before`** CSS プロパティは、現在の要素の*前で*改ページが行われるように調整します。

このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の `<div>` には適用されません。

```css
/\* キーワード値 \*/
page-break-before: auto;
page-break-before: always;
page-break-before: avoid;
page-break-before: left;
page-break-before: right;
page-break-before: recto;
page-break-before: verso;

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

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

構文
--

### 値

`auto`

初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。

`always`

要素の前で必ず改ページが行われるように強制します。

`avoid`

要素の前で改ページされないようにします。

`left`

要素の前における改ページを強制し、次のページが左ページとして整形されるようにします。

`right`

要素の前における改ページを強制し、次のページが右ページとして整形されるようにします。

`recto`
Experimental

左から右に読むページにおいて `right` と同じ動作をします。右から左に読むページであれば `left` と同じ働きをします。

`verso`
Experimental

左から右に読むページにおいて `left` と同じ動作をします。右から左に読むページであれば `right` と同じ働きをします。

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

`page-break-before` プロパティは古いプロパティとなり、 `break-before` によって置き換えられました。

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

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | ルート要素の通常フロー内におけるブロックレベル要素。ユーザーエージェントは他の要素に `table-row` 要素のように適用することがあります。 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

page-break-before =
  auto     |
  always   |
  avoid    |
  left     |
  right    |
  inherit

```

例
-

### ある要素の前で改ページを防ぐ

```css
/\* div の前で改ページされないようにします \*/
div.note {
  page-break-before: avoid;
}
```

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # page |
| CSS Paged Media Module Level 3 # page-break-before |

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

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-inside`
* `orphans`, `widows`


::-webkit-slider-runnable-track - CSS: カスケーディングスタイルシート

::-webkit-slider-runnable-track
===============================

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

**`::-webkit-slider-runnable-track`** は CSS の擬似要素で <input type="range"> の「トラック」 (インジケータがスライドする溝) を表します。

構文
--

```css
::-webkit-slider-runnable-track {}
```

仕様書
---

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

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

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

関連情報
----

* `::-webkit-slider-thumb`
* 他のブラウザーで使われている類似の擬似要素:
    + `::-ms-track`
    + `::-moz-range-track`
* CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS
* QuirksMode: Styling and scripting sliders


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

text-overflow
=============

**`text-overflow`** は CSS のプロパティで、非表示のあふれた内容をどのようにユーザーに知らせるのかを設定します。切り取られるか、省略記号 ('`…`') を表示するか、独自の文字列を表示するかです。

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

`text-overflow` プロパティは、あふれることを強制するものではありません。テキストをコンテナーからあふれさせるには、次の例のように、他の CSS プロパティである `overflow` や `white-space` を設定する必要があります。

```css
overflow: hidden;
white-space: nowrap;
```

`text-overflow` プロパティは、*インライン*の進行方向にブロックコンテナー要素をはみ出す内容にのみ作用します (例えば、ボックスの下をあふれるテキストには作用しません)。

構文
--

`text-overflow` プロパティは、1 つまたは 2 つの値を使用して指定することができます。1 つの値が与えられた場合は、行末 (左書きの場合は右、右書きの場合は左) をあふれた動作を指定します。2 つの値が指定された場合は、最初の値が行の左端、2 番目の値が行の右端のあふれの動作を指定します。

```css
text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

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

* キーワード値 `clip`, `ellipsis`, `fade` のうちの一つ
* フェードの長さを制御するための `fade()` 関数に `<length>` または `<percentage>` が渡されたもの
* `<string>`
### 値

`clip`

このプロパティの既定値です。このキーワード値はコンテンツ領域の末端でテキストを切り取るので、文字の途中で切り取る可能性があります。文字と文字の間で切り取るには、対象のブラウザーが `text-overflow` の空文字列に対応していれば、 `text-overflow: '';` を指定することができます。

`ellipsis`

このキーワード値は、切り取られたテキストを表現するために省略記号 (`'…'`, `U+2026 HORIZONTAL ELLIPSIS`) を表示します。省略記号はコンテンツ領域内に表示され、表示テキストのサイズを更に狭めます。省略記号を表示する場所がなければ、切り取られます。

`<string>`
Experimental

クリップされたテキストを表すために使われる `<string>` です。この文字列はコンテンツ領域内に表示され、表示テキストのサイズをさらに狭めます。この文字列自身を表示する場所がなければ、切り取られます。

`fade`
Experimental

このキーワードはあふれたインラインコンテンツを切り取り、行ボックスの端付近にフェードアウト効果を適用して、端が完全に透明になるようにします。

`fade( <length> | <percentage> )`
Experimental

このキーワードはあふれたインラインコンテンツを切り取り、行ボックスの端付近にフェードアウト効果を適用して、端が完全に透明になるようにします。

引数はフェード効果が適用される範囲を指定します。 `<percentage>` は行ボックスの幅に対する割合になります。 `0` よりも小さい値は `0` に丸められます。行ボックスの幅よりも大きな値は、行ボックスの幅に丸められます。

公式定義
----

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

形式文法
----
```

text-overflow =
  clip      |
  ellipsis

```

例
-

### 値 1 つの構文

この例は、様々な `text-overflow` の値が段落に適用された例を、左書きと右書きのテキストで示します。

#### HTML

```html
<div class="ltr">
  <h2>Left to right text</h2>
  <pre>clip</pre>
  <p class="overflow-clip">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>ellipsis</pre>
  <p class="overflow-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>" [..]"</pre>
  <p class="overflow-string">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

<div class="rtl">
  <h2>Right to left text</h2>
  <pre>clip</pre>
  <p class="overflow-clip">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>ellipsis</pre>
  <p class="overflow-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>" [..]"</pre>
  <p class="overflow-string">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>
```

#### CSS

```css
p {
  width: 200px;
  border: 1px solid;
  padding: 2px 5px;

  /\* Both of the following are required for text-overflow \*/
  white-space: nowrap;
  overflow: hidden;
}

.overflow-clip {
  text-overflow: clip;
}

.overflow-ellipsis {
  text-overflow: ellipsis;
}

.overflow-string {
  text-overflow: " [..]";
}

body {
  display: flex;
  justify-content: space-around;
}

.ltr > p {
  direction: ltr;
}

.rtl > p {
  direction: rtl;
}
```

#### 結果

### 値 2 つの構文

 この例は `text-overflow` の値 2 つの構文を表し、テキストの先頭と末尾の様々なあふれの動作を表しています。
 効果を見るには、スクロールをして行頭を隠すようにする必要があります。

#### HTML

```html
<pre>clip clip</pre>
<p class="overflow-clip-clip">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre>clip ellipsis</pre>
<p class="overflow-clip-ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre>ellipsis ellipsis</pre>
<p class="overflow-ellipsis-ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre>ellipsis " [..]"</pre>
<p class="overflow-ellipsis-string">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
```

#### CSS

```css
p {
  width: 200px;
  border: 1px solid;
  padding: 2px 5px;

  /\* 以下のどちらも text-overflow に必要です \*/
  white-space: nowrap;
  overflow: scroll;
}

.overflow-clip-clip {
  text-overflow: clip clip;
}

.overflow-clip-ellipsis {
  text-overflow: clip ellipsis;
}

.overflow-ellipsis-ellipsis {
  text-overflow: ellipsis ellipsis;
}

.overflow-ellipsis-string {
  text-overflow: ellipsis " [..]";
}
```

#### JavaScript

```js
// それぞれの段落をスクロールされ、行頭が隠れるようにします
const paras = document.querySelectorAll("p");

for (let para of paras) {
  para.scroll(100, 0);
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Overflow Module Level 3 # text-overflow |

以前の版のこのインターフェイスは *勧告候補* に達していました。いくつかの "at-risk" の記載のなかった機能を取り除く必要があったため、この仕様は *草案* レベルに下されたため、勧告候補の状態ではないこのプロパティが、接頭辞なしでブラウザーに実装されました。

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

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

関連情報
----

* 関連 CSS プロパティ: `overflow`, `white-space`
* 単語の改行を制御する CSS プロパティ: `overflow-wrap`, `word-break`


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

transition-timing-function
==========================

**`transition-timing-function`** は CSS のプロパティで、トランジション効果の影響を受ける CSS プロパティにおいて、中間状態の値を算出する方法を設定するために使用されます。

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

このプロパティは、簡単に言えば加速曲線を定義するもので、それによりトランジション実行中の値の変更速度を操作することができます。

この加速曲線は、トランジションが行われるプロパティごとに 1 つの `<easing-function>` を用いて定義されます。

複数のタイミング関数を指定することができます。それぞれのタイミング関数は、 `transition-property` で指定されたように対応するプロパティに適用され、 `transition-property` のリストとして振るまいます。指定されたタイミング関数が `transition-property` のリストより少ない場合は、ユーザーエージェントはリスト内の値をそれぞれのトランジションプロパティのうちの値になるまで繰り返してどの値が使用されるかを計算します。関数の数が多い場合は、リストを適切な長さに切り詰めます。どちらの場合も、 CSS の宣言として妥当です。

構文
--

```css
/\* キーワード値 \*/
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

/\* 関数値 \*/
transition-timing-function: steps(4, jump-end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);

/\* 段階式の関数のキーワード \*/
transition-timing-function: steps(4, jump-start);
transition-timing-function: steps(10, jump-end);
transition-timing-function: steps(20, jump-none);
transition-timing-function: steps(5, jump-both);
transition-timing-function: steps(6, start);
transition-timing-function: steps(8, end);

/\* 複数のタイミング関数 \*/
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);

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

### 値

`<easing-function>`

各々の `<easing-function>` は `transition-property` で指定された、トランジションを行うプロパティに対応するイージング関数を表します。

段階のないキーワード値 (ease、linear、ease-in-out、など) はそれぞれ 4 つの固定点による三次ベジェ曲線を表しており、 cubic-bezier() 関数の値は定義済みの値以外を使用することができます。段階のあるタイミング関数は、入力の時間を時間的に等しい間隔で指定された数に分割します。これは、ステップ数とステップ位置によって定義されます。

`ease`

`cubic-bezier(0.25, 0.1, 0.25, 1.0)` と同等であり、既定値です。トランジションの半ばまで変化量が増加し、最後にはまた遅くなります。

`linear`

`cubic-bezier(0.0, 0.0, 1.0, 1.0)` と同等であり、トランジションは均等の速度になります。

`ease-in`

`cubic-bezier(0.42, 0, 1.0, 1.0)` と同等であり、最初は遅く、トランジションの速度は完了まで増加し続けます。

`ease-out`

`cubic-bezier(0, 0, 0.58, 1.0)` と同等であり、トランジションは速い速度で始まり、速度を次第に遅くしていきます。

`ease-in-out`

`cubic-bezier(0.42, 0, 0.58, 1.0)` と同等であり、トランジションをゆっくり開始し、速度を上げた後、再び速度を遅くします。

`cubic-bezier(p1, p2, p3, p4)`

作者が定義する三次ベジェ曲線です。p1 と p3 の値は 0 から 1 の範囲でなければなりません。

`steps( n, <jumpterm>)`

トランジションは *n* 個の停止点を辿って表示され、それぞれの停止点の表示時間は均等な長さになります。例えば、*n* が 5 の場合、5 つのステップがあることになります。一時的に停止する点が 0%, 20%, 40%, 60%, 80% であるのか、20%, 40%, 60%, 80%, 100% であるのか、トランジションに沿って 0% と 100% の中間で 5 回停止するのか、それとも 0% と 100% の位置を含めて 5 回 (0%, 25%, 50%, 75%, 100%) 停止するのかについては、以下のジャンプ用語のどれを使うかで決まります。

`jump-start`

左連続関数を表します。すなわち、トランジションの開始時に最初のジャンプが発生します。

`jump-end`

右連続関数を表します。すなわち、アニメーションの終了時に最後のジャンプが発生します。

`jump-none`

どちら側にもジャンプが発生しません。0% の位置と 100% の位置の両方が長さの 1/n だけ表示されます。

`jump-both`

0% と 100% の両方で停止が含まれます。その結果、トランジションの時間内にステップが 1 つ追加されます。

`start`

`jump-start` と同じです。

`end`

`jump-end` と同じです。

`step-start`

`steps(1, jump-start)` と同じです。

`step-end`

`steps(1, jump-end)` と同じです。

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

アニメーションは、ユーザーがどのようなアクションを期待されているのかを理解するためのガイド、ユーザーインターフェイス内の関係性の表示、どのようなアクションが発生したのかをユーザーに通知するなど、役に立つことがあります。アニメーションは、認知的な負荷を軽減し、変化に気づかないことを防ぎ、空間的な関係をよりよく思い出すことに役立ちます。しかし、アニメーションの中には、注意欠陥多動性障害 (ADHD) の人の認知に問題が発生するものや、前庭障害、てんかん、片頭痛、スコトープ過敏症の引き金となるような動きをするものもあります。

アニメーションを一時停止または無効にする機能を提供するとともに、動きの縮減メディアクエリーを使用して、アニメーションを使用しないことを希望するユーザーにも快適な利用環境を提供することを検討してください。

公式定義
----

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

形式文法
----
```

transition-timing-function =
  <easing-function>#

<easing-function> =
  linear                          |
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>

<linear-easing-function> =
  linear( <linear-stop-list> )

<cubic-bezier-easing-function> =
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )

<step-easing-function> =
  step-start                             |
  step-end                               |
  steps( <integer> , <step-position>? )

<linear-stop-list> =
  [ <linear-stop> ]#

<step-position> =
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end

<linear-stop> =
  <number>               &&
  <linear-stop-length>?

<linear-stop-length> =
  <percentage>{1,2}

```

例
-

### 三次ベジェの例
```

<div class="parent">
  <div class="ease">ease</div>
  <div class="easein">ease-in</div>
  <div class="easeout">ease-out</div>
  <div class="easeinout">ease-in-out</div>
  <div class="linear">linear</div>
  <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div>
</div>
```

```
.parent {
}
.parent > div[class] {
  width: 12em;
  min-width: 12em;
  margin-bottom: 4px;
  background-color: black;
  border: 1px solid red;
  color: white;
  transition-property: all;
  transition-duration: 7s;
}
.parent > div.box1 {
  width: 90vw;
  min-width: 24em;
  background-color: magenta;
  color: yellow;
  border: 1px solid orange;
  transition-property: all;
  transition-duration: 2s;
}
```

```
function updateTransition() {
  var els = document.querySelectorAll(".parent > div[class]");
  for (var c = els.length, i = 0; i < c; i++) {
    els[i].classList.toggle("box1");
  }
}

var intervalID = window.setInterval(updateTransition, 10000);
```

```css
.ease {
  transition-timing-function: ease;
}
.easein {
  transition-timing-function: ease-in;
}
.easeout {
  transition-timing-function: ease-out;
}
.easeinout {
  transition-timing-function: ease-in-out;
}
.linear {
  transition-timing-function: linear;
}
.cb {
  transition-timing-function: cubic-bezier(0.2, -2, 0.8, 2);
}
```

### ステップの例
```

<div class="parent">
  <div class="jump-start">jump-start</div>
  <div class="jump-end">jump-end</div>
  <div class="jump-both">jump-both</div>
  <div class="jump-none">jump-none</div>
  <div class="step-start">step-start</div>
  <div class="step-end">step-end</div>
</div>
```

```
.parent {
}
.parent > div[class] {
  width: 12em;
  min-width: 12em;
  margin-bottom: 4px;
  background-color: black;
  border: 1px solid red;
  color: white;
  transition-property: all;
  transition-duration: 7s;
}
.parent > div.box1 {
  width: 90vw;
  min-width: 24em;
  background-color: magenta;
  color: yellow;
  border: 1px solid orange;
  transition-property: all;
  transition-duration: 2s;
}
```

```
function updateTransition() {
  var els = document.querySelectorAll(".parent > div[class]");
  for (var c = els.length, i = 0; i < c; i++) {
    els[i].classList.toggle("box1");
  }
}

var intervalID = window.setInterval(updateTransition, 10000);
```

```css
.jump-start {
  transition-timing-function: steps(5, jump-start);
}
.jump-end {
  transition-timing-function: steps(5, jump-end);
}
.jump-none {
  transition-timing-function: steps(5, jump-none);
}
.jump-both {
  transition-timing-function: steps(5, jump-both);
}
.step-start {
  transition-timing-function: step-start;
}
.step-end {
  transition-timing-function: step-end;
}
```

仕様書
---

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

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

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

関連情報
----

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


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

CSS フォント
========

**CSS フォント** (CSS Fonts) は CSS のモジュールの一つで、フォントに関するプロパティを定義し、どのようにフォントリソースを読み取るのかを定義します。これによって、単一の文字に利用できる複数のフォントがある場合、使用するフォントのスタイルを、例えばフォントファミリー、寸法、太さ、行の高さ、字体の種類を定義することができます。

基本的な例
-----

以下の例は、テキストの段落をスタイル付けする基本的なフォントプロパティの使い方を示します。

```css
p {
  width: 600px;
  margin: 0 auto;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-style: italic;
  font-weight: 100;
  font-variant-ligatures: normal;
  font-size: 2rem;
  letter-spacing: 1px;
}
```

```html
<p>
  Three hundred years ago<br />
  I thought I might get some sleep<br />
  I stretched myself out onna antique bed<br />
  An' my spirit did a midnite creep
</p>
```

結果は以下のようになります。

可変フォントの例
--------

たくさんの可変フォントの例を v-fonts.com および axis-praxis.org で見ることができます。詳しい情報と使い方の情報は、可変フォントガイドも参照してください。

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

### プロパティ

* `font`
* `font-family`
* `font-feature-settings`
* `font-kerning`
* `font-language-override`
* `font-optical-sizing`
* `font-size`
* `font-size-adjust`
* `font-stretch`
* `font-style`
* `font-synthesis`
* `font-variant`
* `font-variant-alternates`
* `font-variant-caps`
* `font-variant-east-asian`
* `font-variant-ligatures`
* `font-variant-numeric`
* `font-variant-position`
* `font-variation-settings`
* `font-weight`
* `line-height`
### アットルール

* `@font-face`
* `@font-feature-values`
ガイド
---

テキストとフォントのスタイル付けの基礎

この初心者向けの学習記事では、テキスト/フォントのスタイル付けの基本的な部分をすべて詳しく説明しています。フォントの太さ、ファミリー、スタイルの設定、フォントの一括指定、テキスト配置などの効果、行と文字の間隔の設定などです。

OpenType フォント特性ガイド

フォント特性またはバリアントは、 OpenType フォントに含まれている様々な字形や文字スタイルを参照します。これらには合字 ('fi' や 'ffl' のような特殊な形の文字の組み合わせ)、カーニング (特定の字形の組み合わせにおける間隔の調整)、分数、数字のスタイル、他にもたくさんあります。これらはすべて OpenType の特性として参照され、特定のプロパティや低水準の制御プロパティ — `font-feature-settings` を通してウェブ上で使用することができます。この記事は、 CSS で OpenType フォント特性を使用することについて知る必要があるすべてのことを紹介します。

可変フォントガイド

**可変フォント**は OpenType フォント仕様が進化したもので、幅、太さ、スタイルごとに別々のフォントファイルを用意するのではなく、さまざまな種類のフォントを単一のファイルに組み込むことができます。この記事では、可変フォントを使い始めるために必要なことをすべて紹介します。

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4  |


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

path()
======

**`path()`** は CSS の関数で、 SVG のパス文字列を受け取り、 CSS シェイプや CSS モーションパスで描画される形状を有効にするために使用します。

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

構文
--

`offset-path` や `d` で使用する場合:

```css
path(<string>)
```

`clip-path` で使用する場合:

```css
path([<'fill-rule'>,]?<string>)
```

### 引数

`<'fill-rule'>`

 パス内の塗りつぶしルールです。
 指定可能な値は `nonzero` または `evenodd` です。
 既定値は `nonzero` です。
 詳細は塗りつぶしルール (en-US)を参照してください。

`<string>`

文字列で、SVG パスを定義するデータ文字列です。

例
-

### path() の正しい値の例

```css
path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
```

### offset-path の値として使用

`path()` 関数が、アイテムが一周するためのパスを作成するために使用されています。いずれかの値を変更すると、パスがきれいに円を描かなくなります。

### SVG パスで d 属性の値を変更する

`path()` は SVG の `d` 属性 の値を変更するために使用することができます。 CSS で `none` に設定することも可能です。

"V" マークは、 CSS のプロパティとして `d` が対応していれば、カーソルを置いたときに縦に反転します。

#### CSS

```css
html,
body,
svg {
  height: 100%;
}

/\* This path is displayed on hover\*/
#svg\_css\_ex1:hover path {
  d: path("M20,80 L50,20 L80,80");
}
```

#### HTML

```html
<svg id="svg\_css\_ex1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="red" d="M20,20 L50,80 L80,20" />
</svg>
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* `<shape-outside>`
* CSS シェイプ
* CSS シェイプの概要
* SVG Path Syntax Illustrated Guide


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

:-moz-submit-invalid
====================

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

**`:-moz-submit-invalid`** は CSS の擬似クラスで、 Mozilla 拡張であり、フォームの送信 `<button>` のうち、内容が制約検証で妥当ではないものを表します。

既定では、適用されているスタイルはありません。この擬似クラスを使用して、無効なフォーム欄があった場合の送信ボタンの外見をカスタマイズすることができます。

構文
--
```

:-moz-submit-invalid
```

仕様書
---

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

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

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

関連情報
----

* `:valid`
* `:invalid`
* `:required`
* `:optional`


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

will-change
===========

CSS の **`will-change`** プロパティは、どのような要素の変更が予測されているかブラウザーに助言します。ブラウザーは要素が実際に変更される前に、最適化をセットアップすることができます。この種の最適化は、実際に変化が求められる前に、潜在的に高コストの処理を行うことで、ページの応答を向上させることができます。

**警告:** `will-change` は既存の性能問題を扱うための最終解決手段として使用することを意図しています。予想されるパフォーマンス問題に使用しないでください。

```css
/\* キーワード値 \*/
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform; /\* <custom-ident> の例 \*/
will-change: opacity; /\* <custom-ident> の例 \*/
will-change: left, top; /\* 2つの <animateable-feature> の例 \*/

/\* グローバル値 \*/
will-change: inherit;
will-change: initial;
will-change: unset;
```

このプロパティを適切に使用するには、少々注意が必要です。

* \*will-change を多くの要素に適用しすぎないでください。\*ブラウザーはすでに可能な限りすべての最適化を試みています。 `will-change` を試みるような強力な最適化は、大量のマシンリソースを使ってしまい、使い切ってしまった場合、ページの速度の低下や多量のリソース消費を引き起こします。
* \*控えめに使用してください。\*最適化においてブラウザーが行う通常の動作は、可能な限り早く最適化を解除して、通常に戻すことです。しかし、スタイルシートに直接 `will-change` を追加することは、対象の要素の変更が間近であることを示し続けることであり、ブラウザーはそうでない場合よりも長い間最適化を維持し続けなければなりません。そのため、変化が発生する前後にスクリプトコードを使って `will-change` のオン/オフを切り替えることを習慣づけると良いでしょう。
* *事前の最適化を行うために will-change を要素に適用しないでください。* ページが良く動作している場合、少々のスピードアップのためだけに `will-change` プロパティを要素に追加しないでください。 `will-change` は既存のパフォーマンス問題を扱うための最終手段として使われるべきものです。そのため、パフォーマンス問題に先んじて使うべきではありません。 過度な `will-change` の使用は、過度にメモリを消費するとともに、ブラウザーが起こりうる変化に対する準備をしようとすることで、より複雑なレンダリングが発生する原因となります。これはパフォーマンスの悪化につながります。
* \*処理するために十分な時間を与えてください。\*このプロパティは、ユーザーエージェントに変更する可能性のあるプロパティについて事前に通知するための方法として用意されています。そして、ブラウザーは、プロパティの変更が実際に発生する前に、プロパティの変更に必要な事前最適化の適用を選択できます。そのため、ブラウザーに実際の最適化を行うためのいくばくかの時間を与えることが重要になります。少なくとも少し早めに何らかの変更が行われることを予測する方法を見つけてから、`will-change` を設定してください。
* 重ね合わせコンテキストを生成するプロパティ値 (例えば will-change: opacity) を、手前に生成される重ね合わせコンテキストとして使用する場合、*will-change は実際に要素の視覚的な表現に影響を与える可能性があることに注意してください*。
構文
--

### 値

`auto`

このキーワードは特定の意図を表現しません。ユーザーエージェントは通常通りの経験則と最適化を適用します。

`<animateable-feature>` は次の値のいずれかである場合。

`scroll-position`

まもなく要素のスクロール位置をアニメーション化、または変更することが予想されることを示します。

`contents`

まもなく要素のコンテンツに対して何らかのアニメーション化、または変更が予想されることを示します。

`<custom-ident>`

まもなく要素で指定された名前のプロパティをアニメーション化、または変更されることが予想されることを示します。指定されたプロパティが一括指定プロパティの場合、それが展開されたすべてのプロパティが予想の対象となります。 `unset`, `initial`, `inherit`, `will-change`, `auto`, `scroll-position`, `contents` の値は指定できません。仕様では特定の値についての動作を定義していませんが、一般的に `transform` は合成レイヤーのヒントとなります。特定の CSS プロパティに対しては、 現在のところ Chrome は 2 つのアクションを取ります。新しい合成レイヤーを構築するか、または新しい重ね合わせコンテキストを構築します。

### スタイルシートで

しかし、ページが大きく複雑なアルバムやスライドデッキプレゼンテーションのようなキー押下で遷移するアプリケーションの場合、スタイルシートに `will-change` を含めた方が適切なこともあります。これによって、ブラウザーは事前に切り替えの準備を行い、キーが押されるとすぐに、てきぱきとしたページ間の切り替えができます。しかし、スタイルシートで `will-change` プロパティを直接使用するのは注意してください。ブラウザーが必要なくなったメモリを最適化のために保存し続けることになる可能性があるからです。

```css
.slide {
  will-change: transform;
}
```

公式定義
----

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

形式文法
----
```

will-change =
  auto                    |
  <animateable-feature>#

<animateable-feature> =
  scroll-position  |
  contents         |
  <custom-ident>

```

例
-

### スクリプトから

これはスクリプトから `will-change` プロパティを適用する方法を示しています。おそらく多くの場合はこのようにします。

```js
var el = document.getElementById("element");

// 要素がホバーされたとき、will-change を設定する
el.addEventListener("mouseenter", hintBrowser);
el.addEventListener("animationEnd", removeHint);

function hintBrowser() {
  // アニメーションのキーフレームブロックで
  // 変更されるであろう最適化可能なプロパティ
  this.style.willChange = "transform, opacity";
}

function removeHint() {
  this.style.willChange = "auto";
}
```

仕様書
---

| Specification |
| --- |
| CSS Will Change Module Level 1 # will-change |

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

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

関連情報
----

* `transform`


値の定義構文 - CSS: カスケーディングスタイルシート

値の定義構文
======

**CSS の値の定義構文**は、形式文法であり、 CSS プロパティや関数の有効な値の組み合わせ定義するのに使われます。この構文に加えて、有効な値の組み合わせは意味的な制約で有効値の集まりをさらに制限できます (例えば、数値を正の値に限定します)。

定義構文ではどの値が許可され、相互作用が可能であるかを記述します。成分は、*キーワード*や、*リテラル*とみなされる文字列、CSS データ型の値、またはその他の CSS プロパティのいずれかです。

成分値の種類
------

### キーワード

#### 共通キーワード

引用符なしのリテラルで、字句通りの意味が事前に定義されているキーワードです。例: `auto`, `smaller`, `ease-in`

#### `inherit`, `initial`, `unset` の場合

すべての CSS プロパティで、 CSS 全体で定義されているキーワード `inherit`, `initial`, `unset` を使うことができます。これらは値定義に現れず、暗黙的に定義されています。

### リテラル

CSS のスラッシュ ('`/`') やカンマ ('`,`') のようないくつかの文字は、文字自身として現れ、プロパティ定義で値の区切りに使われます。カンマはよく、列挙する値や数学的な関数の引数の区切りに使われます。スラッシュはよく、意味的に異なるものの、共通の構文を持つ値の集まりの区切りに使われます。よくあるのは、一括指定 (shorthand) プロパティで、同じ型だが異なるプロパティに属する成分を区切る使い方です。

どちらの記号も値定義に文字通り現れます。

### データ型

#### 基本データ型

データの種類によっては CSS 全体で使われ、仕様書のすべての値に一度だけ定義されるものがあります。これは*基本データ型*と呼ばれ、名前を記号 '`<`' と '`>`' で囲って表現されます。例: `<angle>`, `<string>`, …

#### 非終端データ型 (Non-terminal data types)

一般的でないデータ型ですが、非終端データ型も '`<`' と '`>`' で囲みます。

非終端データ型には 2 種類あります。

* *同名プロパティを共有*するデータ型で、引用符で囲みます。この場合、データ型はプロパティと同じ値のセットを共有します。一括指定プロパティの定義でよく使われます。
* *プロパティと同じ名前を共有していない*データ型。これらのデータ型は、基本データ型にとても近いものです。基本データ型と異なるのは、定義の物理的な位置だけです。この場合、通常、その定義は、それらを使用するプロパティの定義に物理的にとても近いところにあります。
成分値の組み合わせ
---------

### 角括弧

*角括弧*はいくつかの対象、結合子、乗算子を取り囲み、単一の成分に変換します。**ひとまとまりの成分の結合優先順を無視する**ために使われます。

```css
bold [ thin && <length> ]
```

この例は次の値に一致します。

* `bold thin 2vh`
* `bold 0 thin`
* `bold thin 3.5em`

次の値には一致しません。

* `thin bold 3em`。 `bold` は角括弧で定義された成分と並列なので、その前に出現しなければなりません。
### 並列

いくつかのキーワード、リテラル、データ型を順に配置し、1 つ以上の空白で区切る置き方を*並列*と呼びます。並列の成分は**どれも必須で、記述順どおりに出現する必要があります**。

```css
bold <length> , thin
```

この例は次の値に一致します。

* `bold 1em, thin`
* `bold 0, thin`
* `bold 2.5cm, thin`
* `bold 3vh, thin`

次の値には一致しません。

* `thin 1em, bold`。対象は記述通りの順でなければなりません
* `bold 1em thin`。対象は必須です。リテラルであるカンマも存在する必要があります
* `bold 0.5ms, thin`。 `ms` 値は `<length>` ではありません。
### 二重アンパサンド

2 つ以上の成分を二重アンパサンド `&&` で区切ると、対象すべてが**必須だが出現順は問わない**という意味になります。

```css
bold && <length>
```

この例は次の値に一致します。

* `bold 1em`
* `bold 0`
* `2.5cm bold`
* `3vh bold`

次の値には一致します。

* `bold`。どちらの成分も出現しなければなりません。
* `bold 1em bold`。どちらの成分も 1 度だけ出現しなければなりません。

**メモ:** 並列は二重アンパサンドより優先されます。例えば `bold thin && <length>` は `[ bold thin ] && <length>` と同じ意味です。これは `bold thin <length>` や `<length> bold thin` を含みますが、`bold <length> thin` は含みません。

### 二重バー

2 つ以上の成分を二重バー `||` で区切ると、すべての対象が省略可能であることを意味します。**少なくともいずれか 1 つが存在する必要がありますが、順序は問いません**。一括指定プロパティの値定義に使われます。

```css
<'border-width'> || <'border-style'> || <'border-color'>
```

この例は次の値に一致します。

* `1em solid blue`
* `blue 1em`
* `solid 1px yellow`

次の値には一致しません。

* `blue yellow`。各成分は最大で 1 回だけ出現できます。
* `bold`。どの対象の値もこのキーワードを使えません。

**メモ:** 二重アンパサンドは二重バーより優先されます。例えば `bold || thin && <length>` は `bold || [ thin && <length> ]` と同じ意味です。 `bold`, `thin <length>`, `bold thin <length>`, `thin <length> bold` を含みますが、`<length> bold thin` は 含みません。 bold を省略しないのなら、`thin && <length>` 成分全体よりも前か後ろに置く必要があるからです。

### 単一バー

2 つ以上の対象を単一バー `|` で区切ると、全対象が排他的な選択肢であることを意味します。**選択肢のうち 1 つだけが存在する必要があります**。利用可能なキーワードを列挙する際によく使われます。

```css
<percentage> | <length> | left | center | right | top | bottom
```

この例は次の値に一致します。

* `3%`
* `0`
* `3.5em`
* `left`
* `center`
* `right`
* `top`
* `bottom`

次の値には一致しません。

* `center 3%`。各成分は 1 つだけ存在しなければなりません。
* `3em 4.5em`。成分は最大で 1 回だけ存在できます。

**メモ:** 二重バーは単一バーより優先されます。例えば `bold | thin || <length>` は `bold | [ thin || <length> ]` と同じ意味です。`bold`, `thin`, `<length>`, `<length> thin`, や `thin <length>` を含みますが、`bold <length>` は含みません。`|` 結合子の両側それぞれから 1 つだけ対象が存在できるからです。

成分値の乗算子
-------

乗算子は、それ以前にある対象を何回繰り返せるかを表す記号です。乗算子がなければ、対象は 1 度だけしか出現してはいけません。

乗算子は足し合わせることはできず、他のどの結合子より優先される点に注意してください。

### アスタリスク (`*`)

*アスタリスク乗算子*は対象の **0 回以上**の出現を示します。

```css
bold smaller*
```

この例は次の値に一致します。

* `bold`
* `bold smaller`
* `bold smaller smaller`
* `bold smaller smaller smaller` など

次の値には一致しません。

* `smaller`。`bold` は並列で、他のどの `smaller` キーワードより先に出現する必要があります。
### プラス (`+`)

*プラス乗算子*は対象の **1 回以上**の出現を示します。

```css
bold smaller+
```

この例は次の値に一致します。

* `bold smaller`
* `bold smaller smaller`
* `bold smaller smaller smaller` など

次の値には一致しません。

* `bold`。`smaller` が少なくとも 1 回 出現しなければなりません。
* `smaller`。`bold` は並列で、他のどの `smaller` キーワードよりも前に出現しなければなりません。
### 疑問符 (`?`)

*疑問符乗算子*は、対象は省略可能で、**0 回または 1 回**出現することを意味します。

```css
bold smaller?
```

この例は次の値に一致します。

* `bold`
* `bold smaller`

次の値には一致しません。

* `bold smaller smaller` 。`smaller` は最大で 1 回しか出現できません。
* `smaller`。`bold` は並列で、他のどの `smaller` キーワードよりも前に出現する必要があります。
### 波括弧 (`{ }`)

*波括弧乗算子*は、カンマで区切った 2 つの整数を囲うもので、対象が**少なくとも A 回、最大で B 回**出現することを示します。

```css
bold smaller{1,3}
```

この例は次の値に一致します。

* `bold smaller`
* `bold smaller smaller`
* `bold smaller smaller smaller`

次の値には一致しません。

* `bold`。`smaller` が少なくとも 1 回出現する必要があります。
* `bold smaller smaller smaller smaller`。`smaller` は最大で 3 回しか出現できません。
* `smaller`。`bold` は並列で、他のどの `smaller` キーワードよりも前に出現する必要があります。
### ハッシュ記号 (`#`)

*ハッシュ記号乗算子*は対象が (プラス乗算子のように) 1 回以上繰り返されるが、それぞれをカンマ (',') で区切る必要があることを示します。

```css
bold smaller#
```

この例は次の値に一致します。

* `bold smaller`
* `bold smaller, smaller`
* `bold smaller, smaller, smaller` など

次の値には一致しません。

* `bold`。`smaller` が少なくとも 1 度出現する必要があります。
* `bold smaller smaller smaller`。`smaller` の出現部がそれぞれをカンマで区切る必要があります。
* `smaller`。`bold` は並列で、どの `smaller` キーワードよりも前に出現する必要があります。
### 強調点 (`!`)

グループの後の*強調点乗算子*は、グループが必須であり、少なくとも 1 つの値を生み出す必要があることを示します。グループ内の項目の構文が内容全体を省略することができるとしていても、少なくとも 1 つの成分値を省略することはできません。

```css
[ bold? smaller? ]!
```

この例は次の値に一致します。

* `bold`
* `smaller`
* `bold smaller`

次の値には一致しません。

* `bold` も `smaller` もないものは、どちらか一つが現れる必要があります。
* `smaller bold`。 `bold` は並列であり、 `smaller` キーワードの前に現れる必要があります。
* `bold smaller bold`。 `bold` および `smaller` は一度だけしか現れてはいけません。
まとめ
---

| 記号 | 名前 | 説明 | 例 |
| --- | --- | --- | --- |
| 結合子 |
| --- |
|  | 並列 | どちらも必須でこの順で出現する必要がある | `solid <length>` |
| `&&` | 二重アンパサンド | どちらも必須だが出現順は問わない | `<length> && <string>` |
| `||` | 二重バー | どちらかが存在する必要があり、出現順は問わない | `<'border-image-outset'> || <'border-image-slice'>` |
| `|` | 単一バー | 正確に 1 つだけ存在する必要がある | `smaller | small | normal | big | bigger` |
| `[ ]` | 角括弧 | 結合優先順を変える | `bold [ thin && <length> ]` |
| 乗算子 |
|  | 乗算子なし | 1 回 | `solid` |
| `*` | アスタリスク | 0 回以上 | `bold smaller*` |
| `+` | プラス記号 | 1 回以上 | `bold smaller+` |
| `?` | 疑問符 | 0 回か 1 回 (すなわち*省略可能*) | `bold smaller?` |
| `{A,B}` | 波括弧 | 少なくとも `A` 回、最大で `B` 回 | `bold smaller{1,3}` |
| `#` | ハッシュ記号 | 1 回以上。各出現がカンマ ('`,`') で区切られている必要がある | `bold smaller#` |
| `!` | 強調点 | グループが少なくとも1つの値を生み出す必要がある | `[ bold? smaller? ]!` |

仕様書
---

| Specification |
| --- |
| CSS Values and Units Module Level 4 # value-defs |

関連情報
----

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


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

border-right
============

**`border-right`** は一括指定の CSS のプロパティで、要素の右側の境界のプロパティをすべて設定します。

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

他の一括指定プロパティと同様に、 `border-right` は、一部の値が指定されていなくても、設定可能なプロパティをすべて設定します。指定されていないプロパティは既定値が設定されます。つまり……

```css
border-right-style: dotted;
border-right: thick green;
```

……は、実際には以下と同じです……

```css
border-right-style: dotted;
border-right: none thick green;
```

……そして、 `border-right` の前で設定された `border-right-style` の値は無視されます。 `border-right-style` の既定値は `none` なので、 `border-style` の部分の設定は境界線なしとなります。

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

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

* `border-right-color`
* `border-right-style`
* `border-right-width`
構文
--

```css
border-right: 1px;
border-right: 2px dotted;
border-right: medium dashed green;

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

一括指定プロパティの 3 つの値は任意の順序で指定可能で、また、1 つまたは 2 つの値を省略することができます。

### 値

`<br-width>`

`border-right-width` を参照してください。

`<br-style>`

`border-right-style` を参照してください。

`<color>`

`border-right-color` を参照してください。

公式定義
----

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

形式文法
----
```

border-right =
  <line-width>  ||
  <line-style>  ||
  <color>

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

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

```

例
-

### 右側の境界の適用

#### HTML

```html
<div>このボックスには右側に境界線があります。</div>
```

#### CSS

```css
div {
  border-right: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* `border`
* `border-block`
* `outline`