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

place-items
===========

CSS の **`place-items`** は一括指定プロパティで、アイテムのブロック軸およびインライン軸に沿ったアイテムの配置 (すなわち `align-items` および `justify-items` プロパティ) を、グリッドやフレックスボックスなどのレイアウトシステムにおいて、一度に指定することができます。2 番目の値が設定されていない場合、最初の値がそちらにも使用されます。

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

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

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

* `align-items`
* `justify-items`
構文
--

```css
/\* キーワード値 \*/
place-items: auto center;
place-items: normal start;

/\* 位置による配置 \*/
place-items: center normal;
place-items: start auto;
place-items: end normal;
place-items: self-start auto;
place-items: self-end normal;
place-items: flex-start auto;
place-items: flex-end normal;
place-items: left auto;
place-items: right normal;

/\* ベースラインによる配置 \*/
place-items: baseline normal;
place-items: first baseline auto;
place-items: last baseline normal;
place-items: stretch auto;

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

### 値

`auto`

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

`normal`

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

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

`start`

各アイテムは、適切な軸方向で配置コンテナーの先頭側の端に向けて互いに寄せて配置されます。

`end`

各アイテムは、適切な軸方向で配置コンテナーの末尾側の端に向けて互いに寄せて配置されます。

`flex-start`

 アイテムは、配置コンテナーの主軸または交差軸の先頭側の端に向けて、互いに寄せて配置されます。
 これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は `start` のように扱われます。

`flex-end`

 アイテムは、配置コンテナーの主軸または交差軸の末尾側の端に向けて、互いに寄せて配置されます。
 これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は `end` のように扱われます。

`self-start`

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

`self-end`

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

`center`

各アイテムは、配置コンテナーの中央に向けて互いに寄せて配置されます。

`left`

各アイテムは、適切な軸方向で配置コンテナーの左側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は `start` のように動作します。

`right`

各アイテムは、適切な軸方向で配置コンテナーの右側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は `start` のように動作します。

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

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

`stretch`

各アイテムの寸法の合計が配置コンテナーの寸法よりも小さい場合、寸法が `auto` のアイテムは、 `max-height`/`max-width` (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、寸法の合計が配置コンテナーを満たすようになります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `align-items`: `normal`
* `justify-items`: `legacy`
 |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `align-items`: 指定通り
* `justify-items`: 指定通り
 |
| アニメーションの種類 | 離散値 |

形式文法
----
```

place-items =
  <'align-items'> <'justify-items'>?

```

例
-

### フレックスコンテナー内でのアイテムの配置

フレックスボックスでは、主軸のアイテムがグループとして扱われるため、`justify-self` や `justify-items` したがって、2 番目の値は無視されます。
```

div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
  font-size: 2em;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}
```

```
<div id="container">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
</div>

<div class="row">
  <label for="values">place-items: </label>
  <select id="values">
    <option value="stretch">stretch</option>
    <option value="start">start</option>
    <option value="center">center</option>
    <option value="end">end</option>
    <option value="left">left</option>
    <option value="right">right</option>
    <option value="auto center">auto center</option>
    <option value="normal start">normal start</option>
    <option value="center normal">center normal</option>
    <option value="start auto">start auto</option>
    <option value="end normal">end normal</option>
    <option value="self-start auto">self-start auto</option>
    <option value="self-end normal">self-end normal</option>
    <option value="flex-start auto">flex-start auto</option>
    <option value="flex-end normal">flex-end normal</option>
    <option value="left auto">left auto</option>
    <option value="right normal">right normal</option>
    <option value="baseline normal">baseline normal</option>
    <option value="first baseline auto">first baseline auto</option>
    <option value="last baseline normal">last baseline normal</option>
    <option value="stretch auto">stretch auto</option>
  </select>
</div>
```

```
let values = document.getElementById("values");
let container = document.getElementById("container");

values.addEventListener("change", function (evt) {
  container.style.placeItems = evt.target.value;
});
```

#### CSS

```css
#container {
  height: 200px;
  width: 240px;
  place-items: stretch; /\* You can change this value by selecting another option in the list \*/
  background-color: #8c8c8c;
  display: flex;
}
```

#### 結果

### グリッドコンテナーでのアイテムの配置

以下のグリッドコンテナーのアイテムは、配置されるグリッド領域よりも小さいため、`place-items` はブロック方向とインライン方向にアイテムを移動します。
```

div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
  font-size: 2em;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}
```

```
<div id="gridcontainer">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
</div>

<div class="row">
  <label for="gridvalues">place-items: </label>
  <select id="gridvalues">
    <option value="stretch">stretch</option>
    <option value="start">start</option>
    <option value="center">center</option>
    <option value="end">end</option>
    <option value="left">left</option>
    <option value="right">right</option>
    <option value="auto center">auto center</option>
    <option value="normal start">normal start</option>
    <option value="center normal">center normal</option>
    <option value="start auto">start auto</option>
    <option value="end normal">end normal</option>
    <option value="self-start auto">self-start auto</option>
    <option value="self-end normal">self-end normal</option>
    <option value="flex-start auto">flex-start auto</option>
    <option value="flex-end normal">flex-end normal</option>
    <option value="left auto">left auto</option>
    <option value="right normal">right normal</option>
    <option value="baseline normal">baseline normal</option>
    <option value="first baseline auto">first baseline auto</option>
    <option value="last baseline normal">last baseline normal</option>
    <option value="stretch auto">stretch auto</option>
  </select>
</div>
```

```
let values = document.getElementById("gridvalues");
let container = document.getElementById("gridcontainer");

values.addEventListener("change", function (evt) {
  container.style.placeItems = evt.target.value;
});
```

#### CSS

```css
#gridcontainer {
  height: 200px;
  width: 240px;
  place-items: stretch; /\* You can change this value by selecting another option in the list \*/
  background-color: #8c8c8c;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

#gridcontainer > div {
  width: 50px;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* CSS フレックスボックスガイド: *フレックスボックスの基本概念*
* CSS フレックスボックスガイド: *フレックスコンテナー内のアイテムの配置*
* CSS グリッドガイド: *グリッドレイアウトのボックス配置*
* CSS ボックス配置
* `align-items` プロパティ
* `align-self` プロパティ
* `justify-items` プロパティ
* `justify-self` プロパティ


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

align-content
=============

CSS の **`align-content`** プロパティは、フレックスボックスの交差軸またはグリッドのブロック軸方向の内部のアイテムの間または周囲の空間の配分方法を設定します。

下記のインタラクティブデモでは、グリッドレイアウトを使用してこのプロパティの値のいくつかを説明しています。

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

単一行のフレックスコンテナー (つまり、 `flex-wrap: nowrap` のもの) では、このプロパティは効果がありません。

構文
--

```css
/\* 基本的な位置による配置 \*/
/\* align-content は left および right の値を取りません \*/
align-content: center; /\* アイテムを中央に寄せる \*/
align-content: start; /\* アイテムを先頭に寄せる \*/
align-content: end; /\* アイテムを末尾に寄せる \*/
align-content: flex-start; /\* フレックスアイテムを先頭に寄せる \*/
align-content: flex-end; /\* フレックスアイテムを末尾に寄せる \*/

/\* 通常の配置 \*/
align-content: normal;

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

/\* 均等配置 \*/
align-content: space-between; /\* アイテムを均等に配置し
 最初のアイテムは先頭に寄せ、
 最後のアイテムは末尾に寄せる \*/
align-content: space-around; /\* アイテムを均等に配置し
 各アイテムの両側に半分の大きさの
 間隔を置く \*/
align-content: space-evenly; /\* アイテムを均等に配置し
 各アイテムの周りに同じ大きさの間隔を置く \*/
align-content: stretch; /\* アイテムを均等に配置し
 コンテナーに合うようにサイズ「自動」の
 アイテムを引き伸ばす \*/

/\* あふれた場合の配置 \*/
align-content: safe center;
align-content: unsafe center;

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

### 値

`start`

各アイテムは、交差軸方向で配置コンテナーの先頭側の端に向けて互いに寄せて配置されます。

`end`

各アイテムは、交差軸方向で配置コンテナーの末尾側の端に向けて互いに寄せて配置されます。

`flex-start`

 各アイテムは、フレックスコンテナーに依存して、交差軸の先頭側である配置コンテナーの端に向けて互いに寄せて配置されます。
 これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は `start` のように扱われます。

`flex-end`

 各アイテムは、フレックスコンテナーに依存して、交差軸の末尾側である配置コンテナーの端に向けて互いに寄せて配置されます。
 これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は `end` のように扱われます。

`center`

各アイテムは、交差軸方向で配置コンテナーの中央に互いに寄せて配置されます。

`normal`

各アイテムは `align-content` の値が設定されていないかのように、既定の位置に寄せて配置されます。

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

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

![the baseline is the line upon which most letters "sit" and below which descenders extend.](/ja/docs/Web/CSS/align-content/410px-typography_line_terms.svg.png)

`first baseline` の代替配置は `start`、`last baseline` の代替配置は `end` です。

`space-between`

各アイテムは、配置コンテナーの中で交差軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムは配置コンテナーの交差軸の先頭側に寄せられ、最後のアイテムは配置コンテナーの交差軸の末尾側に寄せられます。

`space-around`

各アイテムは、配置コンテナーの中で交差軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムの前と最後のアイテムの後の余白は、隣接するアイテム同士の間隔の半分の幅になります。

`space-evenly`

各アイテムは、配置コンテナーの中で交差軸方向に均等に配置されます。隣接するアイテム同士の間隔、先頭側の端と最初のアイテムの間のの余白、末尾側の端と最後のアイテムの間の余白は、まったく同じ幅になります。

`stretch`

各アイテムの交差軸方向の寸法の合計が配置コンテナーの寸法よりも小さい場合、寸法が `auto` のアイテムは、 `max-height`/`max-width` (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、交差軸方向の寸法の合計が配置コンテナーを満たすようになります。

`safe`

配置キーワードと共に使用します。選択されたキーワードによって、アイテムが配置コンテナーをあふれてデータの損失が発生する場合、アイテムは配置モードが `start` であったかのように配置されます。

`unsafe`

配置キーワードと共に使用します。アイテムの寸法と配置コンテナーとの関係、あふれることによってデータの損失が発生するかどうかにかかわらず、指定された値を尊重します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | 複数行のフレックスコンテナー |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

align-content =
  normal                                   |
  <baseline-position>                      |
  <content-distribution>                   |
  <overflow-position>? <content-position>

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

<content-distribution> =
  space-between  |
  space-around   |
  space-evenly   |
  stretch

<overflow-position> =
  unsafe  |
  safe

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

```

例
-

### CSS

```css
#container {
  height: 200px;
  width: 240px;
  align-content: center; /\* Can be changed in the live sample \*/
  background-color: #8c8c8c;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
}

div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
  font-size: 30px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}
```

### HTML

```html
<div id="container" class="flex">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>

<div class="row">
  <label for="display">display: </label>
  <select id="display">
    <option value="flex">flex</option>
    <option value="grid">grid</option>
  </select>
</div>

<div class="row">
  <label for="values">align-content: </label>
  <select id="values">
    <option value="normal">normal</option>
    <option value="stretch">stretch</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="center" selected>center</option>
    <option value="space-between">space-between</option>
    <option value="space-around">space-around</option>
    <option value="space-evenly">space-evenly</option>

    <option value="start">start</option>
    <option value="end">end</option>
    <option value="left">left</option>
    <option value="right">right</option>

    <option value="baseline">baseline</option>
    <option value="first baseline">first baseline</option>
    <option value="last baseline">last baseline</option>

    <option value="safe center">safe center</option>
    <option value="unsafe center">unsafe center</option>
    <option value="safe right">safe right</option>
    <option value="unsafe right">unsafe right</option>
    <option value="safe end">safe end</option>
    <option value="unsafe end">unsafe end</option>
    <option value="safe flex-end">safe flex-end</option>
    <option value="unsafe flex-end">unsafe flex-end</option>
  </select>
</div>
```

