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

cursor
======

**`cursor`** は CSS のプロパティで、マウスポインターが要素の上にいるときに表示されるマウスカーソルを設定します。

 カーソル設定により、テキスト選択、ヘルプやコンテキストメニューの有効化、コンテンツのコピー、表のリサイズなど、現在の位置で実行できるマウス操作をユーザーに知らせるべきです。
 キーワードを使用してカーソルの種類を指定するか、使用する固有のアイコンを読み込むことができます（オプションで代替画像、そして最終的なフォールバックとしてキーワードが必須です）。

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

構文
--

```css
/\* キーワード値 \*/
cursor: auto;
cursor: pointer;
/\* … \*/
cursor: zoom-out;

/\* URL とキーワードによる代替 \*/
cursor: url(hand.cur), pointer;

/\* URL と座標とキーワードによる代替 \*/
cursor:
  url(cursor\_1.png) 4 12,
  auto;
cursor:
  url(cursor\_2.png) 2 2,
  pointer;

/\* URL と代替 URL （一部は座標つき）、そして必須のキーワードによる代替 \*/
cursor:
  url(cursor\_1.svg) 4 5,
  url(cursor\_2.svg),
  /\* …, \*/ url(cursor\_n.cur) 5 5,
  progress;

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

`cursor` プロパティはゼロ個以上の `<url>` をカンマで区切ったものと、それに続く必須のキーワード値によって指定します。
 それぞれの `<url>` は画像ファイルを指します。
 ブラウザーは最初に指定された画像を読み込もうとし、ない場合は次に代替されて、いずれも画像が読み込めないとき (または指定がなかったとき) は、キーワード値に代替されます。

それぞれの `<url>` には空白で区切った 2 つの数値を続けることができ、カーソルのホットスポットを画像の左上隅からの相対位置、 `<x>` および `<y>` 座標で設定します。

### 値

`<url>` 省略可

`url()` またはカンマ区切りのリスト `url(), url(), …` で画像の URL を指定します。複数の `url()` は、一部のカーソル画像形式に対応していなかった場合の代替として設定できます。
 代替リストの最後には、キーワード値のいずれか 1 つ以上を指定*しなければなりません*。

`<x>`, `<y>` 省略可

任意でホットスポットの x 座標と y 座標を指定します。これはカーソルが指している先の詳細な位置です。

 数値は画像ピクセル単位です。
 これらは画像の左上隅（"`0 0`"に相当）からの相対座標であり、カーソル画像の境界でクランプされます。
 これらの値が指定されていない場合、ファイル自体から読み込まれることがあり、そうでない場合は画像の左上隅が既定値となります。

`keyword`

キーワード値は指定する必要があり、使用するカーソルの種類、または指定したアイコンをすべて読み込めなかった場合に使用する代替カーソルのどちらか示します。

利用可能なキーワードは以下の一覧表に掲載されています。カーソルなしを意味している `none` 以外には、カーソルがどのように表示されるかを示す画像があります。表の行にマウスカーソルを当てると、さまざまなカーソルキーワードの値が現在のブラウザーに与える影響を見ることができます。

| カテゴリー | CSS 値 | 例 | 説明 |
| --- | --- | --- | --- |
| 一般 | `auto` |  | 現在のコンテキストに基づき表示するカーソルをユーザーエージェントが決定します。例えば、テキストにカーソルを当てた時は `text` キーワードを指定した場合と同様です。 |
| `default` | 左上を向いた太い矢印 | プラットフォームに依存する既定のカーソルです。ふつうは矢印です。 |
| `none` |  | カーソルを表示しません。 |
| リンクおよび状態 | `context-menu` | メニューアイコンを少し隠す左上向きの太い矢印 | コンテキストメニューが利用できることを示します。 |
| `help` | 疑問符の横にある左上向きの太い矢印 | ヘルプが使用可能であることを示します。 |
| `pointer` | 人差し指を立てた右手 | カーソルがリンクを示すポインターになります。ふつうは指差す手の画像です。 |
| `progress` | 太い矢印と砂時計 | プログラムがバックグラウンドでビジー状態であるが、（`wait` とは異なり）ユーザーがインターフェイスを操作可能であることを示します。 |
| `wait` | 砂時計 |
 プログラムがビジー状態で、（`progress` とは異なり）ユーザーによる操作が不可能である状態を示します。
 よく砂時計や腕時計の画像が使われます。
  |
| 選択 | `cell` | 太いプラス記号 | 表のセルまたは一連のセルが選択できることを示します。 |
| `crosshair` | 2 本の細い線で校正されたプラス記号 | 十字カーソルで、多くの場合はビットマップ内の選択を示すために使用されます。 |
| `text` | 垂直の I ビーム | テキストを選択可能であることを示します。通常、I ビームが表示されます。 |
| `vertical-text` | 水平の I ビーム | 縦書きのテキストを選択可能であることを示します。通常、水平の I ビームが表示されます。 |
| ドラッグ＆ドロップ | `alias` | 左上向きの太い矢印が、右上向きのカーブした矢印が描かれた小さなフォルダーアイコンを部分的に隠しています | エイリアスやショートカットが作成されることを示します。 |
| `copy` | 左上向きの太い矢印が、プラス記号の付いた小さなフォルダーアイコンを部分的に隠しています | 何かがコピーされることを示します。 |
| `move` | 2 本の細い線で作られたプラス記号。4 方向の外向きの小さな矢印 | 何かが移動されることを示します。 |
| `no-drop` | ポインターアイコンと不許可アイコン | 現在の位置にアイテムがドロップできないことを示します。[Firefox バグ 275173](https://bugzil.la/275173): Windows および Mac OS X では、`no-drop` は `not-allowed` と同じです。 |
| `not-allowed` | 不許可アイコンで、丸に線を引いたものです。 | 要求された操作が受け付けられないことを示します。 |
| `grab` | 開ききった手のアイコン | 何かをグラブ (移動のためにドラッグ) することができることを示します。 |
| `grabbing` | 手の甲の閉じられた手のアイコン | 何かをグラブ (移動のためにドラッグ) していることを示します。 |
| サイズ変更＆スクロール | `all-scroll` | 中くらいのドットとそれを囲む 4 つの三角形のアイコン | 何かが任意の方向にスクロール (パン) 可能であることを示します。[Firefox バグ 275174](https://bugzil.la/275174): Windows では、 `all-scroll` は `move` 同じです。 |
| `col-resize` | col-resize.gif | アイテムや列が水平方向にサイズ変更可能であることを示します。通常、左右を指す矢印とそれを仕切る垂直線が表示されます。 |
| `row-resize` | 2 本の細い並列水平線に、上向きの小矢印と下向きの小矢印 | アイテムや行が垂直方向にサイズ変更可能であることを示します。通常、上下を指す矢印とそれを仕切る水平線が表示されます。 |
| `n-resize` | 上向きの細長い矢印 | 辺が移動できることを表します。例えば、`se-resize` のカーソルはボックスの\*南東\* (south-east) の角から移動を開始した時に使われます。環境によっては、等価の双方向のサイズ変更カーソルが表示されます。例えば、 `n-resize` と `s-resize` は `ns-resize` と同じになります。 |
| `e-resize` | 右向きの細長い矢印 |
| `s-resize` | 下向きの細長い矢印 |
| `w-resize` | 左向きの細長い矢印 |
| `ne-resize` | 右上向きの細長い矢印 |
| `nw-resize` | 左上向きの細長い矢印 |
| `se-resize` | 右下向きの細長い矢印 |
| `sw-resize` | 左下向きの細長い矢印 |
| `ew-resize` | 左右の細長い矢印 | 双方向へのサイズ変更が可能であることを示します。 |
| `ns-resize` | 上下の細長い矢印 |
| `nesw-resize` | 右上と左下の両方を指す細長い矢印 |
| `nwse-resize` | 左上と右下の両方を指す細長い矢印 |
| 拡大/縮小 | `zoom-in` | 虫眼鏡とプラス記号 | 拡大/縮小が可能であることを示します。 |
| `zoom-out` | zoom-out.gif |

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 指定通り、ただし `url` の値は絶対パスになる |
| アニメーションの種類 | 離散値 |

形式文法
----
```

