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

border-bottom-left-radius
=========================

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

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

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

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

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

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

構文
--

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

/\* パーセント値 \*/

/\* ボックスが正方形ならば円、長方形ならば楕円 \*/
border-bottom-left-radius: 20%;

/\* 上と同じ。水平方向 (width) および垂直方向 (height) の 20% \*/
border-bottom-left-radius: 20% 20%;

/\* 水平方向 (width) の 20% および垂直方向 (height) の 10% \*/
border-bottom-left-radius: 20% 10%;

/\* 角を楕円にする \*/
/\* border-bottom-left-radius: 水平 垂直 \*/
border-bottom-left-radius: 0.5em 1em;

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

値 1 つで指定する場合:

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

値 2 つで指定する場合:

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

`<length-percentage>`

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

公式定義
----

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

形式文法
----
```

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

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

```

例
-

### 円弧

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

<div></div>
```

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

### 楕円弧

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

<div></div>
```

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

### 正方形の要素にパーセント値の半径

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

<div></div>
```

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

### 長方形の要素にパーセント値の半径

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

<div></div>
```

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

仕様書
---

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

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

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

関連情報
----

* 一括指定の `border-radius` プロパティ
* `border-top-right-radius`, `border-bottom-right-radius`, `border-top-left-radius`


視覚整形モデル - CSS: カスケーディングスタイルシート

視覚整形モデル
=======

CSS の**視覚整形モデル** (visual formatting model) は、ユーザーエージェントが文書ツリーをどのように受け取り、視覚メディア用に処理して表示するかを説明するものです。これには、コンピューター画面のような連続メディアと、ブラウザーの印刷機能によって印刷された本や文書のようなページメディアが含まれます。情報の大部分は、連続メディアとページメディアに等しく適用されます。

視覚整形モデルでは、文書ツリーの各要素は、モデルに応じてゼロ個以上のボックスを生成します。これらのボックスのレイアウトは、次のようにして制御されます。

* ボックスの寸法と種類
* 位置決定方法 (通常フロー、浮動、絶対位置指定)
* 文書ツリー内の他の要素
* 外部情報 (ビューポートの寸法、画像の固有の寸法、など)

視覚整形モデルに関する情報の多くは CSS2 で定義されていますが、様々なレベル 3 の仕様書ではこの情報が追加されています。仕様書を読む際には、 CSS2 で定義されているモデルが参照されていることが多いので、他のレイアウト仕様書を読む際には、 CSS2 で定義されているモデルとそれを説明するために使用されている用語を理解しておくことが重要です。

この文書では、モデルを定義して関連する用語や概念をいくつか紹介し、より詳細な情報を説明している MDN のより具体的なページへのリンクを紹介します。

ビューポートの役割
---------

連続メディアでは、ビューポートはブラウザーのウィンドウから見える領域です。ユーザーエージェントはビューポートの寸法が変更されたときに、ページのレイアウトを変更することがあります。 — 例えば、ウィンドウの寸法を変更した場合や、モバイル端末の向きを変更した場合です。

ビューポートが文書の寸法よりも小さい場合、ユーザーエージェントは文書の表示されていない部分へスクロールする方法を提供する必要があります。もっともよくあるのは、横書きで、上から下へ書く言語の場合、**ブロック方向**のスクロールです。しかし、**インライン方向**のスクロールを設計する必要がある場合もあるかもしれません。

ボックスの生成
-------

**ボックスの生成**は CSS の視覚整形モデルの一部で、文書内の要素からボックスを作ることです。生成されたボックスは様々な種類を持ち、視覚整形モデルに影響します。生成されるボックスの種類は CSS の `display` プロパティによって決まります。

当初 CSS2 で定義された `display` プロパティは、 CSS Display Module Level 3 で拡張されました。これに加え、 display にまつわる用語の一部が CSS2 から何年にもわたって更新され明確化されました。

CSS はソース文書を読み取り、キャンバスにレンダリングします。これを行うために、中間的な構造である**ボックスツリー**を生成し、レンダリングされる文書の書式構造を表現します。ボックスツリー内のそれぞれのボックスは、キャンバス上の空間や時間において対応する要素 (または擬似要素) を表現しており、ボックスツリー内のテキストは対応するテキストノードの内容のように表現します。

それから、それぞれの要素について、 CSS はその要素の `display` プロパティの値に応じてゼロ個以上のボックスを生成します。

**メモ:** ボックスはよく display の種類によって参照されます。例えば、 `display: block` の要素によって生成されたボックスは「ブロックボックス」と呼ばれたり、単に「ブロック」と呼ばれたりします。ただし、ブロックボックス、ブロックレベルボックス、ボックスコンテナーはすべて微妙に異なることに注意してください。詳しくは下記のブロックボックスを参照してください。

主ボックス
-----

要素が 1 つ以上のボックスを生成する場合、そのうちの一つが**主ボックス** (principal box) となります。これがボックスツリー内の子孫ボックスと生成コンテンツを含み、様々な配置方法の対象となるボックスとなります。

要素によっては、主ボックスに加えて追加のボックスを生成することがあり、例えば、 `display: list-item` は複数のボックス (例えば **主ブロックボックス**や**子マーカーボックス**) を生成します。また、値によっては (`none` や `contents` など) 要素やその子孫がまったくボックスを生成しなくなります。

### 無名ボックス

**無名ボックス** (anonymous box) は、ボックスに使用する HTML 要素がない場合に作成されます。このような状況は、例えば、親要素で `display: flex` を宣言した場合に、その中に他の要素に含まれないテキストが直接存在する場合に発生します。ボックスツリーを修正するために、そのテキストの周りに無名ボックスが作成されます。これはフレックスアイテムとして動作しますが、対象となる要素がないため、通常のボックスのように対象を設定したり、スタイルを設定したりすることはできません。

同じことは、ブロック要素にテキストが混在している場合にも起こります。次の例では、 `<div>` の中に文字列があり、文字列の中央にはテキストの一部を含む `<p>` 要素があります。

文字列はボックスツリーの中で3つのボックスに分割されます。段落要素の前の文字列の部分は無名ボックスに包まれ、次にボックスを生成する `<p>` があり、さらに別の無名ボックスがあります。

これらの無名ボックスについて考慮すべきことは、直接の親からスタイルを継承するということですが、無名ボックスを対象にして、それらがどのように見えるかを変更することはできません。この例では、コンテナーの子を対象にするために直接子セレクターを使用しています。これは、無名ボックスは「要素」ではないので、無名ボックスを変更するものではありません。

**インライン無名ボックス**は、文字列がインライン要素によって分割されたとき、例えば文に `<em></em>` で囲まれた区間がある場合に作成されます。これにより、文が3つのインラインボックスに分割されます。強調された区間の前の無名インラインボックス、 `<em>` 要素で包まれた区間、そして最後の無名インラインボックスです。無名ブロックボックスと同様に、これらの無名インラインボックスは `<em>` の場合とは異なり、独立してスタイルを設定することはできず、コンテナーのスタイルを継承するだけです。

他にも無名ボックスを生成する整形コンテキストがあります。グリッドレイアウトは上記のフレックスボックスの例と同様に動作し、テキストの文字列を無名ボックス付きのグリッドアイテムに変換します。段組みレイアウトは段の周りに無名の段ボックスを生成します。これらもスタイル付けなどの対象にすることはできません。表レイアウトは適切な表構造を生成するために無名ボックスを追加します。例えば、 `display: table-row` が付いたボックスがない場合、無名の表の行を追加するなどです。

### 行ボックス

**行ボックス**は、テキストの各行を包むボックスのことです。アイテムを浮動させた後に、背景色のあるブロックを続けると、行ボックスとそれを含むブロックの違いがわかります。

次の例では、浮動している `<div>` の後に続く行ボックスは、浮動要素を回り込むように短くなっています。浮動したアイテムがフローから抜けるので、ボックスの背景は浮動要素の後ろを走っています。

配置の仕組みとフロー内・フロー外の要素
-------------------

CSS では、ボックスをレイアウトするための配置の仕組みが 3 種類あります。 — **通常フロー**、**浮動**、**絶対位置指定**です。

### 通常フロー

CSS において、**通常フロー** (normal flow) にはブロックボックスのブロックレベル整形、インラインボックスのインラインレベル整形、それにブロックレベルおよびインラインレベルボックスの相対位置指定と粘着位置指定があります。

詳しくは フローレイアウトを参照してください。

浮動要素
----

浮動モデルでは、ボックスは、まず通常の流れに従ってレイアウトされ、その後、流れから取り出され、ふつう左または右に配置されます。コンテンツは、フロートの側面に沿って折り返されます。

詳しくは浮動要素を参照してください。

### 絶対位置指定

絶対位置指定モデルでは (固定位置指定も含む)、ボックスは完全に通常フローから外され、包含ブロック (固定位置指定の場合はビューポート) を基準とした位置に配置されます。

要素が浮動要素、絶対位置指定、ルート要素のいずれかであれば、**フロー外**と呼ばれます。フロー外ではない要素は**フロー内**と呼ばれます。

詳しくはCSS 位置指定レイアウトを参照してください。

整形コンテキストと display プロパティ
-----------------------

ボックスは**外部表示型**、すなわち `block` または `inline` で表すことができます。この外部表示型はページ上でそのボックスが他の要素との間でどのようにふるまうかを示します。

ボックスには内部表示型もあり、これは子がどのように動作するかを示します。通常ブロックかつインラインレイアウト、または通常フローであれば、この表示型は `flow` です。これは、子要素が `block` または `inline` のどちらかであることを示します。

しかし、内部表示型は `grid` や `flex` になる可能性もあり、この場合は直接の子がグリッドまたはフレックスアイテムとして表示されます。このような場合、要素はグリッドやフレックスの整形コンテキストを生成しているといいます。多くの点でこれはブロックの整形コンテキストに似ていますが、子要素は通常のフローのアイテムではなく、フレックスやグリッドのアイテムとして動作します。

ブロックレベルとインラインレベルの各ボックスの相互作用は、 `display` の MDN ドキュメントで説明しています。

また、 display の特定の値については、ボックスレイアウトの観点から、これらの整形コンテキストがどのように機能するかを以下のリファレンスで説明しています。

* CSS グリッドレイアウト
* CSS フレックスボックスレイアウト
* CSS 表モジュール
* CSS リストとカウンターモジュール
### 独立整形コンテキスト

要素は、それを含むブロックの整形コンテキストに参加するか、独立整形コンテキストを確立するかのどちらかです。例えば、グリッドコンテナーは、その子に対して新しい**グリッド整形コンテキスト**を確立します。

**独立整形コンテキスト**は浮動要素を含み、マージンは整形コンテキストの境界を越えて相殺されることはありません。そのため、新しいブロック整形コンテキストを作成することで、ボックス内に浮動要素が収まるようにすることができます。このためには、`display: flow-root` を新しいブロック整形コンテキストを生成したいボックスに追加してください。

次の例は、`display: flow-root` の効果を示しています。黒い背景のボックスが、浮動アイテムとテキストを包み込むように見えます。編集可能な CSS から `display: flow-root` を削除すると、浮動アイテムがボックスの底から突き出てしまい、アイテムが収まらなくなります。

### ブロックボックス

仕様書では、ブロックボックス、ブロックレベルボックス、ブロックコンテナーのことを、あるところでは**ブロックボックスと**呼んでいます。これらはやや異なるものであり、ブロックボックスという用語は曖昧さがない場合にのみ使用すべきです。

#### ブロックコンテナー