```
var values = document.getElementById("values");
var display = document.getElementById("display");
var container = document.getElementById("container");

values.addEventListener("change", function (evt) {
  container.style.alignContent = evt.target.value;
});

display.addEventListener("change", function (evt) {
  container.className = evt.target.value;
});
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # align-justify-content |
| CSS Flexible Box Layout Module Level 1 # align-content-property |

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

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

関連情報
----

* CSS フレックスボックスガイド: *フレックスボックスの基本概念*
* CSS フレックスボックスガイド: *フレックスコンテナー内のアイテムの配置*
* CSS グリッドガイド: *グリッドレイアウトのボックス配置*
* CSS ボックス配置


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

column-span
===========

**`column-span`** は CSS のプロパティで、値に `all` を設定した場合、段組みレイアウトで要素をすべての段にまたがらせることができます。

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

```css
/\* キーワード値 \*/
column-span: none;
column-span: all;

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

複数の段にまたがる要素は**段抜き要素** (spanning element) と呼びます。

構文
--

`column-span` プロパティは以下に挙げたキーワード値のうちの一つで指定します。

### 値

`none`

この要素は複数の段にまたがりません。

`all`

この要素がすべての段にまたがります。この要素よりも前に現れた通常フローのコンテンツは、自動的にすべての段で均等になります。この要素は新しいブロック整形コンテキストを生成します。

公式定義
----

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

形式文法
----
```

column-span =
  none  |
  all

```

例
-

### 段抜きの見出しの設定

この例では、見出しが記事のすべての段にまたがって作成されます。

#### HTML

```html
<article>
  <h2>Header spanning all of the columns</h2>
  <p>
    The h2 should span all the columns. The rest of the text should be
    distributed among the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
</article>
```

#### CSS

```css
article {
  columns: 3;
}

h2 {
  column-span: all;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1 # column-span |

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

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

関連情報
----

* インライン要素 (en-US)
* `HTMLSpanElement`


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

unicode-bidi
============

**`unicode-bidi`** は CSS のプロパティで、 `direction` プロパティと共に、文書内の双方向テキストの扱いを指定します。例えば、テキストブロックに左書き (LTR) と右書き (RTL) の両方のテキストが含まれている場合、ユーザーエージェントは、複雑な Unicode アルゴリズムを用いてテキストの表示方法を決定します。 `unicode-bidi` プロパティは、このアルゴリズムを上書きして開発者がテキストの埋め込みを制御できるようにします。

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

`unicode-bidi` と `direction` プロパティだけは、 `all` 一括指定プロパティによる影響を受けません。

**警告:** このプロパティは文書型定義 (DTD) デザイナー向けです。ウェブデザイナー等の作者は、このアルゴリズムを**上書きすべきではありません**。

構文
--

```css
/\* キーワード値 \*/
unicode-bidi: normal;
unicode-bidi: embed;
unicode-bidi: isolate;
unicode-bidi: bidi-override;
unicode-bidi: isolate-override;
unicode-bidi: plaintext;

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

### 値

`normal`

要素は、双方向アルゴリズムを尊重し、追加の埋め込みのレベルを提供しません。インライン要素に対しては、要素の境界に渡って、並べ替え作業を省略します。

`embed`

要素がインラインの場合、この値は双方向アルゴリズムを尊重し、追加の埋め込みのレベルを開きます。この埋め込みレベルの方向は、 `direction` プロパティにより与えられます。

`bidi-override`

インライン要素に対しては、この値で上書きされます。ブロックコンテナー要素に対しては、この値でインラインレベルの子孫を上書きし、別のブロックコンテナー要素は上書きしません。これは、要素内部に作用することを意味し、並べ替えは `direction` による順序に従います。双方向アルゴリズムの省略された部分は無視されます。

`isolate`

このキーワードは、要素のコンテナーの記述方向が、要素の内容を考慮せずに計算されることを示します。要素はその兄弟から*隔離* (isolated) されます。双方向解決アルゴリズムが適用される時、そのコンテナー要素は、対象の要素を 1 個またはいくつかの `U+FFFC Object Replacement Character` として処理します。つまり、画像要素のように扱います。

`isolate-override`

このキーワードは、周囲のコンテンツに `isolate` キーワードの隔離処理を適用し、内部のコンテンツに `bidi-override` キーワードの上書き処理を適用します。

`plaintext`

 このキーワードは、要素の記述方向を、その親要素の双方向状態や `direction` プロパティの値を考慮せずに計算します。記述方向は、Unicode Bidirectional Algorithm の P2 および P3 規則を用いて計算されます。
 この値により、Unicode Bidirectional Algorithm に従うツールを用いてすでに整形されたデータを表示できます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | すべての要素。ただし一部の値はインラインでない要素には効果がありません |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | アニメーション不可 |

形式文法
----
```

unicode-bidi =
  normal            |
  embed             |
  isolate           |
  bidi-override     |
  isolate-override  |
  plaintext

```

例
-

### CSS

```css
.bible-quote {
  direction: rtl;
  unicode-bidi: embed;
}
```

### HTML

```html
<div class="bible-quote">A line of text</div>
<div>Another line of text</div>
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Writing Modes Level 4 # unicode-bidi |

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

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

関連情報
----

* `direction`


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

font-size-adjust
================

**`font-size-adjust`** は CSS のプロパティで、 (大文字の大きさを定義する) 現在のフォントサイズに相対的な小文字の大きさを設定します。

```css
/\* 指定されたフォントサイズを使用 \*/
font-size-adjust: none;

/\* 小文字のフォントサイズを、指定された
フォントサイズの半分にする \*/
font-size-adjust: 0.5;

/\* 2 つの値 - Level 5 仕様書で追加 \*/
font-size-adjust: ex-height 0.5;

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

このプロパティが便利なのは、特に小さなサイズのフォントの読みやすさは、大文字の高さではなく小文字の高さで決まるからです。最初に選択した `font-family` が利用できず、その代替フォントのアスペクト比 (小文字の大きさとフォントの大きさの比率) が著しく異なる場合、読みやすさが問題になることがあります。

このプロパティの使い方は、 `font-size-adjust` に対応していないブラウザーと互換性を持たせるため、 `font-size` プロパティに掛け合わせる数値として指定します。つまり、このプロパティ指定された値は、ふつう最初に選択されたフォントのアスペクト比になります。例えば、次のように指定されたスタイルシートでは、

```css
font-size: 14px;
font-size-adjust: 0.5;
```

実際のところ、フォントの小文字が `7px` の高さ (0.5 x 14px) を持つべきであると指定しています。これは、 `font-size-adjust` に対応していないブラウザーでは `14px` のフォントが使用されている場合でも、妥当な結果が得られます。

構文
--

### 値

`none`

`font-size` プロパティだけを基準にフォントサイズを選びます。

ex-height | cap-height | ch-width | ic-width | ic-height

正規化の対象となるフォントメトリックを指定します。既定値は `ex-height` です。次のいずれかです。

`ex-height`

x-height をフォントサイズで割った値を使って、フォントのアスペクト値を正規化します。

`cap-height`

フォントの cap-height を正規化し、cap-height をフォントサイズで使用します。

`ch-width`

"0" (ZERO, U+0030) の送り幅をフォントサイズで割った値を使って、フォントの横方向の狭ピッチを正規化します。

`ic-width`

"水" (CJK water ideograph, U+6C34) の送り幅をフォントサイズで割って、フォントの水平方向のワイドピッチを正規化します。

`ic-height`

フォントの垂直方向のワイドピッチを、"水" (CJK water ideograph, U+6C34) のアドバンスハイトをフォントサイズで割った値で正規化します。

`<number>`

`font-size` に掛け合わせて小文字の高さ (そのフォントの文字 x の高さ) になるような値を指定し、フォントサイズを選びます。

指定した数値は、通常は最初に選んだ `font-family` のアスペクト比 (文字 x の高さとフォントサイズの比率) にしてください。こうすれば、最初に選んだフォントが利用可能なら、ブラウザーが `font-size-adjust` に対応しているかどうかに関わらず、どのブラウザーでも同じサイズで表示されます。

`0` は高さが 0 のテキスト (非表示テキスト) になります。

公式定義
----

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

形式定義
----
```

font-size-adjust =
  none            |
  <number [0,∞]>

```

例
-

### 小文字の大きさの調整

#### HTML

```html
<p class="times">
  This text uses the Times font (10px), which is hard to read in small sizes.
</p>
<p class="verdana">
  This text uses the Verdana font (10px), which has relatively large lowercase
  letters.
</p>
<p class="adjtimes">
  This is the 10px Times, but now adjusted to the same aspect ratio as the
  Verdana.
</p>
```

#### CSS

```css
.times {
  font-family: Times, serif;
  font-size: 10px;
}

.verdana {
  font-family: Verdana, sans-serif;
  font-size: 10px;
}

.adjtimes {
  font-family: Times, serif;
  font-size-adjust: ex-height 0.58;
  font-size: 10px;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 5 # font-size-adjust-prop |

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

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

関連情報
----

* `font-size`
* `font-weight`
* 基本的なテキストとフォントの装飾


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

animation-fill-mode
===================

**`animation-fill-mode`** は CSS のプロパティで、 CSS アニメーションの実行の前後にどう対象にスタイルを適用するかを設定します。

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

アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである `animation` を使用すると便利です。

構文
--

```css
/\* 単一のアニメーション \*/
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

/\* 複数のアニメーション \*/
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

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

### 値

`none`

アニメーションが実行されていない時は、対象にスタイルを適用しません。要素は適用されているその他の CSS 規則を使用して表示されます。これが既定値です。

`forwards`

対象は実行の最後のキーフレームで設定された計算値を保持します。最後のキーフレームは `animation-direction` と `animation-iteration-count` の値によって変わります。

| `animation-direction` | `animation-iteration-count` | 最後のキーフレーム |
| --- | --- | --- |
| `normal` | 偶数または奇数 | `100%` または `to` |
| `reverse` | 偶数または奇数 | `0%` または `from` |
| `alternate` | 偶数 | `0%` または `from` |
| `alternate` | 奇数 | `100%` または `to` |
| `alternate-reverse` | 偶数 | `100%` または `to` |
| `alternate-reverse` | 奇数 | `0%` または `from` |

`backwards`

アニメーションは最初の適切なキーフレームで定義された値を対象に適用されると同時に適用し、 `animation-delay` の期間これを保持します。最初の適切なキーフレームは、 `animation-direction` の値によって変わります。

| `animation-direction` | 最初の適切なキーフレーム |
| --- | --- |
| `normal` または `alternate` | `0%` または `from` |
| `reverse` または `alternate-reverse` | `100%` または `to` |

`both`

アニメーションは forwards と backwards の両方の既定に従います。よって、アニメーションの設定は実行前と実行後の両方に適用されます。

**メモ:** `animation-*` プロパティにカンマ区切りで複数の値を指定した場合、 `animation-name` に現れる順にアニメーションに適用されます。アニメーションの数と `animation-*` プロパティの値が一致しない場合は、複数のアニメーションプロパティ値の設定 を参照してください。

**メモ:** `animation-fill-mode` は CSS スクロール駆動アニメーション (en-US)を作成するときに、通常の時間ベースのアニメーションと同じ効果があります。

公式定義
----

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

形式文法
----
```

animation-fill-mode =
  <single-animation-fill-mode>#

<single-animation-fill-mode> =
  none       |
  forwards   |
  backwards  |
  both

```

例
-

### fill モードの設定

以下の例で `animation-fill-mode` の効果を見ることができます。これは無限に繰り返されるアニメーションが、元の状態に戻るのではなく最後の状態を維持するようにすることができます（既定の状態）。

### HTML

```html
<p>マウスを灰色のボックスの上に乗せてください！</p>
<div class="demo">
  <div class="growsandstays">これは大きくなって大きいままになります。</div>
  <div class="grows">これは大きくなるだけです。</div>
</div>
```

### CSS

```css
.demo {
  border-top: 100px solid #ccc;
  height: 300px;
}

@keyframes grow {
  0% {
    font-size: 0;
  }
  100% {
    font-size: 40px;
  }
}

.demo:hover .grows {
  animation-name: grow;
  animation-duration: 3s;
}

.demo:hover .growsandstays {
  animation-name: grow;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}
```

### 結果

これ以外の例は CSS アニメーションを参照してください。

仕様書
---

| Specification |
| --- |
| CSS Animations Level 1 # animation-fill-mode |

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

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

関連情報
----