cursor =
  [ [ <url> | <url-set> ] [ <x> <y> ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]

<url> =
  <url()>  |
  <src()>

<x> =
  x

<y> =
  y

<url()> =
  url( <string> <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> <url-modifier>\* )

```

使用上の注意
------

### アイコンの大きさの制限

 仕様書では `cursor` の画像サイズは制限されていませんが、ユーザーエージェントは一般的に誤用を防ぐために制限をしています。
 例えば、Firefox と Chromium ではカーソル画像は既定では 128x128 ピクセルに制限されていますが、カーソル画像のサイズは 32x32 ピクセルに制限することを推奨します。ユーザーエージェントが対応している最大サイズよりも大きな画像を使用してカーソルを変更しても、通常は無視されます。

### 対応している画像ファイル形式

 ユーザーエージェントは、 PNG ファイル、自然なサイズを持つ安全な静的モードの SVG v1.1 ファイル、他のプロパティの画像に対応しているアニメーション以外の画像ファイル形式に対応するよう、この仕様書は要求しています。
 デスクトップブラウザーは `.cur` ファイル形式にも広く対応しています。

 この仕様書はさらに、ユーザーエージェントは、他のプロパティの画像について対応している他のアニメーション画像ファイル形式とともに、自然なサイズを含む安全なアニメーションモードの SVG v1.1 ファイルも対応すべきであると示しています。
 ユーザーエージェントは自然なサイズを持たない静的な SVG 画像とアニメーション SVG 画像の両方に対応することもできます。

### iPadOS

iPadOS はトラックパッドやマウスなどのポインター機器に対応しています。既定では、 iPad のカーソルは円形で表示され、ポインターに現れる値を変更する唯一の対応する値は `text` です。

### その他の注意

ツールバーの領域と交差するカーソルの変更は、なりすましを避けるために一般的にブロックされます。

例
-

### カーソルの種類の設定

```css
.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

/\* URL を使用する場合は、代替のキーワード値が必要です。 \*/
.baz {
  cursor: url("hyper.cur"), auto;
}
```

仕様書
---

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # cursor |

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

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

関連情報
----

* `pointer-events`
* `url()` 関数


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

継承
==

CSS において、**継承** (inheritance) はある要素のあるプロパティに値が指定されなかった場合の挙動を制御します。

CSS プロパティは 2 種類に分類することができます。

* **継承プロパティ**は、既定で親要素の計算値に設定されるものです
* **非継承プロパティ**は、既定でそのプロパティの初期値に設定されるものです

いずれかの CSS プロパティの定義を参照して、それぞれのプロパティが既定値を継承するか ("継承: あり") しないか ("継承: なし") を確認してください。

継承プロパティ
-------

要素の**継承プロパティ**に値が指定されなかった場合、要素はその親要素のプロパティの計算値を取得します。文書のルート要素だけは、プロパティの概要で与えられた初期値を取得します。

継承プロパティの一般例として `color` プロパティが挙げられます。以下のスタイルルールとマークアップを考えてみましょう。

```css
p {
  color: green;
}
```

```html
<p>この段落には<em>強調されたテキスト</em>があります。</p>
```

「強調されたテキスト」という文字列は、 `em` 要素が `p` 要素から `color` プロパティの値を継承する為、プロパティの初期値 (※祖先要素の何れにも color プロパティが指定されていない場合に使用される文字色) ではなく、継承値の緑色となります。

非継承プロパティ
--------

値を持たない**非継承プロパティ**が要素に指定された場合、要素はプロパティの初期値（※各プロパティのページの「概要」の節に記されています）を取得します。

非継承プロパティの一般的な例としては `border` プロパティが挙げられます。以下のスタイルルールとマークアップを考えてみましょう。

```css
p {
  border: medium solid;
}
```

```html
<p>この段落には<em>強調されたテキスト</em>があります。</p>
```

この場合、「強調されたテキスト」という文字列は (`border-style` の初期値が `none` であるため) 境界がありません。

注
-

`inherit` のキーワードで、明示的に継承することを指定することができます。これはこれは継承プロパティでも非継承プロパティでも動作します。

すべてのプロパティに値を適用する `all` 一括指定プロパティを使用することで、すべてのプロパティの継承を制御することができます。例えば、

```css
p {
  all: revert;
  font-size: 200%;
  font-weight: bold;
}
```

これは、 `font` プロパティのスタイルを、ユーザーのスタイルシートがなければユーザーエージェントの既定値に、あればその値に戻します。それからフォントの寸法を倍にして、 `font-weight` に `"bold"` を適用します。

関連情報
----

* 継承を制御する CSS 値: `inherit`, `initial`, `revert`, `revert-layer`, `unset`
* CSS カスケード入門
* カスケードと継承
* CSS の主要概念:
    + CSS の構文
    + アットルール
    + コメント
    + 詳細度
    + ボックスモデル
    + レイアウトモード
    + 視覚整形モデル
    + マージンの相殺
    + 値
        - 初期値
        - 計算値
        - 使用値
        - 実効値
    + 値の定義構文
    + 一括指定プロパティ
    + 置換要素


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

scroll-behavior
===============

**`scroll-behavior`** は CSS のプロパティで、ナビゲーションや CSSOM のスクローリング API によってスクロールするボックスにスクロールが発生した際の、そのスクロールの振る舞いを設定します。

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

なお、ユーザーが実行したスクロールなど、その他のスクロールはこのプロパティの影響を受けません。このプロパティがルート要素に指定された場合は、代わりにビューポートに適用されます。このプロパティが `body` 要素に指定された場合は、ビューポートには適用され*ません*。

ユーザーエージェントは、このプロパティを無視することができます。

構文
--

```css
/\* キーワード値 \*/
scroll-behavior: auto;
scroll-behavior: smooth;

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

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

### 値

`auto`

スクロールするボックスは瞬時にスクロールします。

`smooth`

スクロールするボックスは、ユーザーエージェント定義のタイミング関数を使い、ユーザーエージェント定義の時間をかけて、円滑にスクロールします。もし存在するなら、ユーザーエージェントはプラットフォームの慣例に従うべきです。

公式定義
----

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

形式文法
----
```

scroll-behavior =
  auto    |
  smooth

```

例
-

### スクロールの動きをスムーズに設定

#### HTML

```html
<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<div class="scroll-container">
  <div class="scroll-page" id="page-1">1</div>
  <div class="scroll-page" id="page-2">2</div>
  <div class="scroll-page" id="page-3">3</div>
</div>
```

#### CSS

```css
a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav,
.scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
.scroll-container {
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
.scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Overflow Module Level 3 # smooth-scrolling |

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

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


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

<easing-function>
=================

**`<easing-function>`** は CSS のデータ型で、数値が変化する速度を記述する数学的な関数を表します。

この 2 つの値の間の遷移は様々な形で適用される可能性があります。アニメーション中に値が変化する速さを記述するために使用されることがあります。これにより、この間、アニメーションの速度を変化させることができます。イージング関数は、CSS の transition および animation プロパティで指定することができます。

構文
--

```css
/\* linear 関数とキーワード \*/
/\* linear(<point-list>) \*/
linear(1, -0.5, 0)
linear

/\* cubic-bezier 関数とキーワード \*/
/\* cubic-bezier(<x1>, <y1>, <x2>, <y2>) \*/
cubic-bezier(0.42, 0.0, 1.0, 1.0)
ease
ease-in
ease-out
ease-in-out

/\* steps 関数とキーワード \*/
/\* steps(<number-of-steps>, <direction>) \*/
steps(4, end)
step-start
step-end
```

### 値

`<point-list>`

線形の停止点のリストです。

`linear`

補間が直線的に行われることを示します。このキーワードは、イージング関数 `linear(0, 1)` を表します。

![原点から (1, 1) に伸びる直線を示す「入力の進行」から「出力の進行」のグラフ。](/ja/docs/Web/CSS/easing-function/linear.svg)

`<x1>`, `<y1>`, `<x2>`, `<y2>`

`<number>` 値で、3 次ベジェ曲線を定義する P1 点と P2 点の横軸と縦軸を表します。 `x1` および `x2` は範囲 `[0, 1]` でなければならず、それ以外の場合は無効です。

`ease`

補間がゆっくり始まり、急激に加速し、終わりに向かって徐々に遅くなることを示します。このキーワードは、イージング関数 `cubic-bezier(0.25, 0.1, 0.25, 1.0)` を表します。これは `ease-in-out` と似ていますが、始めのうちはより急激に加速されます。

`ease-in`

補間がゆっくり始まり、その後次第に加速していき、最終状態に達するとアニメーションは突然停止します。このキーワードはイージング関数 `cubic-bezier(0.42, 0.0, 1.0, 1.0)` を表します。

`ease-out`

補間が急速に始まり、最終状態にかけて次第に減速していくことを示します。このキーワードはタイミング関数 `cubic-bezier(0.0, 0.0, 0.58, 1.0)` を表します。

`ease-in-out`

補間がゆっくり始まり、加速し、終わりに向かって減速することを示します。このキーワードは、イージング関数 `cubic-bezier(0.42, 0.0, 0.58, 1.0)` を表します。始めは `ease-in` 関数のように動作し、終わりは `ease-out` 関数のように動作します。

![「入力の進行」と「出力の進行」のグラフのうち、"ease" は元から (1, 1) にすばやく上昇する曲線、"ease-in" は原点から (1, 1) に近づくにつれてまっすぐになる浅い曲線、"ease-out" は (1, 1) に近づくにつれてわずかにカーブするまっすぐな対角線、"ease-in-out" は原点から (1, 1) にカーブする点対称の "S" 字型の曲線を示します。](/ja/docs/Web/CSS/easing-function/ease.svg)

`<number-of-steps>`

厳密に正の `<integer>` で、段階関数を構成する等間隔の段数を表します。

`<direction>`

ジャンプが発生するタイミングを示す以下のキーワードのいずれかです。

* `jump-start` は補間の開始時に最初の段階が発生することを指定します。
* `jump-end` は補間の完了時に最後の段階が発生することを指定します。
* `jump-both` は 0% と 100% の両方の位置で停止し、補間の繰り返しの間に効果的に段階を入れることを指定します。
* `jump-none` どちらの端にもジャンプしません。代わりに、それぞれ区間の 1/n ごとに 0% の位置と 100% の位置の両方を保持します。
* `start` は `jump-start` と同等です。
* `end` は `jump-end` と同等です。これが既定値です。

`step-start`

補間はすぐに最終状態に遷移し、最後までその状態を維持します。このキーワードは、イージング関数 `steps(1, jump-start)` または `steps(1, start)` を表します。

`step-end`

補間、終了するまで初期状態のままで、終了時点で直接最終状態にジャンプします。このキーワードは、イージング関数 `steps(1, jump-end)` または `steps(1, end)` を表します。

![「入力の進行」から「出力の進行」のグラフのうち、"step-start" は原点を中空にし、(0, 1) から (1, 1) に伸びる水平線を示し、"step-end" は原点から (1, 0) に伸びる水平線（中空）と (1, 1) のこの点を示します。](/ja/docs/Web/CSS/easing-function/step.svg)

解説
--

イージング関数は 3 つの種類があります。

* 線形
* 3 次ベジェ
* 段階
### 線形イージング関数

`linear()` 関数は、その点間を直線的に補間する区分線形関数を定義します。これにより、跳ね返り効果や弾性効果など、より複雑なアニメーションを近似的に表現することができます。この補間は、始めから終わりまで一定の割合で行われます。典型的な `linear()` 関数の使用法は、多くの点を指定して何らかの曲線に近似させることです。

`linear()` 関数を定義するときには、 `linear(0, 0.25, 1)` のように、*線形イージング点* をリストで指定します。この `linear()` 関数は、 `0` から `0.25` 、そして `1` へと直線的に移動するイージング関数を生成します。

![「入力の進行」と「出力の進行」のグラフ。"linear(0, 0.25, 1)" は原点、(0.5, 0.25)、(1, 1) を結ぶ折れ線、"linear(0, 0.25 75%, 1)" は原点、(0.75, 0.25)、(1, 1) を結ぶ折れ線を示します。](/ja/docs/Web/CSS/easing-function/linear_function.svg)

別の例として、 `linear(0, 0.25%, 1)` という関数を考えてみましょう。これは、 75% の時間で `0` から `.25` へと遷移し、最後の 25% を `.25` から `1` へと遷移する線形イージング関数を生成します。

`linear` キーワードは、 2 つの点を持つ `linear()` 関数を生成します。これは、イージング関数 `cubic-bezier(0.0, 0.0, 1.0, 1.0)` と同じです。

`linear` キーワードはイージング関数 `linear(0, 1)` と等価です。

### 3 次ベジェイージング関数

`cubic-bezier()` 関数記法は、3 次ベジェ曲線を定義します。イージング関数のサブセットである 3 次ベジェのイージング関数は、補間の始まりと終わりを滑らかにするために使用できるので、「スムーズな」イージング関数とよく呼ばれます。これらはどちらも `<number>` として表される、入力の進行と出力の進行を関連付けます。これらの値について、 `0.0` は初期状態を表し、 `1.0` は最終状態を表します。

![「入力の進行」から「出力の進行」のグラフで、ベジェ制御する点 P1(0.1, 0.6) と P2(0.7, 0.2) で原点から (1, 1) にカーブする S 字型の図形を示す。](/ja/docs/Web/CSS/easing-function/cubic-bezier.svg)

3 次ベジェ曲線は 4 個の点 P0, P1, P2, P3 によって定義されます。P0 と P3 は曲線の始点と終点を表します。CSS では、この点は座標の進行（横軸が入力の進行、縦軸が出力の進行）として固定されています。P0 は `(0, 0)` で進行の開始かつ初期状態を示します。P3 は `(1, 1)` で進行の終了かつ最終状態を示します。

すべての 3 次ベジェ曲線が数学的な関数 とは限らないため、どの 3 次ベジェ曲線もイージング関数として適しているわけではありません。すなわち、曲線は横座標で 0 から 1 の値をとります。 P0 および P3 は CSS の定義で固定されているので、P1 および P2 の横座標の値が `[0, 1]` の範囲にある場合のみ、3 次ベジェ曲線は関数であり、それゆえ有効になります。

P1 または P2 の縦軸が `[0, 1]` の範囲外の 3 次ベジェ曲線は、値が最終状態より遠くに行き、その後戻るようになることがあります。アニメーションでは、 `left` や `right` などのいくつかのプロパティで、これは一種の「跳ね返る」効果を生み出します。

![イージング関数 "cubic-bezier(0.3, 0.2, 0.2, 1.4)" のグラフ。一方は、ある入力の進行から始めるには出力の進行が 1 以上になることを示し、もう一方は出力の進行が 1 に到達すると、その後は 1 にとどまることを示します。](/ja/docs/Web/CSS/easing-function/cubic-bezier_out_of_range.svg)

しかし、一部のプロパティでは、許容範囲外になると出力が制限されます。例えば、`rgb()` における色成分が `255` より大きい、あるいは `0` より小さい場合、最も近い許容値（それぞれ `255` と `0`）に丸められます。一部の `cubic-bezier()` 曲線はこのプロパティを示します。

不正な 3 時限ベジェ曲線を指定すると、 CSS はその属性全体を無視します。

`ease`、`ease-in`、`ease-out`、`ease-in-out` のそれぞれのキーワードは、それぞれ特定の `cubic-bezier()` 値と同等です。

### 段階イージング関数

`steps()` 関数記法は、出力値の領域を等距離の段階に分割する段階関数を定義するものです。この段階関数のサブクラスは、階段関数とも呼ばれることがあります。

`steps()` 関数を説明するいくつかの例を示します。

```css
steps(2, jump-start) /\* Or steps(2, start) \*/
steps(4, jump-end) /\* Or steps(4, end) \*/
steps(5, jump-none)
steps(3, jump-both)
```

![「入力の進行」と「出力の進行」のグラフで、"steps(2, jump-start)" は、(0, 0.5) と (0.5, 1) からそれぞれ 0.5 単位で伸びる水平線を表示させ、原点と (0.5, 0.5) を中空点としています。"steps(4, jump-end)" は、それぞれ (0, 0)、(0.25, 0.25)、(0.5, 0.5)、(0.75, 0.75) から 0.25 単位で伸びる水平線を表示させ、(0.25, 0)、(0.5, 0.25)、(0.75, 0.5) に中空点があります。"steps(5, jump-none)" は、それぞれ (0, 0)、(0.2, 0.25)、(0.4, 0.5)、(0.6, 0.75)、(0.8, 1) から 0.2 単位で伸びる水平線を表示させ、(0.2, 0)、(0.4, 0.25)、(0.6, 0.5)、(0.8, 0.75) が中空点です。"steps(3, jump-both)" は、(0, 0.25)、(1/3, 0.5)、(2/3, 0.75) からそれぞれ 1/3 単位で伸びる水平線を示し、(1, 1) を点、(1/3, 0.25)、(2/3, 0.5)、(1, 0.75) を中空点とします。](/ja/docs/Web/CSS/easing-function/jump.svg)

`step-start` と `step-end` の各キーワードは、それぞれ特定の `steps()` の値を表します。

形式文法
----
```

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

```

例
-

### イージング関数の比較

この例では、提供されているボタンを使ってアニメーションを開始したり停止したりすることができ、メニューを選択してイージング関数を、利用可能なキーワードに加えていくつかの `cubic-bezier()` および `steps()` のオプションの中から選択することができるようになっています。オプションを選択した後、指定されたボタンを使用して、トランジションを始めたり、止めたりすることができます。

#### HTML

```html
<div>
  <div></div>
</div>
<ul>
  <li>
    <button class="animation-button">アニメーションを開始</button>
  </li>
  <li>
    <label for="easing-select">イージング関数を選択:</label>
    <select id="easing-select">
      <option selected>linear</option>
      <option>linear(0, 0.5 50%, 1)</option>
      <option>ease</option>
      <option>ease-in</option>
      <option>ease-in-out</option>
      <option>ease-out</option>
      <option>cubic-bezier(0.1, -0.6, 0.2, 0)</option>
      <option>cubic-bezier(0, 1.1, 0.8, 4)</option>
      <option>steps(5, end)</option>
      <option>steps(3, start)</option>
      <option>steps(4)</option>
    </select>
  </li>
</ul>
```

#### CSS

```css
body > div {
  position: relative;
  height: 100px;
}

div > div {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: blue;
  background-image: radial-gradient(
    circle at 10px 10px,
    rgba(25, 255, 255, 0.8),
    rgba(25, 255, 255, 0.4)
  );
  border-radius: 50%;
  top: 25px;
  animation: 1.5s infinite alternate;
}

@keyframes move-right {
  from {
    left: 10%;
  }

  to {
    left: 90%;
  }
}

li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
```

#### JavaScript

```js
const selectElem = document.querySelector("select");
const startBtn = document.querySelector("button");
const divElem = document.querySelector("div > div");

startBtn.addEventListener("click", () => {
  if (startBtn.textContent === "アニメーションを開始") {
    divElem.style.animationName = "move-right";
    startBtn.textContent = "アニメーションを停止";
    divElem.style.animationTimingFunction = selectElem.value;
  } else {
    divElem.style.animationName = "unset";
    startBtn.textContent = "アニメーションを開始";
  }
});

selectElem.addEventListener("change", () => {
  divElem.style.animationTimingFunction = selectElem.value;
});
```

#### 結果

### cubic-bezier() 関数の使用

以下は CSS における正しい 3 次ベジェ曲線の使い方です。

```css
/\* 4 つの値が [0, 1] の範囲に含まれる、標準的なベジェ曲線 \*/
cubic-bezier(0.1, 0.7, 1.0, 0.1)

/\* <整数値> は <数量> でもあるので、<整数値> を用いても有効です。 \*/
cubic-bezier(0, 0, 1, 1)

/\* 横軸で負数を用いるのは有効であり、はずむ効果をもたらします。 \*/
cubic-bezier(0.1, -0.6, 0.2, 0)

/\* 横軸において 1.0 を超える値も有効です。 \*/
cubic-bezier(0, 1.1, 0.8, 4)
```

以下は 3 次ベジェ曲線の定義は不正です。

```css
/\* アニメーションさせるものは色ですが、
 ベジェ曲線に用いるのは割合の数値です。 \*/
cubic-bezier(0.1, red, 1.0, green)

/\* 定義域は [0, 1] の範囲であったり、曲線が時間の
関数でなかったりする場合です。 \*/
cubic-bezier(2.45, 0.6, 4, 0.1)

/\* 2 つの点を定義する必要があり、それらに既定値はありません。 \*/
cubic-bezier(0.3, 2.1)

/\* 縦座標は [0, 1] の範囲にある必要があり、
 さもないと曲線は関数になりません。 \*/
cubic-bezier(-1.9, 0.3, -0.2, 2.1)
```

### steps() 関数の使用

以下のタイミング関数は妥当です。

```css
/\* 5 段階あり、最後の段階は
 アニメーションの完了直前に発生します。 \*/
steps(5, end)

/\* 2 段階の階段で、最初の段階は
 アニメーションの開始時に発生します。 \*/
steps(2, start)

/\* 第 2 の引数は省略可能です。 \*/
steps(2)
```

**メモ:** アニメーションに複数の停止点がある場合、 `steps()` 関数で指定した手順がそれぞれの節に適用されます。したがって、3 つの区間と `steps(2)` を持つアニメーションは、区間ごとに 2 つずつ、合計で 6 つの段階を持つことになります。

以下のイージング関数は不正です。

```css
/\* 最初の引数は <integer> でなければならず、
 整数と同じ値であっても実数であってはいけません。 \*/
steps(2.0, jump-end)

/\* 段数は負の値であってはいけません。 \*/
steps(-3, start)

/\* 段数は少なくとも 1 つ必要です。 \*/
steps(0, jump-none)
```

仕様書
---

| Specification |
| --- |
| CSS Easing Functions Level 1 # easing-functions |

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

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

関連情報
----

* CSS アニメーション
* CSS トランジション
* cubic-bezier


CSS 関数記法 - CSS: カスケーディングスタイルシート

CSS 関数記法
========

**CSS 関数記法**は CSS 値の一種で、より複雑なデータ型を表現したり、特別なデータ処理や計算を呼び出したりすることができます。

構文
--

```css
selector {
  property: functional-notation([argument]? [, argument]!);
}
```

構文は、**関数表記の名前**から始まり、左括弧 `(` で始まります。次に記法の引数が続き、関数は閉じ括弧 `)` で終わります。

関数は CSS のプロパティ値と同様の形式で複数の引数を取ることができます。ホワイトスペースは許可されていますが、括弧内では省略可能です。関数表記によって、複数の引数がカンマで区切られていたり、空白を使用していたりします。

座標変換関数
------

これらの関数は、 CSS の `<transform-function>` データ型 が `transform` の値として使用される際に用いられます。

`matrix()`

二次元の同次変換行列を記述します。

`matrix3d()`

三次元の変換を 4 × 4 の同次行列で記述します。

`perspective()`

ユーザーと z=0 平面との間の距離を設定します。

`rotate()`

要素を二次元平面上で特定の点を中心に回転します。

`rotate3d()`

要素を三次元空間で特定の軸を中心に回転します。

`rotateX()`

要素を水平軸を中心に回転します。

`rotateY()`

要素を垂直軸を中心に回転します。

`rotateZ()`

要素を Z 軸を中心に回転します。

`scale()`

要素を二次元平面上で拡大または縮小します。

`scale3d()`

要素を三次元空間で拡大または縮小します。

`scaleX()`

要素を水平に拡大または縮小します。

`scaleY()`

要素を垂直に拡大または縮小します。

`scaleZ()`

要素を Z 軸方向に拡大または縮小します。

`skew()`

要素を二次元平面上で歪ませます。

`skewX()`

要素を水平方向に歪ませます。

`skewY()`

要素を垂直方向に歪ませます。

`translate()`

要素を二次元平面上で平行移動させます。

`translate3d()`

要素を三次元空間で平行移動させます。

`translateX()`

要素を水平方向に平行移動させます。

`translateY()`

要素を垂直方向に平行移動させます。

`translateZ()`

要素を Z 軸方向に平行移動させます。

数学関数
----

数学関数は、 CSS の数値を数式として記述することができるものです。

`calc()`

CSS の数値に対して基本的な算術演算を行うことができる数学関数です。

`clamp()`

最小値、中央値、最大値を取り、その中央値の計算を表す比較関数です。

`max()`

値のリストの最大値を表す比較関数です。

`min()`

値のリストの最小値を表す比較関数です。

`abs()` (en-US)
Experimental

計算結果を受け取り、絶対値を返します。

`acos()`
Experimental

An inverse trigonometric function the angle returned must be normalized to the range [0deg, 180deg];.

`asin()`
Experimental

An inverse trigonometric function the angle returned must be normalized to the range [-90deg, 90deg].

`atan()`
Experimental

An inverse trigonometric function the angle returned must be normalized to the range [-90deg, 90deg].

`atan2()`
Experimental

Contains two comma-separated calculations, A and B. A and B can resolve to any `<number>`, `<dimension>`, or `<percentage>`, but must have the same type, or else the function is invalid.

`cos()`
Experimental

Contains a single calculation which must resolve to either a `<number>` or an `<angle>`.

`exp()`
Experimental

Contains one calculation which must resolve to a `<number>`, and returns the same value as pow(e, A) as a `<number>`.

`hypot()`
Experimental

Contains one or more comma-separated calculations, and returns the length of an N-dimensional vector with components equal to each of the calculations.

`log()`
Experimental

Contains one or two calculations (representing the value to be logarithmed, and the base of the logarithm, defaulting to e), which must both resolve as a `<number>`, and returns the logarithm base B of the value A, as a `<number>`.

`mod()`
Experimental

A modulus function that contains two calculations A and B, and returns the difference between A and the nearest integer multiple of B either above or below A.

`pow()`
Experimental

Contains two comma-separated calculations A and B, both of which must resolve as a `<number>`, and returns the result of raising A to the power of B, returning the value as a `<number>`.

`rem()`
Experimental

A modulus function that contains two calculations A and B, and returns the difference between A and the nearest integer multiple of B either above or below A.

`round()`
Experimental

Contains an optional rounding strategy, and two calculations A and B, and returns the value of A, rounded according to the rounding strategy, to the nearest integer multiple of B either above or below A.

`sign()` (en-US)
Experimental

計算結果を取り、数値が負であれば -1 を返し、数値が正であれば +1 を返し、数値が 0⁺ であれば 0⁺ を返し、数値が 0⁻ であれば 0⁻ を返します。

`sin()`
Experimental

Contains a single calculation which must resolve to either a `<number>` or an `<angle>`.

`sqrt()`
Experimental

Contains a single calculation which must resolve to a `<number>`, and returns the square root of the value as a `<number>`.

`tan()`
Experimental

Contains a single calculation which must resolve to either a `<number>` or an `<angle>`.

フィルター関数
-------

**`<filter-function>`** は CSS のデータ型で、入力画像の外見を変更することができるグラフィック効果を表します。 `filter` および `backdrop-filter` プロパティで使用されます。

`blur()`

画像をぼかします。

`brightness()`

画像を明るくしたり暗くしたりします。

`contrast()`

画像のコントラストを上げたり下げたりします。

`drop-shadow()`

画像の背後にドロップシャドウを適用します。

`grayscale()`

画像をグレイスケールに変換します。

`hue-rotate()`

画像の色相を全体的に変更します。

`invert()`

画像の色を反転させます。

`opacity()`

画像を半透明にします。

`saturate()`

入力画像の彩度を上げたり下げたりします。

`sepia()`

画像をセピア調に変換します。

色関数
---

様々な色の表現を指定する関数です。 `<color>` が有効な場所であればどこでも使用できます。

`color()` (en-US)
Experimental

（他のほとんどの色関数が操作する暗黙の sRGB 色空間ではなく）特定の指定された色空間で色を指定できるようにします。

`color-mix()` (en-US)
Experimental

2 つの `color` 値を受け取り、それらを指定された色空間で与えられた量だけ混合した結果を返します。

`color-contrast()` (en-US)
Experimental

`color` 値を受け取り、他の `color` 値のリストと比較し、リストの中から最もコントラストの強いものを選択します。

`device-cmyk()` (en-US)
Experimental

CMYK 色をデバイスに依存しない方法で表現するために使用します。

`hsl()` (en-US)

HSL カラーモデルは、色相、彩度、明度の各成分によって色を定義します。オプションのアルファ成分は、色の透明度を表します。

`hsla()` (en-US)

HSL カラーモデルは、色相、彩度、明度の各成分によって色を定義します。オプションのアルファ成分は、色の透明度を表します。

`hwb()` (en-US)
Experimental

HWB (Hue-Whiteness-Blackness の略) も HSL と同様に色を指定する方法の一つです。

`lab()` (en-US)
Experimental

Lab カラーはデバイスに依存せず、色の物理的な測定値を規定するものです。

`lch()` (en-US)
Experimental

LCH カラーはデバイスに依存せず、彩度と色相の極座標で色を指定します。

`rgb()` (en-US)

RGB カラーモデルは、赤、緑、青の 3 つの成分によって色を定義します。オプションのアルファ成分は、色の透明度を表します。

`rgba()` (en-US)

RGB カラーモデルは、赤、緑、青の 3 つの成分によって色を定義します。アルファ成分は、色の透明度を表します。

画像関数
----

これらの関数は、プロパティの値として `<image>` が有効な場所ならばどこでも使用できます。

`conic-gradient()`

扇形グラデーションは、円を描くように徐々に色を変化させます。

`image()`
Experimental

`<image>` を `url()` 関数と同様の方法で定義しますが、画像の方向の指定、優先画像に対応していない場合の代替画像の指定などの機能を追加しています。

`image-set()`
Experimental

主に高ピクセル密度の画面のために、与えられたセットの中から最も適切な CSS 画像をブラウザーに選択させる方法です。

`linear-gradient()`

線形グラデーションは、想像上の線に沿って徐々に色を変化させます。

`radial-gradient()`

放射グラデーションは、中心点（原点）から徐々に色を変化させていきます。

`repeating-linear-gradiant()`

`linear-gradient()` に似ていて、同じ引数を取りますが、コンテナー全体を覆うように、すべての方向に無限に色停止点を繰り返します。

`repeating-radial-gradient()`

`radial-gradient()` に似ていて、同じ引数を取りますが、コンテナー全体を覆うように、すべての方向に無限に色停止点を繰り返します。

`repeat-conic-gradiant()`

`conic-gradient()` に似ていて、同じ引数を取りますが、コンテナー全体を覆うように、すべての方向に無限に色停止点を繰り返します。

`cross-fade()`

2 枚以上の画像を所定の透過度で合成するために使用することができます。

`element()`

任意の HTML 要素から生成された <image> 値を定義します。

`paint()`

PaintWorklet で生成された <image> の値を定義します。

カウンター関数
-------

カウンター関数は一般に `content` プロパティと共に使われますが、理論的には `<string>` に対応しているところならば使用することができます。

`counter()`

その名前のカウンターが存在すれば、現在の値を示す文字列を返します。

`counters()`

入れ子のカウンターを有効にし、指定されたカウンターが存在すれば、その現在の値を表す文字列を連結して返します。

`symbols()`

カウンターのスタイルをインラインで、直接定義することができます。

フォント関数
------

`font-variant-alternates` プロパティは代替字形の使用を制御し、以下の関数がこのプロパティの値になります。

`stylistic()`

This function enables stylistic alternates for individual characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value `salt`, like `salt 2`.

`styleset()`

This function enables stylistic alternatives for sets of characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value `ssXY`, like `ss02`.

`character-variant()`

This function enables specific stylistic alternatives for characters. It is similar to `styleset()`, but doesn't create coherent glyphs for a set of characters; individual characters will have independent and not necessarily coherent styles. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value `cvXY`, like `cv02`.

`swash()`

This function enables swash glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType values `swsh` and `cswh`, like `swsh 2` and `cswh 2`.

`ornaments()`

This function enables ornaments, like fleurons and other dingbat glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value `ornm`, like `ornm 2`.

`annotation()`

This function enables annotations, like circled digits or inverted characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value `nalt`, like `nalt 2`.

シェイプ関数
------

以下の関数は `<basic-shape>` データ型の値として使用することができます。これは `clip-path`, `offset-path`, `shape-outside` の各プロパティで使用されます。

`circle()`

円を定義します。

`ellipse()`

楕円を定義します。

`inset()`

内部の長方形を定義します。

`polygon()`

多角形を定義します。

`path()` (en-US)

SVG パス文字列を受け取り、シェイプを描画できるようにするために使用されます。

参照関数
----

以下の関数は、他の場所で定義された値をプロパティの値として参照するために使用されます。

`attr()`

選択された要素の属性の値を受け取り、スタイルシートの中で使うために使用されます。

`env()`

ユーザーエージェントが定義した環境変数の値を CSS に挿入するために使用することができます。

`url()`

値としてファイルを含めるために使用します。

`var()`

他のプロパティの値の一部に代わってカスタムプロパティの値を挿入できます。

CSS グリッド関数
----------

以下の関数は、CSS グリッドを定義するために使用されます。

`fit-content()`

指定された寸法を `min(max-content, max(min-content, 引数))` の式に従って有効な範囲の寸法に収めます。

`minmax()`

指定された寸法を `min(max-content, max(min-content, 引数))` の式に従って有効な範囲の寸法に収めます。

`repeat()`

指定された寸法を `min(max-content, max(min-content, 引数))` の式に従って有効な範囲の寸法に収めます。

仕様書
---

{{Specifications}}関連情報
----

* CSS 値と単位
* CSS 入門: 値と単位


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

<hex-color>
===========

**`<hex-color>`** は CSS のデータ型で、sRGB 色の原色成分（赤、緑、青）を 16 進数で記述し、その透明度も記述する記法です。

`<hex-color>` 値は、 `<color>` が使用できるところならどこでも使用することができます。

構文
--
```

#RGB        // 値 3 つの構文
#RGBA       // 値 4 つの構文
#RRGGBB     // 値 6 つの構文
#RRGGBBAA   // 値 8 つの構文
```

### 値

`R` または `RR`

色の赤の成分であり、`0` から `ff` (255) までの間の 16 進数で、大文字小文字を区別しません。数値が 1 つだけの場合は `1` が `11` になるように複製されます。

`G` または `GG`

色の緑の成分であり、`0` から `ff` (255) までの間の 16 進数で、大文字小文字を区別しません。数値が 1 つだけの場合は `c` が `cc` になるように複製されます。

`B` または `BB`

色の青の成分であり、`0` から `ff` (255) までの間の 16 進数で、大文字小文字を区別しません。数値が 1 つだけの場合は `9` が `99` になるように複製されます。

`A` または `AA` 省略可

色のアルファ成分であり、`0` から `ff` (255) までの間の 16 進数で、大文字小文字を区別しません。数値が 1 つだけの場合は `e` が `ee` になるように複製されます。 `0` または `00` は完全に透明な色で、 `f` または `ff` は完全に不透明な色です。

**メモ:** 構文は大文字小文字の区別がなく、 `#00ff00` は `#00FF00` と同じです。

例
-

### 完全に不透明なホットピンクの 16 進構文

#### HTML

```html
<span>
  #f09
  <div class="c1"></div>
</span>
<span>
  #F09
  <div class="c2"></div>
</span>
<span>
  #ff0099
  <div class="c3"></div>
</span>
<span>
  #FF0099
  <div class="c4"></div>
</span>
```

#### CSS
```

body {
  display: flex;
  justify-content: space-evenly;
}
```

```css
div {
  width: 40px;
  height: 40px;
}
.c1 {
  background: #f09;
}
.c2 {
  background: #f09;
}
.c3 {
  background: #ff0099;
}
.c4 {
  background: #ff0099;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4 # hex-notation |

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

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

関連情報
----

* `<color>`: 色のデータ型
* `rgb()`: 色の 3 成分および透明度を 10 進数で使用するように設定する関数
* CSS 色モジュール


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

text-align-last
===============

**`text-align-last`** は CSS のプロパティで、ブロックの最後の行、あるいは強制的な改行の直前の行をどのように配置するかを設定します。

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

構文
--

```css
/\* キーワード値 \*/
text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;

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

### 値

`auto`

`text-align` の値と同じ方向に配置されます。ただし `text-align` が `justify` である場合は、`text-align-last` に `start` を設定した場合と同じ効果になります。

`start`

書字方向が左書きであれば `left`、右書きであれば `right` と同じです。

`end`

書字方向が左書きであれば `right`、右書きであれば `left` と同じです。

`left`

インラインコンテンツが行ボックスの左端に配置されます。

`right`

インラインコンテンツが行ボックスの右端に配置されます。

`center`

インラインコンテンツが行ボックスの中央に配置されます。

`justify`

テキストは両端揃えになります。テキストは段落の左端から右端までに配置されます。

公式定義
----

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

形式文法
----
```

text-align-last =
  auto          |
  start         |
  end           |
  left          |
  right         |
  center        |
  justify       |
  match-parent

```

例
-

### 最後の行を中央揃えにする
```

<p>
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
```

#### CSS

```css
p {
  font-size: 1.4em;
  text-align: justify;
  text-align-last: center;
}
```

#### 結果s

仕様書
---

| Specification |
| --- |
| CSS Text Module Level 3 # text-align-last-property |

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

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

関連情報
----

* `text-align`


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

border
======

**`border`** は CSS の 一括指定プロパティで、要素の境界を設定します。これは `border-width`, `border-style`, `border-color` の値を設定します。

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

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

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

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

```css
/\* 種類 \*/
border: solid;

/\* 幅 | 種類 \*/
border: 2px dotted;

/\* 種類 | 色 \*/
border: outset #f33;

/\* 幅 | 種類 | 色 \*/
border: medium dashed green;

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

`border` プロパティは、以下に挙げる値の 1 ～ 3 つを使用して指定します。値の順序は関係ありません。

**メモ:** style が指定されていない場合は境界線は表示されません。 style の既定値が `none` だからです。

### 値

`<line-width>`

境界線の太さを設定します。指定されなかった場合は既定値の `medium` になります。 `border-width` を参照してください。

`<line-style>`

境界線の種類を設定します。指定されなかった場合は既定値の `none` になります。 `border-style` を参照してください。

`<color>`

境界線の色を設定します。指定されなかった場合は既定値で要素の `color` プロパティになります。 `border-color` を参照してください。

解説
--

他の一括指定プロパティと同様、省略された部分値は初期値に設定されます。重要なことですが、 `border` は `border-image` のカスタム値を指定することができず、初期値、つまり `none` に設定します。

`border` による一括指定は、四辺をすべて同じに設定したい場合に特に便利です。しかし、それぞれが異なる場合は、それぞれの辺に異なる値を設定できる個別指定の `border-width`、 `border-style`、 `border-color` プロパティを使用してください。他に、一度に一つの境界線を対象とした、物理的 (`border-top` など) や論理的 (`border-block-start` など) な境界線プロパティを使用することもできます。

### 境界線と輪郭線

境界線と輪郭線はよく似ています。しかし、輪郭線は以下の点で境界線とは異なります。

* 輪郭線は領域を占有せず、要素のコンテンツの外側に描画されます。
* 輪郭線は普通は矩形ですが、仕様によれば、矩形である必要はありません。
公式定義
----

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

形式文法
----
```

border =
  <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>I have a border, an outline, and a box shadow! Amazing, isn't it?</div>
```

#### CSS

```css
div {
  border: 0.5rem outset pink;
  outline: 0.5rem solid khaki;
  box-shadow: 0 0 0 2rem skyblue;
  border-radius: 12px;
  font: bold 1rem sans-serif;
  margin: 2rem;
  padding: 1rem;
  outline-offset: 0.5rem;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* `border-width`
* `border-style`
* `border-color`
* 背景と境界
* CSS の学習: 背景と境界


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

:blank
======

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

**メモ:** セレクターは、CSSWG が変更を続けているため、使用するリスクを考慮する必要があります。

CSSWG issue #1967 を参照してください。

**`:blank`** は CSS の擬似クラスで、空のユーザー入力要素 (例えば `<input>` や `<textarea>`) を選択します。

構文
--
```

:blank
```

例
-

### 単純な :blank の例

最終的に対応しているブラウザーでは、 `:blank` 擬似クラスを使用することで、開発者は、必須ではないが、まだ何も記入されていない入力コントロールを、何らかの方法で強調表示することができるようになります。

#### HTML

```html
<textarea></textarea>
```

#### CSS

```css
textarea:blank {
  border: 3px solid red;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* `:empty`


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

text-emphasis-position
======================

**`text-emphasis-position`** は CSS のプロパティで、圏点が描かれる位置を設定します。ルビのテキストと同様、圏点のために十分な空間がない場合は、行の高さが広げられます。

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

構文
--

```css
/\* 初期値 \*/
text-emphasis-position: over right;

/\* キーワード値 \*/
text-emphasis-position: over left;
text-emphasis-position: under right;
text-emphasis-position: under left;

text-emphasis-position: left over;
text-emphasis-position: right under;
text-emphasis-position: left under;

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

### 値

`over`

横書きモードでテキストの上に圏点を描きます。

`under`

横書きモードでテキストの下に圏点を描きます。

`right`

縦書きモードでテキストの右に圏点を描きます。

`left`

縦書きモードでテキストの左に圏点を描きます。

解説
--

圏点の望ましい位置は言語に依存します。例えば日本語では、望ましい位置は `over right` です。一方、中国語では、望ましい位置は `under right` となります。下記の情報の表は、日本語、モンゴル語、中国語における望ましい圏点の位置をまとめたものです。

望ましい圏点とルビの位置| 言語 | 望ましい位置 | 図 |
| --- | --- | --- |
| 横書き | 縦書き |
| 日本語 | over | right | 日本語の横書きテキストでは、圏点は強調される各文字の上に表示されます。 | 日本語の縦書きテキストでは、圏点が強調される各文字の右に表示されます。 |
| 韓国語 |
| モンゴル語 |
| 中国語 | under | right | 中国語簡体字の横書きテキストでは、圏点は強調される各文字の下に表示されます。 |

**メモ:** `text-emphasis` 一括指定プロパティを使用して、 `text-emphasis-position` を設定することはできず、また初期化されることもありません。

公式定義
----

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

形式文法
----
```

text-emphasis-position =
  [ over | under ]   &&
  [ right | left ]?

```

例
-

### ルビを圏点より優先させる場合

編集者によっては、ルビと競合する場合に圏点を隠すことを好みます。 HTML では、これは次のスタイル規則で実現できます。

```css
ruby {
  text-emphasis: none;
}
```

### 圏点よりルビを優先させる場合

編集者によっては、圏点と競合する場合にルビを隠すことを好みます。 HTML では、これは次のパターンで実現できます。

```css
em {
  text-emphasis: dot; /\* text-emphasis を <em> 要素に設定 \*/
}

em rt {
  display: none; /\* <em> 要素内のルビを隠す \*/
}
```

仕様書
---

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-emphasis-position-property |

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

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

関連情報
----

* 個別指定プロパティ `text-emphasis-style`, `text-emphasis-color` および対応する一括指定プロパティ `text-emphasis`


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

<length>
========

**`<length>`** は CSS のデータ型で、長さの値を表します。長さは `width`、`height`、`margin`、`padding`、`border-width`、`font-size`、`text-shadow` など数多くの CSS プロパティで使用されています。

**メモ:** `<percentage>` 値も `<length>` 値を受け付ける同じプロパティの一部でも使用することができますが、 `<length>` 値と同じものではありません。 `<length-percentage>` を参照してください。

構文
--

`<length>` データ型は一つの `<number>` とそれに続く以下に挙げる単位の一つから成ります。単位と数値の間に空白は置きません。数値 `0` の後の単位は省略可能です。

**メモ:** 負の `<length>` を許容するプロパティとそうでないプロパティがあります。

### 単位

#### 相対的な長さの単位

相対的な長さとは、他の長さに従って長さを指定することです。単位によって、これは特定の文字の寸法であったり、行の高さであったり、ビューポートの寸法であったりします。

##### フォントの相対長

フォントの相対長では、 `<length>` の値を、要素やその親で現在使われているフォントにおける、特定の文字やフォント属性の寸法で定義します。

**メモ:** これらの単位、特に `em` と `rem` は、ユーザーがフォントサイズを変更してもページの縦方向のリズムを維持する、スケーラブルなレイアウトを作るためによく使われます。

`cap`
Experimental

その要素の `font` における "cap height" (ふつうの大文字の高さ) を表します。

`ch`

その要素の `font` における "0" (ゼロ、Unicode 文字 U+0030) の幅、より正確に言えば advance measure です。

"0" の文字の大きさを判断することが不可能または無意味である場合、幅が 0.5em、高さが 1em と仮定します。

`em`

その要素の `font-size` の計算値を表します。`font-size` プロパティ自身に使われた場合は、要素に*継承された*フォントの大きさを表します。

`ex`

その要素の `font` における x-height です。 'x' の文字を持つフォントでは一般的に、フォントにおける小文字の高さに相当します。多くのフォントでは `1ex ≈ 0.5em` です。

`ic`
Experimental

描画に使用されるフォントにおける「水」 (CJK water ideograph, U+6C34) の文字の advance measure と同じです。

`lh`
Experimental

使用されている要素の `line-height` プロパティの計算値と同じで、絶対的な長さに変換されます。

`rem`

ルート要素 (ふつうは `<html>`) の `font-size` を表します。ルート要素の `font-size` で使うと初期値を表します (多くのブラウザーでは既定値は `16px` ですが、ユーザー設定によって変わる可能性があります)。

`rlh`
Experimental

ルート要素 (ふつうは `<html>`) の `line-height` プロパティの計算値と同じで、絶対的な長さに変換されます。ルート要素の `font-size` または `line-height` プロパティに使われた場合は、プロパティの初期値になります。

##### ビューポートのパーセント値による寸法

ビューポートのパーセント値による寸法は、ビューポート、つまり文書の見える範囲の寸法に対する相対的な `<length>` 値を定義します。ビューポートの寸法は `@page` で宣言されたブロックでは無効です。

`vh`

ビューポートの初期値の包含ブロックにおける高さの 1% と同じです。

`vw`

ビューポートの初期値の包含ブロックにおける幅の 1% と同じです。

`vi`
Experimental

初期値の包含ブロックにおける、ルート要素のインライン軸の寸法の 1% と同じです。

`vb`
Experimental

初期値の包含ブロックにおける、ルート要素のブロック軸の寸法の 1% と同じです。

`vmin`

`vw` と `vh` の小さい方です。

`vmax`

`vw` と `vh` の大きい方です。

#### 絶対的な長さの単位

絶対的な長さの単位は、出力メディアの物理的な特性が分かっている場合 (印刷レイアウトなど) に物理的な長さを表します。これはある単位を物理的な単位に固定してから、これを基準に他の単位を定義します。固定する単位は画面のような低解像度の端末か、あるいはプリンターのような高解像度の端末かによって異なります。

低解像度の端末では、`px` の単位が物理的な*参照ピクセル*を表し、その他の単位はこれを基準に定義されます。例えば `1in` は `96px` と定義され、これは `72pt` と等しくなります。このような端末では結果的に、インチ (`in`)、センチメートル (`cm`)、ミリメートル (`mm`) といった単位で表される長さは、同名の物理的な単位と同じ長さになるとは限りません。

高解像度の端末では、インチ (`in`)、センチメートル (`cm`)、ミリメートル (`mm`) は対応する物理的な単位と同じになります。従って、 `px` の単位は、それ (1 インチの 1/96) を基準に定義されます。

**メモ:** たくさんのユーザーが、テキストが読みやすくなるようユーザーエージェントの既定のフォントの大きさを拡大しています。絶対的な長さで指定すると、大きさが固定され、ユーザー設定によって拡大しなくなるため、アクセシビリティ上の問題が発生します。この理由から、 `font-size` を設定する場合には、 (`em` や `rem` のような) 相対的な単位が適しています。

`px`

1 ピクセルです。画面表示では、伝統的に端末の 1 ピクセル (ドット) を表します。しかし、*プリンター*や*高解像度の画面*では、 CSS の 1 ピクセルが端末の複数ピクセルになることがあります。 `1px` = `1in` の 1/96 です。

`cm`

1センチメートルです。 `1cm` = `96px/2.54` です。

`mm`

1ミリメートルです。 `1mm` = `1cm` の1/10です。

`Q`
Experimental

1/4ミリメートルです。 `1Q` = `1cm` の1/40です。

`in`

1インチです。 `1in` = `2.54cm` = `96px` です。

`pc`

1パイカです。 `1pc` = `12pt` = `1in` の1/6です。

`pt`

1ポイントです。 `1pt` = `1in` の1/72です。

補間
--

アニメーションの場合、 `<length>` データ型の値は浮動小数点の実数として補間されます。補間は計算値に対して行われます。補間の速度は、アニメーションに関連付けられたタイミング関数によって定められます。

例
-

### 長さの単位の比較

以下のデモでは、入力欄に `<length>` の値 (例えば `300px`, `50%`, `30vw`) を入力することができ、 `Return` を押したときにバーの長さが反映されます。

これにより、様々な長さの単位の効果を比較し対照させることができます。

#### HTML

```html
<div class="outer">
  <div class="input-container">
    <label>長さを入力してください:</label>
    <input type="text" id="length" />
  </div>
  <div class="inner"></div>
</div>
<div class="results"></div>
```

#### CSS

```css
html {
  font-family: sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}

.outer {
  width: 100%;
  height: 50px;
  background-color: #eee;
  position: relative;
}

.inner {
  height: 50px;
  background-color: #999;
  box-shadow:
    inset 3px 3px 5px rgba(255, 255, 255, 0.5),
    inset -3px -3px 5px rgba(0, 0, 0, 0.5);
}

.result {
  height: 20px;
  background-color: #999;
  box-shadow:
    inset 3px 3px 5px rgba(255, 255, 255, 0.5),
    inset -3px -3px 5px rgba(0, 0, 0, 0.5);
  background-color: orange;
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.result code {
  position: absolute;
  margin-left: 20px;
}

.results {
  margin-top: 10px;
}

.input-container {
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 50px;
}

label {
  margin: 0 10px 0 20px;
}
```

#### JavaScript

```js
const inputDiv = document.querySelector(".inner");
const inputElem = document.querySelector("input");
const resultsDiv = document.querySelector(".results");

inputElem.addEventListener("change", () => {
  inputDiv.style.width = inputElem.value;

  const result = document.createElement("div");
  result.className = "result";
  result.style.width = inputElem.value;
  result.innerHTML = `<code>width: ${inputElem.value}</code>`;
  resultsDiv.appendChild(result);

  inputElem.value = "";
  inputElem.focus();
});
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* CSS 値と単位チュートリアル
* CSS 値と単位リファレンス
* ボックスモデル


擬似クラス - CSS: カスケーディングスタイルシート

擬似クラス
=====

CSS の**擬似クラス** (*pseudo-classes*) は、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。例えば、擬似クラス `:hover` を使用すると、ユーザーのポインターがボタンの上に乗ったときにボタンを選択し、この選択されたボタンをスタイル設定することができます。

```css
/\* ユーザーのポインターが乗っているすべてのボタン \*/
button:hover {
  color: blue;
}
```

擬似クラスはコロン (`:`) の後に擬似クラス名が続きます（例えば `:hover`）。関数形式の擬似クラスは、引数を定義するために括弧のペアも持ちます（例えば `:dir()`）。擬似クラスが装着されている要素（例えば `button:hover` の場合は `button`）はアンカー要素として定義されます。

擬似クラスにより、文書ツリーのコンテンツに関するものだけでなく、閲覧履歴（例えば `:visited`）、内容物の状態（例えばフォーム要素における `:checked`）、マウスポインターの位置（例えばマウスポインターが要素上にあるかを知ることができる `:hover`）といった外的要因との関係についてスタイルを適用することができるようになります。

**メモ:** 擬似クラスとは対照的に、擬似要素は要素の*特定の部分*にスタイルを適用するために使います。

表示状態擬似クラス
---------

これらの擬似クラスにより、表示状態に基づいて要素を選択することができます。

`:fullscreen`

現在全画面モードの要素に一致します。

`:modal` (en-US)

操作が終了するまで、その外の要素への操作をすべて排除する状態にある要素に一致します。

`:picture-in-picture`

現在ピクチャインピクチャモードの要素に一致します。

入力擬似クラス
-------

これらの擬似クラスはフォーム要素に関連し、 HTML 属性を操作する前後のフィールドの状態に基づいて要素を選択できるようにします。

`:autofill`

`<input>` をブラウザーが自動補完した場合に一致します。

`:enabled`

ユーザーインターフェイス要素が有効な状態であることを表します。

`:disabled`

ユーザーインターフェイス要素が無効な状態であることを表します。

`:read-only`

ユーザーが変更できない要素を表します。

`:read-write`

ユーザーが編集することができる要素を表します。

`:placeholder-shown`

プレイスホルダーテキスト、例えば `placeholder` 属性のものが表示されている`<input>` および `<textarea>` 要素に一致します。

`:default`

一連の要素のうち、1 つ以上の既定の UI 要素に一致します。

`:checked`

チェックボックスやラジオボタンなどがオンになっている要素に一致します。

`:indeterminate`

UI 要素が不定状態になっている場合に一致します。

`:blank`

ユーザーが入力する要素が空である場合に一致します。空文字列が入っているか、その他の空入力であることを表します。

`:valid`

内容が妥当である要素に一致します。例えば、 'email' 型の入力要素で、有効なフォームのメールアドレスを格納したもの、またはコントロールが必須ではない場合は空の値を格納したものです。

`:invalid`

無効な内容を持つ要素に一致します。例えば、'email' 型の入力要素に名前が入力されている場合です。

`:in-range`

スライダーコントロールなどの範囲制限のある要素で、選択した値が許容範囲内にある場合に適用されます。

`:out-of-range`

スライダーコントロールなどの範囲制限のある要素で、選択した値が許容範囲外の場合に適用されます。

`:required`

フォーム要素が必須項目である場合に一致します。

`:optional`

フォーム要素が省略可能である場合に一致します。

`:user-invalid`

不正確な値が入力されている要素を表します。ただし、ユーザーがその要素を操作した場合のみです。

言語擬似クラス
-------

これらの擬似クラスは、文書の言語を反映し、言語や書字方向に基づいた要素を選択できるようにします。

`:dir()`

書字方向擬似クラスは、文書の言語によって決定される書字方向に基づいて要素を選択します。

`:lang()`

内容物の言語に基づいて要素を選択します。

位置擬似クラス
-------

これらの擬似クラスは、リンクと、現在の文書内の対象となる要素に関連しています。

`:any-link`

要素が `:link` または `:visited` のいずれかに一致する場合に一致します。

`:link`

まだ訪問していないリンクに一致します。

`:visited`

訪問したことのあるリンクに一致します。

`:local-link` (en-US)

絶対 URL が対象 URL と同じリンク、例えば同じページへのアンカーリンクである場合に一致します。

`:target`

文書の URL の対象である要素に一致します。

`:target-within` (en-US)

文書の URL の対象である要素だけでなく、文書 URL の対象である子孫を持つ要素にも一致します。

`:scope`

セレクターを照合するための参照点となる要素を表します。

リソース状態擬似クラス
-----------

これらの擬似クラスは、動画など再生と表現できる状態にあるメディアに適用されます。

`:playing`

その要素が再生可能なメディア要素であり、再生中であることを表します。

`:paused`

その要素が再生可能なメディア要素であり、一時停止中であることを表します。

時間軸擬似クラス
--------

これらの擬似クラスは、 WebVTT キャプショントラックのようなタイミングを持つものを閲覧する際に適用されるものです。

`:current` (en-US)

表示されている要素またはその祖先を表します。

`:past` (en-US)

完全に `:current` (en-US) 要素の前に発生する要素を表します。

`:future` (en-US)

完全に `:current` (en-US) 要素の後に発生する要素を表します。

ツリー構造擬似クラス
----------

これらの擬似クラスは、文書ツリー内の要素の位置に関するものです。

`:root`

文書のルートである要素を表します。 HTML では、ふつうは `<html>` 要素です。

`:empty`

ホワイトスペース文字以外に子がない要素を表します。

`:nth-child`

`An+B` の表記を用いて、兄弟要素のリストから要素を選択します。

`:nth-last-child`

`An+B` の表記を用いて、兄弟要素のリストから、リストの末尾から逆方向に数えて要素を選択します。

`:first-child`

兄弟のうちの最初の要素に一致します。

`:last-child`

兄弟のうちの最後の要素に一致します。

`:only-child`

要素に兄弟がいない場合に一致します。例えば、リスト内に他のリスト項目が存在しないリスト項目が該当します。

`:nth-of-type`

`An+B` の表記を用いて、兄弟要素のリストから、特定の型に一致する要素を選択します。

`:nth-last-of-type`

`An+B` の表記を用いて、兄弟要素のリストから、リストの末尾から逆方向に数えて特定の型に一致する要素を選択します。

`:first-of-type`

兄弟のうちの最初の特定の型に一致する要素に一致します。

`:last-of-type`

兄弟のうちの最後の特定の型に一致する要素に一致します。

`:only-of-type`

指定された型セレクターで兄弟要素がない要素に一致します。

ユーザー操作擬似クラス
-----------

これらの擬似クラスは、マウスポインターを要素にかざすなど、ユーザーによる何らかの操作を必要とするものです。

`:hover`

ユーザーがポインティングデバイスでアイテムを指した場合（例えば、マウスポインターをその項目にかざした場合）に一致します。

`:active`

アイテムがクリックされるなど、ユーザーによってアクティブになっているときに一致します。

`:focus`

要素にフォーカスがあるときに一致します。

`:focus-visible`

要素にフォーカスがあり、ユーザーエージェントがその要素のフォーカスを可視化する必要があると判断した場合に一致します。

`:focus-within`

`:focus` が適用される要素に加え、 `:focus` が適用される子孫要素を持つ要素にも一致します。

関数擬似クラス
-------

セレクターリストまたは寛容なセレクターリストを引数として受け取る擬似クラスです。

`:is()`

matches-any 擬似クラスは、指定されたリストのセレクターのどれかに一致する要素に一致します。リストは寛容です。

`:not()`

否定 (matches-none) 擬似クラスは、引数で表されない要素を表します。

`:where()`

詳細度を調整する擬似クラスは、指定されたリストのセレクターのいずれかに一致する要素であれば、詳細度の重みを追加することなく照合します。リストは寛容です。

`:has()`

関係擬似クラスは、付属の要素に対してアンカーを付けたときに、相対セレクターのどれかが一致する場合に要素を表します。

構文
--

```css
selector:pseudo-class {
  property: value;
}
```

通常のクラスと同様に、セレクターの中で好きなだけ擬似クラスを連結することができます。

アルファベット順の索引
-----------

CSS の一連の仕様書で定義されている擬似クラスには、以下のようなものがあります。

A

* `:active`
* `:any-link`
* `:autofill`

B

* `:blank`
Experimental

C

* `:checked`
* `:current` (en-US)
Experimental

D

* `:default`
* `:defined`
* `:dir()`
Experimental
* `:disabled`

E

* `:empty`
* `:enabled`

F

* `:first`
* `:first-child`
* `:first-of-type`
* `:fullscreen`
* `:future` (en-US)
Experimental
* `:focus`
* `:focus-visible`
* `:focus-within`

H

* `:has()`
Experimental
* `:host`
* `:host()`
* `:host-context()` (en-US)
Experimental
* `:hover`

I

* `:indeterminate`
* `:in-range`
* `:invalid`
* `:is()`

L

* `:lang()`
* `:last-child`
* `:last-of-type`
* `:left`
* `:link`
* `:local-link` (en-US)
Experimental

M

* `:modal` (en-US)

N

* `:not()`
* `:nth-child()`
* `:nth-col()` (en-US)
Experimental
* `:nth-last-child()`
* `:nth-last-col()` (en-US)
Experimental
* `:nth-last-of-type()`
* `:nth-of-type()`

O

* `:only-child`
* `:only-of-type`
* `:optional`
* `:out-of-range`

P

* `:past` (en-US)
Experimental
* `:picture-in-picture`
* `:placeholder-shown`
* `:paused`
* `:playing`

R

* `:read-only`
* `:read-write`
* `:required`
* `:right`
* `:root`

S

* `:scope`
* `:state()`
Experimental

T

* `:target`
* `:target-within` (en-US)
Experimental

U

* `:user-invalid`
Experimental

V

* `:valid`
* `:visited`

W

* `:where()`
仕様書
---

| Specification |
| --- |
| HTML Standard # pseudo-classes |
| Selectors Level 4  |
| CSS Basic User Interface Module Level 4  |

関連情報
----

* 擬似要素


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

:host()
=======

**`:host()`** は CSS の擬似クラス関数で、その中で使われている CSS を含むシャドウ DOM のシャドウホストを選択します（従ってカスタム要素をそのシャドウ DOM 内部から選択できます）。ただし、関数の引数として与えられたセレクターがシャドウホストと一致した場合のみです。

この最も明白な使用法は、特定のカスタム要素インスタンスにのみクラス名を付け、関数の引数として関連するクラスセレクターを指定することです。特定の祖先の内部にあるカスタム要素のインスタンスのみを選択するために、子孫セレクター式でこれを使用することはできません。それは `:host-context()` の仕事です。

**メモ:** これは、シャドウ DOM の外部で使用されても効果がありません。

```css
/\* セレクターの引数に一致する場合のみ、
 シャドウルートのホストを選択 \*/
:host(.special-custom-element) {
  font-weight: bold;
}
```

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

構文
--
```

:host( <compound-selector> )
```

例
-

### シャドウホストの選択的なスタイル付け

以下のスニペットは、 host-selectors example (ライブでも確認) から引用したものです。

この例では、テキストを囲むことができるシンプルなカスタム要素 `<context-span>` を用意しています。

```html
<h1>
  Host selectors <a href="#"><context-span>example</context-span></a>
</h1>
```

要素のコンストラクター内で `style` と `span` の各要素を作成し、 `span` にカスタム要素の内容を入れ、 `style` 要素にいくつかの CSS ルールを入れています。

```js
let style = document.createElement("style");
let span = document.createElement("span");
span.textContent = this.textContent;

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

style.textContent =
  "span:hover { text-decoration: underline; }" +
  ":host-context(h1) { font-style: italic; }" +
  ':host-context(h1):after { content: " - no links in headers!" }' +
  ":host-context(article, aside) { color: gray; }" +
  ":host(.footer) { color : red; }" +
  ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }";
```

ルール `:host(.footer) { color : red; }` は、文書内の `<context-span>` 要素（この例ではシャドウホスト）のインスタンスで `footer` クラスがあるものにスタイルを設定します。このルールを使って `<footer>` 内の要素のインスタンスに特殊な色を設定しています。

仕様書
---

| Specification |
| --- |
| CSS Scoping Module Level 1 # host-selector |

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

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

関連情報
----

* ウェブコンポーネント
* `:host`
* `:host-context()`


CSS 表示方法 - CSS: カスケーディングスタイルシート

CSS 表示方法
========

**CSS 表示方法** (CSS Display) は CSS のモジュールの一つで、 CSS の整形ボックスツリーがどのように文書の要素ツリーから生成されるかを定義し、制御するプロパティを定義します。

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

### CSS プロパティ

* `display`
### CSS データ型

* `<display-outside>`
* `<display-inside>`
* `<display-listitem>`
* `<display-box>`
* `<display-internal>`
* `<display-legacy>`
ガイド
---

* display の新しい 2 値構文への対応
### CSS フローレイアウト (`display: block`, `display: inline`)

* 通常フローでのブロックおよびインラインレイアウト
* フローレイアウトとオーバーフロー
* フローレイアウトと書字方向
* 整形コンテキストの紹介
* フロー内とフローの外
### `display: flex`

* フレックスボックスの基本概念
* フレックスコンテナー内のアイテムの配置
* 主軸方向のフレックスアイテムの比率の制御
* フレックスアイテムの折り返しをマスターする
* フレックスアイテムの順序
* フレックスボックスと他のレイアウト方法の関係
* フレックスボックスの後方互換性
* フレックスボックスの典型的な用途
### `display: grid`

* グリッドレイアウトの基本概念
* グリッドレイアウトと他のレイアウト方法との関係
* 線に基づく配置を使用したグリッドレイアウト
* グリッドテンプレート領域
* 名前付きグリッド線を使用したレイアウト
* グリッドレイアウトでの自動配置
* グリッドレイアウトのボックス配置
* グリッド、論理的な値、書字方向
* グリッドレイアウトとアクセシビリティ
* CSS グリッドレイアウトとプログレッシブエンハンスメント
* グリッドを使用したよくあるレイアウトの実現
仕様書
---

| Specification |
| --- |
| CSS Display Module Level 3 # the-display-properties |

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

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


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

caret-color
===========

**`caret-color`** は CSS のプロパティで、次に入力された文字が挿入される位置を示す可視マーカーである**入力キャレット**の色を設定します。これは**テキスト入力カーソル**と呼ばれることもあります。キャレットは `<input>` または `contenteditable`ML/Global\_attributes#contenteditable) 属性のついた要素などの中に現れます。ふつうキャレットは細い垂直線で、気づきやすくなるように点滅します。既定では黒ですが、このプロパティで色を変更することができます。

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

なお、入力キャレットはキャレットのうちの一種類にすぎません。例えば、多くのブラウザーには「ナビゲーションキャレット」があり、入力キャレットと同様に動きますが、編集できないテキストの中を移動できるものがあります。一方、マウスカーソルが、 `cursor` プロパティが `auto` のときにテキスト上に移動した場合や、 `cursor` プロパティが `text` または `vertical-text` の場合に、キャレットのように見えることがありますが、キャレットではありません (カーソルです)。

構文
--

```css
/\* キーワード値 \*/
caret-color: auto;
caret-color: transparent;
caret-color: currentcolor;

/\* <color> 値 \*/
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0 200 0);
caret-color: hsl(228deg 4% 24% / 80%);

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