**ブロックコンテナー**は、インライン整形コンテキストに参加するインラインレベルのボックスのみを含むか、ブロック整形コンテキストに参加するブロックレベルのボックスのみを含むかします。このため、上で説明した動作では、すべてのアイテムがブロックまたはインラインの書式設定コンテキストに参加できるように、無名ボックスが導入されています。要素は、ブロックレベルまたはインラインレベルのボックスを含む場合にのみ、ブロックコンテナーとなります。

#### インラインレベルボックスとブロックレベルボックス

これらはブロックコンテナーの内部に含まれるボックスであり、それぞれインラインレイアウトとブロックレイアウトに参加します。

#### ブロックボックスの場合

ブロックボックスとは、ブロックレベルボックスでありながらブロックコンテナーでもあるものを指します。 CSS の `display` で説明されているように、ボックスがブロックレベルのボックスであってもブロックコンテナーにはならないこともあります (例えば、フレックスコンテナーやグリッドコンテナーになることもあります)。

関連情報
----

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


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

font-variant
============

**`font-variant`** は CSS の一括指定プロパティで、フォントのすべての変化形を設定することができます。

CSS Level 2 (Revision 1) における `font-variant` の値 (つまり、 `normal` や `small-caps`) は、一括指定の `font` を用いて設定することもできます。

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

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

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

* `font-variant-alternates`
* `font-variant-caps`
* `font-variant-east-asian`
* `font-variant-ligatures`
* `font-variant-numeric`
構文
--

```css
font-variant: small-caps;
font-variant: common-ligatures small-caps;

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

### 値

`normal`

通常のフォントフェイスを定義します。それぞれの個別指定プロパティは通常の初期値になります。 `font-variant` の個別指定プロパティは、 `font-variant-caps`, `font-variant-numeric`, `font-variant-alternates`, `font-variant-ligatures`, `font-variant-east-asian` です。

`none`

`font-variant-ligatures` を `none` に、その他の個別指定プロパティを `normal` に、それぞれの初期値を設定します。

`<common-lig-values>`, `<discretionary-lig-values>`, `<historical-lig-values>`, `<contextual-alt-values>`

個別指定の `font-variant-ligatures` プロパティに関するキーワードを指定します。指定可能な値は、 `common-ligatures`, `no-common-ligatures`, `discretionary-ligatures`, `no-discretionary-ligatures`, `historical-ligatures`, `no-historical-ligatures`, `contextual`, `no-contextual` です。

`stylistic()`, `historical-forms`, `styleset()`, `character-variant()`, `swash()`, `ornaments()`, `annotation()`

個別指定の `font-variant-alternates` プロパティに関するキーワードや関数を指定します。

`small-caps`, `all-small-caps`, `petite-caps`, `all-petite-caps`, `unicase`, `titling-caps`

個別指定の `font-variant-caps` プロパティに関するキーワードや関数を指定します。

`<numeric-figure-values>`, `<numeric-spacing-values>`, `<numeric-fraction-values>`, `ordinal`, `slashed-zero`

個別指定の `font-variant-numeric` プロパティに関するキーワードを指定します。指定可能な値は、 `lining-nums`, `oldstyle-nums`, `proportional-nums`, `tabular-nums`, `diagonal-fractions`, `stacked-fractions`, `ordinal`, `slashed-zero` です。

`<east-asian-variant-values>`, `<east-asian-width-values>`, `ruby`

個別指定の `font-variant-east-asian` プロパティに関するキーワードを指定します。指定可能な値は、 `jis78`, `jis83`, `jis90`, `jis04`, `simplified`, `traditional`, `full-width`, `proportional-width`, `ruby` です。

公式定義
----

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

形式定義
----
```

font-variant =
  normal                                              |
  none                                                |
  [ [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ] || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || [ stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) ] || [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ] || [ <east-asian-variant-values> || <east-asian-width-values> || ruby ] || [ sub | super ] || [ text | emoji | unicode ] ]

<common-lig-values> =
  common-ligatures     |
  no-common-ligatures

<discretionary-lig-values> =
  discretionary-ligatures     |
  no-discretionary-ligatures

<historical-lig-values> =
  historical-ligatures     |
  no-historical-ligatures

<contextual-alt-values> =
  contextual     |
  no-contextual

<feature-value-name> =
  <ident>

<numeric-figure-values> =
  lining-nums    |
  oldstyle-nums

<numeric-spacing-values> =
  proportional-nums  |
  tabular-nums

<numeric-fraction-values> =
  diagonal-fractions  |
  stacked-fractions

<east-asian-variant-values> =
  jis78        |
  jis83        |
  jis90        |
  jis04        |
  simplified   |
  traditional

<east-asian-width-values> =
  full-width          |
  proportional-width