* CSS アニメーションの使用
* JavaScript の `AnimationEvent` API
* その他のアニメーション関連プロパティ: `animation`, `animation-composition`, `animation-delay`, `animation-direction`, `animation-duration`, `animation-iteration-count`, `animation-name`, `animation-play-state`, `animation-timeline`, `animation-timing-function`


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

initial-letter-align
====================

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

CSS の **`initial-letter-align`** プロパティは、段落内の最初の文字の配置を指定します。

```css
/\* キーワード値 \*/
initial-letter-align: auto;
initial-letter-align: alphabetic;
initial-letter-align: hanging;
initial-letter-align: ideographic;

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

構文
--

以下に挙げたキーワード値のうちの一つです。

### 値

`auto`

ユーザーエージェントがテキストの言語に従って値を選択します。西洋の言語では既定で alphabetic であり、日中韓の言語は ideographic、一部のインド語派の言語は hanging になります。

`alphabetic`

上記の通り、最初の文字の大文字高は、テキストの最初の行の大文字高に配置されます。最初の文字のベースラインは N 文字目のテキストのベースラインに配置されます。

`hanging`

最初の文字のぶら下げベースラインは、テキストの最初の行のぶら下げベースラインに配置されます。

`ideographic`

最初の文字は N 行の領域の中央に配置されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | `::first-letter` 擬似要素と、ブロックコンテナーの最初のインラインレベルの子 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

initial-letter-align =
  [ border-box? [ alphabetic | ideographic | hanging | leading ]? ]!

```

例
-

### 最初の文字の配置

#### HTML

```html
<p class="auto ">Initial letter - auto</p>
<p class="alphabetic">Initial letter - alphabetic</p>
<p class="hanging">Initial letter - hanging</p>
<p class="ideographic">Initial letter - ideographic</p>
```

#### CSS

```css
.auto {
  -webkit-initial-letter-align: auto;
  initial-letter-align: auto;
}

.alphabetic {
  -webkit-initial-letter-align: alphabetic;
  initial-letter-align: alphabetic;
}

.hanging {
  -webkit-initial-letter-align: hanging;
  initial-letter-align: hanging;
}

.ideographic {
  -webkit-initial-letter-align: ideographic;
  initial-letter-align: ideographic;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Inline Layout Module Level 3 # aligning-initial-letter |

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

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


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

<time>
======

**`<time>`** は CSS のデータ型で、時間の値を秒単位またはミリ秒単位で表現します。これは `animation` や `transition` および関連するプロパティで使用されています。

構文
--

`<time>` データ型は、 `<number>` の直後に下記の単位を続けます。省略可能ですが、その前に単一の `+` または `-` を付けることもあります。どの単位の場合も、単位と数字との間には空白を置きません。

**メモ:** 数値の `0` は単位に関わらず常に同じですが、単位は省略できません。言い換えれば、 `0` は無効であり、 `0s` または `0ms` を表すものではありません。

### 単位

**`s`**

秒単位の時間を表します。例: `0s`, `1.5s`, `-60s`

**`ms`**

ミリ秒単位の時間を表します。例: `0ms`, `150.25ms`, `-60000ms`

**メモ:** `s` と `ms` の間の変換は、論理的に `1s` = `1000ms` となります。

例
-

### 有効な時間
```

12s         正の整数
-456ms      負の整数
4.3ms       整数でない数値
14mS        単位では大文字小文字が区別されませんが、大文字は推奨されません。
+0s         先導する + と単位を伴うゼロです
-0ms        先導する - と単位を伴うゼロです
```

### 無効な時間
```

0           単位なしのゼロは <length> では使えますが、他のすべての単位では無効です。
12.0        これは <number> であり、 <time> ではありません。単位が必須です。
7 ms        数値と単位との間に空白を置いてはいけません。
```

仕様書
---

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

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

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

関連情報
----

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


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

mask-mode
=========

**`mask-mode`** は CSS のプロパティで、 `mask-image` で定義されたマスクを、輝度とアルファマスクのどちらで扱うかを設定します。

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

/\* 複数の値 \*/
mask-mode: alpha, match-source;

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

構文
--

`mask-mode` プロパティは、以下に示す 1 つまたは複数のキーワード値を、カンマで区切って指定します。

### 値

`alpha`

このキーワードは、マスクレイヤーの透過性 (アルファチャンネル) の値をマスクの値として使用することを示します。

`luminance`

このキーワードは、マスクレイヤーの輝度の値をマスクの値として使用することを示します。

`match-source`

`mask-image` プロパティが `<mask-source>` 型であれば、マスクレイヤー画像の輝度の値がマスクの値として使用されます。

`<image>` 型であれば、マスクレイヤー画像のアルファ値がマスクの値として使用されます。

公式定義
----

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

形式文法
----
```

mask-mode =
  <masking-mode>#

<masking-mode> =
  alpha         |
  luminance     |
  match-source

```

例
-

### アルファマスクモードの使用

仕様書
---

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

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

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

関連情報
----

* Clipping and Masking in CSS


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

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

**`text-decoration`** は CSS の一括指定プロパティで、テキストの装飾的な線の表示を設定します。これは `text-decoration-line`、`text-decoration-color`、`text-decoration-style` およびさらに新しい `text-decoration-thickness` プロパティの一括指定です。

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

文字列の装飾は、子孫の文字列要素に適用されます。つまり、要素に文字列装飾が指定されれば、子要素では装飾を外すことができません。例えば、`<p>This text has <em>some emphasized words</em> in it.</p>` というマークアップと、 `p { text-decoration: underline; }` のスタイル規則では、段落全体に下線が引かれます。 `em { text-decoration: none; }` のスタイル規則を適用しても変化せず、段落全体に下線が引かれたままになります。しかし、 `em { text-decoration: overline; }` の規則で "some emphasized words" に第二の装飾が施されます。

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

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

* `text-decoration-color`
* `text-decoration-line`
* `text-decoration-style`
* `text-decoration-thickness`
構文
--

```css
text-decoration: underline;
text-decoration: overline red;
text-decoration: none;

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

`text-decoration` プロパティは、個別指定の text-decoration プロパティを表す 1 つまたは複数の値を空白で区切って指定します。

### 値

`text-decoration-line`

使用する装飾の種類を設定します。 `underline` や `line-through` などです。

`text-decoration-color`

装飾の色を設定します。

`text-decoration-style`

装飾に使用する線のスタイルを設定します。 `solid`, `wavy`, `dashed` などです。

`text-decoration-thickness`

装飾に使われる線の太さを設定します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `text-decoration-color`: `currentcolor`
* `text-decoration-style`: `solid`
* `text-decoration-line`: `none`
 |
| 適用対象 | すべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `text-decoration-line`: 指定通り
* `text-decoration-style`: 指定通り
* `text-decoration-color`: 色の計算値
* `text-decoration-thickness`: 指定通り
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `text-decoration-color`: 色
* `text-decoration-style`: 離散値
* `text-decoration-line`: 離散値
* `text-decoration-thickness`: 計算値の型による
 |

形式文法
----
```

text-decoration =
  <'text-decoration-line'>   ||
  <'text-decoration-style'>  ||
  <'text-decoration-color'>

```

例
-

### text-decoration の値のデモ

```css
.under {
  text-decoration: underline red;
}

.over {
  text-decoration: wavy overline lime;
}

.line {
  text-decoration: line-through;
}

.plain {
  text-decoration: none;
}

.underover {
  text-decoration: dashed underline overline;
}

.thick {
  text-decoration: solid underline purple 4px;
}

.blink {
  text-decoration: blink;
}
```

```html
<p class="under">This text has a line underneath it.</p>
<p class="over">This text has a line over it.</p>
<p class="line">This text has a line going through it.</p>
<p>
  This <a class="plain" href="#">link will not be underlined</a>, as links
  generally are by default. Be careful when removing the text decoration on
  anchors since users often depend on the underline to denote hyperlinks.
</p>
<p class="underover">This text has lines above <em>and</em> below it.</p>
<p class="thick">
  This text has a really thick purple underline in supporting browsers.
</p>
<p class="blink">
  This text might blink for you, depending on the browser you use.
</p>
```

仕様書
---

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

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

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

関連情報
----

* text-decoration の個別指定プロパティは、 `text-decoration-line`、`text-decoration-color`、`text-decoration-style`、 `text-decoration-thickness` です。
* `text-decoration-skip-ink`、 `text-underline-offset`、 `text-underline-position` 属性もテキストの装飾に影響しますが、一括指定プロパティには含まれません。
* `list-style` 属性は HTML の `<ol>` および `<ul>` のリストの表示方法を制御します。


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

mask-composite
==============

**`mask-composite`** は CSS のプロパティで、現在のマスクレイヤーとその下のマスクレイヤーとの間で使われる合成操作を表します。

```css
/\* キーワード値 \*/
mask-composite: add;
mask-composite: subtract;
mask-composite: intersect;
mask-composite: exclude;

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

構文
--

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

### 値

混合において、現在のマスクレイヤーは *source*、その下にあるすべてのマスクレイヤーは *destination* とします。

`add`

source が destination の上に配置されます。

`subtract`

destination の外側に source が配置されます。

`intersect`

destination と重なっている source の部分が destination を置き換えます。

`exclude`

source と destination で重なっていない領域が結合されます。

公式定義
----

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

形式文法
----
```

mask-composite =
  <compositing-operator>#

<compositing-operator> =
  add        |
  subtract   |
  intersect  |
  exclude