### 値

`auto`

ユーザーエージェントはキャレットの適切な色を選択します。これは一般的に `currentcolor` ですが、視認性や周囲のコンテンツとのコントラストを高めるために、ユーザーエージェントが `currentcolor`、背景色、影の色、その他の要因を考慮して、別な色を選択することがあります。

**メモ:** ユーザーエージェントは `auto` の値に `currentcolor` (通常はアニメーション可能) を使用することがありますが、 `auto` はトランジションやアニメーションでは補完されません。

`<color>`

キャレットの色です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | `auto` は仕様通りに計算され、 `<color>` 値は `color` プロパティで定義されたように計算される。 |
| アニメーションの種類 | 色 |

形式文法
----
```

caret-color =
  auto     |
  <color>

```

例
-

### 独自のキャレット色の設定

#### HTML

```html
<input value="このフィールドは既定のキャレットを使用します。" size="64" />
<input class="custom" value="キャレットが独自の色になります！" size="64" />
<p contenteditable class="custom">
  この段落は編集可能であり、 同様にキャレットが独自の色です！
</p>
```

#### CSS

```css
input {
  caret-color: auto;
  display: block;
  margin-bottom: 0.5em;
}

input.custom {
  caret-color: red;
}

p.custom {
  caret-color: green;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* `<input>` 要素
* 要素のテキストを編集可能にする HTML の `contenteditable` 属性
* CSS を使用した HTML 要素への色の適用
* `<color>` データ型
* その他の色に関するプロパティ: `color`, `background-color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, `column-rule-color`


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