```

例
-

### スモールキャップのフォント変化形の設定

#### HTML

```html
<p class="normal">Firefox rocks!</p>
<p class="small">Firefox rocks!</p>
```

#### CSS

```css
p.normal {
  font-variant: normal;
}
p.small {
  font-variant: small-caps;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* `text-transform`
* `text-combine-upright`
* `text-orientation`


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

-webkit-text-fill-color
=======================

**`-webkit-text-fill-color`** は CSS のプロパティで、テキストの文字の塗りつぶしの色を指定します。このプロパティが設定されていない場合、 `color` プロパティの値が使用されます。

```css
/\* <color> 値 \*/
-webkit-text-fill-color: red;
-webkit-text-fill-color: #000000;
-webkit-text-fill-color: rgb(100, 200, 0);

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

構文
--

### 値

`<color>`

要素のテキストコンテンツの文字表面の塗りつぶし色。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `currentcolor` |
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 色の計算値 |
| アニメーションの種類 | 色 |

形式文法
----
```

-webkit-text-fill-color =
  <color>

```

例
-

### 塗りつぶし色の変更

#### CSS

```css
p {
  margin: 0;
  font-size: 3em;
  -webkit-text-fill-color: green;
}
```

#### HTML

```html
<p>This text is green.</p>
```

#### 結果

仕様書
---

| Specification |
| --- |
| Compatibility Standard # the-webkit-text-fill-color |

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

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

関連情報
----

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


CSS 値と単位 - CSS: カスケーディングスタイルシート

CSS 値と単位
========

CSS 宣言はすべて、プロパティと値の組を含みます。プロパティによって、値は単純な整数やキーワードから、一連のキーワードや単位つき・単位なしの値などを含みます。CSS プロパティには受け付けるデータ型の組み合わせ — 値と単位 — があります。以下ではデータ型の大部分を概観します。より詳しい情報は、それぞれのデータ型のページを参照してください。

テキストのデータ型
---------

* `<custom-ident>`
* `<ident>` として定義済みのキーワード
* `<string>`
* `url()`

テキストデータ型は、引用符で囲まれた文字の並びである `<string>` と、引用符で囲まれていない文字列、すなわち「CSS 識別子」である `<ident>` のどちらかです。 `<string>` は単一引用符か二重引用符のどちらかで囲まれます。仕様書で `<ident>` または `<custom-ident>` として挙げられている CSS 識別子は、引用符で囲んではいけません。

CSS の仕様では、ウェブ開発者が定義できる値には、アニメーションのキーフレームやフォントファミリーの名前、グリッドエリアなどがあり、これらは `<custom-ident>` または `<string>` またはその両方の形式で記述します。

ユーザーが定義するテキスト値のうち、引用符があってもなくてもよい箇所では、仕様書には `<custom-ident> | <string>`のように記してあります。これは、例えばアニメーション名のように、引用符が任意だということです。

```css
@keyframe validIdent {
  /\* ここにキーフレーム \*/
}
@keyframe 'validString' {
  /\* ここにキーフレーム \*/
}
```

引用符で囲んではいけないテキスト値もあります。たとえば `grid-area` の値は `<custom-ident>` なので、もし `content` という名前のグリッドエリアがあれば、それは引用符なしで書きます。

```css
.item {
  grid-area: content;
}
```

いっぽう、 `<string>` のデータ型、たとえば `content` プロパティの文字列値には引用符が必要です。

```css
.item::after {
  content: "This is my content.";
}
```

どんな名前でも (絵文字を含んでいるものでも) 一般的には作れますが、識別子については `none`、`unset`、 `initial`、`inherit` にはできず、先頭を数字や二重ダッシュにすることもできません。また、一般的に CSS のそのほかの定義済みキーワードを使用することは避けるのが好ましいです。詳しくは `<custom-ident>` と `<string>` のリファレンスページを参照してください。

### 定義済みキーワード値

定義済みキーワードは、特定のプロパティ用に仕様で定義されているテキスト値です。これらのキーワードは CSS 識別子でもあるので、引用符なしで使用します。

CSS の仕様書や MDN のプロパティページで、CSS プロパティの値の構文を見ると、そこに書けるキーワードは次のような形式で列挙されているでしょう。以下の値は、`float` で使用できる定義済みキーワードです。

```css
left | right | none | inline-start | inline-end
```

こうした値は引用符なしで使用します。

```css
.box {
  float: left;
}
```

### CSS 全般の値

プロパティ用に仕様で定められている定義済みキーワードのほかに、すべての CSS プロパティで使える CSS 全般のプロパティ値として、`initial`、`inherit`、`unset` があります。これらは既定値への戻し方を明示するために使用します。

`initial` キーワードは、そのプロパティの初期値として指定された値を表します。`inherit` キーワードは、その要素の親要素のプロパティで計算された値を表し、親の値を継承します。

`unset` キーワードは、そのプロパティが継承されているか否かによって、`inherit` または `initial` のいずれかと同じ動きになります。

`revert` という 4 つめの値が Cascade Level 4 の仕様で追加されましたが、いまのところブラウザーの対応状況は好ましくありません。

### URL

`url()` 型は関数記法を使用し、 URL である `<string>` を受け取ります。これは絶対 URL または相対 URL です。例えば、背景画像を読み込みたいときには以下のどちらの使い方でもできます。

```css
.box {
  background-image: url("images/my-background.png");
}

.box {
  background-image: url("https://www.exammple.com/images/my-background.png");
}
```

`url()` の引数は引用符があってもなくてもかまいません。引用符をつけない場合には、`<url-token>` と同様に解釈され、特定の文字のエスケープを行う必要があるなど、独自の要件があります。詳しくは `url()` を参照してください。

数値データ型
------

* `<integer>`
* `<number>`
* `<dimension>`
* `<percentage>`
### 整数

整数は 1 桁以上の `0` から `9` の十進数で、`1024`、`-55` など該当します。整数は `+` や `-` を先頭に付けることができますが、記号と整数の間に空白を開けないでください。

### 数値

`<number>` は実数を表します。小数点以下の小数部はあってもなくても構いません。例えば `0.255`、`128`、`-1.2` が該当します。数値にも `+` や `-` の記号を先頭に付けることができます。

### 大きさ

`<dimension>` は、`<number>` に単位が付いたものです。例えば `45deg`、`100ms`、`10px` が該当します。付けた単位の識別子は大文字小文字が区別されません。数値と単位の間には、空白やその他の文字を入れないでください。例えば、`1 cm` は無効です。

CSS では、以下のものを表すために寸法を使います。

* `<length>` (距離の単位)
* `<angle>`
* `<time>`
* `<frequency>`
* `<resolution>`

以下の節で、これらについて説明します。

#### 長さの単位

長さ (距離) の単位がプロパティの値として使用できるとき、これを `<length>` 型と呼びます。CSS の長さには、相対的な長さと絶対的な長さの 2 種類があります。

相対的な長さの単位は、他のものを基準に長さを表します。例えば、`em` はその要素のフォントの大きさを基準とする値で、`vh` はビューポートの高さを基準とする値です。

| 単位 | 基準 |
| --- | --- |
| `em` | その要素のフォントの大きさ |
| `ex` | その要素のフォントの x-height |
| `cap` | その要素のフォントの Cap height (大文字の名目上の高さ) |
| `ch` | その要素のフォントにおける narrow グリフの平均文字送り幅で、"0" (ZERO, U+0030) のグリフを表す |
| `ic` | その要素のフォントにおける full width グリフの平均文字送り幅で、"水" (CJK water ideograph, U+6C34) のグリフを表す |
| `rem` | ルート要素のフォントの大きさ |
| `lh` | その要素の行の高さ |
| `rlh` | ルート要素の行の高さ |
| `vw` | ビューポートの幅の 1% |
| `vh` | ビューポートの高さの 1% |
| `vi` | ルート要素のインライン軸におけるビューポートの大きさの 1%。 |
| `vb` | ルート要素のブロック軸におけるビューポートの大きさの 1%。 |
| `vmin` | ビューポートの小さい側の 1%。 |
| `vmax` | ビューポートの大きい側の 1%。 |

絶対的な長さの単位は物理的な長さであり、インチやセンチメートルなどと決まっています。そのため、これらの単位の多くは、印刷などの固定サイズの媒体への出力に向いています。たとえば、 `mm` は物理的なミリメートルで、センチメートルの 1/10 です。

| 単位 | 名称 | 換算 |
| --- | --- | --- |
| `cm` | センチメートル | 1cm = 96px/2.54 |
| `mm` | ミリメートル | 1mm = 1/10th of 1cm |
| `Q` | 1/4 ミリメートル | 1Q = 1/40th of 1cm |
| `in` | インチ | 1in = 2.54cm = 96px |
| `pc` | パイカ | 1pc = 1/6th of 1in |
| `pt` | ポイント | 1pt = 1/72th of 1in |
| `px` | ピクセル | 1px = 1/96th of 1in |

長さの値を使用する場合、その長さが `0` なら単位をつける必要はありません。そうでないときには、単位は必須で、大文字小文字は区別せず、値の数値部分の直後に空白をはさむことなく付けなければなりません。

#### 角度の単位

角度の値は `<angle>` 型で表され、以下の値を受け付けます。

| 単位 | 名称 | 説明 |
| --- | --- | --- |
| `deg` | 度 | 完全な円は 360 度です。 |
| `grad` | グラディアン | 完全な円は 400 グラディアンです。 |
| `rad` | ラジアン | 完全な円は 2π ラジアンです。 |
| `turn` | 周 | 完全な円は 1 周です。 |

#### 時間の単位

時間の値は `<time>` 型で表されます。時間の値を含めるときは、単位 — the `s` か `ms` — の指定が必要です。以下の値を受け付けます。

| 単位 | 名称 | 説明 |
| --- | --- | --- |
| `s` | 秒 |  |
| `ms` | ミリ秒 | 1000 ミリ秒で 1 秒です。 |

#### 周期の単位

周期の値は `<frequency>` 型で表されます。以下の値を受け付けます。

| 単位 | 名称 | 説明 |
| --- | --- | --- |
| `Hz` | ヘルツ | 1 秒間に発生する回数を表します。 |
| `kHz` | キロヘルツ | 1 キロヘルツは 1000 ヘルツです。 |

`1Hz` は `1hz` や `1HZ` とも表記でき、一秒あたり一周となります。

#### 解像度の単位

解像度の単位は `<resolution>` 型で表されます。これらは、CSS のインチ、センチメートル、ピクセルに収まるドット数を示すことで、画面などの視覚表現におけるドット 1 つの大きさを表します。以下の値を受け付けます。

| 単位 | 説明 |
| --- | --- |
| `dpi` | インチ当たりのドット数。 |
| `dpcm` | センチメートル当たりのドット数。 |
| `dppx`, `x` | ピクセル単位のドット数。 |

### パーセント

`<percentage>` は他の値の割合を表す型です。

パーセント値は、常に長さなどの他の量に対する相対的な値です。パーセントにできるプロパティごとに、パーセントが参照する量も定義されています。この量は、同じ要素の別のプロパティの値であったり、祖先要素のプロパティの値であったり、包含ブロックの測定値であったり、何か他のものであったりします。

例えば、ボックスの `width` をパーセントで指定した場合、ボックスの親要素で計算された幅を参照するパーセントになります。

```css
.box {
  width: 50%;
}
```

### パーセントと寸法の混合

一部のプロパティでは、2 つの型のいずれかの寸法を受け入れることがあります。`<length>` **または** `<percentage>` といった具合です。この場合の許容値は、`<length-percentage>` のように組合わせ単位として仕様書で詳解しています。他に取りうる組み合わせは以下の通りです。

* `<frequency-percentage>`
* `<angle-percentage>`
* `<time-percentage>`
### 特殊データ型 (他の仕様書で定義)

* `<color>`
* `<image>`
* `<position>`

#### 色

`<color>` の値は要素機能 (背景色など) の色を指定します。これは CSS 色モジュールで定義されています。

#### 画像

`<image>` の値は、CSS で使用できる各種すべての画像を指定します。これは CSS 画像の値と置換要素モジュールで定義されています。

#### 位置

`<position>` 型は位置取りできる領域内におけるオブジェクトの 2D 位置を定義します。例えば、コンテナ要素内の背景画像がこれにあたります。この型は `background-position` として解釈されるために、CSS の背景と境界の仕様書 で定義されています。

### 関数記法

* `calc()`
* `min()`
* `max()`
* `clamp()`
* `toggle()`
* `attr()`

関数記法は、 CSS でより複雑な型を表現したり、特殊な処理を呼び出すことができる値の型です。この構文は、関数名の直後に左括弧 `(` 、関数記法の引数、右括弧 `)` と続きます。関数は複数の引数を取ることができ、CSS のプロパティ値と同様の書式になります。

括弧内のホワイトスペースは許容されますが、任意です。(ただし、`min()`、`max()`、`clamp()` 関数については、各ページ内の空白に関する注意事項を参照してください。)

`rgba()` のように、古い関数記法の中にはカンマを使用するものもあります。しかし、カンマは一般的にリスト内の項目を区切るためにのみ使用されます。引数の区切りにカンマを使用するとき、カンマの前後に空白を入れるかどうかは任意です。

仕様書
---

| Specification |
| --- |
| CSS Values and Units Module Level 4  |
| CSS Color Module Level 4  |
| CSS Images Module Level 3  |


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

right
=====

**`right`** は CSS のプロパティで、位置指定要素の水平位置の決定に関与します。位置指定されていない要素には効果はありません。

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

構文
--

```css
/\* <length> 値 \*/
right: 3px;
right: 2.4em;

/\* 包含ブロックの幅に対する <percentage> \*/
right: 10%;

/\* キーワード値 \*/
right: auto;

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

### 値

`<length>`

負、null、または正の `<length>` で、以下のものを表します。

* *絶対位置指定要素*の場合は、包含ブロックの右辺までの距離。
* *相対位置指定要素*の場合は、通常の位置からの左方向への移動量。

`<percentage>`

包含ブロックの幅に対する `<percentage>` です。

`auto`

以下のように指定します。

* *絶対位置指定要素*では、要素の位置は `left` プロパティに基づいて決まり、 `width: auto` は内容物の幅に基づいて決まります。また、 `left` も `auto` であった場合は、要素は水平方向には静的要素が配置される場合と同様に配置されます。
* *相対位置指定要素*では、通常の位置から要素までの距離は `left` に基づきます。また、 `left` も `auto` であった場合は、水平方向には移動しません。

`inherit`

値が親要素（包含ブロックとは限りません）の計算値と同じであることを示すキーワードです。そして、この計算値は `<length>`, `<percentage>`, または `auto` キーワードと同様に扱われます。

解説
--

`right` の効果は、要素がどの様に配置されているか (つまり、 `position` プロパティの値) によって変わります。

* `position` が `absolute` または `fixed` に設定されている場合、 `right` プロパティは要素の右辺の外部マージンと包含ブロックの右辺の内部境界との間の距離を指定します。
* `position` が `relative` に設定されている場合、 `right` プロパティは要素の右辺が通常位置から左方向へ移動する量を指定します。
* `position` が `sticky` に設定されている場合、 `right` プロパティは要素がビューポート内にある場合は `position` が `relative` であるかのように、外の場合は `position` が `fixed` の場合と同様に動作します。
* `position` が `static` に設定されている場合、 `right` プロパティは*効果がありません*。

`left` と `right` の両方が定義された場合、他のプロパティで制約されていなければ、要素は両方を満たすように引き伸ばされます。もし要素が両方を満たすように伸びることができない場合 — 例えば `width` が宣言されている場合 — 要素の位置は*過剰制約*になります。このような場合、コンテナーが左書きの場合は `left` の値が優先され、コンテナーが右書きの場合は `right` の値が優先されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | 位置指定要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの幅に対する相対値 |
| 計算値 | 長さで指定されると相当する絶対的な長さ、パーセント値として指定されると指定値、それ以外では `auto` |
| アニメーションの種類 | length または パーセント値, calc(); |

形式定義
----
```

right =
  auto                 |
  <length-percentage>

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

```

例
-

### 絶対位置指定および相対位置指定で right を使用

#### HTML

```html
<div id="relative">Relatively positioned</div>
<div id="absolute">Absolutely positioned</div>
```

#### CSS

```css
#relative {
  width: 100px;
  height: 100px;
  background-color: #ffc7e4;
  position: relative;
  top: 20px;
  left: 20px;
}

#absolute {
  width: 100px;
  height: 100px;
  background-color: #ffd7c2;
  position: absolute;
  bottom: 10px;
  right: 20px;
}
```

#### 結果

### left と right の同時指定

`left` と `right` の両方が宣言されている場合、他の制約条件がそれを妨げない限り、要素は両方を満たすように伸びます。要素が両方を満たすように伸びたり縮んだりしない場合、要素の位置が*過剰指定*のとなり、コンテナーの書字方向に基づいて優先順位が決まります。コンテナーの書字方向が左書きであれば、`left` が優先されます。コンテナーの書字方向が右書きの場合は、`right` が優先されます。

#### HTML

```html
<div id="parent">
  Parent
  <div id="noWidth">No width</div>
  <div id="width">width: 100px</div>
</div>
```

#### CSS

```css
div {
  outline: 1px solid #cccccc;
}
#parent {
  width: 200px;
  height: 200px;
  background-color: #ffc7e4;
  position: relative;
}
/\* declare both a left and a right \*/
#width,
#noWidth {
  background-color: #c2ffd7;
  position: absolute;
  left: 0;
  right: 0;
}
/\* declare a width \*/
#width {
  width: 100px;
  top: 60px;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Positioned Layout Module Level 3 # insets |

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

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

関連情報
----

* `inset`: 関連するすべてのプロパティである `top`, `bottom`, `left`, `right` の一括指定
* 対応する論理的プロパティ: `inset-block-start`, `inset-block-end`, `inset-inline-start`, `inset-inline-end` および一括指定の `inset-block` と `inset-inline`
* `position`


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

border-block-start-style
========================

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

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

構文
--

```css
/\* <'border-style'> 値 \*/
border-block-start-style: dashed;
border-block-start-style: dotted;
border-block-start-style: groove;

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

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

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

### 値

`<'border-style'>`

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

公式定義
----

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

形式文法
----
```

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

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

```

例
-

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

#### HTML

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

#### CSS

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

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-block-start-style: dashed;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

border-block-end-style
======================

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

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

構文
--

```css
/\* <'border-style'> 値 \*/
border-block-end-style: dashed;
border-block-end-style: dotted;
border-block-end-style: groove;

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

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

### 値

`<'border-style'>`

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

公式定義
----

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

形式文法
----
```

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

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

```

例
-

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

#### HTML

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

#### CSS

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

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-block-end-style: dashed;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

scroll-margin-right
===================

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

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

構文
--

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

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

### 値

`<length>`

スクロールコンテナーの右側の辺からみた外部の距離です。

公式定義
----

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

形式文法
----
```

scroll-margin-right =
  <length>

```

仕様書
---

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

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

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

関連情報
----

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


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

:hover
======

**`:hover`** は CSS の擬似クラスで、ユーザーがポインティングデバイスで要素に反応したものの、アクティブ化する必要がないものを選択します。普通はユーザーがカーソル（マウスポインター）を要素の上にかざしたときにそうなります。

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

`:hover` 擬似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の擬似クラス (`:link`、`:visited`、`:active`) によって上書きされます。適切にリンクにスタイルを適用するには、 `:hover` の規則を `:link` と `:visited` の後、 `:active` の前に置き、 *LVHA 順*: `:link` — `:visited` — `:hover` — `:active` で定義されるようにしてください。

**メモ:** `:hover` 擬似クラスはタッチ画面で問題になります。ブラウザーによっては、 `:hover` 擬似クラスに全く一致しなかったり、要素をタッチした直後だけ一致したり、ユーザーが指を離しても一致し続け、他の要素にタッチするまで続いたりします。ウェブの開発者は、ホバー機能が制限されていたり存在しなかったりしても、コンテンツにアクセスできるように考慮してください。

構文
--

```css
:hover {
  /\* ... \*/
}
```

例
-

### 基本的な例

#### HTML

```html
<a href="#">このリンクの上を通過させてみてください。</a>
```

#### CSS

```css
a {
  background-color: powderblue;
  transition: background-color 0.5s;
}

a:hover {
  background-color: gold;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # selector-hover |
| Selectors Level 4 # the-hover-pseudo |

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

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

関連情報
----

* Chromium bug #370155: Don't make `:hover` sticky on tap on sites that set a mobile viewport
* Chromium bug #306581: Immediately show hover and active states on touch when page isn't scrollable.


CSS コンテナークエリー - CSS: カスケーディングスタイルシート

CSS コンテナークエリー
=============

 コンテナークエリーによって、要素のコンテナーのサイズに基づいて要素にスタイル設定を適用することができます。例えば、コンテナーが周囲の文脈で利用できる空間が少ない場合、特定の要素を非表示にしたり、小さなフォントを使用したりすることができます。
 コンテナークエリーは、メディアクエリーの代替となるもので、ビューポートサイズや他の端末の特性に基づいて要素にスタイルを適用します。

![ブラウザーの全幅であるビューポートの幅に基づくメディアクエリーと、コンテナー要素の幅であるコンテナーコンテキストの幅に基づくコンテナークエリー。](/ja/docs/Web/CSS/CSS_container_queries/container-query.svg)

コンテナークエリーの使用
------------

 コンテナークエリーを使用するには、要素で**コンテナーコンテキスト**を宣言し、後でこのコンテナーの寸法をクエリーしたいとブラウザーが認識できるようにする必要があります。
 これを行うには、 `container-type` プロパティに `size`、`inline-size`、`normal` の値を指定して使用します。

これらの値は以下のような効果があります。

`size`

 クエリーは、コンテナーのインラインおよびブロック軸の寸法に基づきます。
 コンテナーにレイアウト、スタイル設定、サイズ格納を適用します。

`inline-size`

 クエリーは、コンテナーのインライン軸の寸法に基づきます。
 その要素にレイアウト、スタイル設定、インラインサイズ格納を適用します。

`normal`

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

次の例では、タイトルとテキストを持つブログ記事用のカード部品を考えてみましょう。

```html
<div class="post">
  <div class="card">
    <h2>カードのタイトル</h2>
    <p>カードのコンテンツ</p>
  </div>
</div>
```

コンテナーコンテキストは `container-type` プロパティを使用して作成することができます。

```css
.post {
  container-type: inline-size;
}
```

 次に、 `@container` アットルールを使用してコンテナークエリーを定義します。
 次の例のクエリーは、格納コンテキストを持つ最も近い祖先のサイズに基づいて要素にスタイルを適用します。
 具体的には、このクエリーは、コンテナーの幅が `700px` よりも広い場合、カードのタイトルに大きなフォントサイズを適用します。

```css
/\* カードタイトルの既定のスタイルを設定 \*/
.card h2 {
  font-size: 1em;
}

/\* コンテナーが 700px より広い場合 \*/
@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}
```

 コンテナークエリーを使用することで、毎回カードが配置される場所を詳細に知ることなく、ページの複数の領域でカードを再利用することができます。
 カードがあるコンテナーが `700px` より狭い場合、カードタイトルのフォントは小さくなり、カードが `700px` より広いコンテナーにある場合、カードタイトルのフォントは大きくなります。

コンテナークエリーの構文の詳細については、 `@container` のページを参照してください。

### 格納コンテキストの命名

 前の節では、コンテナークエリーは、コンテナーコンテキストを持つ最も近い祖先に基づいてスタイル設定を適用しました。
 `container-name` プロパティを使用して、コンテナーコンテキストに名前を付けることが可能です。一度名前をつけると、その名前を `@container` クエリーで使用することができ、特定のコンテナーを対象とすることができます。
 次の例では、 `sidebar` という名前のコンテナーコンテキストを作成しています：

```css
.post {
  container-type: inline-size;
  container-name: sidebar;
}
```

そして、 `@container` アットルールを用いて、この格納コンテキストを対象とすることができます。

```css
@container sidebar (min-width: 700px) {
  .card {
    font-size: 2em;
  }
}
```

コンテナーコンテキストの命名に関する詳細情報は、 `container-name` ページにあります。

### コンテナー一の括指定構文

コンテナーを宣言するための一括指定は `container` プロパティを使用します。

```css
.post {
  container: sidebar / inline-size;
}
```

このプロパティの詳細情報については、 `container` のリファレンスを参照してください。

### コンテナークエリーの長さ単位

 コンテナークエリーを使用してコンテナーにスタイルを設定する場合、コンテナークエリーの長さ単位を使用することができます。
 この単位は、クエリーするコンテナーの寸法に相対する長さを指定します。
 コンテナーに対する相対的な長さの単位を使用する成分は、具体的な長さの値を再計算する必要がなく、様々なコンテナーでより柔軟に使用することができます。

コンテナークエリーの長さの単位は以下の通りです。

* `cqw`: クエリーコンテナーの幅の 1%
* `cqh`: クエリーコンテナーの高さの 1%
* `cqi`: クエリーコンテナーのインラインサイズの 1%
* `cqb`: クエリーコンテナーのブロックサイズの 1%
* `cqmin`: `cqi` または `cqb` の小さい方
* `cqmax`: `cqi` または `cqb` の大きい方

次の例では、 `cqi` 単位を用いて、コンテナーのインラインサイズに基づいて見出しのフォントサイズを設定しています。

```css
@container (min-width: 700px) {
  .card h2 {
    font-size: max(1.5em, 1.23em + 2cqi);
  }
}
```

これらの単位の詳細については、コンテナークエリーの長さの単位を参照してください。

コンテナークエリーの代替
------------

 コンテナークエリーにまだ対応していないブラウザーでは、 `grid` と `flex` を使用することで、このページで用いたカードコンポーネントに同様の効果を作成することができます。
 次の例では、 `grid-template-columns` 宣言を使用して、カード部品の 2 列のレイアウトを作成しています。

```css
.card {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
```

ビューポートが小さい端末用に一列のレイアウトを使用したい場合は、メディアクエリーを使用してグリッドテンプレートを変更することができます。

```css
@media (max-width: 700px) {
  .card {
    grid-template-columns: 1fr;
  }
}
```

関連情報
----

* メディアクエリー
* CSS `@container` アットルール
* CSS `contain` プロパティ
* CSS `container` 一括指定プロパティ
* CSS `container-name` プロパティ
* CSS `content-visibility` プロパティ
* Say Hello to CSS Container Queries (Ahmad Shadeed)
* Container Queries: a Quick Start Guide
* Collection of Container Queries articles


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

<relative-size>
===============

**`<relative-size>`** は CSS のデータ型で、相対サイズのキーワードを記述します。 `<relative-size>` キーワードは、親要素の計算サイズからの相対サイズを定義します。このデータ型は `font` の一括指定と `font-size` プロパティで使用します。

構文
--
```

<relative-size> = smaller | larger
```

### 値

データ型 `<relative-size>` は下記の一覧からキーワード値を選んで定義します。

`smaller`

継承サイズより一回り小さい相対サイズ。

`bigger`

継承サイズより一回り大きい相対サイズ。

解説
--

`<relative-size>` キーワードは要素の現在のサイズからの相対サイズです。継承サイズが `<absolute-size>` キーワードを使用して定義されている場合、 `<relative-size>` 値は `<absolute-size>` 表の隣接サイズと等しくなります。それ以外の場合、相対的なサイズの増減は 120% から 150% の間になります。

例
-

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

```html
<ul>
  <li class="smaller">font-size: smaller;</li>
  <li>font-size が指定されていない</li>
  <li class="larger">font-size: larger;</li>
</ul>
```

```css
li {
  margin-bottom: 0.3em;
}
.smaller {
  font-size: smaller;
}
.larger {
  font-size: larger;
}
```

#### 結果

仕様書
---

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

関連情報
----

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


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

clip-path
=========

**`clip-path`** は CSS のプロパティで、要素のどの部分を表示するかを設定するクリッピング領域を作ります。具体的には、領域の内部の部分は表示され、外側の部分は非表示になります。

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

構文
--

```css
/\* キーワード値 \*/
clip-path: none;

/\* <clip-source> 値 \*/
clip-path: url(resources.svg#c1);

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

/\* <basic-shape> 値 \*/
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: ellipse(50px 60px at 0 10% 20%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path(
  "M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"
);

/\* ボックスおよびシェイプ値の組み合わせ \*/
clip-path: padding-box circle(50px at 0 100px);

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

`clip-path` プロパティは、以下に挙げた値のうちの一つまたは組み合わせで指定します。

### 値

`<clip-source>`

`url()` で、SVG の `<clipPath>` 要素を参照します。

`<basic-shape>`

`<geometry-box>` 値で寸法と位置が定義されるシェイプです。ジオメトリボックスが指定されない場合、参照ボックスとして `border-box` が使用されます。以下のいずれかです。

`inset()`

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

`circle()`

半径と中心位置を使用して円を定義します。

`ellipse()`

2つの半径と位置を指定して楕円を定義します。

`polygon()`

SVG の塗りつぶし規則と頂点のセットを用いて多角形を定義します。

`path()` (en-US)

SVG の塗りつぶし規則と SVG のパス定義を用いて形状を定義します。

`<geometry-box>`

`<basic-shape>` と共に指定された場合、この値は基本シェイプの参照ボックスを定義します。単独で指定された場合、指定のボックスの辺を、角の形 (`border-radius` など) を含めてクリッピングパスにします。ジオメトリボックスは以下の値のうちの一つが指定できます。

`margin-box`

マージンボックスを参照ボックスとして使用します。

`border-box`

境界ボックスを参照ボックスとして使用します。

`padding-box`

パディングボックスを参照ボックスとして使用します。

`content-box`

コンテンボックスを参照ボックスとして使用します。

`fill-box`

オブジェクトの境界ボックスを参照ボックスとして使用します。

`stroke-box`

ストロークの境界ボックスを参照ボックスとして使用します。

`view-box`

最も近い SVG のビューポートを参照ボックスとして使用します。 SVG のビューポートを作成する要素に `viewBox` 属性が指定されている場合、参照ボックスは `viewBox` 属性で指定された座標系の原点に位置し、参照ボックスの寸法は `viewBox` 属性の width および height 値に設定されます。

`none`

クリッピングパスは作成されません。

**メモ:** 計算値が **`none`** 以外の場合は、新しい重ね合わせコンテキストを生成します。これは、 `opacity` が `1` 以外の値の場合と同様です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `none` |
| 適用対象 | すべての要素。 SVG の場合は `defs` 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される |
| 継承 | なし |
| パーセント値 | 指定されている場合は参照ボックス、それ以外の場合は境界ボックスに対する相対値 |
| 計算値 | 指定通り、ただし `url` の値は絶対パスになる |
| アニメーションの種類 | `basic-shape` で指定された場合はあり、それ以外の場合はなし |

形式文法
----
```

clip-path =
  <clip-source>                        |
  [ <basic-shape> || <geometry-box> ]  |
  none

<clip-source> =
  <url>

<geometry-box> =
  <shape-box>  |
  fill-box     |
  stroke-box   |
  view-box

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

<shape-box> =
  <visual-box>  |
  margin-box

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

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

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

```

例
-

### HTML と SVG の比較
```

<svg class="defs">
  <defs>
    <clipPath id="myPath" clipPathUnits="objectBoundingBox">
      <path
 d="M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z" />
    </clipPath>
  </defs>
</svg>

<div class="grid">
  <div class="col">
    <div class="note">clip-path: none</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="none">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="none">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">
      clip-path: url(#myPath)<br /><br />
      Assuming the following clipPath definition:
      <pre>
<svg>
  <clipPath id="myPath" clipPathUnits="objectBoundingBox">
    <path d="M0.5,1
      C 0.5,1,0,0.7,0,0.3
      A 0.25,0.25,1,1,1,0.5,0.3
      A 0.25,0.25,1,1,1,1,0.3
      C 1,0.7,0.5,1,0.5,1 Z" />
  </clipPath>
</svg></pre
 >
    </div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="svg">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="svg">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">
      clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45
      Q135,90,75,130 Q15,90,15,45 Z')
    </div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="svg2">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="svg2">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: circle(25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape1">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape1">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape2">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape2">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: fill-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape3">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape3">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: stroke-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape4">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape4">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: view-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape5">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape5">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: margin-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape6">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape6">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: border-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape7">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape7">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: padding-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape8">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape8">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: content-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape9">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container viewbox">
          <svg viewBox="0 0 192 192">
            <g class="shape9">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>
```

```css
html,
body {
  height: 100%;
  box-sizing: border-box;
  background: #eee;
}

.grid {
  width: 100%;
  height: 100%;
  display: flex;
  font: 1em monospace;
}

.row {
  display: flex;
  flex: 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
}

.col {
  flex: 1 auto;
}

.cell {
  margin: 0.5em;
  padding: 0.5em;
  background-color: #fff;
  overflow: hidden;
  text-align: center;
  flex: 1;
}

.note {
  background: #fff3d4;
  padding: 1em;
  margin: 0.5em 0.5em 0;
  font: 0.8em sans-serif;
  text-align: left;
  white-space: nowrap;
}

.note + .row .cell {
  margin-top: 0;
}

.container {
  display: inline-block;
  border: 1px dotted grey;
  position: relative;
}

.container:before {
  content: "margin";
  position: absolute;
  top: 2px;
  left: 2px;
  font: italic 0.6em sans-serif;
}

.viewbox {
  box-shadow:
    1rem 1rem 0 #efefef inset,
    -1rem -1rem 0 #efefef inset;
}

.container.viewbox:after {
  content: "viewbox";
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  font: italic 0.6em sans-serif;
}

.cell span {
  display: block;
  margin-bottom: 0.5em;
}

p {
  font-family: sans-serif;
  background: #000;
  color: pink;
  margin: 2em;
  padding: 3em 1em;
  border: 1em solid pink;
  width: 6em;
}

.none {
  clip-path: none;
}
.svg {
  clip-path: url(#myPath);
}
.svg2 {
  clip-path: path(
    "M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z"
  );
}
.shape1 {
  clip-path: circle(25%);
}
.shape2 {
  clip-path: circle(25% at 25% 25%);
}
.shape3 {
  clip-path: fill-box circle(25% at 25% 25%);
}
.shape4 {
  clip-path: stroke-box circle(25% at 25% 25%);
}
.shape5 {
  clip-path: view-box circle(25% at 25% 25%);
}
.shape6 {
  clip-path: margin-box circle(25% at 25% 25%);
}
.shape7 {
  clip-path: border-box circle(25% at 25% 25%);
}
.shape8 {
  clip-path: padding-box circle(25% at 25% 25%);
}
.shape9 {
  clip-path: content-box circle(25% at 25% 25%);
}

.defs {
  width: 0;
  height: 0;
  margin: 0;
}

pre {
  margin-bottom: 0;
}

svg {
  margin: 1em;
  font-family: sans-serif;
  width: 192px;
  height: 192px;
}

svg rect {
  stroke: pink;
  stroke-width: 16px;
}

svg text {
  fill: pink;
  text-anchor: middle;
}

svg text.em {
  font-style: italic;
}
```

### 完全な例

#### HTML

```html
<img id="clipped" src="mdn.svg" alt="MDN logo" />
<svg height="0" width="0">
  <defs>
    <clipPath id="cross">
      <rect y="110" x="137" width="90" height="90" />
      <rect x="0" y="110" width="90" height="90" />
      <rect x="137" y="0" width="90" height="90" />
      <rect x="0" y="0" width="90" height="90" />
    </clipPath>
  </defs>
</svg>

<select id="clipPath">
  <option value="none">none</option>
  <option value="circle(100px at 110px 100px)">circle</option>
  <option value="url(#cross)" selected>cross</option>
  <option value="inset(20px round 20px)">inset</option>
  <option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')">
    path
  </option>
</select>
```

#### CSS

```css
#clipped {
  margin-bottom: 20px;
  clip-path: url(#cross);
}
```

```
const clipPathSelect = document.getElementById("clipPath");
clipPathSelect.addEventListener("change", function (evt) {
  document.getElementById("clipped").style.clipPath = evt.target.value;
});
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Masking Module Level 1 # the-clip-path |
| CSS Shapes Module Level 1 # supported-basic-shapes |

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

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

関連情報
----

* Shapes in clipping and masking – and how to use them
* CSS プロパティ: `mask`, `filter`
* SVG 効果の HTML コンテンツへの適用
* SVG 属性:
    + `clip-path (en-US)`
    + `clip-rule (en-US)`


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

ident
=====

**`<ident>`** CSS データ型 は、 identifier として使用される任意の文字列を意味します。

構文
--

`<custom-ident>` の構文は CSS の識別子 (プロパティ名など)に似ていますが、 大文字と小文字の区別 がある点が違います。 これは次の文字から成る文字の並びです:

* アルファベット (`A` - `Z` と `a` - `z`)
* 数字 (`0` - `9`)
* ハイフン (`-`)
* アンダースコア (`_`)
* エスケープ文字 (バックスラッシュ `\` に続く)
* Unicode 文字 (バックスラッシュ `\` と、それに続く 1-6 個の 16 進数を形式をとる、Unicode コードポイント)

大文字と小文字の区別 があるため `id1`、 `Id1`、 `iD1` そして `ID1` は全て異なる識別子である点に注意してください。しかし、文字をエスケープする方法はいくつか存在するため、 `toto\?` と `toto\3F` は同じ識別子です。

例
-

### 有効な識別子
```

nono79        アルファベットと数字の組み合わせ
ground-level  アルファベットとダッシュの組み合わせ
-test         ダッシュとそれに続く英数字
--toto        identifier の様なカスタムプロパティ
_internal     アンダースコアとそれに続く英数字
\22 toto      Unicode 文字とそれに続く一連の英数字
bili\.bob     正しくエスケープされたピリオド
```

### 無効な識別子
```

34rem     数字で始まってはいけません
-12rad    ダッシュで始まって数字が続いてはいけません
bili.bob  アルファベット、 _、 - のみをエスケープする必要はありません
'bilibob'  これは `<string>` になります
"bilibob"  これは `<string>` になります
```

仕様
--

| Specification |
| --- |
| CSS Values and Units Module Level 4 # css-identifier |

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

*このデータ型は、他の CSS 構文の定義を単純化するために使用される便利な型なので実際の型ではありません。*

関連情報
----

* `<custom-ident>` – CSS 全体のキーワードを除く `<ident>` 値の制限されたサブセット、 `custom properties` 及びその他のプロパティ値。


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

letter-spacing
==============

**`letter-spacing`** は CSS のプロパティで、テキストの水平方向の字間のスペースに関する挙動を設定します。この値はテキストを描画する際に文字間の自然な空間に追加されます。 `letter-spacing` が正の値であった場合は、文字と文字の間が開き、 `letter-spacing` が負の値であった場合は、文字と文字が互いに近づきます。

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

構文
--

```css
/\* キーワード値 \*/
letter-spacing: normal;

/\* <length> 値 \*/
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: 0.3px;

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

### 値

`normal`

現在のフォントでの通常の字間になります。 `0` の値とは異なり、この値はユーザーエージェントが文字列を両端揃えするために字間を変えることを許可します。

`<length>`

既定の字間に*加える*字間のスペースを指定します。負の値も指定可能ですが、実装に依存した制限があるかもしれません。ユーザーエージェントは文字列を両端揃えするために、字間スペースをさらに増減させることはありません。

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

正と負のどちらでも、大きすぎる値を `letter-spacing` に指定すると読みづらくなってしまいます。正の値として大きすぎる場合、文字と文字が離れすぎるせいでひとつの単語ではなくバラバラの文字に見えてしまいます。負の値として大きすぎる場合、文字と文字が重なり合うために何が書いてあるのか分からなくなってしまいます。

フォントの文字幅は種類ごとに異なるため、読みやすい letter-spacing もそれぞれ異なります。すべてのフォントで読みやすさを提供してくれる単一の設定値というものはありません。

* MDN "WCAG を理解する ― ガイドライン 1.4 の解説"
* Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0
国際化の考慮
------

書き言葉の中には、字間のスペースを適用してはいけないものがあります。例えば、アラビア文字を使用する言語では、次の例のように、つながった文字が視覚的につながったままであることが求められます。字間スペースを適用すると、テキストが壊れたように見えてしまいます。

>
> شسيبتنمك
>
>
>

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | すべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | あり |
| 計算値 | 絶対的な長さまたはキーワード `normal` のどちらかから成る最適値 |
| アニメーションの種類 | length |

形式文法
----
```

letter-spacing =
  normal    |
  <length>

```

例
-

### 字間の設定

#### HTML

```html
<p class="normal">letter spacing</p>
<p class="em-wide">letter spacing</p>
<p class="em-wider">letter spacing</p>
<p class="em-tight">letter spacing</p>
<p class="px-wide">letter spacing</p>
```

#### CSS

```css
.normal {
  letter-spacing: normal;
}
.em-wide {
  letter-spacing: 0.4em;
}
.em-wider {
  letter-spacing: 1em;
}
.em-tight {
  letter-spacing: -0.05em;
}
.px-wide {
  letter-spacing: 6px;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Text Module Level 3 # letter-spacing-property |

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

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

関連情報
----

* `font-kerning`


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

<color-interpolation-method>
============================

**`<color-interpolation-method>`** は CSS のデータ型で、 `<color>` 値間の補間に使用する色空間を表します。これを使用すると、 `color-mix()` や `linear-gradient()` のような色関連の関数記法における既定の補間色空間を上書きすることができます。

`<color>` 値を補間する場合、補間色空間は Oklab が既定値です。

構文
--

`<color-interpolation-method>` は、補間に矩形色空間を使用するか、極座標色空間とオプションの色相補間を使用するかを指定します。
```

in <rectangular-color-space>
// または
in <polar-color-space>[ <hue-interpolation method>]
```

### 値

`<rectangular-color-space>`

`srgb`、`srgb-linear`、`lab`、`oklab`、`xyz`、`xyz-d50`、`xyz-d65` のいずれかのキーワードです。

`<polar-color-space>`

`hsl`、`hwb`、`lch`、`oklch` のいずれかです。

`<hue-interpolation-method>` 省略可

色相補間のアルゴリズム。既定値は `shorter hue` です。

### 形式文法
```

<color-interpolation-method> =
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]

<rectangular-color-space> =
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       |
  lab           |
  oklab         |
  xyz           |
  xyz-d50       |
  xyz-d65

<polar-color-space> =
  hsl    |
  hwb    |
  lch    |
  oklch

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

```

例
-

### グラデーションを使用する補間色空間の比較

次の例は、 `linear-gradient()` にさまざまな補間色空間を使用した場合の効果を示しています。

#### HTML

```html
<div>sRGB:</div>
<div class="gradient srgb"></div>
<div>Oklab:</div>
<div class="gradient oklab"></div>
<div>Oklch (with <code>longer hue</code>):</div>
<div class="gradient oklch-longer"></div>
```

#### CSS
```

/\* Fallback styles \*/
.srgb {
  background-image: linear-gradient(
    to right,
    rgb(0% 0% 100%),
    rgb(20% 0% 80%),
    rgb(40% 0% 60%),
    rgb(60% 0% 40%),
    rgb(80% 0% 20%),
    rgb(100% 0% 0%)
  );
}
.oklab {
  background-image: linear-gradient(
    to right,
    oklab(45.2% -0.032 -0.312),
    oklab(48.7% 0.019 -0.224),
    oklab(52.2% 0.07 -0.137),
    oklab(55.8% 0.122 -0.049),
    oklab(59.3% 0.173 0.038),
    oklab(62.8% 0.225 0.126)
  );
}
.oklch-longer {
  background-image: linear-gradient(
    to right,
    oklch(45.2% 0.313 264),
    oklch(46.8% 0.308 243),
    oklch(48.4% 0.303 221),
    oklch(50% 0.298 200),
    oklch(51.6% 0.293 179),
    oklch(53.2% 0.288 157),
    oklch(54.8% 0.283 136),
    oklch(56.4% 0.278 115),
    oklch(58% 0.273 93),
    oklch(59.6% 0.268 72),
    oklch(61.2% 0.263 51),
    oklch(62.8% 0.258 29)
  );
}
```

```css
.gradient {
  height: 50px;
  width: 100%;
}
.srgb {
  background-image: linear-gradient(in srgb to right, blue, red);
}
.oklab {
  background-image: linear-gradient(in oklab to right, blue, red);
}
.oklch-longer {
  background-image: linear-gradient(in oklch longer hue to right, blue, red);
}
```

#### 結果

仕様書
---

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

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

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

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

### css.types.image.gradient.conic-gradient.interpolation\_color\_space

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

### css.types.image.gradient.linear-gradient.interpolation\_color\_space

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

### css.types.image.gradient.radial-gradient.interpolation\_color\_space

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

### css.types.image.gradient.repeating-conic-gradient.interpolation\_color\_space

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

### css.types.image.gradient.repeating-linear-gradient.interpolation\_color\_space

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

### css.types.image.gradient.repeating-radial-gradient.interpolation\_color\_space

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

関連情報
----

* `<color>`, `<gradient>`
* `<hue-interpolation-method>`


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

:-moz-only-whitespace
=====================

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

**メモ:** Selectors Level 4 では、 `:empty` セレクターが `:-moz-only-whitespace` のように動作するよう変更されましたが、まだこれに対応しているブラウザーはありません。

**`:-moz-only-whitespace`** は CSS の擬似クラスで、ホワイトスペースのみが入ったテキストノードのみを含む要素に一致します。（これには空のテキストノードや子ノードを持たない要素も含みます。）

構文
--
```

:-moz-only-whitespace
```

例
-

### 単純な :-moz-only-whitespace の例

#### HTML

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

#### CSS

```css
div {
  border: 4px solid red;
}

:-moz-only-whitespace {
  border-color: lime;
}
```

#### 結果

仕様書
---

短期間だけ `:blank` として Selectors Level 4 において定義されましたが、その後に機能的に `:empty` に統合され、 `:blank` は空欄の `<input>` を意味するように再定義されました。

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

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

関連情報
----

* `:blank`
Experimental
* `:empty`


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

<display-box>
=============

これらのキーワードは、要素が表示ボックスを作るかどうかを定義します。

構文
--

有効な `<display-box>` の値は以下のとおりです。

`contents`

これらの要素は自身のために特定のボックスを生成しません。擬似ボックスやその子ボックスで置き換えられます。なお、 CSS Display Level 3 仕様書では、 `contents` の値が「普通ではない要素」 — 置換要素のように、 CSS ボックスの純粋な概念に従って表示されない要素に影響する方法を定義しています。詳しくは Appendix B: Effects of display: contents on Unusual Elements を参照してください。

*ブラウザーのバグにより、現在のところ、この値を使用するとアクセシビリティツリーから要素を削除します。 — 読み上げソフトは中に何があるかを見ません。詳しくは後述のアクセシビリティの考慮の節をご覧ください。*

`none`

 要素の表示を無くし、レイアウトに影響を与えなくなります (文書は要素が存在しないかのように表示されます)。すべての子孫要素も表示がなくなります。
 要素が通常占める空間を確保しつつ、実際には何も表示しないようにしたいのであれば、代わりに `visibility` プロパティを使用してください。

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

多くのブラウザーの現在の実装では、アクセシビリティツリーから `display` の値が `contents` である要素を削除します。これにより、その要素は — また、一部の版のブラウザーではその子孫要素も — 読み上げ技術で読み上げられなくなります。これは CSSWG 仕様書によれば、正しくない動作です。

* More accessible markup with display: contents | Hidde de Vries
* Display: Contents Is Not a CSS Reset | Adrian Roselli
例
-

最初の例では、 secret クラスの段落に `display: none` を設定します。ボックスとその内容は表示されなくなります。

### display: none

#### HTML

```html
<p>Visible text</p>
<p class="secret">Invisible text</p>
```

#### CSS

```css
p.secret {
  display: none;
}
```

#### 結果

### display: contents

この例では、外側の `<div>` が 2 ピクセルの赤い境界線と 300px の幅を持っています。しかし、 `display: contents` も指定されているので、この `<div>` は表示されず、境界線や幅は適用されなくなり、子要素は親要素が存在しなかったかのように表示されます。

#### HTML

```html
<div class="outer">
  <div>Inner div.</div>
</div>
```

#### CSS

```css
.outer {
  border: 2px solid red;
  width: 300px;
  display: contents;
}

.outer > div {
  border: 1px solid green;
}
```

#### 結果

仕様書
---

#### No specification found

No specification data found for `css.properties.display.contents`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

### contents の対応

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

関連情報
----

* `display`
    + `<display-outside>`
    + `<display-inside>`
    + `<display-listitem>`
    + `<display-internal>`
    + `<display-legacy>`
* Display: Contents Is Not a CSS Reset | Adrian Roselli
* More accessible markup with display: contents — hiddedevries.nl


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

CSS カウンタースタイル
=============

**CSS カウンタースタイル** (CSS Counter Styles) は CSS のモジュールの一つで、独自のカウンタースタイルを定義することができます。

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

### プロパティ

* `counter-increment`
* `counter-reset`
### アットルール

* `@counter-style`
    + `system`
    + `additive-symbols`
    + `negative`
    + `prefix`
    + `suffix`
    + `range`
    + `pad`
    + `speak-as`
    + `fallback`
ガイド
---

CSS カウンターの使用

カウンターを使用して HTML 要素に番号を振る方法や、複雑なカウンターを実行する方法を説明します。

仕様書
---

| Specification |
| --- |
| CSS Counter Styles Level 3  |

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

### `@counter-style` ルール

{{Compat}}### `counter-increment` プロパティ

{{Compat}}### `counter-reset` プロパティ

{{Compat}}


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

margin-bottom
=============

**`margin-bottom`** は CSS のプロパティで、要素の下側のマージン領域を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。

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

![要素ボックスにおける CSS の margin-bottom プロパティの効果](/ja/docs/Web/CSS/margin-bottom/margin-bottom.svg)

このプロパティは、 `<span>` または `<code>` のような非置換のインライン要素には効果がありません。

構文
--

```css
/\* <length> 値 \*/
margin-bottom: 10px; /\* 絶対的な寸法 \*/
margin-bottom: 1em; /\* 文字の寸法からの相対 \*/
margin-bottom: 5%; /\* 直近のブロックコンテナーの幅からの相対 \*/

/\* キーワード値 \*/
margin-bottom: auto;

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

`margin-bottom` プロパティは `auto` キーワード、または `<length>` や `<percentage>` で指定されます。正の数、ゼロ、負の数が指定できます。

### 値

`<length>`

マージンの寸法を固定値で表したものです。

`<percentage>`

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

`auto`

ブラウザ―が適切な値を選択して使用します。 `margin` を参照してください。

公式定義
----

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

形式文法
----
```

margin-bottom =
  <length-percentage>  |
  auto

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

```

例
-

### 正および負の数の下側のマージンの設定

#### HTML

```html
<div class="container">
  <div class="box0">Box 0</div>
  <div class="box1">Box 1</div>
  <div class="box2">Box one's negative margin pulls me up</div>
</div>
```

#### CSS

div に margin-bottom と height を設定する CSS です。

```css
.box0 {
  margin-bottom: 1em;
  height: 3em;
}
.box1 {
  margin-bottom: -1.5em;
  height: 4em;
}
.box2 {
  border: 1px dashed black;
  border-width: 1px 0;
  margin-bottom: 2em;
}
```

包含要素と div の定義の一部です。これによってマージンの効果がより明確に見えます。

```css
.container {
  background-color: orange;
  width: 320px;
  border: 1px solid black;
}
div {
  width: 320px;
  background-color: gold;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* `margin-top`, `margin-right`, `margin-left` と `margin` 一括指定
* 対応する論理的プロパティ: `margin-block-start`, `margin-block-end`, `margin-inline-start`, `margin-inline-end` および一括指定の `margin-block` と `margin-inline`


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

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

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

**`-webkit-text-stroke-color`** は CSS のプロパティで、テキストの文字の線の色を示します。このプロパティが設定されない場合、 `color` プロパティの値が使用されます。

```css
/\* <color> 値 \*/
-webkit-text-stroke-color: red;
-webkit-text-stroke-color: #e08ab4;
-webkit-text-stroke-color: rgb(200, 100, 0);

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

構文
--

### 値

`<color>`

線の色。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `currentcolor` |
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 色の計算値 |
| アニメーションの種類 | 色 |

形式文法
----
```

-webkit-text-stroke-color =
  <color>

```

例
-

### 角の色を変化させる

#### HTML

```html
<p>Text with stroke</p>
<input type="color" value="#ff0000" />
```

#### CSS

```css
p {
  margin: 0;
  font-size: 4em;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: #ff0000; /\* ライブサンプルで変更可能 \*/
}
```

```
var colorPicker = document.querySelector("input");
colorPicker.addEventListener("change", function (evt) {
  document.querySelector("p").style.webkitTextStrokeColor = evt.target.value;
});
```

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

:is()
=====

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

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

* Learn more
* See full compatibility
* Report feedback
**`:is()`** は CSS の擬似クラス関数で、セレクターのリストを引数に取り、リスト中のセレクターの何れか一つに当てはまる要素をすべて選択します。数多くのセレクターを小さくまとめて書くのに便利です。

**メモ:** 元々は `:matches()` （と `:any()`）という名前でしたが、CSSWG issue #3258 で `:is()` に改名されました。

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

擬似要素は `:is()` のセレクターリストでは無効です。

### :is() と :where() の違い

この 2 つの違いは、 `:is()` がセレクター全体の詳細度にカウントされる（最も詳細な引数の詳細度を取る）のに対し、 `:where()` は詳細度の値が 0 であることです。これは、 `:where()` 参照ページの例で実証されています。

### セレクターの解釈の許容

仕様では `:is()` と `:where()` が省略可能なセレクターリストを受け入れることを定義しています。

CSS でセレクターリストを使用している場合、セレクターのどれかが無効な場合、リスト全体が無効とみなされます。 `:is()` や `:where()` を使用している場合、1 つでも解釈に失敗するとセレクターのリスト全体が無効とみなされるのではなく、不正なセレクターや対応していないセレクターは無視され、他のセレクターが使用されます。

```css
:is(:valid, :unsupported) {
  /\* … \*/
}
```

`:unsupported` に対応していないブラウザーでも、正しく解釈して `:valid` に一致します。一方、

```css
:valid,
:unsupported {
  /\* … \*/
}
```

`:unupported` に対応していないブラウザーでは、 `:valid` に対応していても無視します。

例
-

### リストセレクターの簡略化

`:is()` 擬似クラスは CSS セレクターをとても簡潔にすることができます。例えば以下の CSS の場合、

```css
/\* 3 層（以上）の順序なしリストに四角形を使用 \*/
ol ol ul,
ol ul ul,
ol menu ul,
ol dir ul,
ol ol menu,
ol ul menu,
ol menu menu,
ol dir menu,
ol ol dir,
ol ul dir,
ol menu dir,
ol dir dir,
ul ol ul,
ul ul ul,
ul menu ul,
ul dir ul,
ul ol menu,
ul ul menu,
ul menu menu,
ul dir menu,
ul ol dir,
ul ul dir,
ul menu dir,
ul dir dir,
menu ol ul,
menu ul ul,
menu menu ul,
menu dir ul,
menu ol menu,
menu ul menu,
menu menu menu,
menu dir menu,
menu ol dir,
menu ul dir,
menu menu dir,
menu dir dir,
dir ol ul,
dir ul ul,
dir menu ul,
dir dir ul,
dir ol menu,
dir ul menu,
dir menu menu,
dir dir menu,
dir ol dir,
dir ul dir,
dir menu dir,
dir dir dir {
  list-style-type: square;
}
```

... これを次のように置き換えることができます。

```css
/\* 3層（以上）の順序なしリストに四角形を使用 \*/
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
  list-style-type: square;
}
```

### section セレクターの簡略化

`:is()` 擬似クラスは、 HTML のセクションと見出しを扱うときに特に便利です。 `<section>`、`<article>`、`<aside>`、`<nav>` は互いによく入れ子になりますので、 `:is()` がないと、 1 つ 1 つを選択してスタイルを適用するのが難しくなります。

例えば、 `:is()` を使わずに、異なる深さの h1 要素にスタイルを適用すると、とても複雑になります。

```css
/\* レベル 0 \*/
h1 {
  font-size: 30px;
}

/\* レベル 1 \*/
section h1,
article h1,
aside h1,
nav h1 {
  font-size: 25px;
}

/\* レベル 2 \*/
section section h1,
section article h1,
section aside h1,
section nav h1,
article section h1,
article article h1,
article aside h1,
article nav h1,
aside section h1,
aside article h1,
aside aside h1,
aside nav h1,
nav section h1,
nav article h1,
nav aside h1,
nav nav h1 {
  font-size: 20px;
}

/\* レベル 3 \*/
/\* ... 考えたくありません! \*/
```

`:is()` を使用すると、ずっと簡単になります。

```css
/\* レベル 0 \*/
h1 {
  font-size: 30px;
}
/\* レベル 1 \*/
:is(section, article, aside, nav) h1 {
  font-size: 25px;
}
/\* レベル 2 \*/
:is(section, article, aside, nav) :is(section, article, aside, nav) h1 {
  font-size: 20px;
}
/\* レベル 3 \*/
:is(section, article, aside, nav)
 :is(section, article, aside, nav)
 :is(section, article, aside, nav)
 h1 {
  font-size: 15px;
}
```

### :is() は擬似要素を選択しない

`:is()` 擬似クラスは擬似要素にマッチしません。したがって、次のようにしたり、

```css
some-element:is(::before, ::after) {
  display: block;
}
```

または、次のようにする代わりに、

```css
:is(some-element::before, some-element::after) {
  display: block;
}
```

以下のようにしましょう：

```css
some-element::before,
some-element::after {
  display: block;
}
```

構文
--

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

仕様書
---

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

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

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

関連情報
----

* `:where()` - `:is()` と同様ですが、詳細度が 0 です。
* セレクターリスト
* ウェブコンポーネント


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

border-block-color
==================

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

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

他の方向の境界については、 `border-block-color` によって、 `border-block-start-color` と `border-block-end-color` の両方を設定することができます。

### 構文

```css
border-block-color: yellow;
border-block-color: #f5f6f7;

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

### 値

`<'color'>`

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

公式定義
----

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

形式文法
----
```

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

```

例
-

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

#### HTML

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

#### CSS

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

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-block-color: red;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

z-index
=======

**`z-index`** は CSS のプロパティで、位置指定要素とその子孫要素、またはフレックスアイテムやグリッドアイテムの z 順を定義します。 z-index がより大きな要素はより小さな要素の上に重なります。

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

位置指定されたボックス（つまり、`position` が `static` 以外のもの）では、`z-index` プロパティが以下のことを定義します。

1. 現在の重ね合わせコンテキストにおけるボックスの重ね合わせレベル
2. ボックスがローカルな重ね合わせコンテキストを作るかどうか
構文
--

```css
/\* キーワード値 \*/
z-index: auto;

/\* <integer> 値 \*/
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /\* 負の数はより低い優先度になる \*/

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

`z-index` プロパティは、キーワード `auto` または `<integer>` のどちらかで指定します。

### 値

`auto`

ボックスはローカルな重ね合わせコンテキストを新たに作りません。現在の重ね合わせコンテキストで作られたボックスは、親ボックスと同じ重ね合わせレベルを持ちます。

`<integer>`

この整数値は、現在の重ね合わせコンテキストで作られたボックスの重ね合わせレベルです。ボックスは重ね合わせレベル `0` のローカルの重ね合わせコンテキストを作ります。これは、子孫要素の z-index は、この要素の外部にある要素の z-index とは比較されないということです。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | 位置指定要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | integer |
| 重ね合わせコンテキストの生成 | あり |

形式定義
----
```

z-index =
  auto       |
  <integer>  |
  inherit

```

例
-

### 視覚的な階層を持つ要素

#### HTML

```html
<div class="wrapper">
  <div class="dashed-box">破線のボックス</div>
  <div class="gold-box">金色のボックス</div>
  <div class="green-box">緑色のボックス</div>
</div>
```

#### CSS

```css
.wrapper {
  position: relative;
}

.dashed-box {
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.gold-box {
  position: absolute;
  z-index: 3; /\* .gold-box を .green-box や .dashed-box の上に置く \*/
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.green-box {
  position: absolute;
  z-index: 2; /\* .green-box を .dashed-box の上に置く \*/
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # z-index |

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

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

関連情報
----

* CSS `position` プロパティ
* CSS の z-index を理解する


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

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

**`padding-block-start`** は CSS のプロパティで、要素のブロック方向の論理的な先頭側のパディングを定義し、それが要素の書字方向やテキストの方向に応じて物理的なパディングに対応づけられます。

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

構文
--

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

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

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

### 値

`<length>`

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

`<percentage>`

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

解説
--

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

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

公式定義
----

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

形式文法
----
```

padding-block-start =
  <'padding-top'>

```

例
-

### 縦書きテキストにおけるブロック方向の先頭のパディングの設定

#### HTML

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

#### CSS

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

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

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

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

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

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

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

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

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

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

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

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

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

### 値

`<length>`

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

`<percentage>`

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

解説
--

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

公式定義
----

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

形式文法
----
```

padding-inline =
  <'padding-top'>{1,2}

```

例
-

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

#### HTML

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

#### CSS

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

.exampleText {
  writing-mode: vertical-rl;
  padding-inline: 20px 40px;
  background-color: #c8c800;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

text-indent
===========

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

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

* Learn more
* See full compatibility
* Report feedback
**`text-indent`** は CSS のプロパティで、ブロック内のテキストの行の前に置く空白 (字下げ) の幅を設定します。

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

包含ブロック要素のコンテンツボックスの左端 (右書きの場合は右端) に、水平に空白が挿入されます。

構文
--

```css
/\* <length> 値 \*/
text-indent: 3mm;
text-indent: 40px;

/\* <percentage> 値
 包含ブロックの幅に対する割合 \*/
text-indent: 15%;

/\* Keyword values \*/
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;

/\* Global values \*/
text-indent: inherit;
text-indent: initial;
text-indent: revert;
text-indent: unset;
```

### 値

`<length>`

`<length>` を絶対値として字下げが指定されます。負の値も許可されます。利用できる単位は `<length>` をご覧ください。

`<percentage>`

包含ブロックの幅の `<percentage>` 分だけ字下げされます。

`each-line`
Experimental

*強制的な改行*の後の各行も、ブロックコンテナーの先頭行と同様に字下げします。ただし*自動折り返し*の次の行は字下げしません。

`hanging`
Experimental

インデントされる行が逆になります。つまり、先頭行*以外の*すべての行を字下げします。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | ブロックコンテナー |
| 継承 | あり |
| パーセント値 | 包含ブロックの幅に対する相対値 |
| 計算値 | 指定されたパーセント値または絶対的な長さ、続けて指定された任意の数のキーワード |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

text-indent =
  [ <length-percentage> ]  &&
  hanging?                 &&
  each-line?

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

```

例
-

### 単純なインデントの例

#### HTML

```html
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
```

#### CSS

```css
p {
  text-indent: 5em;
  background: powderblue;
}
```

#### 結果

### 最初の段落の字下げをスキップ

段落の字下げがある場合の一般的な組版では、最初の段落の字下げを省略します。*The Chicago Manual of Style* によると、「中間見出しに続くテキストの最初の行は、完全に左端から始めてもよいし、通常の段落の字下げで字下げしてもよい」とされています。

最初の段落とそれ以降の段落を別扱いにするには、次の例のように次兄弟結合子を使います。

#### HTML

```html
<h2>Lorem ipsum</h2>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu
  venenatis quam. Vivamus euismod eleifend metus vitae pharetra. In vel tempor
  metus. Donec dapibus feugiat euismod. Vivamus interdum tellus dolor. Vivamus
  blandit eros et imperdiet auctor. Mauris sapien nunc, condimentum a efficitur
  non, elementum ac sapien. Cras consequat turpis non augue ullamcorper, sit
  amet porttitor dui interdum.
</p>

<p>
  Sed laoreet luctus erat at rutrum. Proin velit metus, luctus in sapien in,
  tincidunt mattis ex. Praesent venenatis orci at sagittis eleifend. Nulla
  facilisi. In feugiat vehicula magna iaculis vehicula. Nulla suscipit tempor
  odio a semper. Donec vitae dapibus ipsum. Donec libero purus, convallis eu
  efficitur id, pulvinar elementum diam. Maecenas mollis blandit placerat. Ut
  gravida pellentesque nunc, in eleifend ante convallis sit amet.
</p>

<h2>Donec ullamcorper elit nisl</h2>

<p>
  Donec ullamcorper elit nisl, sagittis bibendum massa gravida in. Fusce tempor
  in ante gravida iaculis. Integer posuere tempor metus. Vestibulum lacinia,
  nunc et dictum viverra, urna massa aliquam tellus, id mollis sem velit
  vestibulum nulla. Pellentesque habitant morbi tristique senectus et netus et
  malesuada fames ac turpis egestas. Donec vulputate leo ut iaculis ultrices.
  Cras egestas rhoncus lorem. Nunc blandit tempus lectus, rutrum hendrerit orci
  eleifend id. Ut at quam velit.
</p>

<p>
  Aenean rutrum tempor ligula, at luctus ligula auctor vestibulum. Sed
  sollicitudin velit in leo fringilla sollicitudin. Proin eu gravida arcu. Nam
  iaculis malesuada massa, eget aliquet turpis sagittis sed. Sed mollis tellus
  ac dui ullamcorper, nec lobortis diam pellentesque. Quisque dapibus accumsan
  libero, sed euismod ipsum ullamcorper sed.
</p>
```

#### CSS

```css
p {
  text-align: justify;
  margin: 1em 0 0 0;
}
p + p {
  text-indent: 2em;
  margin: 0;
}
```

#### 結果

### パーセント値の字下げ

#### HTML

```html
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
```

#### CSS

```css
p {
  text-indent: 30%;
  background: plum;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Text Module Level 3 # text-indent-property |

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

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

関連情報
----

* CSS を使用した HTML のスタイル付け
* 関連する CSS プロパティ:
    + `text-justify`
    + `text-orientation`
    + `text-overflow`
    + `text-rendering`
    + `text-transform`
* CSS テキスト装飾 CSS モジュール
* CSS テキスト モジュール


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

quotes
======

**`quotes`** は CSS のプロパティで、 `content` プロパティの `open-quotes` や `close-quotes` を使用して追加された引用符をどのように表示するかを設定します。

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

構文
--

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

/\* <string> 値 \*/
quotes: "«" "»"; /\* open-quote および close-quote をフランス語の引用符に設定 \*/
quotes: "«" "»" "‹" "›"; /\* 2 レベルの引用符を設定 \*/

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

### 値

`none`

`content` プロパティの `open-quote` および `close-quote` の値で引用符を生成しません。

`auto`

選択された要素に設定された言語の値（すなわち、 `lang` 属性）で使用される適切な引用符が使用されます。

`[<string> <string>]+`

`open-quote` および `close-quote` を表す `<string>` の 1 つ以上の組。最初の組は、引用符を表示する要素が入れ子になった際の、最上層のものの引用符を表します。以下、順次下位レベルの引用符に対応します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | ユーザエージェントに依存 |
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

quotes =
  auto                    |
  none                    |
  [ <string> <string> ]+

```

例
-

### 基本的な引用符

#### HTML

```html
<q>To be or not to be. That's the question!</q>
```

#### CSS

```css
q {
  quotes: '"' '"' "'" "'";
}
q::before {
  content: open-quote;
}
q::after {
  content: close-quote;
}
```

#### 結果

### 自動引用符

多くのブラウザーでは、 `quotes` の既定値は `auto` (Firefox 70 以降)、またそれ以外のブラウザー (Chromium, Safari, Edge) ではこれが既定の動作なので、この例は明示的に設定されなくても動作します。

#### HTML

```html
<div lang="ja">
  <q>これが日本語の引用符です。</q>
  <div>
    <hr />
    <div lang="ru">
      <q>Это русская цитата</q>
      <div>
        <hr />
        <div lang="de">
          <q>Dies ist ein deutsches Zitat</q>
          <div>
            <hr />
            <div lang="en">
              <q>This is an English quote.</q>
              <div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

#### CSS

```css
/\*q {
 quotes: auto;
}\*/
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Generated Content Module Level 3 # quotes |

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

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

関連情報
----

* `content`


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

:disabled
=========

**`:disabled`** は CSS の擬似クラスで、無効な要素を表します。無効な要素とは、アクティブ化（選択、クリック、入力など）したりフォーカスを得たりすることができないものです。要素には有効な状態、つまりアクティブ化したりフォーカスを得たりすることができる状態もあります。

```css
/\* 無効な <input> を選択 \*/
input:disabled {
  background: #ccc;
}
```

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

構文
--
```

:disabled
```

例
-

この例は基本的な送り先フォームを表示します。 JavaScript の `change` イベントを使用して、ユーザーが請求先欄を有効化／無効化できるようにします。

### HTML

```html
<form action="#">
  <fieldset id="shipping">
    <legend>送り先</legend>
    <input type="text" placeholder="名前" />
    <input type="text" placeholder="住所" />
    <input type="text" placeholder="郵便番号" />
  </fieldset>
  <br />
  <fieldset id="billing">
    <legend>請求先</legend>
    <label for="billing\_is\_shipping">送り先と同じ:</label>
    <input type="checkbox" id="billing-checkbox" checked />
    <br />
    <input type="text" placeholder="名前" disabled />
    <input type="text" placeholder="住所" disabled />
    <input type="text" placeholder="郵便番号" disabled />
  </fieldset>
</form>
```

### CSS

```css
input[type="text"]:disabled {
  background: #ccc;
}
```

### JavaScript

```js
// ページの読み込みの終了を待つ
document.addEventListener(
  "DOMContentLoaded",
  function () {
    // チェックボックスに 'change' イベントリスナーを追加
    document.getElementById("billing-checkbox").onchange = toggleBilling;
  },
  false,
);

function toggleBilling() {
  // 請求先のテキストフィールドを選択
  var billingItems = document.querySelectorAll('#billing input[type="text"]');

  // 請求先テキストフィールドを切り替え
  for (var i = 0; i < billingItems.length; i++) {
    billingItems[i].disabled = !billingItems[i].disabled;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # selector-disabled |
| Selectors Level 4 # enableddisabled |

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

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

関連情報
----

* `:enabled`


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

scroll-margin-top
=================

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

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

構文
--

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

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

### 値

`<length>`

スクロールコンテナーの上側の辺からみた外部の距離です。

公式定義
----

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

形式文法
----
```

scroll-margin-top =
  <length>

```

仕様書
---

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

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

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

関連情報
----

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


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

image-rendering
===============

CSS の **`image-rendering`** プロパティは、画像を拡大縮小するアルゴリズムを設定します。このプロパティは要素自身に適用され、他のプロパティで設定されるあらゆる画像、子孫要素に適用されます。

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

ユーザーエージェントは、ページの作者が自然な寸法とは異なる寸法を指定したとき、画像を拡大縮小します。拡大縮小は、ユーザー操作 (ズーム) によって発生することもあります。例えば、画像の自然な寸法が `100×100px` であって、実際の寸法が `200×200px` (または `50×50px`) であるとき、画像は `image-rendering` で指定されたアルゴリズムを使用して拡大 (または縮小) されます。このプロパティは拡大/縮小されない画像には効果がありません。

構文
--

```css
/\* キーワード値 \*/
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

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

### 値

`auto`

拡大縮小のアルゴリズムはユーザーエージェントに依存します。バージョン 1.9 (Firefox 3.0) から、Gecko は*バイリニア* (bilinear) 再サンプリングを使用します (high-quality)。

`smooth`
Experimental

画像は、画像の外見を最適化するアルゴリズムで拡大縮小されます。具体的には、バイリニア補完などの色の「円滑化」が許容されるアルゴリズムで拡大縮小されます。これは、写真のような画像を想定しています。

`high-quality`
Experimental

`smooth` と同等ですが、より高品質な設定です。システムのリソースが制約されている場合、どの画像の品質をどの程度低下させるかを検討するとき。`high-quality` の画像は他の値よりも優先されます。

`crisp-edges`

画像は、画像内のコントラストとエッジを保つアルゴリズムにより拡大縮小されます、画像の処理過程で色の円滑化やぼかしを導入は行いません。最近傍 (nearest neighbor) 法や、 2×SaI や hqx-family のようなその他のスムーズ化が行われない拡大縮小アルゴリズムなどが適しています。この値はブラウザーゲームようなピクセルアート画像を想定しています。

`pixelated`

画像を拡大する時は、最近傍 (nearest neighbor) 法が使用され、画像は画像が大きなピクセルで構成されたように表示されます。縮小する時は `auto` と同じになります。

**メモ:** `optimizeQuality` および `optimizeSpeed` の値は、初期の草稿で (SVG の仕様 `image-rendering (en-US)` に似たものとして) `smooth` および `pixelated` の同義語として定義されていました。

公式定義
----

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

形式文法
----
```

image-rendering =
  auto          |
  smooth        |
  high-quality  |
  pixelated     |
  crisp-edges

```

例
-

### 画像の拡大縮小アルゴリズムの設定

実際の使用では、 `pixelated` と `crisp-edges` のルールを組み合わせることで、お互いにある程度のフォールバックを提供することができます。 (実際のルールにフォールバックを追加するだけです。) Canvas API は手動の画像データ操作または `imageSmoothingEnabled` によって `pixelated` の代替ソリューション を提供することができます。
```

<div>
  <img class="auto" alt="auto" src="blumen.jpg" />
  <img class="pixelated" alt="pixelated" src="blumen.jpg" />
  <img class="crisp-edges" alt="crisp-edges" src="blumen.jpg" />
</div>
```

```
img {
  height: 200px;
}
```

#### CSS

```css
.auto {
  image-rendering: auto;
}

.pixelated {
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: pixelated;
}

.crisp-edges {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Images Module Level 3 # the-image-rendering |

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

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

**メモ:** 仕様書の例にあるようなピクセルアートの拡大縮小には `crisp-edges` を使うことが想定されていますが、実際にはどのブラウザーも (2020 年 1 月時点で) 対応していません。Firefox では、 `pixelated` は最近傍法として解釈されますが、 `auto` と `crisp-edges` はトリリニア法または線形で補間されます。

Chromium と Safari (WebKit) での動作については、 `GetInterpolationQuality` 関数と `CSSPrimitiveValue::operator ImageRendering()` をそれぞれ参照してください。

関連情報
----

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


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

::slotted()
===========

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

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

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

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

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

構文
--

Error: could not find syntax for this item例
-

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

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

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

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

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

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

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

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

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

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

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

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

仕様書
---

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

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

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

関連情報
----

* ウェブコンポーネント


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

user-select
===========

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

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

構文
--

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

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

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

### 値

`none`

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

`auto`

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

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

`text`

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

`all`

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

`contain`

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

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

公式定義
----

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

形式文法
----
```

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

```

例
-

### HTML

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

### CSS

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

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

### 結果

仕様書
---

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

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

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

関連情報
----

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


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

-webkit-overflow-scrolling
==========================

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

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

構文
--

### 値

`auto`

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

`touch`

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

公式定義
----

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

形式文法
----

Error: could not find syntax for this item例
-

### HTML

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

### CSS

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

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

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

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

### 結果

仕様書
---

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

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

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

関連情報
----

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