```

例
-

### マスクレイヤーを加算で合成

仕様書
---

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

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

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

関連情報
----

* Clipping and Masking in CSS


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

<basic-shape>
=============

**`<basic-shape>`** は CSS のデータ型で、`clip-path`、`shape-outside`、`offset-path` の各プロパティで使用されるシェイプを表します。

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

構文
--

`<basic-shape>` データ型は、以下に挙げた基本シェイプ関数のうちの一つで定義します。

シェイプを作成するときは、 `<basic-shape>` の値を使用するそれぞれのプロパティで参照ボックスを定義します。シェイプの座標系は参照ボックスの左上隅が原点で、X 座標が右方向、Y 座標が下方向になります。パーセント値で表現された長さはすべて、参照ボックスの寸法を使用して算出されます。

既定の参照ボックスは `margin-box` であり、`shape-outside: circle(50%)` を使用して円を生成すると下記のようになります。形状はマージンボックスを参照して定義されています。

![Firefox DevTools の Shape Inspector で円を検査している図。ボックスモデルのさまざまな部分が強調表示されています。](/ja/docs/Web/CSS/basic-shape/shapes-reference-box.png)

### シェイプ関数

以下のシェイプに対応しています。`<basic-shape>` 値はすべて関数表記であり、値定義構文で定義されます。

``inset()``

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

```css
inset( <shape-arg>{1,4} [round <border-radius>]? )
```

最初の 4 つの引数が与えられたときは、参照ボックス内部のそれぞれ上、右、下、左からみた、内部の矩形における各辺の位置を定義するオフセットを表します。これらの引数は margin 一括指定の構文に従い、1 つ、2 つ、4 つの値で全四辺を設定することができます。

任意の `<border-radius>` の引数は省略可能で、 border-radius 一括指定の構文を使用して、内部の矩形の角の丸みを定義します。

内部の矩形で 2 つの距離の組み合わせが、その軸の長さを超えていた場合 (たとえば左右の距離がそれぞれ 75% に設定された場合など) は、何も領域を囲まないシェイプを定義します。この仕様書によれば、これは空の浮動領域を生成します。

``circle()``

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

```css
circle( [<shape-radius>]? [at <position>]? )
```

引数 `<shape-radius>` は *r*、つまり円の半径を表します。負の数は無効です。ここでパーセント値を指定すると、参照ボックスの幅と高さを使用して `sqrt(width^2+height^2)/sqrt(2)` としての割合になります。

引数 `<position>` は円の中心を定義します。省略時は既定で中央になります。

``ellipse()``

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

```css
ellipse( [<shape-radius>{2}]? [at <position>]? )
```

引数 `<shape-radius>` は、rx と ry、つまり楕円の横半径と縦半径を、この順で表します。どちらの半径も負の値は無効です。ここでパーセント値を指定すると、参照ボックスの幅 (rx 値の場合) と高さ (ry 値の場合) に対する割合になります。

引数 position は楕円の中心を定義します。省略時は既定で中央になります。

``polygon()``

SVG の `fill-rule (en-US)` と一連の頂点を使用して多角形を定義します。

```css
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
```

`<fill-rule>` は多角形の内部を決めるために使用される塗りつぶし規則 (`fill-rule (en-US)`) を表します。指定可能な値は `nonzero` と `evenodd` です。省略時の既定値は `nonzero` です。

リスト内にある引数の組は、 *xi* および *yi* すなわち多角形の i 番目の頂点の X 座標と Y 座標を表します。

`path()`

SVG の `fill-rule (en-US)` と SVG のパス定義を使用してシェイプを定義します。

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

省略可能な `<fill-rule>` は多角形の内部を決めるために使用される塗りつぶし規則 (`fill-rule (en-US)`) を表します。指定可能な値は `nonzero` と `evenodd` です。省略時の既定値は `nonzero` です。

必須の <string> は、引用符で囲まれた SVG パスです。

上記で定義されていない引数は、以下のように定義されています。

```css
<shape-arg> = <length> | <percentage>
<shape-radius> = <length> | <percentage> | closest-side | farthest-side
```

円や楕円の半径を定義します。省略時の既定値は `closest-side` です。

`closest-side` はシェイプの中心から参照ボックスの最も近い辺までの距離を使用します。円の場合、これはあらゆる方向で最も近い辺です。楕円の場合、その軸で最も近い辺です。

`farthest-side` はシェイプの中心から参照ボックスの最も遠い辺までの距離を使用します。円の場合、これはあらゆる方向で最も遠い辺です。楕円の場合、その軸で最も遠い辺です。

解説
--

### 基本シェイプの計算値

`<basic-shape>` 関数の中の値は、以下の例外を除けば、規定通りに計算されます。

* 省略された値は既定値として含められ計算されます。
* `<position>` 値が `circle()` または `ellipse()` で使用されると、それぞれを絶対的な長さやパーセント値で指定し、左上を原点とした (水平と垂直) オフセットの組として計算されます。
* `<border-radius>` が `inset()` で使用されると、全 8 つの `<length>` またはパーセント値のリストとして展開され計算されます。
### 基本シェイプの補間

ある `<basic-shape>` と他のものの間でアニメーションが行われるとき、以下の規則が適用されます。シェイプ関数の中の値は単なるリストとして補間が行われます。リストの値は可能であれば `<length>`、 `<percentage>`、 `calc()` として補間されます。リストの値がこれらの型以外で同じであれば、それらの値は補間が行われます。

* どちらのシェイプも同じ参照ボックスを使う必要があります。
* 両方のシェイプが同じ型で、型が `ellipse()` または `circle()` で、半径に `closest-side` または `farthest-side` のキーワードが使われていない場合、シェイプ関数のそれぞれの値の間で補間が行われます。
* 両方のシェイプの型が `inset()` の場合、シェイプ関数のそれぞれの値の間で補間が行われます。
* 両方のシェイプの型が `polygon()` で、両方の多角形が同じ数の角を持っており、同じ `<fill-rule>` を使用している場合、シェイプ関数のそれぞれの値の間で補間が行われます。
* 両方のシェイプの型が `path()` の場合、両方の文字列が同じ数でパスデータコマンドの型が同じ順序であれば、実数でそれぞれのパスデータコマンドが補間されます。
* それ以外の場合は補間が行われません。
例
-

### アニメーションする多角形

この例では、@keyframes アットルールを使用して、2 つの多角形の間でクリップパスをアニメーションします。なお、どちらの多角形も同じ数の角を持つことが、この種のアニメーションが動作するために必要です。

#### HTML

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

#### CSS

```css
div {
  width: 300px;
  height: 300px;
  background: repeating-linear-gradient(red, orange 50px);
  clip-path: polygon(
    50% 0%,
    60% 40%,
    100% 50%,
    60% 60%,
    50% 100%,
    40% 60%,
    0% 50%,
    40% 40%
  );
  animation: 4s poly infinite alternate ease-in-out;
  margin: 10px auto;
}

@keyframes poly {
  from {
    clip-path: polygon(
      50% 0%,
      60% 40%,
      100% 50%,
      60% 60%,
      50% 100%,
      40% 60%,
      0% 50%,
      40% 40%
    );
  }

  to {
    clip-path: polygon(
      50% 30%,
      100% 0%,
      70% 50%,
      100% 100%,
      50% 70%,
      0% 100%,
      30% 50%,
      0% 0%
    );
  }
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Shapes Module Level 1 # basic-shape-functions |

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

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

関連情報
----

* このデータ型を使用するプロパティ: `clip-path`, `shape-outside`
* CSS シェイプのパスを編集する — Firefox 開発者ツール
* CSS シェイプの概要


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

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

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

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

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

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

構文
--

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

### 値

`auto`

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

`contain`

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

`none`

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

公式定義
----

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

形式文法
----
```

overscroll-behavior-block =
  contain  |
  none     |
  auto

```

例
-

### ブロック方向のオーバースクロールの抑止

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

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

#### HTML

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

#### CSS

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

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

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

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

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

text-underline-position
=======================

**`text-underline-position`** は CSS のプロパティであり、`text-decoration` プロパティの `underline` の値で設定される下線 (傍線) の位置を指定します。

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

構文
--

```css
/\* 単一のキーワード \*/
text-underline-position: auto;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;

/\* 複数のキーワード \*/
text-underline-position: under left;
text-underline-position: right under;

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

### 値

`auto`

ユーザーエージェントは、傍線を文字のベースラインの位置に配置するか、その下に配置するかを独自のアルゴリズムで決定します。

`from-font`

フォントファイルに推奨される位置についての情報があった場合、その値を使用します。フォントファイルにこの情報がない場合は、`auto` が設定された場合の動作と同様、ブラウザーが適切な位置を選択します。

`under`

文字のベースラインの下、ディセンダーを越えない位置に強制的に傍線を設定します。これは、下付き文字が多用される化学式や数式の読みやすさを確保するのに便利です。

`left`

縦書きモードでは、このキーワードは強制的に傍線をテキストの*左*端に配置します。横書きモードでは、`under` と同じです。

`right`

縦書きモードでは、このキーワードは強制的に傍線をテキストの*右*側に配置します。横書きモードでは、`under` と同じです。

`auto-pos`
Non-standard

`auto` と同じですので、代わりにそちらを使用してください。

`above`
Non-standard

強制的に傍線をテキストの上部に配置します。東アジアのテキストで使用すると、`auto` キーワードが同様の効果になります。

`below`
Non-standard

強制的に傍線をテキストの下部に配置します。アルファベットのテキストで使用すると、`auto` キーワードが同様の効果になります。

公式定義
----

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

形式文法
----
```

text-underline-position =
  auto                           |
  [ under || [ left | right ] ]

```

例
-

### 単純な例

2 つの段落の例を見てみましょう。

```html
<p class="horizontal">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac
  turpis vel laoreet. Nullam volutpat pharetra lorem, sit amet feugiat tortor
  volutpat quis. Nam eget sodales quam. Aliquam accumsan tellus ac erat posuere.
</p>

<p class="vertical">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac
  turpis vel laoreet. Nullam volutpat pharetra lorem, sit amet feugiat tortor
  volutpat quis. Nam eget sodales quam. Aliquam accumsan tellus ac erat posuere.
</p>
```

CSS はこのようになります。

```css
p {
  font-size: 1.5rem;
  text-transform: capitalize;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.horizontal {
  text-underline-position: under;
}

.vertical {
  writing-mode: vertical-rl;
  text-underline-position: left;
}
```

この例では、どちらの段落にも太い下線を引いています。横書きのテキストでは `text-underline-position: under;` を使用して、下線をすべてのディセンダーの下に引いています。

`writing-mode` を縦書きに設定した場合、必要に応じて `left` または `right` を使用して、傍線をテキストの左と右のどちらに引くか決めることができます。

ライブサンプルはこのようになります。

### グローバルに text-underline-position を設定する

`text-underline-position` プロパティは継承され、`text-decoration` 一括指定プロパティでリセットされないため、グローバルレベルでこの値を設定する方が適切かもしれません。例えば、数多くの化学式や数式があり、下付き文字をたくさん使用している文書では、 `under` の値が適切かもしれません。

```css
:root {
  text-underline-position: under;
}
```

仕様書
---

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

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

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

関連情報
----

* `text-decoration` プロパティは、`text-decoration-line`、`text-decoration-color`、`text-decoration-style` など、ほとんどのテキスト装飾プロパティを設定します。しかし、 `text-underline-position` は設定しません。
* Microsoft non-standard values documentation


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

::before (:before)
==================

CSS において **`::before`** は、選択した要素の最初の子要素として擬似要素を生成します。よく `content` プロパティを使用して、要素に装飾的な内容を追加するために用いられます。この要素は既定でインラインです。

```css
/\* リンクの前にハートを追加 \*/
a::before {
  content: "♥";
}
```

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

**メモ:** `::before` および `::after` によって作成される擬似要素は要素の整形ボックスに含まれるため、 `<img>` や `<br>` のような置換要素には適用されません。

構文
--

Error: could not find syntax for this item

**メモ:** CSS3 では疑似クラスと擬似要素を見分けやすくするために、 `::before` の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された `:before` も使用できます。

例
-

### 引用符の追加

`::before` 擬似要素を使用するシンプルな例の一つとして、引用符を追加します。引用符を挿入するために `::before` および `::after` の両方を使用しています。

#### HTML

```html
<q>引用があることは、</q>彼は言った、<q>ないよりも良い。</q>
```

#### CSS

```css
q::before {
  content: "«";
  color: blue;
}

q::after {
  content: "»";
  color: red;
}
```

#### 結果

### 装飾の例

`content` プロパティ内の文字列や画像は、大体思う通りに整形することができます。

#### HTML

```html
<span class="ribbon">オレンジのボックスがどこにあるか注意してください。</span>
```

#### CSS

```css
.ribbon {
  background-color: #5bc8f7;
}

.ribbon::before {
  content: "このオレンジのボックスを見てください。";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}
```

#### 結果

### やることリスト

この例では、擬似要素を使用して簡単なやることリストを作成します。この方法は UI に小さな変更を加え、使い勝手を改善するためによく使われます。

#### HTML

```html
<ul>
  <li>牛乳を買う</li>
  <li>犬の散歩をする</li>
  <li>エクササイズ</li>
  <li>コードを書く</li>
  <li>音楽を演奏する</li>
  <li>リラックスする</li>
</ul>
```

#### CSS

```css
li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #ccff99;
}

li.done::before {
  content: "";
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}
```

#### JavaScript

```js
var list = document.querySelector("ul");
list.addEventListener(
  "click",
  function (ev) {
    if (ev.target.tagName === "LI") {
      ev.target.classList.toggle("done");
    }
  },
  false,
);
```

ここで上記のコードをライブで実行できます。なお、アイコンは使用しておらず、チェックマークは実際に CSS の `::before` で整形したものです。先に進んでやってみてください。

#### 結果

### 特殊文字

これは CSS であり HTML ではないので、 content の値の中でエンティティのマークアップを使用することは**できません**。特殊文字を使用する必要がある場合で、 CSS の content の文字列に直接入力できない場合は、バックスラッシュの後に 16 進数の Unicode 値を続ける Unicode エスケープシーケンスを使用してください。

#### HTML

```html
<ol>
  <li>Crack Eggs into bowl</li>
  <li>Add Milk</li>
  <li>Add Flour</li>
  <li aria-current="step">Mix thoroughly into a smooth batter</li>
  <li>Pour a ladleful of batter onto a hot, greased, flat frying pan</li>
  <li>Fry until the top of the pancake loses its gloss</li>
  <li>Flip it over and fry for a couple more minutes</li>
  <li>serve with your favorite topping</li>
</ol>
```

#### CSS

```css
li {
  padding: 0.5em;
}

li[aria-current="step"] {
  font-weight: bold;
}

li[aria-current="step"]::after {
  content: " \21E6"; /\* 左向きの白い矢印を表す Unicode の 16 進数 \*/
  display: inline;
}
```

#### 結果

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

`::before` 擬似要素を使用してコンテンツを追加することは、スクリーンリーダーからアクセスできなくなる可能性があるため推奨されません。

仕様書
---

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # generated-content |

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

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

関連情報
----

* `::after`
* `content`


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

inset
=====

**`inset`** は CSS のプロパティで、 `top`, `right`, `bottom`, `left` に対応する一括指定です。これは `margin` の一括指定における複数値の場合と同じ構文です。

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

*CSS 論理的プロパティ*の仕様書で定義されているものですが、*論理的*なオフセットを定義するものではありません。これは*物理的*なオフセットであり、要素の書字方向やテキストの向きには関係がありません。

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

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

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

```css
/\* <length> 値 \*/
inset: 10px; /\* すべての辺に適用される値 \*/
inset: 4px 8px; /\* 上/下 左/右 \*/
inset: 5px 15px 10px; /\* 上 左/右 下 \*/
inset: 2.4em 3em 3em 3em; /\* 上 右 下 左 \*/

/\* 包含ブロックの幅 (左/右) または 高さ (上/下) に対する <percentage> \*/
inset: 10% 5% 5% 5%;

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

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

### 値

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `top`: `auto`
* `bottom`: `auto`
* `left`: `auto`
* `right`: `auto`
 |
| 適用対象 | 位置指定要素 |
| 継承 | なし |
| パーセント値 | relative to the containing block’s size in the corresponding axis (e.g. width for left or right, height for top or bottom) |
| 計算値 | 一括指定の次の各プロパティとして* `top`: 長さで指定されると相当する絶対的な長さ、パーセント値として指定されると指定値、それ以外では `auto`
* `bottom`: 長さで指定されると相当する絶対的な長さ、パーセント値として指定されると指定値、それ以外では `auto`
* `left`: 長さで指定されると相当する絶対的な長さ、パーセント値として指定されると指定値、それ以外では `auto`
* `right`: 長さで指定されると相当する絶対的な長さ、パーセント値として指定されると指定値、それ以外では `auto`
 |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

inset =
  <'top'>{1,4}

```

例
-

### 要素のオフセットの設定

#### HTML

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

#### CSS

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

.exampleText {
  writing-mode: sideways-rl;
  position: absolute;
  inset: 20px 40px 30px 10px;
  background-color: #c8c800;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* 個別指定のボックスのオフセットプロパティ: `top`, `right`, `bottom`, `left`
* 対応する論理的プロパティの一括指定: `inset-block` および `inset-inline`
* `margin` 一括指定の複数値の構文


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

<display-legacy>
================

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

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

* Learn more
* See full compatibility
* Report feedback
CSS 2 では `display` プロパティで単一のキーワードによる構文を採用しており、同じレイアウトモードのブロックレベルとインラインレベルで別々のキーワードが必要でした。このページではこれらの値を詳しく紹介します。

構文
--

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

`inline-block`

この要素はブロック要素ボックスを生成しますが、周囲のコンテンツに対しては単一のインラインボックスであるかのように流れるようになります (置換要素の場合と似ています)。

これは `inline flow-root` と等価です。

`inline-table`

`inline-table` は、 HTML には直接的に対応するものがありません。これは、 HTML の `<table>` 要素と同じようにふるまいつつ、ブロックレベルボックスではなく、インラインボックスのようにふるまいます。表ボックスの内部はブロックレベルのコンテキストになります。

これは `inline table` と等価です。

`inline-flex`

要素は、インライン要素のようにふるまいつつ、その内容物をフレックスボックスモデルに従ってレイアウトします。

これは `inline flex` と等価です。

`inline-grid`

要素は、インライン要素のようにふるまいつつ、その内容物をグリッドモデルに従ってレイアウトします。

これは `inline grid` と等価です。

例
-

以下の例では、インラインフレックスコンテナーを従来型のキーワードである inline-flex で生成します。

### HTML

```html
<div class="container">
  <div>Flex Item</div>
  <div>Flex Item</div>
</div>

Not a flex item
```

### CSS

```css
.container {
  display: inline-flex;
}
```

### 結果

新しい構文では、インラインフレックスコンテナーは二つの値を使用して生成され、外部表示種別が inline、内部表示種別が flex です。

```css
.container {
  display: inline flex;
}
```

仕様書
---

| Specification |
| --- |
| CSS Display Module Level 3 # typedef-display-legacy |

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

### inline-block の対応

### css.properties.display.inline-block

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

### css.properties.display.inline-table

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

### css.properties.display.inline-flex

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

### css.properties.display.inline-grid

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

### inline-table の対応

### css.properties.display.inline-block

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

### css.properties.display.inline-table

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

### css.properties.display.inline-flex

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

### css.properties.display.inline-grid

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

### inline-flex の対応

### css.properties.display.inline-block

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

### css.properties.display.inline-table

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

### css.properties.display.inline-flex

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

### css.properties.display.inline-grid

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

### inline-grid の対応

### css.properties.display.inline-block

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

### css.properties.display.inline-table

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

### css.properties.display.inline-flex

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

### css.properties.display.inline-grid

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


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

contain-intrinsic-size
======================

`contains-intrinsic-size` CSS プロパティは、`content-visibility`で指定された要素の自然なサイズを制御します。

構文
--

```css
/\* <length> values \*/
contain-intrinsic-size: 1000px;
contain-intrinsic-size: 10rem;

/\* <percentage> value \*/
contain-intrinsic-size: 10%;
```

仕様書
---

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-size |

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

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

関連情報
----

* content-visibility: the new CSS property that boosts your rendering performance (web.dev)


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

@counter-style
==============

**`@counter-style`** は CSS のアットルールで、スタイルにあらかじめ設定されたものではないカウンターのスタイルを定義することができます。 `@counter-style` ルールはカウンターの値をどのように文字列表現に変換するかを定義します。

```css
@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
  suffix: " ";
}