text-decoration-color
=====================

**`text-decoration-color`** は CSS のプロパティで、`text-decoration-line` でテキストに追加された装飾の色を設定します。

色はプロパティ値のスコープにある装飾、すなわち下線、上線、打消し線、それにスペルミスに印をつけるために使われるような波線などに適用されます。

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

CSS はそれぞれの線種ごとに固有の色を指定する仕組みを直接は持っていません。しかしながら、この効果は要素を入れ子にして、それぞれの要素毎に (`text-decoration-line` プロパティで) 異なる線種を適用し、 (`text-decoration-color` で) 線の色を指定することで実現できます。

構文
--

```css
/\* <color> 値 \*/
text-decoration-color: currentcolor;
text-decoration-color: red;
text-decoration-color: #00ff00;
text-decoration-color: rgba(255, 128, 128, 0.5);
text-decoration-color: transparent;

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

### 値

`<color>`

装飾線の色です。

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

テキストの色、テキストが置かれている背景、テキストの装飾線の間のコントラスト比が、弱視の人がページの内容を読むことができるように十分に高いことを確認ことが重要です。色のコントラスト比は、テキストと背景の色の輝度を比較して決定されます。

色だけで意味を伝えるべきではありません。例えば、テキストの色と text-decoration-color の変更だけでは、リンクにフォーカスがあることを示すのに十分ではありません。

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

|  |  |
| --- | --- |
| 初期値 | `currentcolor` |
| 適用対象 | すべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | なし |
| 計算値 | 色の計算値 |
| アニメーションの種類 | 色 |

形式文法
----
```