ul {
  list-style: thumbs;
}
```

初期バージョンの CSS では、有用なカウンターのスタイルのセットを定義していました。しかし、何年にもわたって定義済みのスタイルがここに追加され続けたため、世界中の記法のニーズを満たすにはこのシステムでは不十分になりました。 `@counter-style` アットルールは、あらかじめ定義されたスタイルがニーズに合っていないときに独自のカウンタースタイルを定義できるようにすることで、この欠点を完全に解決します。

構文
--

### 記述子

それぞれの `@counter-style` は名前で識別され、記述子のセットを持ちます。

`system`

カウンターの整数値を文字列表現に変換するために使用するアルゴリズムを指定します。

`negative`

値が負の数の時に、カウンター表現の前または後に追加する記号を指定します。

`prefix`

マーカー表現の前に追加する記号を指定します。接頭辞は表現の最終段階で追加されるため、カウンターの最終的な表現では、負号の前に来ます。

`suffix`

prefix 記述子と同様に、マーカー表現に追加される記号を指定します。接尾辞はマーカー表現の後に来ます。

`range`

カウンタースタイルが適用される値の範囲を定義します。カウンタースタイルが範囲を外れたカウンター値を表現するために使用されると、カウンタースタイルは代替スタイルで代用されます。

`pad`

マーカー表現に最小文字数を適用する必要がある場合に使用されます。例えば、カウンターが 01 から始まって 02、03、04 のように進む場合は、パッド文字が使用されます。指定されたパッド値よりも長い文字数の場合は、マーカーは通常通りに構築されます。

`fallback`

指定したシステムでカウンター値の表現を構築できない場合や、カウンター値が指定された範囲の外にあった場合に、代わりに使用されるシステムを指定します。指定された代替スタイルも値の表現に失敗した場合は、代替スタイルの代替があれば、それが使用されます。代替システムが記述されていない場合や、代替システムのチェーンがカウンター値を表現できなかった場合は、最終的に decimal スタイルに代替されます。

`symbols`

マーカー表現に使用される記号を指定します。記号は文字列、画像、カスタム識別子を含むことができます。記号がマーカー表現を構築するためにどのように使用されるかは、 system 記述子で指定されたアルゴリズムによります。例えば、 system が fixed に指定されていた場合は、この記述子で N 個の記号が指定されていると、カウンターの最初の N 個の記号を表すために使用されます。記号のセットを使い切ると、リストの残りには代替スタイルが使用されます。

以下の `@counter-style` ルールでは、文字の記号ではなく画像を使用しています。記号に画像の値を使用するのは現在のところ「リスクのある」機能で、実装されているブラウザーはありません。

```css
@counter-style winners-list {
  system: fixed;
  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
  suffix: " ";
}
```

`additive-symbols`

symbols 記述子で指定された記号は、多くのアルゴリズムではマーカーを構築するために使用されますが、 'addaptive' などの一部のシステムではこの記述子の*加算的タプル*に依存します。それぞれの加算的タプルはカウンター記号と、非負の整数の重みによって成ります。加算的タプルは重みの降順で指定しなければなりません。

`speak-as`

読み上げソフトのような音声合成で、カウンタースタイルを読み上げる方法を記述します。例えば、マーカー記号の値はこの記述子の値に応じて、順序付きリストでは数値やアルファベットとして、順序なしリストでは合図として読み上げられることがあります。

形式文法
----
```

@counter-style <counter-style-name> { <declaration-list> }
```

例
-

### counter-style で記号を設定

```css
@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}
```

上記のカウンタースタイルルールは、このようにリストに適用されます。

```css
.items {
  list-style: circled-alpha;
}
```

このようなリストを生成します。

 Ⓐ One
 Ⓑ Two
 Ⓒ Three
 Ⓓ Four
 Ⓔ Five
 …
 Ⓨ Twenty-five
 Ⓩ Twenty-six
 27 Twenty-seven
 28 Twenty-eight
 29 Twenty-nine
 30 Thirty

他の例はデモページをご覧ください。

### 既成のカウンタースタイル

100 以上の `counter-style` のコードスニペットを集めた Ready-made Counter Styles の文書をご覧ください。この文書では、世界中の言語と文化のニーズを満たすカウンタースタイルを提供しています。

カウンタースタイル変換ツール は、このリストから、カウンタースタイルのコピー＆ペーストコードをテストし、作成するために使用されます。

仕様書
---

| Specification |
| --- |
| CSS Counter Styles Level 3 # the-counter-style-rule |

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

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

関連情報
----

* `list-style`, `list-style-image`, `list-style-position`, `list-style-type`
* 無名のカウンタースタイルを作成する関数表記である `symbols()`
* CSS の `counter()` および `counters()` 関数
* カウンタースタイルのデモ (コード)


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

box-direction
=============

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

**警告:** これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。以前の標準であった `box-direction` は `flex-direction` に置き換えられたので、 `-moz-box-direction` は XUL でのみ使用されます。現在の標準についての情報はフレックスボックスを参照してください。

**`box-direction`** は CSS のプロパティで、ボックスが内容を通常通りに (上または左から) 配置するか、逆方向に (下または右から) 配置するかを指定します。

```css
/\* キーワード値 \*/
box-direction: normal;
box-direction: reverse;

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

構文
--

`box-direction` プロパティは以下に挙げたキーワード値のうちの一つで指定します。

### 値

`normal`

ボックスが内容を先頭 (左または上の端) から配置します。

`reverse`

ボックスが内容を末尾 (右または下の端) から配置します。

メモ
--

整列のために *start* と指定されたボックスの辺は、ボックスの方向によって異なります。

* 水平方向の要素の場合、 *start* は上端になります。
* 垂直方向の要素の場合、 *start* は左端になります。

start の反対側の端は *end* となります。

要素の `dir` 属性を使用して書字方向を設定した場合は、このスタイルは無視されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | CSS の `display` の値が `box` または `inline-box` である要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

### ボックスの方向を設定

```css
.example {
  /\* bottom-to-top layout \*/
  -moz-box-direction: reverse; /\* Mozilla \*/
  -webkit-box-direction: reverse; /\* WebKit \*/
  box-direction: reverse; /\* 仕様書通り \*/
}
```

仕様書
---

標準仕様には含まれていません。

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

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

関連情報
----

* `box-orient`
* `box-pack`
* `box-align`
* `flex-direction`


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

content-visibility
==================

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

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

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

**`content-visibility`** は CSS のプロパティで、要素がその内容物をレンダリングするかどうかを制御するとともに、強力な封じ込めのセットを強制することで、必要になるまでユーザーエージェントが大量のレイアウトとレンダリングの作業を省略できるようにします。基本的に、ユーザーエージェントは、レイアウトやペイントなどの要素のレンダリング作業を必要になるまでスキップできるため、最初のページの読み込みがはるかに高速になります。

**メモ:** `contentvisibilityautostatechange` イベントは、 `content-visibility: auto` が設定されている要素で、そのレンダリング作業が始まるか、またはスキップされなくなったときに発行されます。これは、アプリのコードがレンダリング処理（例えば `<canvas>` に描画する）を不要なときに開始または停止する便利な方法を提供し、処理能力を節約します。

構文
--

```css
/\* キーワード値 \*/
content-visibility: visible;
content-visibility: hidden;
content-visibility: auto;

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

### 値

`visible`

効果なし。要素の内容物は通常通りにレイアウトおよび描画されます。

`hidden`

要素はその内容物を読み飛ばします。読み飛ばされた内容物は、ページ内検索やタブ順序ナビゲーションなどのユーザーエージェント機能でアクセス可能になることはなく、また選択可能やフォーカス可能にもなりません。これは、内容物に `display: none` を設定することに似ています。

`auto`

この要素の、レイアウトの封じ込め、スタイルの封じ込め、描画の封じ込めをオンにします。要素がユーザーに関連していない場合、その内容の読み飛ばしも行われます。 hidden の場合とは異なり、読み飛ばされた内容物は、ページ内検索やタブ順序ナビゲーションなどのユーザーエージェント機能で通常通り利用可能となり、通常通りフォーカスや選択が可能になります。

解説
--

### content-visibility のアニメーションとトランジション

対応しているブラウザーは `content-visibility` を離散アニメーション型のバリエーションでアニメーション/トランジションさせます。

離散アニメーションは一般的に、アニメーションの 50% でプロパティが 2 つの値の間を反転することを意味しています。しかし、 `content-visibility` の場合、ブラウザーはアニメーションの間中、 2 つの値を反転させてアニメーションコンテンツを表示させます。例えば、このようになります。

* `content-visibility` を `hidden` から `visible` にアニメーションさせる場合、アニメーション時間の `0%` で `visible` に値が切り替わるので、その間ずっと表示されます。
* `content-visibility` を `visible` から `hidden` にアニメーションさせる場合、アニメーション時間の `100%` で `hidden` に値が反転するので、その間ずっと表示されます。

この動作は、例えば、 `content-visibility: hidden` で DOM から何かコンテンツを除去したいが、すぐに消えてしまうのではなく、（フェードアウトのように）スムーズに遷移させたい場合に、ビュートランジションのアニメーションを作成するのに有益です。

CSS トランジションで `content-visibility` をアニメーションさせる場合、 `content-visibility` に `transition-behavior: allow-discrete` (en-US) を設定する必要があります。これにより、 `content-visibility` トランジションが有効になります。

**メモ:** 要素の `content-visibility` 値をトランジションさせるとき、 `display` をトランジションさせるときのように、 `@starting-style` (en-US) ブロックを使用して、トランジションするプロパティの開始値の集合を提供する必要はありません。これは `content-visibility` が `display` のように要素を DOM から隠すのではなく、要素のコンテンツのレンダリングをスキップするだけだからです。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `visible` |
| 適用対象 | elements for which size containment can apply |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | Discrete behavior except when animating to or from `hidden` is visible for the entire duration |

形式文法
----
```

content-visibility =
  visible  |
  auto     |
  hidden

```

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

`content-visibility: auto` プロパティ内にあるオフスクリーンコンテンツは、ドキュメントオブジェクトモデルとアクセシビリティツリー内に残ります。これにより、アクセシビリティに悪影響を与えることなく、 `content-visibility: auto` でページのパフォーマンスを改善することができます。

 オフスクリーンコンテンツのスタイルはレンダリングされないので、 `display: none` や `visibility: hidden` で意図的に非表示にした要素はアクセシビリティツリーに現れます。
 要素をアクセシビリティツリーに現れたくない場合は、 `aria-hidden="true"` を使用してください。

例
-

### auto を使用して長いページのレンダリングコストを削減

 次の例では、`content-visibility: auto` を使用して、オフスクリーンセクションの描画をスキップしています。
 セクション`がビューポートの外にある場合、セクションがビューポートに近づくまでコンテンツの描画はスキップされます。この章はページの読み込みと対話することの両方に役立ちます。

#### HTML

```html
<section>
  <!-- 各節の内容… -->
</section>
<section>
  <!-- 各節の内容… -->
</section>
<section>
  <!-- 各節の内容… -->
</section>
<!-- … -->
```

#### CSS

`contain-intrinsic-size` プロパティは、それぞれの `section` 要素の高さと幅に 500px の既定値を追加します。節がレンダリングされた後、ビューポートの外にスクロールされても、レンダリングされた内在サイズを保持します。

```css
section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}
```

### hidden を使用して手動で可視性を管理

 次の例では、JavaScript でコンテンツの可視性を管理する方法を示します。
 `display: none;` の代わりに `content-visibility: hidden;` を使用することで、非表示時のコンテンツの描画状態が保持され、描画が高速になります。

#### HTML

```html
<div class="hidden">
  <button class="toggle">表示</button>
  <p>
    このコンテンツは初期状態では非表示になっており、ボタンをクリックすることで表示させることができます。
  </p>
</div>
<div class="visible">
  <button class="toggle">非表示</button>
  <p>
    このコンテンツは初期状態では表示されており、ボタンをクリックすることで非表示にすることができます。
  </p>
</div>
```

#### CSS

`content-visibility` プロパティは、 `visible` クラスと `hidden` クラスを持つ要素の直接の子である段落に設定します。この例では、親 div 要素の CSS クラスに応じて、段落内のコンテンツを表示させたり非表示にしたりすることができます。

コンテンツのサイズを表すために `contain-intrinsic-size` プロパティを記載しています。これは、コンテンツを非表示にしたときのレイアウトのずれを縮小するのに役立ちます。

```css
p {
  contain-intrinsic-size: 0 1.1em;
  border: dotted 2px;
}

.hidden > p {
  content-visibility: hidden;
}

.visible > p {
  content-visibility: visible;
}
```

#### JavaScript

```js
const handleClick = (event) => {
  const button = event.target;
  const div = button.parentElement;
  button.textContent = div.classList.contains("visible") ? "表示" : "非表示";
  div.classList.toggle("hidden");
  div.classList.toggle("visible");
};

document.querySelectorAll("button.toggle").forEach((button) => {
  button.addEventListener("click", handleClick);
});
```

#### 結果

### content-visibility のアニメーション

この例では、 `<div>` 要素があり、そのコンテンツはクリックや任意のキーを押すことで表示・非表示を切り替えることができます。

#### HTML

```html
<p>
  Click anywhere on the screen or press any key to toggle the
  <code><div></code> content between hidden and showing.
</p>

<div>
  This is a <code><div></code> element that animates between
  <code>content-visibility: hidden;</code>and
  <code>content-visibility: visible;</code>. We've also animated the text color
  to create a smooth animation effect.
</div>
```

#### CSS

CSS では、最初に `<div>` に `content-visibility: hidden;` を設定し、そのコンテンツを隠します。次に `@keyframe` アニメーションを設定し、 `<div>` を表示させたり非表示にしたりするためのクラスに取り付けて、 `content-visibility` と `color` をアニメーション化することで、コンテンツが表示/非表示になる滑らかなアニメーション効果が得られます。

```css
div {
  font-size: 1.6rem;
  padding: 20px;
  border: 3px solid red;
  border-radius: 20px;
  width: 480px;

  content-visibility: hidden;
}

/\* アニメーションクラス \*/

.show {
  animation: show 0.7s ease-in forwards;
}

.hide {
  animation: hide 0.7s ease-out forwards;
}

/\* Animation keyframes \*/

@keyframes show {
  0% {
    content-visibility: hidden;
    color: rgb(0 0 0 / 0);
  }

  100% {
    content-visibility: visible;
    color: rgb(0 0 0 / 1);
  }
}

@keyframes hide {
  0% {
    content-visibility: visible;
    color: rgb(0 0 0 / 1);
  }

  100% {
    content-visibility: hidden;
    color: rgb(0 0 0 / 0);
  }
}
```

#### JavaScript

最後に、JavaScript を使用して `.show` クラスと `.hide` クラスを `<div>` に適用し、表示状態と非表示状態の切り替えに応じてアニメーションを適用します。

```js
const divElem = document.querySelector("div");
const htmlElem = document.querySelector(":root");

htmlElem.addEventListener("click", showHide);
document.addEventListener("keydown", showHide);

function showHide() {
  if (divElem.classList[0] === "show") {
    divElem.classList.remove("show");
    divElem.classList.add("hide");
  } else {
    divElem.classList.remove("hide");
    divElem.classList.add("show");
  }
}
```

#### 結果

表示結果は次のようになります。

仕様書
---

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

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

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

関連情報
----

* CSS 封じ込め
* `contain-intrinsic-size`
* `contentvisibilityautostatechange`
* content-visibility: the new CSS property that boosts your rendering performance (web.dev)


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

overflow-x
==========

Baseline 2022
-------------

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

* Learn more
* See full compatibility
* Report feedback
**`overflow-x`** は CSS のプロパティで、ブロックレベル要素の内容が左右の境界からあふれた場合、どのように表示するのかを設定します。表示しないか、スクロールバーを表示するか、あふれさせるかを設定できます。

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

構文
--

```css
/\* キーワード値 \*/
overflow-x: visible;
overflow-x: hidden;
overflow-x: clip;
overflow-x: scroll;
overflow-x: auto;

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

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

### 値

`visible`

内容は切り取られず、パディングボックスの左右の辺よりも外側に表示される可能性があります。 `overflow-y` が `hidden`, `scroll`, `auto` のいずれかであり、このプロパティが `visible` である場合は、暗黙に `auto` に計算します。

`hidden`

水平方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。

`clip`
Experimental

`hidden` のように、内容が要素のパディングボックスで切り取られます。 `clip` と `hidden` の違いは、 `clip` キーワードはプログラムによるスクロールも含め、すべてのスクロールを禁止することです。ボックスはスクロールコンテナーにならず、新しい整形コンテキストを開始しません。新しい整形コンテキストを始めるのであれば、 `display: flow-root` を使用して実現することができます。

`scroll`

水平方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。

`auto`

ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は `visible` と同じように表示されますが、新しいブロック整形文脈を生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `visible` |
| 適用対象 | ブロックコンテナー, フレックスコンテナー, グリッドコンテナー |
| 継承 | なし |
| 計算値 | 指定通り、ただし `overflow-x` と `overflow-y` のどちらかが `visible` でも clip でもない場合は、 `visible`/`clip` はそれぞれ `auto`/`hidden` と計算される |
| アニメーションの種類 | 離散値 |

形式文法
----
```

overflow-x =
  visible  |
  hidden   |
  clip     |
  scroll   |
  auto

```

例
-

### HTML

```html
<ul>
 - <code>overflow-x:hidden</code> — ボックスの外側のテキストを隠す
    <div id="div1">
  </li>

 - <code>overflow-x:scroll</code> — 常にスクロールバーを表示
    <div id="div2">
  </li>

 - <code>overflow-x:visible</code> — 必要に応じてテキストをボックスの外に表示
    <div id="div3">
  </li>

 - <code>overflow-x:auto</code> — 多くのブラウザーでは <code>scroll</code> と同じ
    <div id="div4">
  </li>
</ul>
```

### CSS

```css
#div1,
#div2,
#div3,
#div4 {
  border: 1px solid black;
  width: 250px;
  margin-bottom: 12px;
}