text-decoration-color =
  <color>

```

例
-

### 基本的な例

```html
<p>
  This paragraph has <s>some erroneous text</s> inside it that I want to call
  attention to.
</p>
```

```css
p {
  text-decoration-line: underline;
  text-decoration-color: cyan;
}

s {
  text-decoration-line: line-through;
  text-decoration-color: red;
  text-decoration-style: wavy;
}
```

仕様書
---

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-decoration-color-property |

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

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

関連情報
----

* 複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の `text-decoration` プロパティを使った方が便利かもしれません。
* `<color>` データ型
* 色に関する他のプロパティ: `background-color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, `column-rule-color`
* CSS を使用した HTML 要素への色の適用


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

offset-rotate
=============

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

Newly availableSince August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`offset-rotate`** は CSS のプロパティで、要素が `offset-path` に沿って配置された場合の向き/方向を定義します。

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

**メモ:** 初期のころの仕様書では、このプロパティを `motion-rotation` と呼んでいました。

構文
--

```css
/\* パスの方向に従い、任意で角度を追加 \*/
offset-rotate: auto;
offset-rotate: auto 45deg;

/\* パスの方向に従うが、 auto とは逆の方向を向く \*/
offset-rotate: reverse;

/\* パスの位置に関係なく、決められた回転を維持する \*/
offset-rotate: 90deg;
offset-rotate: 0.5turn;

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

`auto`

要素は正方向の X 軸から見た `offset-path` 方向の角度で回転します。これが既定値です。

``<angle>``

要素は指定された回転角によって、時計方向に固定値で回転変換されます。

`auto <angle>`

`auto` に `<angle>` が続いた場合、その角度が `auto` の計算値に加算されます。

`reverse`

要素は `auto` と同様に回転しますが、反対方向を向きます。 `auto 180deg` の値を指定したのと同等です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | 座標変換可能要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | <angle>, <basic-shape>, <path()> の何れかとして |

形式文法
----
```