#div1 {
  overflow-x: hidden;
}
#div2 {
  overflow-x: scroll;
}
#div3 {
  overflow-x: visible;
}
#div4 {
  overflow-x: auto;
}
```

### 結果

仕様書
---

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

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

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

関連情報
----

* 関連する CSS プロパティ: `text-overflow`, `white-space`, `overflow`, `overflow-y`, `clip`, `display`


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

cross-fade()
============

**`cross-fade()`** は CSS の関数で、2 枚以上の画像を所定の透過度で合成するために使用することができます。
 これは単色で色を薄めたり、放射状グラデーションとの組み合わせでページの特定の領域を強調させたりするような、数多くの単純な画像加工に使用することができます。

構文
--

**警告:** 仕様書と現在の実装とで構文が異なっています。
 仕様書の構文を先に説明します。

### 仕様書上の構文

`cross-fade()` 関数は、画像と、他の画像と合成したときにそれぞれの画像が占める割合を定義したパーセント値のリストを取ります。パーセント値は引用符なしで記述する必要があり、`'%'` 記号を含める必要があり、0% から 100% までの間である必要があります。

この関数は CSS の中で、通常の画像の参照が利用できるところならばどこでも利用できます。

#### cross-fade のパーセント値

子のパーセント値は、それぞれの画像の混合率の値と考えてください。つまり、0% の値は画像が完全に透明であり、100% の値は完全に不透明になります。

```css
cross-fade( url(white.png) 0%, url(black.png) 100%); /\* 完全に黒 \*/
cross-fade( url(white.png) 25%, url(black.png) 75%); /\* 黒 25%、白 75% \*/
cross-fade( url(white.png) 50%, url(black.png) 50%); /\* 黒 50%、白 50% \*/
cross-fade( url(white.png) 75%, url(black.png) 25%); /\* 白 75%、黒 25% \*/
cross-fade( url(white.png) 100%, url(black.png) 0%); /\* 完全に白 \*/
cross-fade( url(green.png) 75%, url(red.png) 75%); /\* 緑と赤がともに 75% \*/
```

 パーセント値が省略された場合は、指定されたすべてのパーセント値が合計され、`100%` から減算されます。
 その結果が `0%` より大きい場合は、パーセント値が省略されているすべての画像で均等に分割されます。

 最も単純なケースは、2 つの画像を互いにフェードアウトさせる場合です。そのためには、パーセント値を設定する必要があるのは片方の画像だけで、もう片方の画像はそれに応じてフェードされます。
 例えば、1 枚目の画像に 0% の値を設定すると 2 枚目の画像のみが表示され、100% の値を設定すると 1 枚目の画像のみが表示されます。
 25% の値を設定すると、1 枚目の画像は 25%、2 枚目の画像は 75% で表示されます。75% の場合はその逆で、1 枚目が 75%、2 枚目が 25% になります。

以下のように書くこともできます。

```css
cross-fade( url(white.png) 0%,   url(black.png)); /\* 完全に黒 \*/
cross-fade( url(white.png) 25%, url(black.png)); /\* 黒 25%、白 75% \*/
cross-fade( url(white.png),      url(black.png)); /\* 白 50%、白 50% \*/
cross-fade( url(white.png) 75%, url(black.png)); /\* 白 75%、黒 25% \*/
cross-fade( url(white.png) 100%, url(black.png)); /\* 完全に白 \*/
cross-fade( url(green.png) 75%, url(red.png) 75%); /\* 緑と赤がともに 75% \*/
```

 パーセント値が宣言されていない場合は、両方の画像が 50% の混合率となり、cross-fade では両方の画像が均等に合成されたように描画されます。
 上述の 50%/50% の例では、パーセント値を記載する必要はありませんでした。パーセント値が省略された場合、含まれるパーセント値が合計され、100% から差し引かれます。
 その結果、0 より大きい場合は、パーセント値が省略されたすべての画像で均等に分割されます。

最後の例では、両方のパーセント値の合計が 100% ではないため、両方の画像にそれぞれの混合率が含まれています。

パーセント値が宣言されておらず、3 つの画像が含まれている場合、それぞれの画像は 33.33% の混合率になります。以下の 2 つは (ほぼ) 同じ線です。

```css
cross-fade(url(red.png), url(yellow.png), url(blue.png)); /\* 3 つとも 33.3333% の混合率となる \*/
cross-fade(url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%);
```

### 古い、実装されている構文

```css
cross-fade( <image>, <image>, <percentage> )
```

`cross-fade()` 関数の仕様では、複数の画像を指定し、それぞれの画像に他の値とは独立した透明度の値を持たせることができます。
 これは必ずしもそうではありませんでした。
 一部のブラウザーで実装されている元の構文では、2 つの画像しか使用できず、その 2 つの画像の透明度の合計がちょうど 100% になります。
 オリジナルの構文は Safari が対応しており、`-webkit-` の接頭辞付きのものは Chrome、Opera、その他の blink ベースのブラウザーで対応しています。

```css
cross-fade(url(white.png), url(black.png), 0%);   /\* 完全に黒 \*/
cross-fade(url(white.png), url(black.png), 25%); /\* 黒 25%、白 75% \*/
cross-fade(url(white.png), url(black.png), 50%); /\* 白 50%、白 50% \*/
cross-fade(url(white.png), url(black.png), 75%); /\* 白 75%、黒 25% \*/
cross-fade(url(white.png), url(black.png), 100%); /\* 完全に白 \*/
```

 実装されている構文では、カンマで区切られた 2 つの画像を最初に宣言し、その後にカンマと必要なパーセント値を宣言します。カンマやパーセント値を省略すると、その値は無効になります。
 パーセント値は、最初に宣言された画像の混合率です。含まれるパーセントは 100% から差し引かれ、その差が 2 番目の画像の混合率になります。

仕様書の構文の項にある緑/赤の例（パーセント値の合計が 150%）と黄/赤/青の例（3 つの画像を使用）は、この実装では不可能です。

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

 ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。
 ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。
 背景画像を使用する場合は、色のコントラストを大きくして、画像がない場合と同様に、画像の上にどのような文字も読み取れるようにしてください。

* MDN "WCAG を理解する ― ガイドライン 1.1 の解説"
* Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0
形式文法
----
```