offset-rotate =
  [ auto | reverse ]  ||
  <angle>

```

例
-

### オフセットパスに沿って要素の方向を設定

#### HTML

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

#### CSS

```css
div {
  width: 40px;
  height: 40px;
  background: #2bc4a2;
  margin: 20px;
  clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);
  animation: move 5000ms infinite alternate ease-in-out;

  offset-path: path("M20,20 C20,50 180,-10 180,20");
}
div:nth-child(1) {
  offset-rotate: auto;
}
div:nth-child(2) {
  offset-rotate: auto 90deg;
}
div:nth-child(3) {
  offset-rotate: 30deg;
}

@keyframes move {
  100% {
    offset-distance: 100%;
  }
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| Motion Path Module Level 1 # offset-rotate-property |

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

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

関連情報
----

* `offset`
* `offset-anchor`
* `offset-distance`
* `offset-path`
* `offset-position`


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

<absolute-size>
===============

**`<absolute-size>`** は CSS のデータ型で、絶対サイズキーワードを記述します。このデータ型は `font` の一括指定と `font-size` プロパティで使用します。

フォントサイズのキーワードは、 HTML の非推奨の `size` 属性に対応します。下記の HTML size 属性の節を参照してください。

構文
--
```

<absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large
```

### 値

`<absolute-size>` データ型は、下記の一覧から選んだキーワード値を使って定義します。

`xx-small`

絶対サイズ `medium` の 60% のサイズです。非推奨の `size="1"` に対応します。

`x-small`

絶対サイズ `medium` の 75% のサイズです。

`small`

絶対サイズ `medium` の 89% のサイズです。非推奨の `size="2"` に対応します。

`medium`

ユーザーの推奨フォントサイズです。この値は中央の値として参照されます。 `size="3"` に対応します。

`large`

`medium` よりも 20% 大きな絶対サイズです。非推奨の `size="4"` に対応します。

`x-large`

`medium` よりも 50% 大きな絶対サイズです。非推奨の `size="5"` に対応します。

`xx-large`

`medium` の 2 倍の大きさの絶対サイズです。非推奨の `size="6"` に対応します。

`xxx-large`

`medium` の 3 倍の大きさの絶対サイズです。非推奨の `size="7"` に対応します。

解説
--

それぞれの `<absolute-size>` キーワードの値は、`medium` サイズや端末の解像度などの個々の端末の特性に相対したサイズになります。ユーザーエージェントは各フォントのフォントサイズの表を保持しており、 `<absolute-size>` キーワードがインデックスになっています。

CSS1 (1996) では、隣接するキーワード値のインデックス間の拡大率は 1.5 でしたが、これは大きすぎました。 CSS2 (1998) では、隣接するキーワード値インデックス間の拡大率は 1.2 になりましたが、これは小さな値において課題が残りました。隣接する絶対的な大きさのキーワード間を単一の固定比率にすることは問題があることが分かったので、固定比率の推奨はなくなりました。読み取り可能な唯一の推奨は、最小のフォントサイズが `9px` を下回らないことです。

以下の表は、それぞれの `<absolute-size>` キーワード値における拡大係数、`<h1>` から `<h6>` の見出しとの対応、非推奨の HTML の `size` 属性との対応を挙げています。

| `<absolute-size>` | xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| 拡大率 | 3/5 | 3/4 | 8/9 | 1 | 6/5 | 3/2 | 2/1 | 3/1 |
| HTML の見出し | h6 |  | h5 | h4 | h3 | h2 | h1 |  |
| HTML の `size` 属性 | 1 |  | 2 | 3 | 4 | 5 | 6 | 7 |

### HTML の size 属性

HTML でフォントのサイズを設定する `size` 属性は非推奨です。属性値は `1` から `7` までの整数または相対値でした。相対値の場合は、整数の前に `+` または `-` をつけたもので、それぞれフォントサイズを大きくしたり小さくしたりするものでした。 `+1` の値は `size` を 1 つ大きくする意味、 `-2` は 2 つ小さくする意味で、計算値は最小で `1`、最大で `7` となります。

例
-

### キーワード値の比較

```html
<ul>
  <li class="xx-small">font-size: xx-small;</li>
  <li class="x-small">font-size: x-small;</li>
  <li class="small">font-size: small;</li>
  <li class="medium">font-size: medium;</li>
  <li class="large">font-size: large;</li>
  <li class="x-large">font-size: x-large;</li>
  <li class="xx-large">font-size: xx-large;</li>
  <li class="xxx-large">font-size: xxx-large;</li>
</ul>
```

```css
li {
  margin-bottom: 0.3em;
}
.xx-small {
  font-size: xx-small;
}
.x-small {
  font-size: x-small;
}
.small {
  font-size: small;
}
.medium {
  font-size: medium;
}
.large {
  font-size: large;
}
.x-large {
  font-size: x-large;
}
.xx-large {
  font-size: xx-large;
}
.xxx-large {
  font-size: xxx-large;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # valdef-font-size-absolute-size |

関連情報
----

* CSS の `<relative-size>` データ型
* CSS の `font` および `font-size` プロパティ
* CSS フォントモジュール


CSS 名前空間 - CSS: カスケーディングスタイルシート

CSS 名前空間
========

**CSS 名前空間** (CSS Namespaces) は、 CSS の中で XML 名前空間を指定できるようにするための CSS モジュールです。

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

### アットルール

* `@namespace`
仕様書
---

| Specification |
| --- |
| CSS Namespaces Module Level 3 # declaration |

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

### @namespace ルール

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


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

inset-block-start
=================

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

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

構文
--

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

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

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

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

### 値

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

公式定義
----

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

形式文法
----
```

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

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

```

例
-

### ブロック方向の先頭のオフセットの設定

#### HTML

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

#### CSS

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

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

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

CSS フローレイアウト
============

*通常フロー* (Normal Flow) 、またはフローレイアウトは、レイアウトに変更が加えられる前にブロック要素やインライン要素がページに表示される方法です。このフローは本質的に、共に動作するすべてのものの組み合わせで、レイアウトの中で互いについてを知っています。いったん何かが*フローの外*に出ると、独立して動作します。

通常フローでは、**インライン**要素はインライン方向、つまり文書の書字方向に従って、文の中で言葉が表示される方向に表示されます。**ブロック**要素は、文書の書字方向の中で、段落として一つが他の物の後に表示されます。従って英語では、インライン要素は左から始まり、一つが他の物の後に表示され、ブロック要素は上から始まり、ページの下に向かいます。

基本的な例
-----

以下の例はブロック及びインラインレベルボックスの例を示します。緑色の枠線がある二つの要素がブロックレベルで、他の物の下に表示されます。

最初の文は青い背景をもつ span 要素を含んでいます。これはインラインレベルで、文の中に表示されます。

ガイド
---

* 通常フローでのブロック及びインラインレイアウト
* フロー内とフローの外
* Formatting Contexts Explained
* フローレイアウトと書字方向
* フローレイアウトとオーバーフロー
リファレンス
------

### 用語集の記事

* ブロック (CSS)

1. CSS
2. CSS リファレンス


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

attr()
======

**メモ:** `attr()` 関数はどの CSS プロパティでも使用することができますが、 `content` 以外のプロパティでの対応は実験的であり、型や単位の引数の対応はまちまちです。

**`attr()`** は CSS の関数で、選択された要素の属性の値を受け取り、スタイルシートの中で使うために使用されます。擬似要素で使用することもでき、その場合は擬似要素を作る元になった要素の属性値が返されます。

```css
/\* 単純な使用法 \*/
attr(data-count);
attr(title);

/\* 型付き \*/
attr(src url);
attr(data-count number);
attr(data-width px);

/\* 代替値付き \*/
attr(data-count number, 0);
attr(src url, "");
attr(data-width px, inherit);
attr(data-something, "default");
```

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

構文
--

### 値

`attribute-name`

CSS で参照する、 HTML 要素の属性名です。

`<type-or-unit>`
Experimental

属性値の型またはその単位を示すキーワードです。 HTML では暗黙に単位を持つ属性があります。属性に対して無効な値を `<type-or-unit>` で与えると、 `attr()` 式も無効になります。省略すると既定値の `string` になります。有効な値は以下の通りです。

`string`

属性値は CSS `<string>` として扱われます。再解析はされず、特に文字は CSS エスケープで他の文字に変換されることなく、そのまま使用されます。

既定値は空文字列です。

`color`
Experimental

属性値はハッシュ (3 値または 6 値のハッシュ) またはキーワードとして解析されます。妥当な CSS の `<string>` 値でなければなりません。前後の空白は除去されます。

既定値は `currentcolor` です。

`url`
Experimental

 属性値は、 CSS の `url()` 関数の中で使用される文字列として解析されます。
 相対 URL は、スタイルシートからの相対ではなく、元の文書からの相対で解決されます。
 前後の空白は除去されます。

既定値は、一般的なエラーの状況で存在しない文書を指す `about:invalid` の URL です。

`integer`
Experimental

 属性値は CSS の `<integer>` として解析されます。妥当ではない場合、つまり整数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
 前後の空白は除去されます。

既定値は `0`、または `0` が妥当な値ではないプロパティでは、プロパティの最小値です。

`number`
Experimental

 属性値は CSS の `<number>` として解析されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
 前後の空白は除去されます。

既定値は `0`、または `0` が妥当な値ではないプロパティでは、プロパティの最小値です。

`length`
Experimental

 属性値は CSS の `<length>` の距離として単位を含んで (`12.5em` など) 解釈されます。妥当ではない場合、つまり長さではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
 指定された値が相対的な長さの場合は、 `attr()` は絶対的な値に変換して計算します。
前後の空白は除去されます。

既定値は `0`、または `0` が妥当な値ではないプロパティでは、プロパティの最小値です。

`em`, `ex`, `px`, `rem`, `vw`, `vh`, `vmin`, `vmax`, `mm`, `cm`, `in`, `pt`, or `pc`
Experimental

 属性値は CSS の `<number>`、つまり単位なし (`12.5` など) で解析され、特定の単位を付けた `<length>` として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
 指定された値が相対的な長さの場合は、 `attr()` は絶対的な値に変換して計算します。
前後の空白は除去されます。

既定値は `0`、または `0` が妥当な値ではないプロパティでは、プロパティの最小値です。

`angle`
Experimental

 属性値は CSS の `<angle>` の大きさとして単位を含んで (`30.5deg` など) 解釈されます。妥当ではない場合、つまり角度ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
 前後の空白は除去されます。

既定値は `0deg`、または `0deg` が妥当な値ではないプロパティでは、プロパティの最小値です。

`deg`, `grad`, `rad`
Experimental

 属性値は CSS の `<number>`、つまり単位なし (`12.5` など) で解析され、特定の単位を付けた `<angle>` として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
 前後の空白は除去されます。

既定値は `0deg`、または `0deg` が妥当な値ではないプロパティでは、プロパティの最小値です。

`time`
Experimental

 属性値は CSS の `<time>` の大きさとして単位を含んで (`30.5ms` など) 解釈されます。妥当ではない場合、つまり時間ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
 前後の空白は除去されます。

既定値は `0s`、または `0s` が妥当な値ではないプロパティでは、プロパティの最小値です。

`s`, `ms`
Experimental

 属性値は CSS の `<number>`、つまり単位なし (`12.5` など) で解析され、特定の単位を付けた `<time>` として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
 前後の空白は除去されます。

既定値は `0s`、または `0s` が妥当な値ではないプロパティでは、プロパティの最小値です。

`frequency`
Experimental

属性値は CSS の `<frequency>` の大きさとして単位を含んで (`30.5ms` など) 解釈されます。妥当ではない場合、つまり周波数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。

既定値は `0Hz`、または `0Hz` が妥当な値ではないプロパティでは、プロパティの最小値です。

`Hz`, `kHz`
Experimental

 属性値は CSS の `<number>`、つまり単位なし (`12.5` など) で解析され、特定の単位を付けた `<frequency>` として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
 前後の空白は除去されます。

既定値は `0Hz`、または `0Hz` が妥当な値ではないプロパティでは、プロパティの最小値です。

`%`
Experimental

 属性値は CSS の `<number>`、つまり単位なし (`12.5` など) で解析され、 `<percentage>` として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
 指定された値が長さの場合は、 `attr()` は絶対的な値に変換して計算します。
 前後の空白は除去されます。

既定値は `0%`、または `0%` が妥当な値ではないプロパティでは、プロパティの最小値です。

`<fallback>`
Experimental

関連する属性が見つからないか、無効値を含むときに使われる値です。設定されていない場合は、 CSS は各 `<type-or-unit>` で定義された既定値を使います。

### 形式文法
```

<attr()> =
  attr( <attr-name> <attr-type>? , <declaration-value>? )

<attr-name> =
  [ <ident-token> '|' ]? <ident-token>

<attr-type> =
  string            |
  url               |
  ident             |
  color             |
  number            |
  percentage        |
  length            |
  angle             |
  time              |
  frequency         |
  flex              |
  <dimension-unit>

```

例
-

### content プロパティ

#### HTML

```html
<p data-foo="hello">world</p>
```

#### CSS

```css
[data-foo]::before {
  content: attr(data-foo) " ";
}
```

#### 結果

### <color> 値

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

#### HTML

```html
<div class="background" data-background="lime">
  background expected to be red if your browser does not support advanced usage
  of attr()
</div>
```

#### CSS
```

.background {
  height: 100vh;
}
```

```css
.background {
  background-color: red;
}

.background[data-background] {
  background-color: attr(data-background color, red);
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Values and Units Module Level 5 # attr-notation |

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

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

関連情報
----

* 属性セレクター
* HTML `data-*` 属性
* SVG `data-*` 属性 (en-US)


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

ruby-align
==========

**`ruby-align`** は CSS のプロパティで、ベースに対するさまざまなルビの配分を定義します。

```css
/\* キーワード値 \*/
ruby-align: start;
ruby-align: center;
ruby-align: space-between;
ruby-align: space-around;

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

構文
--

### 値

`start`

ルビをベーステキストの始点に揃えることを示すキーワードです。

`center`

ルビをベーステキストの中央に揃えることを示すキーワードです。

`space-between`

ルビの要素の範囲内に配分するよう、スペースを付加することを示すキーワードです。

`space-around`

ルビの要素の範囲内に配分するよう、スペースを付加することを示すキーワードです。また、ルビの周囲にもスペースを付加します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `space-around` |
| 適用対象 | ルビベース、ルビ注釈、ルビベースコンテナー、ルビ注釈コンテナー |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

ruby-align =
  start          |
  center         |
  space-between  |
  space-around

```

例
-

### ルビをベーステキストの先頭に揃える

#### HTML

```html
<ruby>
  <rb>確認用の長いテキスト</rb>
  <rp>（</rp><rt>短いルビ</rt><rp>）</rp>
</ruby>
```

#### CSS

```css
ruby {
  ruby-align: start;
}
```

#### 結果

### ルビをベーステキストの中央に揃える

#### HTML

```html
<ruby>
  <rb>確認用の長いテキスト</rb>
  <rp>（</rp><rt>短いルビ</rt><rp>）</rp>
</ruby>
```

#### CSS

```css
ruby {
  ruby-align: center;
}
```

#### 結果

### ルビ要素の範囲内にスペースを配分する

#### HTML

```html
<ruby>
  <rb>確認用の長いテキスト</rb>
  <rp>（</rp><rt>短いルビ</rt><rp>）</rp>
</ruby>
```

#### CSS

```css
ruby {
  ruby-align: space-between;
}
```

#### 結果

### ルビ要素内および周囲にスペースを配分する

#### HTML

```html
<ruby>
  <rb>確認用の長いテキスト</rb>
  <rp>（</rp><rt>短いルビ</rt><rp>）</rp>
</ruby>
```

#### CSS

```css
ruby {
  ruby-align: space-around;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Ruby Annotation Layout Module Level 1 # ruby-align-property |

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

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

関連情報
----

* HTML のルビ関連要素: `<ruby>`, `<rt>`, `<rp>`, `<rtc>`
* CSS のルビ関連プロパティ: `ruby-position`, `ruby-merge`


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

transform
=========

**`transform`** は CSS のプロパティで、与えられた要素を回転、拡大縮小、傾斜、移動することできます。これは、 CSS の視覚整形モデルの座標空間を変更します。

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

このプロパティに `none` 以外の値が設定されていると、重ね合わせコンテキストが作成されます。この場合、その要素はその中に含まれる `position: fixed;` または `position: absolute;` であるすべての要素の包含ブロックとして扱われます。

**警告:** 座標変換可能な要素のみが `transform` の対象になります。つまり、レイアウトが CSS ボックスモデルによって管理される、置換要素でないインラインボックス、表の列ボックス、表の列グループボックスを除くすべての要素です。

構文
--

```css
/\* キーワード値 \*/
transform: none;

/\* 関数値 \*/
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/\* 複数の関数値 \*/
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

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

`transform` プロパティには、キーワード値 `none` か 1 つ以上の `<transform-function>` の値のいずれかが指定されます。

複数の関数値に `perspective()` が含まれる場合は、先頭に置く必要があります。

### 値

`<transform-function>`

適用される 1 つ以上の CSS 座標変換関数です。座標変換関数は、左から右へ順に重ねられ、つまり右から左の順に座標変換の合成の効果が適用されます。

`none`

座標変換を何も適用しないことを指定します。

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

拡大や縮小のアニメーションは、特定の種類の偏頭痛を引き起こす原因になりやすいので、アクセシビリティの問題になることがあります。ウェブサイトにこのようなアニメーションを含める必要がある場合は、できればサイト全体で、ユーザーがアニメーションを止める制御ができるようしてください。

また、 `prefers-reduced-motion` メディア特性を使用することを検討してください。これを使用してメディアクエリーを書けば、ユーザーがシステムの設定でアニメーションを減らすよう指定した場合にアニメーションを止めることができます。

詳しくは以下の文書を参照してください。

* MDN WCAG の理解、ガイドライン 2.3 の解説
* Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1
公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | 座標変換可能要素 |
| 継承 | なし |
| パーセント値 | 囲みボックスの寸法に対する相対値 |
| 計算値 | 指定通り。ただし相対的な長さはは絶対的な長さに変換される |
| アニメーションの種類 | 座標変換 |
| 重ね合わせコンテキストの生成 | あり |

形式文法
----
```

transform =
  none              |
  <transform-list>

<transform-list> =
  <transform-function>+

```

例
-

### 要素の移動と回転

#### HTML

```html
<div>座標変換された要素</div>
```

#### CSS

```css
div {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}
```

#### 結果

### 座標変換の順序

座標変換関数の順番は重要です。この例では、 2 つのボックスが同じ値で回転および平行移動されています。座標変換関数の順序だけが異なっています。

#### HTML

```html
<div class="original"></div>
<div class="one">1</div>
<div class="two">2</div>
```

#### CSS
```

div {
  height: 200px;
  width: 200px;
  position: absolute;
  left: 200px;
  top: 50px;
  font-size: 4rem;
  line-height: 200px;
  text-align: center;
}
.original {
  border: 1px dashed;
}
.original:before,
.original:after {
  content: "";
  position: absolute;
  top: 100px;
  width: 500px;
  left: -150px;
  height: 1px;
  border-top: 2px dotted;
}
.original:after {
  transform: rotate(135deg);
}
.one {
  background-color: #ccc;
}
.two {
  background-color: #d6bb72;
}
```

```css
.one {
  transform: translateX(200px) rotate(135deg);
}
.two {
  transform: rotate(135deg) translateX(200px);
}
```

#### 結果

要素が平行移動される前に回転された場合、平行移動の方向は回転された軸になります。この軸は点線で示されています。

### その他の例

その他の例は、CSS 座標変換の使用および `<transform-function>` をご覧ください。

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 2 # transform-functions |
| CSS Transforms Module Level 1 # transform-property |

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

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

関連情報
----

* CSS 座標変換の使用
* `<transform-function>` データ型にすべての座標変換関数の説明があります
* 独立した CSS プロパティ: `translate`, `rotate`, `scale` （`skew` プロパティはありません）
* CSS 座標変換機能を視覚化するオンラインツール: CSS Transform Playground


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

border-bottom-color
===================

**`border-bottom-color`** は CSS のプロパティで、要素の下側の境界線の色を設定します。一括指定プロパティの `border-color` または `border-bottom` でも設定することができます。

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

構文
--

```css
/\* <color> 値 \*/
border-bottom-color: red;
border-bottom-color: #ffbb00;
border-bottom-color: rgb(255, 0, 0);
border-bottom-color: hsla(100%, 50%, 25%, 0.75);
border-bottom-color: currentcolor;
border-bottom-color: transparent;

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

`border-bottom-color` プロパティは 1 つの値で指定します。

### 値

`<color>`

境界線の色を定義します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `currentcolor` |
| 適用対象 | すべての要素。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| 計算値 | 色の計算値 |
| アニメーションの種類 | 色 |

形式文法
----
```

border-bottom-color =
  <color>     |
  <image-1D>

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

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

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

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

```

例
-

### 境界線が付いた単純な div

#### HTML

```html
<div class="mybox">
  <p>
    これは周囲に境界線があるボックスです。 なお、ボックスのその辺が
    <span class="redtext">赤</span>になっています。
  </p>
</div>
```

#### CSS

```css
.mybox {
  border: solid 0.3em gold;
  border-bottom-color: red;
  width: auto;
}

.redtext {
  color: red;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* 境界に関する CSS 一括指定プロパティ: `border`, `border-bottom`, `border-color`.
* 他の境界線の色に関する CSS プロパティ: `border-right-color`, `border-top-color`, `border-left-color`
* 同じ境界線に適用される他の境界関連の CSS プロパティ: `border-bottom-style`, `border-bottom-width`


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

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

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

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

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

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

構文
--

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

### 値

`auto`

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

`contain`

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

`none`

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

公式定義
----

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

形式文法
----
```

overscroll-behavior-y =
  contain  |
  none     |
  auto

```

例
-

### 背後にある要素の縦スクロールの抑止

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

完全な例と説明については、 `overscroll-behavior` を参照してください。

仕様書
---

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

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

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

関連情報
----

* スクロールを制御する: 引いて更新や末端の効果のカスタマイズ
* The mapped logical properties: `overscroll-behavior-inline`, `overscroll-behavior-block`


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

-webkit-mask-box-image
======================

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

`-webkit-mask-box-image` はマスク画像を要素の境界ボックスに設定します。

* 初期値: なし
* 適用先: すべての要素
* 継承: なし
* メディア: `visual`
* 計算値: 指定通り
構文
--
```

-webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>]
```

ここで、

<mask-box-image>

``<uri>` | <gradient> | none`

<top> <right> <bottom> <left>

`<length> | <percentage>`

<x-repeat> <y-repeat>

`repeat | stretch | round | space`

### 値

<uri>

マスク画像として使用する画像リソースの位置です。

<gradient>

マスク画像として使用する `-webkit-gradient` 関数です。

none

境界ボックスにマスク画像がないことを示すために使用します。

<length>

マスク画像のオフセットの大きさです。利用可能な単位は `<length>` を参照してください。

<percentage>

マスク画像のオフセットで、境界ボックスの対応する長さ（幅または高さ）に対するパーセント値です。

repeat

マスク画像は、境界ボックスの範囲に必要な回数だけ繰り返されます。マスク画像が境界ボックスに均等に配置できない場合は、部分画像を含むことがあります。

stretch

マスク画像は、境界ボックスを正確に含むように引き伸ばされます。

round

マスク画像は多少引き伸ばされ、教秋ボックスの端にマスク画像の一部が残らないように繰り返されます。

space

マスク画像は引き伸ばされることなく何度でも繰り返されます。境界ボックスの端に、部分的なマスク画像は置かれません。

公式定義
----

DB に値が見つかりません！形式文法
----

Error: could not find syntax for this item例
-

### 画像の設定

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

### 画僧のオフセットと塗りつぶし

```css
.exampletwo {
  -webkit-mask-box-image: url("logo.png") 100 100 0 0 round round;
}
```

仕様書
---

Not part of any standard.

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

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

関連情報
----

`mask`, `mask-origin`, `-webkit-mask-attachment`,`mask-clip`,`mask-image`,`-webkit-mask-composite`,`mask-repeat`


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

align-self
==========

**`align-self`** は CSS のプロパティで、グリッドやフレックスのアイテムの `align-items` の値を上書きします。グリッドでは、アイテムはグリッド領域内で配置されます。フレックスボックスでは、アイテムは交差軸上で配置されます。

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

このプロパティは、ブロックレベルのボックスやテーブルのセルには適用されません。フレックスボックスの交差軸のマージンが `auto` の場合、`align-self` は無視されます。

構文
--

```css
/\* キーワード値 \*/
align-self: auto;
align-self: normal;

/\* 位置による配置 \*/
/\* align-self は left および right の値をとりません \*/
align-self: center; /\* アイテムを中央付近に配置 \*/
align-self: start; /\* アイテムを起点に配置 \*/
align-self: end; /\* アイテムを末端に配置 \*/
align-self: self-start; /\* アイテムを起点に詰めて配置 \*/
align-self: self-end; /\* アイテムを末端に詰めて配置 \*/
align-self: flex-start; /\* フレックスアイテムを起点に配置 \*/
align-self: flex-end; /\* フレックスアイテムを末端に配置 \*/

/\* ベースラインによる配置 \*/
align-self: baseline;
align-self: first baseline;
align-self: last baseline;
align-self: stretch; /\* 寸法が 'auto' のアイテムをコンテナーに合うよう伸長 \*/

/\* あふれたときの配置 \*/
align-self: safe center;
align-self: unsafe center;

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

### 値

`auto`

親の `align-items` の値で計算します。

`normal`

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

* 絶対位置のレイアウトでは、このキーワードは*置換*の絶対位置ボックスには `start` のように動作し、*その他*の絶対位置ボックスには `stretch` のように動作します。
* 絶対位置指定レイアウトの固定位置指定時は、このキーワードは `stretch` と同様に動作します。
* フレックスアイテムでは、このキーワードは `stretch` と同様に動作します。
* グリッドアイテムでは、このキーワードは `stretch` のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスは `start` のように動作します。
* ブロックレベルボックスと表のセルでは、プロパティは適用されません。

`self-start`

アイテムは交差軸の開始側に対応する配置コンテナーの端に詰めて配置されます。

`self-end`

アイテムは交差軸の終端側に対応する配置コンテナーの端に詰めて配置されます。

`flex-start`

このフレックスアイテムの cross-start マージン側が、行の cross-start 側に詰められます。

`flex-end`

このフレックスアイテムの cross-end マージン側が、行の cross-end 側に詰められます。

`center`

このフレックスアイテムのマージンボックスが、行の交差軸方向の中央に配置されます。アイテムの交差軸方向の寸法がフレックスコンテナーよりも大きい場合は、両方向に均等にはみ出します。

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

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

`stretch`

アイテムの交差軸方向の寸法の合計値が、配置コンテナーの寸法よりも小さく、アイテムの寸法が `auto` であった場合、アイテムの寸法は `max-height`/`max-width` (または同等の機能) で課された制約を尊重しつつ、均等の寸法 (比例的ではない) に拡大されるので、 `auto` が指定されたアイテムすべての寸法の合計は、ちょうど配置コンテナーの交差軸方向を埋めるようになります。

`safe`

アイテムのサイズが配置コンテナーを超えるとき、アイテムは配置モードが `start` であったかのように配置されます。

`unsafe`

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | フレックスアイテム、グリッドアイテム、絶対位置指定のボックス |
| 継承 | なし |
| 計算値 | 絶対位置指定要素に対しては `auto` は自分自身に対して計算し、それ以外のすべてのボックスに対しては親の `align-items` の計算値 (から古いキーワードを引いた値) に計算し、親が無ければ `start` になる。この動作は `justify-self` で説明したとおり、レイアウトモデルの依存する。それ以外の場合は指定された値となる。 |
| アニメーションの種類 | 離散値 |

形式文法
----
```

align-self =
  auto                                  |
  normal                                |
  stretch                               |
  <baseline-position>                   |
  <overflow-position>? <self-position>  |
  anchor-center

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

<overflow-position> =
  unsafe  |
  safe

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

```

例
-

### HTML

```html
<section>
  <div>Item #1</div>
  <div>Item #2</div>
  <div>Item #3</div>
</section>
```

### CSS

```css
section {
  display: flex;
  align-items: center;
  height: 120px;
  background: beige;
}

div {
  height: 60px;
  background: cyan;
  margin: 5px;
}

div:nth-child(3) {
  align-self: flex-end;
  background: pink;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # align-self-property |
| CSS Flexible Box Layout Module Level 1 # align-items-property |

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

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

関連情報
----

* CSS フレックスボックスガイド: *フレックスボックスの基本概念*
* CSS フレックスボックスガイド: *フレックスコンテナー内のアイテムの配置*
* CSS グリッドガイド: *グリッドレイアウトのボックス配置*
* CSS ボックス配置
* `align-items` プロパティ


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

font-size
=========

**`font-size`** は CSS のプロパティで、フォントの大きさを定義します。フォントの大きさを変更すると、フォントの大きさに相対的な `<length>` の単位例えば `em`, `ex`, なども更新されます。

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

構文
--

```css
/\* <absolute-size> 値 \*/
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: xxx-large;

/\* <relative-size> 値 \*/
font-size: smaller;
font-size: larger;

/\* <length> 値 \*/
font-size: 12px;
font-size: 0.8em;

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

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

`font-size` プロパティは、以下の何れかの方法で指定します。

* 絶対的サイズまたは相対的サイズのキーワードのうちの一つ
* `<length>` または親要素のフォントサイズからの相対的な `<percentage>`
### 値

`xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`, `xxx-large`

絶対的なサイズのキーワードで、ユーザーの既定のフォントサイズ (つまり `medium`) を基準とします。

`larger`, `smaller`

相対的なサイズのキーワードです。フォントは親要素のフォントサイズから相対的に、上記の絶対的サイズのキーワードで使われている倍率におよそ沿う形で拡大または縮小されます。

`<length>`

正の `<length>` の値。 (`em` や `ex` などの) フォント相対単位のほとんどは、親要素のフォントサイズに対する相対値です。

(`rem` などの) ルートを基準としたフォント相対単位では、フォントサイズは `<html>` (ルート) 要素で使われているフォントのサイズからの相対値です。

`<percentage>`

正の `<percentage>` 値で、親要素のフォントサイズからの相対値です。

**メモ:** アクセシビリティを最大化するために、一般的に最適なのは、ユーザーの既定のフォントサイズからの相対値を使用することです。

解説
--

フォントサイズの定義にはいくつかの方法があり、キーワードと数値 (ピクセルや em の場合) が使われます。個々のウェブページで必要とされるものにあわせて、最適な方法を選んでください。

### キーワード

キーワードはウェブのフォントサイズを決める良い方法です。 `<body>` 要素のフォントサイズをキーワードで定義すると、ページのどこであってもフォントサイズを相対的に調整することができ、したがってページ全体のフォントサイズの拡大縮小が容易にできます。

### ピクセル

ピクセル値 (`px`) でフォントサイズを設定することは、ピクセル精度が必要な場合に適しています。ピクセル値は静的です。これは OS にもブラウザーにも依存しない方法であり、ブラウザーに文字を指定した高さのピクセルの数値で描画することを厳密に指示します。ブラウザーによって、同じ効果を得るのに異なるアルゴリズムが使われている可能性があるため、結果は多少異なるかもしれません。

フォントサイズの指定を組み合わせることもできます。例えば親要素のフォントサイズを `16px` 、子要素を `larger` とした場合、子要素のフォントサイズは親要素の `16px` より大きくレンダリングされます。

**メモ:** フォントサイズを `px` で定義すると、ブラウザーによってはユーザーがフォントサイズを変更することができないため、*アクセシブル*ではありません。例えば、弱視の人は、ウェブデザイナーが選んだサイズより大きなフォントにしたがるかもしれません。こうした配慮のあるデザインをしたい場合は、フォントサイズにピクセルを使わないようにしてください。

### em

`em` の値を使用すると、動的または計算されたフォントサイズが作成されます (歴史的には、`em` の単位は、ある書体の大文字の "M" の幅に由来していました)。この数値は、それが使われている要素の `font-size` プロパティの乗数として機能します。この例を見てください。

```css
p {
  font-size: 2em;
}
```

この場合、`<p>` 要素のフォントサイズは、`<p>` 要素で継承されている `font-size` の計算値の 2 倍になります。 すなわち、`1em` の `font-size` は、それが使われている要素の `font-size` の計算値に等しくなります。

`font-size` が `<p>` の何れかの祖先に設定されていない場合、`1em` はブラウザーの既定の `font-size` と等しくなり、大抵は `16px` です。したがって、既定では `1em` が `16px` と同等であり、`2em` は `32px` と同等です。もし `font-size` が 20px と `<body>` 要素に設定されていれば、`1em` は `<p>` 要素において `20px` となり、`2em` は で `40px` と同等になります。

必要なピクセル値に相当する em は、次の式で計算することができます。
```

em = 要素に設定したい pixel 値 / 親要素のピクセル単位でのフォントサイズ
```

例えば、`<body>` のフォントサイズが `16px` に設定されていたとします。使いたいフォントサイズが 12px であれば、 `0.75em` を指定してください (12/16 = 0.75 だからです)。同様に、使いたいフォントサイズが `10px` なら、`0.625em` を指定してください (10/16 = 0.625)。`22px` ならば、`1.375em` です (22/16)。

`em` は、読者が使用するフォントに合わせて長さを自動的に調整するので、CSS では非常に便利な単位です。

em 値が複合的であるということは、覚えておくべき重要な事実です。以下の HTML と CSS をご覧ください。

```css
html {
  font-size: 62.5%; /\* font-size 1em = 10px on default browser settings \*/
}
span {
  font-size: 1.6em;
}
```

```html
<div>
  <span>Outer <span>inner</span> outer</span>
</div>
```

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

ブラウザーの既定の `font-size` が 16px と仮定すると、単語 "outer" は 16px で描画され、単語 "inner" は 25.6px で描画されます。これは、内側の `<span>` 要素の `font-size` は 1.6em ですが、これは親要素の `font-size` からの相対値で、さらにその親要素の `font-size` からの相対値になるからです。これはよく**複合** (compounding) と呼ばれます。

### rem

`rem` 値は、複合の問題を避けるために考案されました。 `rem` 値は親要素ではなく、ルート `html` 要素に対して相対的です。言い換えると、親要素のサイズの影響を受けることなく相対的な方法でフォントサイズを指定できますので、複合が発生しません。

以下の CSS は、先ほどの例とほぼ同じです。唯一の違いは、単位を `rem` に変更したことです。

```css
html {
  font-size: 62.5%; /\* font-size 1em = 10px on default browser settings \*/
}
span {
  font-size: 1.6rem;
}
```

この CSS を同じ HTML に適用すると、以下のようになります。

```html
<span>Outer <span>inner</span> outer</span>
```

この例では、単語 "outer inner outer" はすべて 16px で表示されます (ブラウザーの `font-size` は既定値が 16px のままであるとします)。

### ex

`em` の単位と同様に、`ex` の単位を使用して設定された要素の `font-size` は、計算または動的に行われます。全く同じように動作しますが、`ex` の単位を使用して `font-size` プロパティを設定する場合、`font-size` はページで使用されている最初に利用可能なフォントの x-height に等しいことを除いては、同じように動作します。数値は、要素の継承された `font-size` と `font-size` の複合体を相対的に乗算します。

`ex` などのフォントに関する長さの単位の詳細な説明はW3C Editor's Draftを参照してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `medium` |
| 適用対象 | すべての要素とテキスト。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | あり |
| パーセント値 |  親要素の font-size に対する相対値 |
| 計算値 | 指定通り。ただし相対的な長さはは絶対的な長さに変換される |
| アニメーションの種類 | length |

形式定義
----
```

font-size =
  <absolute-size>            |
  <relative-size>            |
  <length-percentage [0,∞]>  |
  math

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

```

例
-

### フォントサイズの設定

#### CSS

```css
.small {
  font-size: xx-small;
}
.larger {
  font-size: larger;
}
.point {
  font-size: 24pt;
}
.percent {
  font-size: 200%;
}
```

#### HTML

```html
<h1 class="small">Small H1</h1>
<h1 class="larger">Larger H1</h1>
<h1 class="point">24 point H1</h1>
<h1 class="percent">200% H1</h1>
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* `font-size-adjust`
* `font-style`
* `font-weight`
* 基本的なテキストとフォントの装飾


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

perspective
===========

**`perspective`** は CSS のプロパティで、 z=0 の平面とユーザーとの間の距離を定めて 3D に配置された要素に遠近感を与えます。

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

構文
--

```css
/\* キーワード値 \*/
perspective: none;

/\* <length> 値 \*/
perspective: 20px;
perspective: 3.5em;

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

### 値

`none`

立体的な座標変換を一切適用しないことを示すキーワードです。

`<length>`

ユーザーと z=0 平面間の距離を表す `<length>` です。立体的な座標変換を要素とその内容に適用するときに使います。 `0` や負の値ならば、立体的な座標変換は適用されません。

解説
--

z>0 である 3D 要素はより大きく、 z<0 である 3D 要素はより小さくなります。効果の強度はこのプロパティの値から決められます。

ユーザーの背後にある 3D 要素の部品、つまり z 軸座標が CSS の `perspective` プロパティの値より大きい要素は描画されません。

*消点*は既定で要素の中心に置かれますが、この位置は `perspective-origin` プロパティで変更できます。

このプロパティを `0` と `none` 以外の値で使用すると、新たな重ね合わせコンテキストを生成します。また、その場合、オブジェクトはそれを含む `position: fixed` の要素の包含ブロックとして動作します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | 座標変換可能要素 |
| 継承 | なし |
| 計算値 | 絶対的な長さまたは `none` |
| アニメーションの種類 | length |
| 重ね合わせコンテキストの生成 | あり |

形式文法
----
```

perspective =
  none            |
  <length [0,∞]>

```

例
-

### 視点の設定

視点を様々な位置に設定した場合に立体がどのように変化するかを示す例は、 CSS 座標変換の使用 > 視点の設定にあります。

仕様書
---

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

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

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

関連情報
----

* CSS 座標変換の使用


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

flex-shrink
===========

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

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

* Learn more
* See full compatibility
* Report feedback
**`flex-shrink`** は CSS のプロパティで、フレックスアイテムの縮小係数を設定します。すべてのフレックスアイテムの寸法がフレックスコンテナーよりも大きい場合、アイテムは `flex-shrink` の数値に従って縮小して収まります。

使用時は `flex-shrink` は `flex-grow` や `flex-basis` などの他のフレックスプロパティと共に使用され、ふつうは `flex` の一括指定を使用して定義されます。

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

構文
--

```css
/\* <number> 値 \*/
flex-shrink: 2;
flex-shrink: 0.6;

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

`flex-shrink` プロパティは単一の `<number>` で指定します。

### 値

`<number>`

`<number>` を参照してください。負の値は無効です。既定値は 1 です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `1` |
| 適用対象 | フロー内の擬似要素を含むフレックスアイテム |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 数値 |

形式文法
----
```

flex-shrink =
  <number [0,∞]>

```

例
-

### フレックスアイテムの縮小係数の設定

#### HTML

```html
<p>全体の幅は 500px で、フレックスアイテムの flex-basis は 120px です。</p>
<p>A、B、C には flex-shrink:1 が、D と E には flex-shrink:2 が設定されています。</p>
<p>D と E の幅は他より狭くなります。</p>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
</div>
```

#### CSS

```css
#content {
  display: flex;
  width: 500px;
}

#content div {
  flex-basis: 120px;
  border: 3px solid rgba(0, 0, 0, 0.2);
}

.box {
  flex-shrink: 1;
}

.box1 {
  flex-shrink: 2;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-shrink-property |

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

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

関連情報
----

* CSS フレックスボックスガイド: *フレックスボックスの基本概念*
* CSS フレックスボックスガイド: *主軸方向のフレックスアイテムの比率の制御*


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

list-style
==========

**`list-style`** は CSS の一括指定プロパティで、リストのすべてのスタイルプロパティを設定します。

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

**メモ:** このプロパティはリスト項目、すなわち ``display`: list-item;` の要素に適用されます。既定では `<li>` 要素が含まれます。このプロパティは継承されるので、親要素 (ふつうは `<ol>` または `<ul>`) に設定すれば、同じリストスタイルを内部のすべての項目に適用できます。

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

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

* `list-style-image`
* `list-style-position`
* `list-style-type`
構文
--

```css
/\* type \*/
list-style: square;

/\* image \*/
list-style: url("../img/shape.png");

/\* position \*/
list-style: inside;

/\* type | position \*/
list-style: georgian inside;

/\* type | image | position \*/
list-style: lower-roman url("../img/shape.png") outside;

/\* キーワード値 \*/
list-style: none;

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

`list-style` プロパティは 1 つ、2 つ、3 つのキーワードを任意の順序で指定します。 `list-style-type` と `list-style-image` が両方とも設定された場合、 `list-style-type` は画像が利用できない場合の予備として使用されます。

### 値

`list-style-type`

`list-style-type` を参照して下さい。

`list-style-image`

`list-style-image` を参照して下さい。

`list-style-position`

`list-style-position` を参照して下さい。

`none`

リストスタイルは使用されません。

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

注意すべき例外として、Safari は順序なしリストで `list-style` の値に `none` が適用されると、アクセシビリティツリー上でリストとして認識しません。

この問題に対処する最も簡単な方法は、明示的に `role="list"` をマークアップ内の `<ul>` 要素に追加することです。これにより、デザインに影響を与えることなく、リストの意味を復元することができます。

マークアップを変更できない場合の CSS のみの解決策もあります。一つは、それぞれのリスト項目の前にゼロ幅スペースを擬似コンテンツとして追加することです。

```css
ul {
  list-style: none;
}

ul li::before {
  content: "\200B";
}
```

もう一つは、 list-style プロパティに url の値を適用する方法です。

```css
nav ol,
nav ul {
  list-style: none;
}

/\* こうします \*/

nav ol,
nav ul {
  list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
}
```

これらの CSS による回避策は HTML での解決ができない場合のみに使用してください。また、ユーザーの使い勝手に悪影響を与えないことをテストした後にのみ使用してください。

* 'Fixing' Lists
* VoiceOver and list-style-type: none – Unfettered Thoughts
* MDN "WCAG を理解する ― ガイドライン 1.3 の解説"
* Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `list-style-type`: `disc`
* `list-style-position`: `outside`
* `list-style-image`: `none`
 |
| 適用対象 |  リスト項目 |
| 継承 | あり |
| 計算値 | 一括指定の次の各プロパティとして* `list-style-image`: The keyword `none` or the computed <image>
* `list-style-position`: 指定通り
* `list-style-type`: 指定通り
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `list-style-image`: 離散値
* `list-style-position`: 離散値
* `list-style-type`: 離散値
 |

形式文法
----
```

list-style =
  <'list-style-position'>  ||
  <'list-style-image'>     ||
  <'list-style-type'>

```

例
-

### リストスタイルの種類と位置の設定

#### HTML

```html
List 1
<ul class="one">
  <li>List Item1</li>
  <li>List Item2</li>
  <li>List Item3</li>
</ul>
List 2
<ul class="two">
  <li>List Item A</li>
  <li>List Item B</li>
  <li>List Item C</li>
</ul>
```

#### CSS

```css
.one {
  list-style: circle;
}

.two {
  list-style: square inside;
}
```

#### 例

仕様書
---

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # list-style-property |

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

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

関連情報
----

* `list-style-type`、`list-style-image`、`list-style-position`