<cross-fade()> =
  cross-fade( <cf-image># )

<cf-image> =
  <percentage [0,100]>?  &&
  [ <image> | <color> ]

<image> =
  <url>       |
  <gradient>

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

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

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

```

例
-

### cross-fade の古い構文

#### HTML

```html
<div class="crossfade"></div>
```

#### CSS

```css
.crossfade {
  width: 300px;
  height: 300px;
  background-image: -webkit-cross-fade(url("br.png"), url("tr.png"), 75%);
  background-image: cross-fade(url("br.png"), url("tr.png"), 75%);
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Images Module Level 4 # cross-fade-function |

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

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

関連情報
----

* `<image>`
* `url()`
* `image()`
* `image-set()`
* `element()`
* CSS グラデーションの使用
* グラデーション関数: `linear-gradient()`, `radial-gradient()`, `repeating-linear-gradient()`, `repeating-radial-gradient()`, `conic-gradient()`, `repeating-conic-gradient()`


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

background-attachment
=====================

**`background-attachment`** は CSS のプロパティで、背景画像の位置をビューポートの中で固定するか、包含ブロックと一緒にスクロールするかを設定します。

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

構文
--

```css
/\* キーワード値 \*/
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

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

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

### 値

`fixed`

背景はビューポートに対する相対位置で固定されます。要素がスクロール機構を持っていたとしても、背景画像は要素とともには動きません。 (これは `background-clip: text` とは両立できません)

`local`

背景は要素の内容に対する相対位置で固定されます。要素がスクロール機構を持っていた場合、背景画像は要素の内容とともにスクロールします。背景画像の描画エリアと配置エリアは、それらを囲む境界ではなく、要素のスクロール可能なエリアを基準にします。

`scroll`

背景は要素自身に対する相対位置で固定され、内容と共にスクロールしません。 (要素の境界に対して効果的に張り付きます。)

公式定義
----

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

形式文法
----
```

background-attachment =
  <attachment>#

<attachment> =
  scroll  |
  fixed   |
  local

```

例
-

### 単純な例

#### HTML

```html
<p>
  There were doors all round the hall, but they were all locked; and when Alice
  had been all the way down one side and up the other, trying every door, she
  walked sadly down the middle, wondering how she was ever to get out again.
</p>
```

#### CSS

```css
p {
  background-image: url("starsolid.gif");
  background-attachment: fixed;
}
```

#### 結果

### 複数の背景画像

このプロパティは複数の背景画像に対応しており、それぞれの背景画像に異なる `<attachment>` をカンマ区切りで指定できます。それぞれの画像には先頭から順番に `<attachment>` の値が適用されます。

#### HTML

```html
<p>
  There were doors all round the hall, but they were all locked; and when Alice
  had been all the way down one side and up the other, trying every door, she
  walked sadly down the middle, wondering how she was ever to get out again.
  Suddenly she came upon a little three-legged table, all made of solid glass;
  there was nothing on it except a tiny golden key, and Alice's first thought
  was that it might belong to one of the doors of the hall; but, alas! either
  the locks were too large, or the key was too small, but at any rate it would
  not open any of them. However, on the second time round, she came upon a low
  curtain she had not noticed before, and behind it was a little door about
  fifteen inches high: she tried the little golden key in the lock, and to her
  great delight it fitted!
</p>
```

#### CSS

```css
p {
  background-image: url("starsolid.gif"), url("startransparent.gif");
  background-attachment: fixed, scroll;
  background-repeat: no-repeat, repeat-y;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background-attachment |

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

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

関連情報
----

* 複数の背景画像を使う


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

break-after
===========

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

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

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

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

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

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

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

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

分割が行われるかどうかを判断するためには、以下の規則が適用されます。

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

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

構文
--

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

### 値

### 一般の区切り値

`auto`

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

`avoid`

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

`always`
Experimental

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

`all`
Experimental

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

#### 改ページ値

`avoid-page`

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

`page`

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

`left`

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

`right`

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

`recto`
Experimental

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

`verso`
Experimental

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

#### 段区切り値

`avoid-column`

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

`column`

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

#### 領域区切り値

`avoid-region`
Experimental

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

`region`
Experimental

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

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

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

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

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

公式定義
----

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

形式文法
----
```

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

```

例
-

### きれいに段に分割

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

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

#### HTML

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

  <h2>小見出し</h2>

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

  <h2>小見出し</h2>

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

  <h2>小見出し</h2>

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

  <h2>小見出し</h2>

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

#### CSS

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

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

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

p {
  line-height: 1.5;
  break-after: column;
}

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

### 結果

仕様書
---

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

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

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

関連情報
----

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


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

border-bottom-width
===================

**`border-bottom-width`** は CSS のプロパティで、ボックスの下の境界の幅を設定します。

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

構文
--

```css
/\* キーワード値 \*/
border-bottom-width: thin;
border-bottom-width: medium;
border-bottom-width: thick;

/\* <length> 値 \*/
border-bottom-width: 10em;
border-bottom-width: 3vmax;
border-bottom-width: 6px;

/\* グローバルキーワード \*/
border-bottom-width: inherit;
border-bottom-width: initial;
border-bottom-width: revert;
border-bottom-width: unset;
```

### 値

`<line-width>`

明示的な非負の `<length>` またはキーワードで、境界の幅を定義します。キーワードの場合、以下の値のうちの一つでなければなりません。

* `thin`
* `medium`
* `thick`

**メモ:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか一つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `medium` |
| 適用対象 | すべての要素。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| 計算値 | 絶対的な長さ、または `border-bottom-style` が `none` または `hidden` の場合は `0` |
| アニメーションの種類 | length |

形式文法
----
```

border-bottom-width =
  <line-width>

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

```

例
-

### 下境界の太さの比較

#### HTML

```html
<div>Element 1</div>
<div>Element 2</div>
```

#### CSS

```css
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-bottom-width: thick;
}
div:nth-child(2) {
  border-bottom-width: 2em;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* 他の境界の太さに関する CSS プロパティ: `border-left-width`, `border-right-width`, `border-top-width`, `border-width`
* 他の下境界に関する CSS プロパティ: `border`, `border-bottom`, `border-bottom-style`, `border-bottom-color`


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

minmax()
========

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

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

* Learn more
* See full compatibility
* Report feedback
**`minmax()`** は CSS の関数で、寸法の範囲を *min* 以上、 *max* 以下で定義します。 CSS グリッドで使用されます。

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

構文
--

```css
/\* <inflexible-breadth>, <track-breadth> 値 \*/
minmax(200px, 1fr)
minmax(400px, 50%)
minmax(30%, 300px)
minmax(100px, max-content)
minmax(min-content, 400px)
minmax(max-content, auto)
minmax(auto, 300px)
minmax(min-content, auto)

/\* <fixed-breadth>, <track-breadth> 値 \*/
minmax(200px, 1fr)
minmax(30%, 300px)
minmax(400px, 50%)
minmax(50%, min-content)
minmax(300px, max-content)
minmax(200px, auto)

/\* <inflexible-breadth>, <fixed-breadth> 値 \*/
minmax(400px, 50%)
minmax(30%, 300px)
minmax(min-content, 200px)
minmax(max-content, 200px)
minmax(auto, 300px)
```

*min* および *max* の 2 つの引数を取る関数です。

どちらの引数も `<length>`, `<percentage>`, `<flex>`, またはキーワード値 `max-content`, `min-content`, `auto` のうちの一つを取ります。

もし *min* が *max* より大きい場合は無視され、 `minmax(min,max)` は *min* として扱われます。最大値として、 `<flex>` 値はグリッドトラックのフレックス係数を設定します。それは *min* としては無効です。

### 値

`<length>`

負ではない寸法。

`<percentage>`

負ではないパーセント値で、列グリッドトラックのグリッドコンテナーのインライン寸法、および行グリッドトラックのグリッドコンテナーのブロック寸法からの相対値。グリッドコンテナーの寸法がトラックの寸法に依存する場合、 `<percentage>` は `auto` として扱う必要があります。ユーザーエージェントは、グリッドコンテナーの寸法に対するトラックの固有の寸法の貢献度を調整し、パーセント値を尊重して最小限の量だけトラックの最終的な寸法を増加させることがあります。

`<flex>`

単位 `fr` がついた負ではない寸法で、トラックのフレックス係数を指定します。それぞれの `<flex>` による寸法のトラックは、フレックス係数の割合に従って残りの空間を配分します。

`max-content`

グリッドトラックを占めるグリッドアイテムの max-content の貢献度の最大値を表します。

`min-content`

グリッドトラックを占めるグリッドアイテムの min-content の貢献度の最大値を表します。

`auto`

`min` として使用した場合、グリッドトラックを占めるグリッドアイテムの最大最小サイズ（`min-width`/`min-height` で指定）を表します。
 `max` として使用した場合は、 `max-content` と同じです。ただし、 `max-content` とは異なり、 `normal` や `stretch` のように `align-content` や `justify-content` プロパティ値によるトラックの拡張が可能です。

### 形式文法
```

<minmax()> =
  minmax( min , max )

```

### CSS プロパティ

`minmax()` 関数は次の中で使用することができます。

* `grid-template-columns`
* `grid-template-rows`
* `grid-auto-columns`
* `grid-auto-rows`
例
-

### CSS

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

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

### HTML

```html
<div id="container">
  <div>コンテンツと同じ幅で、最大 300 ピクセルのアイテムです。</div>
  <div>幅は自由ですが、最小 200 ピクセルが必要なアイテムです。</div>
  <div>幅 150 ピクセルの柔軟性のないアイテムです。</div>
</div>
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # valdef-grid-template-columns-minmax |

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

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

関連情報
----

* グリッドレイアウトガイド: *グリッドレイアウトの基本概念 - minmax() によるトラックの寸法制御*
* グリッド、論理的な値、書字方向
* 動画チュートリアル: *Introducing minmax()*


レイアウトと包含ブロック - CSS: カスケーディングスタイルシート

レイアウトと包含ブロック
============

要素の寸法や位置は、しばしば**包含ブロック** (containing block) に影響されます。多くの場合、包含ブロックは要素から見て直近のブロックレベルの祖先のコンテンツ領域ですが、常にそうとは限りません。この記事では、要素の包含ブロックが決まる要因を学びます。

ユーザーエージェント (ブラウザーなど) が文書をレイアウトする時、それぞれの要素にボックスを生成します。それぞれのボックスは４つの領域に分かれます。

1. コンテンツ領域
2. パディング領域
3. 境界領域
4. マージン領域

![ボックスモデルの図](/ja/docs/Web/CSS/Containing_block/box-model.png)

多くの開発者が、要素の包含ブロックは常に親要素のコンテンツ領域であると信じていますが、それは必ずしも正しくありません。要素の包含ブロックが何になるかを決定する要因を調べてみましょう。

包含ブロックの影響
---------

何が要素の包含ブロックを決定するかを学習する前に、最初になぜそのようなことが起こるのかを知っておくと役立ちます。

要素の寸法と位置は、しばしば包含ブロックに影響されます。 `width`, `height`, `padding`, `margin` に適用されるパーセント値や、絶対位置指定要素 (つまり、 `position` が `absolute` または `fixed` に設定されている要素) のオフセットプロパティは、要素の包含ブロックから計算されます。

包含ブロックの識別
---------

包含ブロックを識別するプロセスは、要素の `position` プロパティの値に全面的に依存します。

1. `position` プロパティが **`static`**, **`relative`**, **`sticky`** のいずれかの場合、包含ブロックは**ブロックコンテナー** (inline-block, block, list-item などの要素) または**整形コンテキストを確立する**要素 (表コンテナー、フレックスコンテナー、グリッドコンテナー、ブロックコンテナー自身など) である直近の祖先要素の*コンテンツボックス*の辺によって構成されます。
2. `position` プロパティが **`absolute`** の場合、包含ブロックは `position` の値が `static` 以外 (`fixed`, `absolute`, `relative`, `sticky`) の直近の祖先要素における*パディングボックス*の辺によって構成されます。
3. `position` プロパティが **`fixed`** の場合、包含ブロックはビューポート (連続的なメディアの場合) またはページ領域 (ページメディアの場合) によって確立されます。
4. `position` プロパティが **`absolute`** または **`fixed`** の場合、包含ブロックは以下の条件を持った直近の祖先要素における*パディングボックス*の辺によって構成されることがあります。
    1. `transform` または `perspective` の値が `none` 以外である
    2. `will-change` の値が `transform` または `perspective` である
    3. `filter` の値が `none` 以外、または `will-change` の値が `filter` の場合 (Firefox のみで動作)。
    4. `contain` の値が `paint` の場合 (例 `contain: paint;`)

**メモ:** ルート要素 (`<html>`) が包含ブロックである場合、**初期包含ブロック**と呼ばれる矩形になります。これはビューポート (連続的なメディアの場合) またはページ領域 (ページメディアの場合) の寸法を持ちます。

包含ブロックからのパーセント値の計算
------------------

前述の通り、特定のプロパティがパーセント値を与えられた場合、計算値は要素の包含ブロックに依存します。このように動するプロパティは**ボックスモデルプロパティ**及び**オフセットプロパティ**です。

1. `height`, `top`, `bottom` の各プロパティは、包含ブロックの `height` からパーセント値を計算します。
2. `width`, `left`, `right`, `padding`, `margin` の各プロパティは、包含ブロックの `width` からパーセント値を計算します。
いくつかの例
------

すべての例の HTML コードは以下の通りです。

```html
<body>
  <section>
    <p>これは段落です。</p>
  </section>
</body>
```

以下のそれぞれの例では、 CSS のみが異なります。`

### 例 1

この例では、段落が静的に配置されているため、包含ブロックはブロックコンテナーである直近の祖先である `<section>` になります。
```

<body>
  <section>
    <p>これは段落です。</p>
  </section>
</body>
```

```css
body {
  background: beige;
}

section {
  display: block;
  width: 400px;
  height: 160px;
  background: lightgray;
}

p {
  width: 50%; /\* == 400px \* .5 = 200px \*/
  height: 25%; /\* == 160px \* .25 = 40px \*/
  margin: 5%; /\* == 400px \* .05 = 20px \*/
  padding: 5%; /\* == 400px \* .05 = 20px \*/
  background: cyan;
}
```

### 例 2

この例では、段落の包含ブロックは `<body>` 要素になります。 `<section>` が (`display: inline` であるため) ブロックコンテナーではなく、整形コンテキストを確立しないからです。
```

<body>
  <section>
    <p>これは段落です。</p>
  </section>
</body>
```

```css
body {
  background: beige;
}

section {
  display: inline;
  background: lightgray;
}

p {
  width: 50%; /\* == half the body's width \*/
  height: 200px; /\* Note: a percentage would be 0 \*/
  background: cyan;
}
```

### 例 3

この例では、 `<section>` の `position` が `absolute` であるため、段落の包含ブロックは `<section>` になります。段落のパーセント値は、包含ブロックの `padding` に影響されますが、 `box-sizing` の値が `border-box` である場合はそのようにはなりません。
```

<body>
  <section>
    <p>これは段落です。</p>
  </section>
</body>
```

```css
body {
  background: beige;
}

section {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 400px;
  height: 160px;
  padding: 30px 20px;
  background: lightgray;
}

p {
  position: absolute;
  width: 50%; /\* == (400px + 20px + 20px) \* .5 = 220px \*/
  height: 25%; /\* == (160px + 30px + 30px) \* .25 = 55px \*/
  margin: 5%; /\* == (400px + 20px + 20px) \* .05 = 22px \*/
  padding: 5%; /\* == (400px + 20px + 20px) \* .05 = 22px \*/
  background: cyan;
}
```

### 例 4

この例では、段落の `position` が `fixed` なので、包含ブロックは初期包含ブロック (画面の場合はビューポート) になります。従って、段落の寸法はブラウザーウィンドウの寸法に基づいて変化します。
```

<body>
  <section>
    <p>これは段落です。</p>
  </section>
</body>
```

```css
body {
  background: beige;
}

section {
  width: 400px;
  height: 480px;
  margin: 30px;
  padding: 15px;
  background: lightgray;
}

p {
  position: fixed;
  width: 50%; /\* == (50vw - (width of vertical scrollbar)) \*/
  height: 50%; /\* == (50vh - (height of horizontal scrollbar)) \*/
  margin: 5%; /\* == (5vw - (width of vertical scrollbar)) \*/
  padding: 5%; /\* == (5vw - (width of vertical scrollbar)) \*/
  background: cyan;
}
```

### 例 5

この例では、段落の `position` が `absolute` なので、包含ブロックは `transform` プロパティが `none` ではない直近の祖先である `<section>` になります。
```

<body>
  <section>
    <p>これは段落です。</p>
  </section>
</body>
```

```css
body {
  background: beige;
}

section {
  transform: rotate(0deg);
  width: 400px;
  height: 160px;
  background: lightgray;
}

p {
  position: absolute;
  left: 80px;
  top: 30px;
  width: 50%; /\* == 200px \*/
  height: 25%; /\* == 40px \*/
  margin: 5%; /\* == 20px \*/
  padding: 5%; /\* == 20px \*/
  background: cyan;
}
```

関連情報
----

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


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

font-synthesis
==============

**`font-synthesis`** は CSS のプロパティで、太字やイタリックの字体がない場合に、ブラウザーが合成してよいかどうかを制御します。

構文
--

```css
font-synthesis: none;
font-synthesis: weight;
font-synthesis: style;
font-synthesis: small-caps;
font-synthesis: weight style small-caps;

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

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

### 値

`none`

太字およびイタリックの字体を合成しないことを示すキーワードです。

`weight`

必要であれば、太字の字体を合成してよいことを示すキーワードです。

`style`

必要であれば、イタリックの字体を合成してよいことを示すキーワードです。

`small-caps`

必要であれば、スモールキャップの字体を合成してよいことを示すキーワードです。

解説
--

ほとんどの標準的な欧文フォントにはイタリック体や太字の変化形が含まれていますが、多くのノベルティフォントには含まれていません。中国語、日本語、韓国語、その他の表語文字に使用されているフォントは、これらの変化形を含まない傾向があり、それらを合成するとテキストの可読性が損なわれる可能性があります。このような場合には、ブラウザーの既定のフォント合成機能をオフにしたほうがよいかもしれません。

公式定義
----

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

形式定義
----
```

font-synthesis =
  none                                           |
  [ weight || style || small-caps || position ]

```

例
-

### フォント合成の無効化

#### HTML

```html
<em class="syn">Synthesize me! 站直。</em>
<br />
<em class="no-syn">Don't synthesize me! 站直。</em>
```

#### CSS

```css
em {
  font-weight: bold;
}
.syn {
  font-synthesis: style weight small-caps;
}
.no-syn {
  font-synthesis: none;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-synthesis |

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

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

関連情報
----

* `font-style`
* `font-weight`


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

border-inline-start-style
=========================

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

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

構文
--

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

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

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

### 値

`<'border-style'>`

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

公式定義
----

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

形式文法
----
```

border-inline-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-inline-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` のうちの 1 つに対応づけられます
* `writing-mode`、`direction`、`text-orientation`


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

scroll-margin-left
==================

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

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

構文
--

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

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

### 値

`<length>`

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

公式定義
----

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

形式文法
----
```

scroll-margin-left =
  <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