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

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

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

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

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

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

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

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

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

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

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

### 値

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

解説
--

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

公式定義
----

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

形式文法
----
```

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

```

例
-

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

#### HTML

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

#### CSS

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

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

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

var()
=====

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

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

* Learn more
* See full compatibility
* Report feedback
CSS の **`var()`** 関数は、他のプロパティの値の一部に代わってカスタムプロパティ (「CSS 変数」と呼ばれることもあります) の値を挿入できます。

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

`var()` 関数は、プロパティ名、セレクター、またはプロパティ値以外のところでは使用できません。 (使用してしまうと、無効な構文が生成されるか、もしくはその変数に接続していない値が生成されてしまいます。)

構文
--

関数の最初の引数は、置換されるカスタムプロパティの名前です。関数のオプションの 2 番目の引数は、代替値として機能します。最初の引数で参照されるカスタムプロパティが無効な場合、関数は2番目の値を使用します。
```

<var()> =
  var( <custom-property-name> , <declaration-value>? )

```

**メモ:** 代替の構文は、カスタムプロパティの構文と同様にカンマを使用できます。たとえば `var(--foo, red, blue)` では、 `red, blue` を代替として定義します。つまり、最初のカンマから関数の最後にかけてのすべてが、代替値と見なされます。

### 値

`<custom-property-name>`

カスタムプロパティの名前で、 2 つのハイフンで始まる識別子で表されます。カスタムプロパティは、作成者とユーザーだけが使用できます。 CSS はここに提示されているものを超えて意味を与えません。

`<declaration-value>`

カスタムプロパティの代替値。カスタムプロパティが使用されているコンテキストが無効な場合に使用されます。この値には、改行、不等式の閉じ括弧、つまり `)`, `]`, `}`, トップレベルのセミコロン、感嘆符などの特別な意味を持つ文字を除く任意の文字を含めることができます。

例
-

### :root に設定されたカスタムプロパティの使用

```css
:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}
```

### プロパティが設定されていなかったときに使用するための代替値つきのカスタムプロパティ

```css
/\* 代替 \*/
/\* コンポーネント内のスタイル: \*/
.component .header {
  color: var(
    --header-color,
    blue
  ); /\* header-color という変数は設定されていないため、代替値である blue がセットされます \*/
}

.component .text {
  color: var(--text-color, black);
}

/\* より規模の大きなアプリケーションのスタイルでは \*/
.component {
  --text-color: #080;
}
```

仕様書
---

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

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

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

関連情報
----

* `env(…)` – ユーザーエージェントによって制御される読み取り専用環境変数
* CSS 変数の利用


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

transform-box
=============

**`transform-box`** は CSS のプロパティで `transform`、独立した変換プロパティである `translate`、`scale`、`rotate`、および `transform-origin` プロパティが相対するレイアウトボックスを定義します。

構文
--

```css
/\* キーワード値 \*/
transform-box: content-box;
transform-box: border-box;
transform-box: fill-box;
transform-box: stroke-box;
transform-box: view-box;

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

`transform-box` プロパティは、以下のいずれかのキーワードで指定されます。

### 値

`content-box`

コンテンツボックスを参照ボックスとして使用します。 `<table>` の参照ボックスはテーブルのボックスではなく、テーブルを囲んでいるボックスの境界ボックスになります。

`border-box`

境界ボックスを参照ボックスとして使用します。 `<table>` の参照ボックスはテーブルのボックスではなく、テーブルを囲んでいるボックスの境界ボックスになります。

`fill-box`

そのオブジェクトのバウンディングボックスを参照ボックスとして使用します。

`stroke-box`

ストロークのバウンディングボックスを参照ボックスとして使用します。

`view-box`

直近の SVG のビューポートを参照ボックスとして使用します。 SVG ビューポートに `viewBox` 属性が指定されていた場合、参照ボックスは `viewBox` 属性によって設定された座標系の原点に配置されます。また、参照ボックスの寸法は `viewBox` 属性の幅と高さの値に設定されます。関連する CSS レイアウトボックスを持つ要素の場合、 `border-box` として動作します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `view-box` |
| 適用対象 | 座標変換可能要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

transform-box =
  content-box  |
  border-box   |
  fill-box     |
  stroke-box   |
  view-box

```

例
-

### SVG の transform-origin のスコープ

この例では、以下のような SVG があるとします。

```html
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
  <g>
    <circle id="center" fill="red" r="1" transform="translate(25 25)" />
    <circle id="boxcenter" fill="blue" r=".5" transform="translate(15 15)" />
    <rect
 id="box"
 x="10"
 y="10"
 width="10"
 height="10"
 rx="1"
 ry="1"
 stroke="black"
 fill="none" />
  </g>
</svg>
```

CSS では、長方形を無限に回転させるために変換を使用するアニメーションがあります。 `transform-box: fill-box` は `transform-origin` をバウンディングボックスの中心にするために使用しているので、長方形は配置されたまま回転します。これがないと、座標変換の原点は SVG キャンバスの中心になるので、極めて異なる効果になります。

```css
svg {
  width: 80vh;
  border: 1px solid #d9d9d9;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#box {
  transform-origin: 50% 50%; /\* 効果を見るには `0 0` 以外を指定する \*/
  transform-box: fill-box;
  animation: rotateBox 3s linear infinite;
}

@keyframes rotateBox {
  to {
    transform: rotate(360deg);
  }
}
```

この例は Pogany 氏によるものです。ライブ版はこの codepen をご覧ください。

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 1 # transform-box |

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

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

関連情報
----

* CSS 変換の使用
* `transform`, `transform-origin`
* 独立した座標変換プロパティ:
    + `translate`
    + `scale`
    + `rotate`


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

masonry-auto-flow
=================

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

**`masonry-auto-flow`** は CSS のプロパティで、CSS グリッドレイアウトにおいて組積を使用する際のアイテムの配置方法を変更します。

構文
--

```css
/\* キーワード値 \*/
masonry-auto-flow: pack;
masonry-auto-flow: next;
masonry-auto-flow: ordered;
masonry-auto-flow: definite-first;
masonry-auto-flow: next ordered;

/\* グローバル値 \*/
masonry-auto-flow: inherit;
masonry-auto-flow: initial;
maosnry-auto-flow: revert;
masonry-auto-flow: unset;
```

このプロパティは 2 つの形式のうちの 1 つから成ります。

* 単一のキーワード: `pack`, `next`, `definite-first`, `ordered` のうちの何れか
* 2 つのキーワード。例えば `next ordered`。
### 値

`pack`

既定の組積アルゴリズムで、アイテムは最も余裕のあるトラックに配置されます。

`next`

アイテムはグリッド軸に次々と配置されていきます。

`definite-first`

既定の組積アルゴリズムのように、場所が確定しているアイテムを最初に配置してから、他の組積アイテムを配置するように表示します。

`ordered`

配置が確定しているものは無視して、すべてを order で変更した文書順に従って配置します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `pack` |
| 適用対象 | マソンリーレイアウトのグリッドコンテナー |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

masonry-auto-flow =
  [ pack | next ]               ||
  [ definite-first | ordered ]

```

例
-

### next キーワードの使用

#### HTML

```html
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
  <div id="item4"></div>
  <div id="item5"></div>
</div>
<select id="flow">
  <option value="pack">pack</option>
  <option value="next">next</option>
</select>
```

#### CSS

```css
#grid {
  height: 200px;
  width: 200px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  masonry-auto-flow: pack;
}

#item1 {
  background-color: lime;
  height: 2em;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
  height: 3em;
}

#item4 {
  background-color: red;
  height: 2.5em;
}

#item5 {
  background-color: aqua;
  height: 4em;
}
```

```js
const selectElem = document.querySelector("select");

function changeMasonryFlow() {
  var grid = document.getElementById("grid");
  var direction = document.getElementById("flow");
  var masonryAutoFlow = direction.value === "pack" ? "pack" : "next";

  grid.style.masonryAutoFlow = masonryAutoFlow;
}

selectElem.addEventListener("change", changeMasonryFlow);
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Grid Layout Module Level 3 # masonry-auto-flow |

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

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

関連情報
----

* 関連する CSS プロパティ: `align-tracks`, `justify-tracks`


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

-moz-orient
===========

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

**`-moz-orient`** は CSS のプロパティで、適用される要素の向きを指定します。

構文
--

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

### 値

`inline`

要素をテキストの軸と同じ方向に描画します。横書きモードでは水平方向に、縦書きモードでは垂直方向に描画します。

`block`

要素をテキストの軸と直交するように描画します。横書きモードでは垂直方向に、縦書きモードでは水平方向に描画します。

`horizontal`

要素が水平方向に描画される

`vertical`

要素が垂直方向に描画される

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `inline` |
| 適用対象 | 任意の要素。これは `progress` および `meter` には効果がありますが、 <input type="range"> やその他の要素には効果がありません |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

### HTML

```html
<p>The following progress meter is horizontal (the default):</p>
<progress max="100" value="75"></progress>

<p>The following progress meter is vertical:</p>
<progress class="vert" max="100" value="75"></progress>
```

### CSS

```css
.vert {
  -moz-orient: vertical;
  width: 16px;
  height: 150px;
}
```

### 結果

仕様書
---

W3C に提出され、最初の反応は肯定的でしたが、このプロパティはまだ仕様書には含まれていません。今のところ、 Mozilla 独自の拡張 (つまり、 `-moz-orient`) です。

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

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

関連情報
----

* `box-orient`


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

margin-left
===========

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

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

2 つの隣り合うボックスの垂直マージンは融合することがあります。これは*マージンの相殺*と呼ばれています。

まれに幅の制約がきつすぎると (つまり、 `width`, `margin-left`, `border`, `padding`, コンテンツ領域, `margin-right` がすべて定義されていた場合)、 `margin-left` は無視され、 `auto` が設定されていたときと同じ計算値になります。

構文
--

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

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

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

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

### 値

`<length>`

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

`<percentage>`

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

`auto`

左マージンは未使用の水平方向の余白を共有します。これは主に使用されているレイアウトモードによって決定されます。 `margin-left` と `margin-right` の両方が `auto` の場合は、両方に均等に割り当てられます。それ以外の場合は以下の表のとおりです。

| `display` の値 | `float` の値 | `position` の値 | `auto` の計算値 | コメント |
| --- | --- | --- | --- | --- |
| `inline`, `inline-block`,
 `inline-table` | *任意* | `static` または `relative` | `0` | インラインレイアウトモード |
| `block`, `inline`, `inline-block`,
 `block`, `table`, `inline-table`,
 `list-item`, `table-caption` | *任意* | `static` または `relative` | `0`。ただし `margin-left` と `margin-right` が共に `auto` であった場合を除く。この場合、その要素が親の中で中央揃えされる値が設定される。 | ブロックレイアウトモード |
| `block`, `inline`, `inline-block`,
 `block`, `table`, `inline-table`,
 `list-item`, `table-caption` | `left` または `right` | `static` または `relative` | `0` | ブロックレイアウトモード (浮動要素) |
| *すべての* `table-*`*、ただし* `table-caption` *を除く* | *任意* | *任意* | `0` | 内部の `table-*` 要素にはマージンがない。代わりに `border-spacing` を使用のこと |
| *任意、ただし* `flex`, `inline-flex`, `table-*` *を除く* | *任意* | *`fixed`* または `absolute` | `0`。ただし `margin-left` と `margin-right` が共に `auto` 出逢った場合を除く。この場合、利用可能な `width` の中で境界領域が中央揃えされる値が設定される (fixed の場合)。 | 絶対位置指定レイアウトモード |
| `flex`, `inline-flex` | *任意* | *任意* | `0`。ただし、水平方向に正の余白がある場合を除く。この場合、 `auto` を指定したすべてのマージンに均等に分配される。 | フレックスボックスレイアウトモード |

公式定義
----

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

形式文法
----
```

margin-left =
  <length-percentage>  |
  auto

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

```

例
-

`margin-left` をパーセント値で指定すると、コンテナーのインラインサイズに対する相対になります。

### CSS

```css
.example {
  margin-left: 50%;
}
```

### HTML

```html
<p>
  A large rose-tree stood near the entrance of the garden: the roses growing on
  it were white, but there were three gardeners at it, busily painting them red.
</p>
<p class="example">
  Alice thought this a very curious thing, and she went nearer to watch them,
  and just as she came up to them she heard one of them say, "Look out now,
  Five! Don't go splashing paint over me like that!"
</p>
<p>
  "I couldn't help it," said Five, in a sulky tone; "Seven jogged my elbow."
</p>
```

### 結果

仕様書
---

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

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

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

関連情報
----

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


アニメーション可能な CSS プロパティ - CSS: カスケーディングスタイルシート

アニメーション可能な CSS プロパティ
====================

CSS アニメーションおよびトランジション**アニメーション可能な**プロパティの概念に頼っており、特に指定しない限り、すべての CSS プロパティはアニメーション可能です。各プロパティのアニメーションの種類は、このプロパティに対する値の結合方法（補間、追加、累積）を決定します。トランジションは補間のみを使用しますが、アニメーションは 3 つの組み合わせ方法をすべてを使用することができます。

**メモ:** 各 CSS プロパティのアニメーションの種類は、その「公式定義」表に掲載されています（例: `color`）。

**メモ:** 各 CSS データ型の補間方法は、その「補間」節に記述されています（例: `<length>`）。

アニメーションの種類
----------

Web Animations 仕様で定義されているアニメーションの種類は主に 4 つあります。

アニメーション不可

このプロパティはアニメーション可能ではありません。アニメーションのキーフレームに掲載されていても処理されず、ビュートランジションのアニメーションにも影響されません。

**メモ:** アニメーション可能でないプロパティのみを対象とするアニメーション効果は、アニメーション効果の通常の動作（例えば、 `animationstart` イベントを発行する）を示します。

離散

プロパティの値は加算されず、補間は `50%` で開始値から終了値に入れ替わります。具体的には、 `p` で進行値を表すと次のようになります。

* `p < 0.5` であれば `V_result = V_start`
* `p ≥ 0.5` であれば `V_result = V_end`

計算値による

計算値の対応する各成分は、その値の型に対して示された手順で結合されます。成分の数または対応する成分の型が一致しない場合、またはいずれかの成分値が離散アニメーションを使用し、対応する 2 つの値が一致しない場合、プロパティ値は離散として結合されます。

繰り返し可能なリスト

計算値による場合と同じですが、2つのリストの項目数が異なる場合は、最初の項目の最小公倍数まで繰り返されます。その後、各項目は計算値によって結合されます。値の組が結合できない場合や、いずれかの成分値が離散アニメーションを使用している場合は、プロパティ値は離散として結合されます。

プロパティによっては、これら 4 つの種類に当てはまらない固有の補間動作を持つものもあります。この場合、プロパティの「補間」節を参照してください（例: `visibility`）。

カスタムプロパティのアニメーション
-----------------

`registerProperty()` メソッドを使用して登録されたカスタムプロパティの場合、アニメーションの種類は計算値によるもので、計算値の型はプロパティの構文定義によって決定されます。

未登録のカスタムプロパティでは、アニメーションの種類は離散です。

関連情報
----

* CSS アニメーションの使用
* CSS トランジションの使用


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

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

**`font-variant-ligatures`** は CSS のプロパティで、適用される用途の文字コンテンツで使われる合字および文脈に合わせた字形を制御します。これにより、結果のテキストでより調和した形を利用することができます。

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

構文
--

```css
/\* キーワード値 \*/
font-variant-ligatures: normal;
font-variant-ligatures: none;
font-variant-ligatures: common-ligatures; /\* <common-lig-values> \*/
font-variant-ligatures: no-common-ligatures; /\* <common-lig-values> \*/
font-variant-ligatures: discretionary-ligatures; /\* <discretionary-lig-values> \*/
font-variant-ligatures: no-discretionary-ligatures; /\* <discretionary-lig-values> \*/
font-variant-ligatures: historical-ligatures; /\* <historical-lig-values> \*/
font-variant-ligatures: no-historical-ligatures; /\* <historical-lig-values> \*/
font-variant-ligatures: contextual; /\* <contextual-alt-values> \*/
font-variant-ligatures: no-contextual; /\* <contextual-alt-values> \*/

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

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

### 値

`normal`

正しいレンダリングに必要な通常の合字や文脈書式を有効にします。有効になる合字と書式は、フォント、言語、および書法の種類によって異なります。これが既定値です。

`none`

一般的なものであっても、すべての合字や文脈書式を無効にします。

*<common-lig-values>*

`fi`, `ffi`, `th` などの、よくある合字を制御します。 OpenType の値 `liga` および `clig` に対応します。2 つの値が指定できます。

* `common-ligatures`: これらの合字を有効にします。なお、キーワード `normal` はこれらの合字を有効にします。
* `no-common-ligatures`: これらの合字を無効にします。

*<discretionary-lig-values>*

フォントに依存し文字デザイナーが定義する特定の合字を制御します。対応する OpenType の値は `dlig` です。2 つの値が指定できます。

* `discretionary-ligatures`: これらの合字を有効にします。
* `no-discretionary-ligatures`: これらの合字を無効にします。なお、キーワード `normal` はふつう、これらの合字を無効にします。

*<historical-lig-values>*

古い本で歴史的に使用された、ドイツ語の tz を ꜩ と表示するような合字です。対応する OpenType の値は `hlig` です。2 つの値が指定できます。

* `historical-ligatures`: これらの合字を有効にします。
* `no-historical-ligatures` これらの合字を無効にします。なお、キーワード `normal` はふつう、これらの合字を無効にします。

*<contextual-alt-values>*

字形を文脈に合わせるかどうかを制御します。つまり、字形を周囲の文字に合わせるかどうかです。対応する OpenType の値は `calt` です。2 つの値が指定できます。

* `contextual`: 文脈的な変更を使用するよう指定します。なお、キーワード `normal` はこれらの合字も有効にします。
* `no-contextual`: 使用を避けます。

公式定義
----

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

形式定義
----
```

font-variant-ligatures =
  normal                                              |
  none                                                |
  [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]

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

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

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

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

```

例
-

### フォントの合字と文脈に合わせた字形の設定

#### HTML

```html
<link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet" />
<p class="normal">
  normal<br />
  if fi ff tf ft jf fj
</p>
<p class="none">
  none<br />
  if fi ff tf ft jf fj
</p>
<p class="common-ligatures">
  common-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="no-common-ligatures">
  no-common-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="discretionary-ligatures">
  discretionary-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="no-discretionary-ligatures">
  no-discretionary-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="historical-ligatures">
  historical-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="no-historical-ligatures">
  no-historical-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="contextual">
  contextual<br />
  if fi ff tf ft jf fj
</p>
<p class="no-contextual">
  no-contextual<br />
  if fi ff tf ft jf fj
</p>
<p class="contextual">
  contextual<br />
  if fi ff tf ft jf fj
</p>
```

#### CSS

```css
p {
  font-family: Lora, serif;
}
.normal {
  font-variant-ligatures: normal;
}

.none {
  font-variant-ligatures: none;
}

.common-ligatures {
  font-variant-ligatures: common-ligatures;
}

.no-common-ligatures {
  font-variant-ligatures: no-common-ligatures;
}

.discretionary-ligatures {
  font-variant-ligatures: discretionary-ligatures;
}

.no-discretionary-ligatures {
  font-variant-ligatures: no-discretionary-ligatures;
}

.historical-ligatures {
  font-variant-ligatures: historical-ligatures;
}

.no-historical-ligatures {
  font-variant-ligatures: no-historical-ligatures;
}

.contextual {
  font-variant-ligatures: contextual;
}

.no-contextual {
  font-variant-ligatures: no-contextual;
}

.contextual {
  font-variant-ligatures: contextual;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* `font-variant-alternates`
* `font-variant-caps`
* `font-variant-east-asian`
* `font-variant`
* `font-variant-numeric`


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

-webkit-mask-repeat-x
=====================

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

`-webkit-mask-repeat-x` プロパティは、マスク画像を水平方向に反復 (タイル) するかどうか、どのように反復するかを指定します。

```css
/\* キーワード値 \*/
-webkit-mask-repeat-x: repeat;
-webkit-mask-repeat-x: no-repeat;
-webkit-mask-repeat-x: space;
-webkit-mask-repeat-x: round;

/\* 複数の値 \*/
-webkit-mask-repeat-x: repeat, no-repeat, space;

/\* グローバル値 \*/
-webkit-mask-repeat-x: inherit;
-webkit-mask-repeat-x: initial;
-webkit-mask-repeat-x: unset;
```

構文
--

### 値

repeat

マスク画像は水平方向と垂直方向の両方に反復されます。

no-repeat

マスク画像は反復されず、マスク画像のコピーが 1 つだけ描画されます。マスクされた要素の残りのコンテンツは表示されません。

repeat

マスク画像は水平方向と垂直方向の両方に反復されます。

space

画像を切り取らないように、できる限り反復されます。最初と最後の画像は要素の両側に固定され、空白は画像の間に均等に分配されます。 `mask-position` プロパティは、切り取ることなく 1 つの画像しか表示できない場合を除き、無視されます。空白を使って切り取りが発生するのは、 1 枚の画像を表示するのに十分な空間がない場合だけです。

round

許可された空間が大きくなると、反復して表示される画像は、次の画像を追加する空間ができるまで（隙間なく）伸びていきます。次の画像が追加されると、現在の画像はすべて圧縮されて空間が確保されます。例えば、元の幅が 260px の画像が 3 回繰り返されると、それぞれの繰り返しが 300px の幅になるまで引き伸ばされ、その後、別の画像が追加されます。その後、 225px に圧縮されます。

公式定義
----

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

形式文法
----

Error: could not find syntax for this item例
-

### 反復あり・反復なしのマスク画像の使用

```css
.exampleone {
  -webkit-mask-image: url("mask.png");
  -webkit-mask-repeat-x: repeat;
}

.exampletwo {
  -webkit-mask-image: url("mask.png");
  -webkit-mask-repeat-x: no-repeat;
}
```

### 複数のマスク画像の使用

マスク画像ごとに異なる `<repeat-style>` の値を、カンマで区切って指定することができます。

```css
.examplethree {
  -webkit-mask-image: url("mask1.png"), url("mask2.png");
  -webkit-mask-repeat-x: repeat, space;
}
```

各画像は、最初に指定されたものから最後に指定されたものまで、対応する反復スタイルに対応します。

仕様書
---

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

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

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

関連情報
----

`-webkit-mask-repeat` (en-US), `-webkit-mask-repeat-y`


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

counter-reset
=============

**`counter-reset`** は CSS のプロパティで、 CSS カウンターを指定された値で初期化します。
 このプロパティは新しいカウンターや逆行カウンターを、指定された要素の指定された名前で生成します。

 通常のカウンターは、初期値が 0 になっています。
 逆行カウンターはカウントダウンのためのものであり、既定の初期値は現在のレベルでの要素の数に設定されます。
 既定の初期値により、 2 つの最も一般的な数値のパターン、 1 から要素の数までのカウントアップと、要素の数から 1 までのカウントダウンを簡単に実装することができます。

カウンターの値は CSS の `counter-increment` プロパティを使用して増加または減少させ、既存のカウンターの値は `counter-set` を使用して設定することができます。

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

 独自に作成したカウンターに加え、このプロパティは（`<ol>` 要素で作成される）順序付きリストで使用される `list-item` カウンターもリセットすることができます。
 これらは独自に作成したカウンタと同じ動作をしますが、それぞれのリスト要素で自動的に 1 ずつ増加または減少する点が異なります。
 この動作は `counter-increment` で上書きすることができます。

構文
--

```css
/\* "my-counter" を 0 に設定 \*/
counter-reset: my-counter;

/\* "my-counter" を -1 に設定 \*/
counter-reset: my-counter -3;

/\* 逆行の "my-counter" を counter1" を 1 に、 "counter2" を 4 に設定 \*/
counter-reset: reversed(my-counter);

/\* 逆行の "my-counter" を -1 に設定 \*/
counter-reset: reversed(my-counter) -1;

/\* counter2 を 9 に、逆行の "counter1" と "counter3" をそれぞれ 1 と 4 に設定\*/
counter-reset: reversed(counter1) 1 counter2 9 reversed(counter3) 4;

/\* より詳細度が低い規則による値の初期化をキャンセル \*/
counter-reset: none;

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

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

* `<custom-ident>` または `reversed(<custom-ident>)` でカウンターに名前を付けます。 `<integer>` を続けることもできます。
 なお、 `reversed()` メソッドは「逆行」カウンターを生成するために使用することができます。
 初期化するカウンターや逆行カウンターはいくつでも指定することができ、それぞれのカウンターとカウンター値の組は空白で区切ります。
* キーワード値 `none`。

`list-item` という名前の「暗黙的な」カウンターを使用すると、 `<ol>` を使用して生成される順序付きリストの番号付けを制御に使用することができます。

### 値

`<custom-ident>`

初期化の対象となる、カウンターの名前です。

`<integer>`

要素が出現するごとに、カウンターを初期化するための値です。与えられない場合、初期値の `0` なります。

`none`

カウンターの初期化は行われません。これはより詳細度の低い規則によって定義された `counter-reset` を上書きするために使用することができます。

公式定義
----

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

形式文法
----
```

counter-reset =
  [ <counter-name> <integer>? | <reversed-counter-name> <integer>? ]+  |
  none

<reversed-counter-name> =
  reversed( <counter-name> )

```

例
-

以下の例はカウンターの初期化方法を紹介していますが、増加、減少、表示の方法は示していません。

もっと完全な例は、 CSS カウンターの使用を参照してください。

### 名前付きカウンターの初期化

```css
h1 {
  counter-reset: chapter section 1 page;
  /\* chapter と page カウンターを 0 に、
 section カウンターを 1 に設定します。 \*/
}
```

### 逆行カウンター

```css
h1 {
  counter-reset: reversed(chapter) reversed(section) 1 page;
  /\* chapter カウンターと section カウンターに逆行フラグを設定します。
 chapter カウンターと page カウンターを 0 に、section カウンターを
 1 に設定します \*/
}
```

仕様書
---

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # counter-reset |

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

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

関連情報
----

* CSS カウンターの使用
* `counter-increment`
* `counter-set`
* `@counter-style`
* `counter()` および `counters()` 関数
* `content` プロパティ


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

scroll-margin-block-start
=========================

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

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

構文
--

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

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

### 値

`<length>`

スクロールコンテナーのブロック方向における先頭側の辺からみた外部の距離です。

公式定義
----

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

形式文法
----
```

scroll-margin-block-start =
  <length>

```

仕様書
---

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

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

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

関連情報
----

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


CSS アニメーション - CSS: カスケーディングスタイルシート

CSS アニメーション
===========

**CSS アニメーション** (CSS Animations) は CSS のモジュールの一つで、時間の経過とキーフレームによって CSS プロパティの値を動かすことができます。キーフレームアニメーションの動作は、タイミング関数、時間、繰り返し回数、その他の属性によって制御されます。

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

### CSS プロパティ

* `animation`
* `animation-delay`
* `animation-direction`
* `animation-duration`
* `animation-fill-mode`
* `animation-iteration-count`
* `animation-name`
* `animation-play-state`
* `animation-timing-function`
### アットルール

* `@keyframes`
ガイド
---

CSS アニメーション対応の検出

ブラウザーが CSS アニメーションに対応しているかを検出するテクニックを説明します。

CSS アニメーションの使用

CSS を使用してアニメーションを作成する方法についての一歩一歩進むチュートリアルです。この記事では、関連する CSS プロパティとアットルール、それに互いにどのように関係するのかを説明します。

CSS アニメーションのコツとトリック

CSS アニメーションを引き出すのに役立つコツやトリックです。現在、 API に対応が備わっていない、すでに完了に向けて実行されているアニメーションを再び再生するテクニックを紹介しています。

仕様書
---

| Specification |
| --- |
| CSS Animations Level 2  |
| CSS Animations Level 1  |

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

### `animation` プロパティ

{{Compat}}関連情報
----

* CSS アニメーションに関連して、 CSS トランジションは、ユーザーの操作に基づいてアニメーションを起動することができます。


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

font-variant-east-asian
=======================

CSS の **`font-variant-numeric`** プロパティは、日本語と中国語のような東アジアの字形の違いを制御するために使用します。

```css
font-variant-east-asian: normal;
font-variant-east-asian: ruby;
font-variant-east-asian: jis78; /\* <east-asian-variant-values> \*/
font-variant-east-asian: jis83; /\* <east-asian-variant-values> \*/
font-variant-east-asian: jis90; /\* <east-asian-variant-values> \*/
font-variant-east-asian: jis04; /\* <east-asian-variant-values> \*/
font-variant-east-asian: simplified; /\* <east-asian-variant-values> \*/
font-variant-east-asian: traditional; /\* <east-asian-variant-values> \*/
font-variant-east-asian: full-width; /\* <east-asian-width-values> \*/
font-variant-east-asian: proportional-width; /\* <east-asian-width-values> \*/
font-variant-east-asian: ruby full-width jis83;

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

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

構文
--

### 値

`normal`

このキーワードは、別形式の表記の使用を無効にします。

`ruby`

このキーワードは、ルビ文字のための特殊な表記の使用を強制します。ふつうは小さめで、フォントの作者がよく特定の形状でデザインし、ふつうはコントラストを上げるためにわずかに太くします。このキーワードは OpenType の `ruby` の値に対応します。

`<east-asian-variant-values>`

これらの値は、表示に使用される字形の違いのセットを指定します。利用可能な値は以下の通りです。

| キーワード | 標準による形状の定義 | OpenType の対応 |
| --- | --- | --- |
| `jis78` | JIS X 0208:1978 | `jp78` |
| `jis83` | JIS X 0208:1983 | `jp83` |
| `jis90` | JIS X 0208:1990 | `jp90` |
| `jis04` | JIS X 0213:2004 | `jp04` |
| `simplified` | なし。簡体字中国語の字形を使用 | `smpl` |
| `traditional` | なし。繁体字中国語の字形を使用 | `trad` |

`<east-asian-width-values>`

これらの値は東アジアの文字の大きさを制御します。2 つの値が利用できます。

* `proportional-width` は、東アジアの文字の幅が多様なセットを有効にします。 OpenType の `pwid` の値に対応します。
* `full-width` は、東アジアの文字がすべて同じ、およそ正方形で、一定幅のセットを有効にします。 OpenType の `fwid` に対応します。

公式定義
----

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

形式定義
----
```

font-variant-east-asian =
  normal                                              |
  [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]

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

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

```

例
-

### 東アジアの字形の変化形を設定

この例は OS に「游ゴシック」フォントがインストールされていることが必要です。ほかのフォントでは OpenType 機能に対応していない可能性があります。

#### HTML

```html
<table>
  <thead></thead>
  <tbody style="border:0;">
    <tr>
      <th>normal/jis78:</th>
      <td>麹町</td>
      <td class="jis78">麹町</td>
    </tr>
    <tr>
      <th>normal/ruby:</th>
      <td>しんかんせん</td>
      <td class="ruby">しんかんせん</td>
    </tr>
    <tr>
      <th>normal/traditional:</th>
      <td>大学</td>
      <td class="traditional">大学</td>
    </tr>
  </tbody>
</table>
```

#### CSS

```css
td {
  font-family: "Yu Gothic";
  font-size: 20px;
}
th {
  color: grey;
  padding-right: 10px;
}

.ruby {
  font-variant-east-asian: ruby;
}

.jis78 {
  font-variant-east-asian: jis78;
}

.traditional {
  font-variant-east-asian: traditional;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* `font-variant-alternates`
* `font-variant-caps`
* `font-variant`
* `font-variant-ligatures`
* `font-variant-numeric`


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

print-color-adjust
==================

**`print-color-adjust`** は CSS のプロパティで、ユーザーエージェントが出力端末上で要素の外観を最適化するために、何らかの調整を行うことができるかを設定します。
 既定では、ブラウザーは、出力端末の種類や能力を得た上で、必要かつ賢明であると判断した要素の外観に対する調整を行うことができます。

構文
--

```css
print-color-adjust: economy;
print-color-adjust: exact;

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

`print-color-adjust` プロパティは以下のキーワード値のうちの一つで指定します。

### 値

`economy`

 ユーザーエージェントは、レンダリングされる端末に合わせて出力を最適化するために、適切かつ賢明と思われるように要素を調整することができます。
 例えば、印刷する場合、ブラウザーは背景画像をすべて取り除き、白い紙で読むためにコントラストが最適化されるようにテキストの色を調整することを選ぶかもしれません。
 これが既定値です。

`exact`

 要素のコンテンツは、色、画像、スタイルを慎重かつ重要な方法で使用するように固有かつ慎重に作成されており、ブラウザーによって変更されることは、事態を良くするどころかむしろ悪くするかもしれません。
 コンテンツの外観は、ユーザーからのリクエスト以外では変えてはいけません。
 例えば、あるページに、背景色が白と薄い灰色の間で交互に変化する行を持つ情報のリストを記載することがあります。
 背景色が除去されると、コンテンツの可読性が低下します。

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

ブラウザーが指定した外観を変更したい理由はいくつかあります。

* コンテンツが出力端末上で近すぎるテキストと背景色を使用しているため、読みやすさが損なわれています。
* 出力端末がプリンターの場合、インクを節約するために、暗い画像や極端に濃い背景画像が除去されることがあります。
* ページを印刷するとき、ブラウザーは暗い背景の明るい色のテキストを白い背景の暗い色のテキストに置き換えたくなるかもしれません。

 ユーザーエージェントが色や画像の使用を制御するためにユーザーに提供するオプションは `print-color-adjust` の値よりも優先されます。
 言い換えれば、 `print-color-adjust` が何らかの動作をするという保証はありません。
 ユーザーがその動作を上書きすることができるだけでなく、それぞれのユーザーエージェントが、どのような状況で `print-color-adjust` をどのように処理するかを自分で決めることができます。

公式定義
----

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

形式文法
----
```

print-color-adjust =
  economy  |
  exact

```

例
-

### 低コントラストの維持

 この例では、 `background-image` と半透明の `linear-gradient()` 関数を黒の背景色の上に用いて、中程度の赤のテキストの後ろに濃い青のグラデーションがあるボックスを表示しています。
 理由はともあれ、これは紙の上も含め、どのようなレンダリング環境でも望ましい外観なので、 `print-color-adjust: exact` も使用して、ボックスをレンダリングするときに色やスタイル設定を行わないようにブラウザーに指示しています。

#### CSS

```css
.my-box {
  background-color: black;
  background-image: linear-gradient(
    rgba(0, 0, 180, 0.5),
    rgba(70, 140, 220, 0.5)
  );
  color: #900;
  width: 15rem;
  height: 6rem;
  text-align: center;
  font:
    24px "Helvetica",
    sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  print-color-adjust: exact;
}
```

#### HTML

```html
<div class="my-box">
  <p>もっとコントラストが必要です！</p>
</div>
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Color Adjustment Module Level 1 # propdef-print-color-adjust |

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

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

関連情報
----

* CSS を使った HTML の要素への色の適用
* その他の色に関するプロパティ: `color`, `background-color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, `column-rule-color`
* `background-image`


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

::cue-region
============

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

**`::cue-region`** は CSSの擬似要素で、選択された要素内にある WebVTT キューに一致します。これは VTT トラックのアルメディアで字幕とその他のキューのスタイル付けに利用できます。

```css
::cue-region {
  color: yellow;
  font-weight: bold;
}
```

プロパティは、キューのセット全体に対して、あたかも 1 つのユニットであるかのように適用されます。唯一の例外として、 `background` とその個別指定プロパティは各キューに個別に適用されるので、ボックスを作成したり、メディアの予期せぬ大きな領域を覆ったりすることを避けることができます。

構文
--

Error: could not find syntax for this item許可されているプロパティ
------------

この要素を含むセレクターを持つルールには、以下の CSS プロパティのみが使用できます。

* `background`
* `background-attachment`
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position`
* `background-repeat`
* `background-size`
* `color`
* `font`
* `font-family`
* `font-size`
* `font-stretch`
* `font-style`
* `font-variant`
* `font-weight`
* `line-height`
* `opacity`
* `outline`
* `outline-color`
* `outline-style`
* `outline-width`
* `ruby-position`
* `text-combine-upright`
* `text-decoration`
* `text-decoration-color`
* `text-decoration-line`
* `text-decoration-style`
* `text-decoration-thickness`
* `text-shadow`
* `visibility`
* `white-space`
仕様書
---

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # the-cue-region-pseudo-element |

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

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

関連情報
----

* その他の WebVTT に関するセレクター:
    + `::cue`
    + `:past` (en-US)
    + `:future` (en-US)


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

:where()
========

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

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

* Learn more
* See full compatibility
* Report feedback
**`:where()`** は CSS の擬似クラス関数で、セレクターリストを引数として取り、列挙されたセレクターのうちの何れかに当てはまるすべての要素を選択します。

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

`:where()` と `:is()` の違いは、 `:where()` は詳細度が常に 0 であるのに対して、 `:is()` は引数内で最も詳細度の高いセレクターの詳細度を取ります。

### 寛容なセレクター解釈

仕様では、`:is()` と `:where()` が寛容なセレクターリストを受け入れると定義されています。

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

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

は `:unsupported` の部分に対応していないブラウザーでも `:valid` の部分が有効となり正しく解釈されます。一方で

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

では、`:unsupported` に対応していないブラウザーでは、`:valid` に対応している場合でも全体が無視されます。

例
-

### :where() と :is() の比較

この例では `:where()` がどのように作用するのかを示し、 `:where()` と `:is()` の違いも説明しています。

以下のような HTML を想定してください。

```html
<article>
  <h2>:is() でスタイル付けしたリンク</h2>
  <section class="is-styling">
    <p>
      こちらがメインコンテンツです。これは<a href="https://mozilla.org"
 >リンクを含んでいます</a
 >。
    </p>
  </section>

  <aside class="is-styling">
    <p>
      こちらが脇コンテンツです。これも<a href="https://developer.mozilla.org"
 >リンクを含んでいます</a
 >。
    </p>
  </aside>

  <footer class="is-styling">
    <p>
      こちらがフッターです。これも<a href="https://github.com/mdn">リンク</a
 >を含んでいます。
    </p>
  </footer>
</article>

<article>
  <h2>:where() でスタイル付けしたリンク</h2>
  <section class="where-styling">
    <p>
      こちらがメインコンテンツです。これは<a href="https://mozilla.org"
 >リンクを含んでいます</a
 >。
    </p>
  </section>

  <aside class="where-styling">
    <p>
      こちらが脇コンテンツです。これも<a href="https://developer.mozilla.org"
 >リンクを含んでいます</a
 >。
    </p>
  </aside>

  <footer class="where-styling">
    <p>
      こちらがフッターです。これも<a href="https://github.com/mdn">リンク</a
 >を含んでいます。
    </p>
  </footer>
</article>
```

このややわざとらしい例では、2 つの article 要素がそれぞれ section、aside、footer 要素を含んでいます。2つの article は、子要素をマークするために使われるクラスが異なります。

中のリンクの選択をより簡単にしながらも、区別できるようにするために、次のように `:is()` や `:where()` を使うことができます。

```css
html {
  font-family: sans-serif;
  font-size: 150%;
}

:is(section.is-styling, aside.is-styling, footer.is-styling) a {
  color: red;
}

:where(section.where-styling, aside.where-styling, footer.where-styling) a {
  color: orange;
}
```

しかし、後からシンプルなセレクターを使ってフッターのリンクの色を上書きしたい場合はどうすればいいのでしょうか？

```css
footer a {
  color: blue;
}
```

これは赤いリンクに作用しません。 `:is()` の中のセレクターは全体のセレクターの詳細度で算出され、クラスセレクターは要素セレクターよりも高い詳細度を持っているからです。

しかし、 `:where()` 内のセレクターは詳細度が 0 なので、オレンジ色のフッターリンクは単純セレクターによって上書きされます。

**メモ:** この例は GitHub からも見ることができます。 is-where を参照してください。

構文
--

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

仕様書
---

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

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

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

関連情報
----

* `:is()`
* セレクターリスト
* ウェブコンポーネント


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

::part()
========

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
**`::part`** は CSS の擬似要素で、一致する `part` 属性を持つシャドウツリー内の要素を表します。

```css
custom-element::part(foo) {
  /\* `foo` の部分に適用するスタイル \*/
}
```

構文
--

Error: could not find syntax for this item例
-

### HTML

```html
<template id="tabbed-custom-element">
  <style type="text/css">
 \*,
 ::before,
 ::after {
 box-sizing: border-box;
 padding: 1rem;
 }
 :host {
 display: flex;
 }
 </style>
  <div part="tab active">Tab 1</div>
  <div part="tab">Tab 2</div>
  <div part="tab">Tab 3</div>
</template>

<tabbed-custom-element></tabbed-custom-element>
```

### CSS

```css
tabbed-custom-element::part(tab) {
  color: #0c0dcc;
  border-bottom: transparent solid 2px;
}

tabbed-custom-element::part(tab):hover {
  background-color: #0c0d19;
  border-color: #0c0d33;
}

tabbed-custom-element::part(tab):hover:active {
  background-color: #0c0d33;
}

tabbed-custom-element::part(tab):focus {
  box-shadow:
    0 0 0 1px #0a84ff inset,
    0 0 0 1px #0a84ff,
    0 0 0 4px rgba(10, 132, 255, 0.3);
}

tabbed-custom-element::part(active) {
  color: #0060df;
  border-color: #0a84ff !important;
}
```

### JavaScript

```js
let template = document.querySelector("#tabbed-custom-element");
globalThis.customElements.define(
  template.id,
  class extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: "open" });
      this.shadowRoot.appendChild(template.content);
    }
  },
);
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Shadow Parts # part |

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

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

関連情報
----

* `part` 属性 - `::part()` セレクタで選択できるパーツを定義するために使用されます
* `exportparts` 属性 - ネストされたシャドウツリーにシャドウパーツを推移的にエクスポートするために使用されます。
* Explainer: CSS Shadow ::part and ::theme


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

<angle-percentage>
==================

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

構文
--

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

calc() での使用
-----------

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

仕様書
---

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

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

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

関連情報
----

* CSS データ型
* CSS グラデーションの使用
* `conic-gradient()` および `repeating-conic-gradient()`


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

mask
====

**`mask`** は CSS の一括指定プロパティで、指定された位置での画像のマスクまたは切り取りによって要素を (部分的または全体的に) 隠します。

**メモ:** 以下のプロパティに加えて、`mask` 一括指定は `mask-border` を初期値にリセットします。そのため、カスケード内の初期のマスク設定を上書きするには、他の一括指定や個々のプロパティではなく、`mask` 一括指定を使用することをお勧めします。これにより、`mask-border` もリセットされ、新しいスタイルが適用されるようになります。

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

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

* `mask-clip`
* `mask-composite`
* `mask-image`
* `mask-mode`
* `mask-origin`
* `mask-position`
* `mask-repeat`
* `mask-size`
構文
--

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

/\* 画像値 \*/
mask: url(mask.png); /\* マスクとして使用されるピクセル画像 \*/
mask: url(masks.svg#star); /\* マスクとして使用されるSVGグラフィック内の要素 \*/

/\* 組み合わせ値 \*/
mask: url(masks.svg#star) luminance; /\* 輝度マスクとして使用される SVG グラフィック内の要素 \*/
mask: url(masks.svg#star) 40px 20px; /\* マスクとして使用される SVG グラフィック内の要素が、上から 40px、左から 20px の位置に配置されている \*/
mask: url(masks.svg#star) 0 0/50px 50px; /\* 幅と高さが 50px のマスクとして使用される SVG グラフィック内の要素 \*/
mask: url(masks.svg#star) repeat-x; /\* 水平方向に繰り返されるマスクとして使用される SVG グラフィック内の要素 \*/
mask: url(masks.svg#star) stroke-box; /\* ストロークで囲まれたボックスに拡張するマスクとして使用される SVG グラフィック内の要素 \*/
mask: url(masks.svg#star) exclude; /\* SVGグラフィック内の要素をマスクとして使用し、非重複部分を使用して背景と組み合わせる \*/

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

/\* 複数のマスク \*/
mask:
  url(masks.svg#star) left / 16px repeat-y,
  /\* SVG グラフィック内の要素が、幅 16px の左端のマスクとして使用されている \*/
    url(masks.svg#circle) right / 16px repeat-y; /\* SVG グラフィック内の要素が、幅 16px の右端のマスクとして使用されている \*/
```

### 値

`<mask-reference>`

マスク画像のソースを設定します。 `mask-image` を参照してください。

`<masking-mode>`

マスク画像のマスクモードを設定します。 `mask-mode` を参照してください。

`<position>`

マスク画像の位置を設定します。 `mask-position` を参照してください。

`<bg-size>`

マスク画像の大きさを設定します。 `mask-size` を参照してください。

`<repeat-style>`

マスク画像の反復を設定します。 `mask-repeat` を参照してください。

`<geometry-box>`

`<geometry-box>` 値が 1 つのみが与えられた場合は、`mask-origin` と `mask-clip` の両方が設定されます。2 つの `<geometry-box>` 値が存在する場合、1 つ目値は `mask-origin` を設定し、2 つ目の値は `mask-clip` を設定します。

`<geometry-box> | no-clip`

マスク画像の影響を受ける範囲を設定します。 `mask-clip` を参照してください。

`<compositing-operator>`

現在のマスクレイヤーに使用する合成操作を設定します。 `mask-composite` を参照してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `mask-image`: `none`
* `mask-mode`: `match-source`
* `mask-repeat`: `repeat`
* `mask-position`: `center`
* `mask-clip`: `border-box`
* `mask-origin`: `border-box`
* `mask-size`: `auto`
* `mask-composite`: `add`
 |
| 適用対象 | すべての要素。 SVG の場合は `defs` 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される |
| 継承 | なし |
| パーセント値 | 一括指定の次の各プロパティとして* `mask-position`: マスク描画領域の寸法からマスクレイヤー画像の寸法を引いたものに対する相対値 (`background-position` のテキストを参照)
 |
| 計算値 | 一括指定の次の各プロパティとして* `mask-image`: 指定通り、ただし `url` の値は絶対パスになる
* `mask-mode`: 指定通り
* `mask-repeat`: 2 つのキーワードから成り、方向ごとに 1 つずつ
* `mask-position`: 原点を表す 2 つのキーワードと、その原点からの 2 つのオフセットで、それぞれが絶対的な長さ (<length> が指定された場合) またはパーセント値で指定される。
* `mask-clip`: 指定通り
* `mask-origin`: 指定通り
* `mask-size`: 指定通り。ただし相対的な長さはは絶対的な長さに変換される
* `mask-composite`: 指定通り
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `mask-image`: 離散値
* `mask-mode`: 離散値
* `mask-repeat`: 離散値
* `mask-position`: 反復可能リスト
* `mask-clip`: 離散値
* `mask-origin`: 離散値
* `mask-size`: 反復可能リスト
* `mask-composite`: 離散値
 |
| 重ね合わせコンテキストの生成 | あり |

形式文法
----
```

mask =
  <mask-layer>#

<mask-layer> =
  <mask-reference>              ||
  <position> [ / <bg-size> ]?   ||
  <repeat-style>                ||
  <geometry-box>                ||
  [ <geometry-box> | no-clip ]  ||
  <compositing-operator>        ||
  <masking-mode>

<mask-reference> =
  none           |
  <image>        |
  <mask-source>

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

<bg-size> =
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain

<repeat-style> =
  repeat-x                                     |
  repeat-y                                     |
  [ repeat | space | round | no-repeat ]{1,2}

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

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

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

<image> =
  <url>       |
  <gradient>

<mask-source> =
  <url>

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

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

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

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

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

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

```

例
-

### 画像のマスク

```css
.target {
  mask: url(#c1) luminance;
}

.anothertarget {
  mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude;
}
```

仕様書
---

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

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

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

関連情報
----

* `clip-path`, `filter`
* CSS Shapes, clipping and masking – and how to use them
* HTML コンテンツへ SVG 効果を適用する
* SVG


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

CSS スクロールバー
===========

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

**CSS スクロールバー** (CSS Scrollbars) は、 2000 年に Windows の IE 5.5 で導入され、廃止されたスクロールバーの色のプロパティを標準化するためのものです。

基本的な例
-----

この例では、緑色のトラックと紫色のつまみを持った細いスクロールバーを使用してみました。

```css
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}
```

### HTML

```html
<div class="scroller">
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
  earthnut pea peanut soko zucchini.
</div>
```

### 結果

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

### CSS プロパティ

* `scrollbar-width`
* `scrollbar-color`
仕様書
---

| Specification |
| --- |
| CSS Scrollbars Styling Module Level 1  |

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

スクロールバーをカスタマイズする場合は、十分なコントラストがあることと、ヒット領域がタッチ入力を使っている人が操作できるだけ大きいかどうかを考慮してください。

* Baseline Rules for Scrollbar Usability | Adrian Roselli
ブラウザーの互換性
---------

### scrollbar-width

### css.properties.scrollbar-color

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

### css.properties.scrollbar-width

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

### scrollbar-color

### css.properties.scrollbar-color

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

### css.properties.scrollbar-width

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

関連情報
----

* `::-webkit-scrollbar`
* `-ms-overflow-style`


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

<dimension>
===========

**`<dimension>`** は CSS のデータ型で、 `<number>` とそれに添付された単位を表します (`10px` など)。

CSS は `<dimension>` を使用して、長さ (`<length>`)、時間 (`<time>`)、周期 (`<frequency>`)、解像度 (`<resolution>`)、その他の量を指定します。

構文
--

`<dimension>` の構文は、 `<number>` とすぐ後に識別子である単位を続けます。単位の識別子は、大文字小文字の区別がありません。

例
-

### 有効な dimension

```css
12px      12 ピクセル
1rem      1rem
1.2pt     1.2 ポイント
2200ms    2200 ミリ秒
5s        5 秒
200hz     200 ヘルツ
200Hz     200 ヘルツ (値は大文字小文字の区別なし)
```

### 無効な dimension

```css
12 px       単位は数値の直後に来る必要がある。
12"px"      単位は識別子であり、引用符で囲まない。
3sec        秒の単位は "s" であり "sec" ではない。
```

仕様書
---

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

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

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

関連情報
----

* CSS データ型
* CSS を使用した HTML のスタイル付けの学習
* CSS の長さ (`<length>`), 時間 (`<time>`), 周期 (`<frequency>`), 解像度 (`<resolution>`)


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

padding
=======

**`padding`** は CSS の一括指定プロパティで、要素の全四辺のパディング領域を一度に設定します。

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

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

**メモ:** パディングは要素の内部に追加の領域を作成します。それに対して、 `margin` は要素の*周り*に追加の領域を作成します。

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

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

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

```css
/\* 四辺すべてに適用 \*/
padding: 1em;

/\* 上下 | 左右 \*/
padding: 5% 10%;

/\* 上 | 左右 | 下 \*/
padding: 1em 2em 2em;

/\* 上 | 右 | 下 | 左 \*/
padding: 5px 1em 0 1em;

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

`padding` プロパティは 1 つ、2 つ、3 つ、4 つの値を使って指定することができます。それぞれの値は `<length>` または `<percentage>` です。負の数は無効です。

* 値が **1 つ**指定された場合、**全四辺**に同じパディングが適用される。
* 値が **2 つ**指定された場合、1 つ目のパディングは**上下**、2 つ目は**左右**の辺に適用される。
* 値が **3 つ**指定された場合、1 つ目のパディングは**上**、2 つ目は**左右**、3 つ目は**下**の辺に適用される。
* 値が **4 つ**指定された場合、パディングはそれぞれ**上**、**右**、**下**、**左**の順 (時計回り) に適用される。
### 値

`<length>`

パディングの寸法を固定値で表したものです。

`<percentage>`

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

公式定義
----

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

形式文法
----
```

padding =
  <'padding-top'>{1,4}

```

例
-

### パディングをピクセル数で設定

#### HTML

```html
<h4>This element has moderate padding.</h4>
<h3>The padding is huge in this element!</h3>
```

#### CSS

```css
h4 {
  background-color: lime;
  padding: 20px 50px;
}

h3 {
  background-color: cyan;
  padding: 110px 50px 50px 110px;
}
```

#### 結果

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

```css
padding: 5%; /\* 全辺: 5% のパディング \*/

padding: 10px; /\* 全辺: 10px のパディング \*/

padding: 10px 20px; /\* 上と下: 10px のパディング \*/
/\* 左と右: 20px のパディング \*/

padding: 10px 3% 20px; /\* 上: 10px のパディング \*/
/\* 左と右: 3% のパディング \*/
/\* 下: 20px のパディング \*/

padding: 1em 3px 30px 5px; /\* 上: 1em のパディング \*/
/\* 右: 3px のパディング \*/
/\* 下: 30px のパディング \*/
/\* 左: 5px のパディング \*/
```

仕様書
---

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

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

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

関連情報
----

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


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

@container
==========

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

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

* Learn more
* See full compatibility
* Report feedback

**`@container`** は CSS のアットルールで、格納コンテキスト にスタイルを適用する条件付きグループルールです。
 スタイル宣言は条件によってフィルタリングされ、条件が真の場合にコンテナーに適用されます。
 この条件は、コンテナーのサイズが変わったときに評価されます。

 オプションで大文字小文字を区別する `container-name` を指定することができ、これによって考慮するクエリーコンテナーの集合を、クエリーコンテナー名が一致するものだけにフィルタリングすることができます。
 要素に対して適格なクエリーコンテナが選択されると、`<container-condition>` の各コンテナー機能はそのクエリーコンテナーに対して評価されます。

構文
--

`@container` アットルールは以下の構文です。
```

@container <container-condition> {
  <stylesheet>
}
```

例えば次のようなります。

```css
@container (width > 400px) {
  h2 {
    font-size: 1.5em;
  }
}
```

### 値

`<container-condition>`

 コンテナーのサイズが変更されたときに、コンテナーに対して評価される特性の集合です。
 `<stylesheet>` で定義したスタイルは、この条件が真であれば適用されます。

`<stylesheet>`

一連の CSS 宣言です。

### コンテナークエリー内の論理キーワード

論理キーワードを使用してコンテナー条件を定義することができます。

* `and` は 2 つ以上の条件を結合します。
* `or` は 2 つ以上の条件を結合します。
* `not` は条件を否定します。コンテナークエリーあたり 1 つの 'not' 条件だけが許されており、 `and` または `or` キーワードと同時に使用することはできません。

```css
@container (width > 400px) and (height > 400px) {
  /\* <stylesheet> \*/
}

@container (width > 400px) or (height > 400px) {
  /\* <stylesheet> \*/
}

@container not (width < 400px) {
  /\* <stylesheet> \*/
}
```

### 名前付き格納コンテキスト

格納コンテキストには、 `container-name` プロパティを使用して名前を付けることができます。

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

このために使用する一括指定構文は `container` であり、 `container: <name> / <type>` という形式です。例えばこのようにします。

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

コンテナクエリーでは、 `container-name` プロパティを使用して、クエリーコンテナー名と一致するコンテナー集合にフィルタリングします。

```css
@container sidebar (width > 400px) {
  /\* <stylesheet> \*/
}
```

使用法や名前の制約の詳細は `container-name` ページで説明しています。

### 記述子

以下の記述子は、コンテナー条件内で使用することができます。

`aspect-ratio`

コンテナーの `aspect-ratio` は、 `<ratio>` 値として発生したコンテナーの高さに対する幅として計算されます。

`block-size`

コンテナーの `block-size` を `<length>` 値で表したものです。

`height`

コンテナーの高さを `<length>` 値で表現したものです。

`inline-size`

コンテナーの `inline-size` を `<length>` 値で表したものです。

`orientation`

コンテナーの方向で、`landscape` または `portrait` のいずれかです。

`width`

コンテナーの幅を `<length>` 値で表したものです。

例
-

### コンテナーの大きさに基づいたスタイルの設定

タイトルとテキストを持つカード部品の次の例を考えてみましょう。

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

 コンテナーコンテキストは `container-type` プロパティを使用して作成することができます。この用途では `.post` クラスの `inline-size` 値を使用します。
 そして、 `@container` アットルールを使用することで、 `.card` クラスの要素に、 `650px` より狭いコンテナー内でスタイルを適用することができます。
```

const post = document.querySelector(".post");
const span = document.createElement("span");
span.innerHTML = ".post width: " + post.clientWidth + "px";
post.parentNode.insertBefore(span, post.nextSibling);
// リサイズ時に更新
window.addEventListener("resize", () => {
  span.innerHTML = ".post width: " + post.clientWidth + "px";
});
```

```
span {
  display: block;
  text-align: center;
}
.card {
  margin: 10px;
  border: 2px dotted;
  font-size: 1.5em;
}
.post {
  border: 2px solid;
}
```

```css
/\* インラインサイズに基づくコンテナーコンテキスト \*/
.post {
  container-type: inline-size;
}

/\* コンテナーが 650px よりも狭かった場合にスタイルを適用 \*/
@container (width < 650px) {
  .card {
    width: 50%;
    background-color: gray;
    font-size: 1em;
  }
}
```

### 名前付きコンテナーコンテキストの作成

タイトルとテキストを持つカード部品である次の HTML 例があったとします。

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

 まず、 `container-type` および `container-name` プロパティを用いてコンテナーコンテキストを作成します。
 この宣言の一括指定構文は `container` ページで説明しています。

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

次に、コンテナークエリーに名前を追加して、そのコンテナーを対象とします。

```css
@container summary (min-width: 400px) {
  .card {
    font-size: 1.5em;
  }
}
```

### 入れ子のコンテナークエリー

 単一のコンテナクエリーで複数のコンテナーを対象とすることはできません。
 同じ効果を持つコンテナークエリーを入れ子にすることは可能です。

以下は、 `summary` という名前のコンテナーが `400px` よりも幅が広く、かつ祖先に `800px` よりも幅の広いコンテナーがある場合に、宣言されたスタイルを適用するクエリーです。

```css
@container summary (min-width: 400px) {
  @container (min-width: 800px) {
    /\* <stylesheet> \*/
  }
}
```

### スタイルのコンテナークエリー

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

 コンテナクエリーでは、コンテナー要素の計算されたスタイルを評価することもできます。
 以下のコンテナークエリーは、コンテナー要素の `--accent-color` の `計算値` が `blue` かどうかを調べます。

```css
@container style(--accent-color: blue) {
  /\* <stylesheet> \*/
}
```

**メモ:** カスタムプロパティが `blue` という値を持つ場合、そのプロパティが `@property` で色として定義されていない限り、同等の 16 進コード `#0000ff` は一致しません。

仕様書
---

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

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

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

関連情報
----

* コンテナークエリー
* `container-name`
* `container-type`
* `contain`
* `content-visibility`


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

grid-template
=============

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

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

* Learn more
* See full compatibility
* Report feedback
**`grid-template`** は CSS のプロパティで、一括指定プロパティとして グリッド列、グリッド行、グリッド領域 を定義します。

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

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

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

* `grid-template-areas`
* `grid-template-columns`
* `grid-template-rows`
構文
--

```css
/\* キーワード値 \*/
grid-template: none;

/\* grid-template-rows / grid-template-columns の値 \*/
grid-template: 100px 1fr / 50px 1fr;
grid-template: auto 1fr / auto 1fr auto;
grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
grid-template: fit-content(100px) / fit-content(40%);

/\* grid-template-areas grid-template-rows / grid-template-column の値 \*/
grid-template:
  "a a a"
  "b b b";
grid-template:
  "a a a" 20%
  "b b b" auto;
grid-template:
  [header-top] "a a a" [header-bottom]
  [main-top] "b b b" 1fr [main-bottom]
  / auto 1fr auto;

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

### 値

`none`

3 個すべてのプロパティの値に `none` を設定するキーワードで、明示的なグリッドがないことを意味します。名前付きグリッド領域はありません。行と列は暗黙的に生成されます。これらのサイズは `grid-auto-rows` および `grid-auto-columns` プロパティによって決定されます。

`<'grid-template-rows'> / <'grid-template-columns'>`

`grid-template-rows` および `grid-template-columns` に特定の値を設定し、`grid-template-areas` の値に `none` を設定します。

`[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?`

`grid-template-areas` にリストの文字列を設定し、`grid-template-rows` にリストの各文字列に従ったトラックサイズを設定します (サイズ指定の足りない部分には `auto` が設定されます)。さらに、各サイズの前後で定義された名前付き線をつなぎ、`grid-template-columns` にトラックリストのスラッシュ記号の後で指定されたサイズを設定します (指定されていない場合は `none` が設定されます)。

**メモ:** これらのトラックリストに `repeat()` 関数を使うことはできません。トラックは「ASCII アート」内の行列と一対一の関係で視覚的に並んでいるためです。

**メモ:** `grid` 一括指定プロパティは同じ構文を受け入れますが、暗黙的なグリッドプロパティをその初期値にリセットしてしまいます。これらの値が別々にカスケードされないようにするには、（`grid-template` ではなく） `grid` を使用してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `grid-template-columns`: `none`
* `grid-template-rows`: `none`
* `grid-template-areas`: `none`
 |
| 適用対象 | グリッドコンテナー |
| 継承 | なし |
| パーセント値 | 一括指定の次の各プロパティとして* `grid-template-columns`: コンテンツ領域の対応する寸法に対する相対値
* `grid-template-rows`: コンテンツ領域の対応する寸法に対する相対値
 |
| 計算値 | 一括指定の次の各プロパティとして* `grid-template-columns`: 指定通り。ただし相対的な長さはは絶対的な長さに変換される
* `grid-template-rows`: 指定通り。ただし相対的な長さはは絶対的な長さに変換される
* `grid-template-areas`: 指定通り
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `grid-template-columns`: 長さ、パーセント値、 calc の単純なリストであり、唯一の違いはリスト内の長さ、パーセント値、 calc の部分の値のみ
* `grid-template-rows`: 長さ、パーセント値、 calc の単純なリストであり、唯一の違いはリスト内の長さ、パーセント値、 calc の部分の値のみ
* `grid-template-areas`: 離散値
 |

形式文法
----
```

grid-template =
  none                                                |
  [ <'grid-template-rows'> / <'grid-template-columns'> ]  |
  [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

<line-names> =
  '[' <custom-ident>\* ']'

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

<explicit-track-list> =
  [ <line-names>? <track-size> ]+ <line-names>?

<track-breadth> =
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto

<inflexible-breadth> =
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto

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

```

例
-

### グリッドテンプレートの定義

#### CSS

```css
#page {
  display: grid;
  width: 100%;
  height: 200px;
  grid-template:
    [header-left] "head head" 30px [header-right]
    [main-left] "nav main" 1fr [main-right]
    [footer-left] "nav foot" 30px [footer-right]
    / 120px 1fr;
}

header {
  background-color: lime;
  grid-area: head;
}

nav {
  background-color: lightblue;
  grid-area: nav;
}

main {
  background-color: yellow;
  grid-area: main;
}

footer {
  background-color: red;
  grid-area: foot;
}
```

#### HTML

```html
<section id="page">
  <header>ヘッダー</header>
  <nav>ナビゲーション</nav>
  <main>メイン領域</main>
  <footer>フッター</footer>
</section>
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # explicit-grid-shorthand |

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

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

関連情報
----

* 関連する CSS プロパティ: `grid-template-rows`, `grid-template-columns`, `grid-template-areas`
* グリッドレイアウトガイド: 線に基づく配置を使用したグリッドレイアウト
* グリッドレイアウトガイド: グリッドテンプレート領域 - グリッド定義の一括指定
* 動画チュートリアル: *Grid Template shorthand*


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

::first-line (:first-line)
==========================

**`::first-line`** は CSS の擬似要素で、ブロックレベル要素の最初の行にスタイルを適用します。なお、最初の行の長さは要素の幅、文書の幅、文字列のフォントの大きさなど、様々な要因に左右されます。

```css
/\* <p> の最初の行を選択 \*/
p::first-line {
  color: red;
}
```

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

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

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

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

* フォントに関する全プロパティ: `font`, `font-kerning`, `font-style`, `font-variant`, `font-variant-numeric`, `font-variant-position`, `font-variant-east-asian`, `font-variant-caps`, `font-variant-alternates`, `font-variant-ligatures`, `font-synthesis`, `font-feature-settings`, `font-language-override`, `font-weight`, `font-size`, `font-size-adjust`, `font-stretch`, `font-family`
* 背景に関する全プロパティ: `background-color`, `background-clip`, `background-image`, `background-origin`, `background-position`, `background-repeat`, `background-size`, `background-attachment`, `background-blend-mode`
* `color` プロパティ
* `word-spacing`, `letter-spacing`, `text-decoration`, `text-transform`, `line-height`
* `text-shadow`, `text-decoration`, `text-decoration-color`, `text-decoration-line`, `text-decoration-style`, `vertical-align`
構文
--

Error: could not find syntax for this item例
-

### HTML

```html
<p>
  スタイルはこの段落の最初の行にのみ適用されます。
  その後のすべての文字列は普通のスタイルになります。分かりますか？
</p>

<span
 >ブロックレベル要素ではないので、この文字列の最初の行は、
  特殊なスタイルになりません。</span
>
```

### CSS

```css
::first-line {
  color: blue;
  text-transform: uppercase;

  /\* 警告: これらを使用しないでください \*/
  /\* ::first-line 擬似要素では多くのプロパティが無効になります \*/
  margin-left: 20px;
  text-indent: 20px;
}
```

### 結果

仕様書
---

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

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

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

関連情報
----

* `::first-letter`


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

clear
=====

**`clear`** は CSS のプロパティで、要素をその前にある浮動要素の下に移動 (clear) する必要があるかどうかを設定します。`clear` プロパティは、浮動要素と非浮動要素のどちらにも適用されます。

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

浮動でないブロックに適用された場合は、その要素の境界の辺が、関係するすべての浮動要素のマージンの辺より下まで移動します。浮動でないブロックの上マージンは折り畳まれます。

一方で、二つの浮動要素の垂直マージンは折り畳まれません。浮動要素に適用された場合、下の要素のマージンの辺が、すべての関連する浮動要素のマージンの辺よりも下に移動します。これは後の浮動要素が前のものよりも高い位置に配置されることがないため、後の浮動要素の位置に影響します。

解除されることに関連する浮動要素は、その前の浮動要素と同一のブロック整形コンテキスト内の先行する浮動要素です。

**メモ:** 浮動要素しか包含しない要素は、高さがなくなります。このような要素を常にリサイズ可能にして浮動要素を包含するようにしたい場合は、その要素の `display` プロパティの値を `flow-root` に設定してください。

```css
#container {
  display: flow-root;
}
```

構文
--

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

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

### 値

`none`

要素は先行する浮動要素と切り離されず、下に移動しません。

`left`

要素は先行する*左*の浮動要素と切り離され、下に移動します。

`right`

要素は先行する*右*の浮動要素と切り離され、下に移動します。

`both`

要素は先行する*左右両方*の浮動要素と切り離され、下に移動します。

`inline-start`

要素は、先行する*包含ブロックの先頭側*の浮動要素の下に移動することを示すキーワードです。これは左書きでは*左側*、右書きでは*右側*の浮動要素です。

`inline-end`

要素は、先行する*包含ブロックの末尾側*の浮動要素の下に移動することを示すキーワードです。これは左書きでは*右側*、右書きでは*左側*の浮動要素です。

公式定義
----

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

形式定義
----
```

clear =
  inline-start  |
  inline-end    |
  block-start   |
  block-end     |
  left          |
  right         |
  top           |
  bottom        |
  both-inline   |
  both-block    |
  both          |
  none

```

例
-

### clear: left

#### HTML

```html
<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="left">This paragraph clears left.</p>
</div>
```

#### CSS

```css
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.left {
  border: 1px solid black;
  clear: left;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: left;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 50%;
}
```

### clear: right

#### HTML

```html
<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="right">This paragraph clears right.</p>
</div>
```

#### CSS

```css
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.right {
  border: 1px solid black;
  clear: right;
}
.black {
  float: right;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 50%;
}
```

### clear: both

#### HTML

```html
<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus
    ac dui.
  </p>
  <p class="red">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="both">This paragraph clears both.</p>
</div>
```

#### CSS

```css
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.both {
  border: 1px solid black;
  clear: both;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 45%;
}
```

仕様書
---

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

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

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

関連情報
----

* CSS 基本ボックスモデル


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

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

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

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

構文
--

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

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

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

### 値

`<length-percentage>`

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

`auto`

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

公式定義
----

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

形式文法
----
```

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

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

```

仕様書
---

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # padding-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


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

CSS 画像
======

**CSS 画像** (CSS Images) は CSS のモジュールの一つで、どのような種類の画像が利用できるか (`<image>` 型、その中の URL、グラデーション、その他の種類の画像)、どのように大きさを変更するか、様々なレイアウトモデルで画像やその他の置換コンテンツが応答するかを定義します。

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

### プロパティ

* `image-orientation`
* `image-rendering`
* `image-resolution`
* `object-fit`
* `object-position`
### 関数

* `linear-gradient()`
* `radial-gradient()`
* `repeating-linear-gradient()`
* `repeating-radial-gradient()`
* `conic-gradient()`
* `repeating-conic-gradient()`
* `url()`
* `element()`
* `image()`
* `cross-fade()`
### データ型

* `<gradient>`
* `<image>`
ガイド
---

CSS グラデーションの使用

特殊な CSS 画像型である*グラデーション*と、その作り方や使い方を紹介します。

CSS での画像スプライトの実装

単一の文書でいくつかの画像をグループ化して、ダウロードリクエストを節約し、ページのスピードを上げることができる共通のテクニックを説明します。

仕様書
---

| Specification |
| --- |
| CSS Images Module Level 3  |
| Compatibility Standard # css-%3Cimage%3E-type |
| CSS Values and Units Module Level 4 # urls |


CSS 背景と境界 - CSS: カスケーディングスタイルシート

CSS 背景と境界
=========

**CSS 背景と境界**モジュールでスタイル付けをすると、背景を色や画像で埋めたり (クリッピングや寸法の変更も) 他の加工を行ったりすることができます。これらのスタイルでは、境界を線や画像で装飾したり、四角くしたり丸くしたりすることもできます。(さらに、要素ボックスに影をつけて装飾することもできます)。

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

### プロパティ

* `background`
* `background-attachment`
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position`
* `background-position-x`
* `background-position-y`
* `background-repeat`
* `background-size`
* `border`
* `border-bottom`
* `border-bottom-color`
* `border-bottom-left-radius`
* `border-bottom-right-radius`
* `border-bottom-style`
* `border-bottom-width`
* `border-collapse`
* `border-color`
* `border-image`
* `border-image-outset`
* `border-image-repeat`
* `border-image-slice`
* `border-image-source`
* `border-image-width`
* `border-left`
* `border-left-color`
* `border-left-style`
* `border-left-width`
* `border-radius`
* `border-right`
* `border-right-color`
* `border-right-style`
* `border-right-width`
* `border-style`
* `border-top`
* `border-top-color`
* `border-top-left-radius`
* `border-top-right-radius`
* `border-top-style`
* `border-top-width`
* `border-width`
* `box-shadow`
ツール
---

複数の背景の使用

要素に 1 つまたは複数の背景を設定する方法を説明します。

背景画像の拡縮

背景画像の拡大縮小や繰り返しを変更する方法を説明します。

CSS を使った HTML の要素への色の適用

CSS の色が境界を含む HTML でどのように使われるかを概観します。

境界画像作成ツール

境界画像 (`border-image` プロパティ) を見ながら作ることができる対話型のツールです。

境界角丸作成ツール

角の丸み (`border-radius` プロパティ) を見ながら作ることができる対話型のツールです。

ボックスの影作成ツール

要素の背後の影 (`box-shadow` プロパティ) を見ながら作ることができる対話型のツールです。

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3  |


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

flex-direction
==============

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

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

* Learn more
* See full compatibility
* Report feedback
**`flex-direction`** は CSS のプロパティで、主軸の方向や向き（通常または逆方向）を定義することにより、フレックスコンテナー内でフレックスアイテムを配置する方法を設定します。

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

なお、 `row` および `row-reverse` の値は、フレックスコンテナーの書字方向に影響されます。 `dir` 属性が `ltr` である場合は、 `row` は左から右へ向かう水平軸を表し、また `row-reverse` は右から左へ向かう水平軸を表します。一方、 `dir` 属性が `rtl` である場合は、 `row` は右から左へ向かう水平軸を表し、また `row-reverse` は左から右へ向かう水平軸を表します。

構文
--

```css
/\* 行のテキストの方向に配置 \*/
flex-direction: row;

/\* <row> と同様だが、逆向き \*/
flex-direction: row-reverse;

/\* 積み重なるように配置する \*/
flex-direction: column;

/\* <column> と同様だが、逆向き \*/
flex-direction: column-reverse;

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

### 値

以下の値を指定できます。

`row`

フレックスコンテナーの主軸は、書字方向と同じに定義されます。 **main-start** および **main-end** の位置は、コンテンツの書字方向と同様になります。

`row-reverse`

`row` と同様ですが、**main-start** および **main-end** の位置が入れ替わります。

`column`

フレックスコンテナーの主軸は、ブロック軸と同じになります。 **main-start** および **main-end** の位置は、 writing-mode における **before** および **after** の位置と同じになります。

`column-reverse`

`column` と同様ですが、 **main-start** および **main-end** の位置が入れ替わります。

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

`flex-direction` プロパティを `row-reverse` または `column-reverse` の値で使うと、視覚上の表示と DOM の順序が一致しなくなります。これは、スクリーンリーダーなどの支援技術を使っている視覚障害者に不利な影響を及ぼします。視覚的な (CSS の) 順序が重要である場合は、スクリーンリーダーの利用者は正しい読み上げ順序でアクセスすることができなくなります。

* Flexbox & the keyboard navigation disconnect — Tink
* Source Order Matters | Adrian Roselli
* MDN "WCAG を理解する ― ガイドライン 1.3 の解説"
* Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0
公式定義
----

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

形式文法
----
```

flex-direction =
  row             |
  row-reverse     |
  column          |
  column-reverse

```

例
-

### フレックスコンテナーの列と行の反転

#### HTML

```html
<h4>これは Column-Reverse です</h4>
<div id="col-rev" class="content">
  <div class="box red">A</div>
  <div class="box lightblue">B</div>
  <div class="box yellow">C</div>
</div>
<h4>これは Row-Reverse です</h4>
<div id="row-rev" class="content">
  <div class="box red">A</div>
  <div class="box lightblue">B</div>
  <div class="box yellow">C</div>
</div>
```

#### CSS

```css
.content {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: flex;
}

.box {
  width: 50px;
  height: 50px;
}

#col-rev {
  flex-direction: column-reverse;
}

#row-rev {
  flex-direction: row-reverse;
}

.red {
  background-color: red;
}

.lightblue {
  background-color: lightblue;
}

.yellow {
  background-color: yellow;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-direction-property |

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

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

関連情報
----

* `flex-flow` は `flex-direction` および `flex-wrap` プロパティの一括指定プロパティです。
* CSS フレックスボックスガイド: *フレックスボックスの基本概念*
* CSS フレックスボックスガイド: *フレックスアイテムの順序*


メディアクエリー - CSS: カスケーディングスタイルシート

メディアクエリー
========

**メディアクエリー**によって、サイトやアプリを様々な引数や端末の特性に基づいて合わせることができます。

これはレスポンシブデザインのキーコンポーネントです。例えば、メディアクエリーでは小さい端末でフォントの大きさを縮小したり、ページが縦長モードで表示されたときに段落の間隔を広げたり、タッチ画面でボタンを拡大したりすることができます。

CSS では、 `@media` アットルールを使用して、メディアクエリーの結果に基づいて条件付きでスタイルの一部を適用することができます。 `@import` を使用すると、条件付きでスタイルシート全体を適用することもできます。

### HTML でのメディアクエリー

HTML でも、メディアクエリーは様々な要素に適用することができます。

* `<link>` 要素の `media` 属性では、リンクされたリソース (ふつうは CSS) が適用されるメディアを定義します。
* `<source>` 要素の `media` 属性では、ソースが適用されるメディアを定義します。 (これは `<picture>` 要素内でのみ有効です。)
* `<style>` 要素の `media` 属性では、スタイルが適用されるメディアを定義します。
### JavaScript でのメディアクエリー

JavaScript では、ウィンドウがメディアクエリーに合うかどうかをテストするために `Window.matchMedia()` メソッドを利用することができます。また、 `MediaQueryList.addListener()` (en-US) を使用して、クエリーの状態が変更されたときに通知を受け取ることもできます。この機能により、サイトやアプリが端末の設定、方向、状態が変化したときに応答することができます。

プログラムからのメディアクエリーの使用については、メディアクエリーのテストで知ることができます。

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

### アットルール

* `@import`
* `@media`
ガイド
---

メディアクエリーの使用

メディアクエリーと、その構文や演算子、メディアクエリー式を構築するために使用するメディア機能を紹介します。

プログラムからのメディアクエリーのテスト

JavaScript の中でメディアクエリーを使用して端末の状態を特定する方法、メディアクエリーの結果が変化したとき (ユーザーが画面を回転させたり、ブラウザーの大きさを変更したりしたとき) にコードに通知されるよう、リスナーをセットアップする方法を説明します。

アクセシビリティのためのメディアクエリーの使用

ユーザーがウェブサイトをより理解できるように、メディアクエリーが支援できることを学びます。

仕様書
---

| Specification |
| --- |
| Media Queries Level 4  |
| CSS Conditional Rules Module Level 3  |

関連情報
----

* `@supports` を使用すると、ブラウザーのさまざまな CSS の技術への対応状況に応じてスタイルを適用することができます。


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

mask-position
=============

**`mask-position`** は CSS プロパティで、定義されたマスク画像それぞれについて、 `mask-origin` で設定されたマスク位置レイヤーに対する初期位置を設定します。

```css
/\* キーワード値 \*/
mask-position: top;
mask-position: bottom;
mask-position: left;
mask-position: right;
mask-position: center;

/\* <position> 値 \*/
mask-position: 25% 75%;
mask-position: 0px 0px;
mask-position: 10% 8em;

/\* 複数の値 \*/
mask-position: top right;
mask-position:
  1rem 1rem,
  center;

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

構文
--

1 つ以上の `<position>` 値をカンマで区切ったもの。

### 値

`<position>`

要素ボックスの辺からの二次元の位置を表す 1 つから 4 つの値です。相対または絶対オフセットを与えることができます。なお、位置は要素ボックスの外に設定することができます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `center` |
| 適用対象 | すべての要素。 SVG の場合は `defs` 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される |
| 継承 | なし |
| パーセント値 | マスク描画領域の寸法からマスクレイヤー画像の寸法を引いたものに対する相対値 (`background-position` のテキストを参照) |
| 計算値 | 原点を表す 2 つのキーワードと、その原点からの 2 つのオフセットで、それぞれが絶対的な長さ (<length> が指定された場合) またはパーセント値で指定される。 |
| アニメーションの種類 | 反復可能リスト |

形式文法
----
```

mask-position =
  <position>#

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

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

```

例
-

### マスク位置の設定

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

仕様書
---

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

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

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

関連情報
----

* Clipping and Masking in CSS


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

:empty
======

**`:empty`** は CSS の擬似クラスで、子を持たない要素を表します。子とは要素のノードまたは文字列 (ホワイトスペースを含む) です。コメント、処理指示、 CSS の `content` は要素が空であるかどうかの判断には影響しません。

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

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

構文
--
```

:empty
```

例
-

### HTML

```html
<div class="box"><!-- I will be lime. --></div>
<div class="box">I will be pink.</div>
<div class="box">
  <!-- I will be pink in older browsers because of the whitespace around this comment. -->
</div>
<div class="box">
  <p>
    <!-- I will be pink in all browsers because of the non-collapsible whitespace and elements around this comment. -->
  </p>
</div>
```

### CSS
```

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

```css
.box {
  background: pink;
  height: 80px;
  width: 80px;
}

.box:empty {
  background: lime;
}
```

### 結果

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

スクリーンリーダーなどの支援技術は、空の対話型コンテンツを解釈することができません。すべての対話型コンテンツは、対話型コントロールの親要素 (アンカーやボタンなど) に文字列の値を設定することで作成されるアクセシブル名を持つ必要があります。アクセシブル名は、支援技術に有益な情報を通信する API である アクセシビリティツリー で使用されます。

対話型コントロールのアクセシブル名を提供する文字列は、プロパティの組み合わせを使用して非表示にすることができ、画面からは視覚的に削除されますが、支援技術からは解釈できるようにすることができます。これは、アイコンだけで目的を示すボタンでよく使用されます。

* What is an accessible name? | The Paciello Group
* Hidden content for better a11y | Go Make Things
* MDN "WCAG を理解する ― ガイドライン 2.4 の解説"
* Understanding Success Criterion 2.4.4 | W3C Understanding WCAG 2.0
仕様書
---

| Specification |
| --- |
| Selectors Level 4 # the-empty-pseudo |

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

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

関連情報
----

* `:-moz-only-whitespace`
Non-standard
 – 接頭辞付きで、 Selectors Level 4 の変更を実装
* `:blank`
Experimental


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

border-left-color
=================

**`border-left-color`** は CSS のプロパティで、要素の左側の境界線の色を設定します。一括指定プロパティの `border-color` または `border-left` でも設定することができます。

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

構文
--

```css
/\* <color> 値 \*/
border-left-color: red;
border-left-color: #ffbb00;
border-left-color: rgb(255, 0, 0);
border-left-color: hsla(100%, 50%, 25%, 0.75);
border-left-color: currentcolor;
border-left-color: transparent;

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

`border-left-color` プロパティは 1 つの値で指定します。

### 値

`<color>`

左の境界線の色を定義します。

公式定義
----

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

形式文法
----
```

border-left-color =
  <color>     |
  <image-1D>

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

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

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

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

```

例
-

### 境界線が付いた単純な div

#### HTML

```html
<div class="mybox">
  <p>
    これは周囲に境界線があるボックスです。 なお、ボックスのその辺が
    <span class="redtext">赤</span>になっています。
  </p>
</div>
```

#### CSS

```css
.mybox {
  border: solid 0.3em gold;
  border-left-color: red;
  width: auto;
}

.redtext {
  color: red;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* 境界に関する CSS 一括指定プロパティ: `border`, `border-left`, `border-color`.
* 他の境界線の色に関する CSS プロパティ: `border-right-color`, `border-bottom-color`, `border-top-color`
* 同じ境界に適用される他の境界関連の CSS プロパティ: `border-left-style`, `border-left-width`


& 入れ子セレクター - CSS: カスケーディングスタイルシート

& 入れ子セレクター
==========

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

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

* Learn more
* See full compatibility
* Report feedback
CSS の **`&` 入れ子セレクター**は、 CSS 入れ子を使用する場合に、親子ルールの関係を明示的に示します。このセレクターは、入れ子になっている子ルールのセレクターを親要素に対して相対的なものにします。入れ子セレクター `&` がない場合、子ルールセレクターは子要素を選択します。子ルールセレクターは `:is()` 内にあるのと同じ詳細度の重みを持ちます。

**メモ:** 子ルールは子要素セレクターという意味ではありません。子ルールは `&` 入れ子セレクターを使用することによって、親要素を対象とすることも子要素を対象とすることもできます。

入れ子スタイルルールで使用しない場合、 `&` 入れ子セレクターはスコープルートを表します。

構文
--

```css
parentRule {
  /\* 親ルールスタイルプロパティ \*/
  & childRule {
    /\* 子ルールスタイルプロパティ \*/
  }
}
```

### `&` 入れ子セレクターとホワイトスペース

入れ子が **`&` 入れ子セレクター**なしで行われる以下のコードを考えてみてください。

```css
.parent-rule {
  /\* 親ルールスタイルプロパティ \*/
  .child-rule {
    /\* 子ルールスタイルプロパティ \*/
  }
}
```

ブラウザーは入れ子になったセレクターを解釈するとき、自動的にセレクターの間に空白を追加し、新しい CSS セレクタールールを作成します。以下のコードは、入れ子になっていない同等のルールを示しています。

```css
.parent-rule {
  /\* 親ルールスタイルプロパティ \*/
}

.parent-rule .child-rule {
  /\* .parent-rule の祖先に対する .child-rule の子孫のスタイル設定プロパティ \*/
}
```

入れ子ルールを親ルールに（空白なしで）接続する必要があるとき、例えば`擬似クラス`を使用するときや、複合セレクターを作成するときなどは、 **`&` 入れ子セレクター**を直前に使用して、望ましい効果を得る必要があります。

例えば要素に、常に適用されるスタイルを適用し、加えてホバー時のみ適用される入れ子のスタイルをいくつか提供する場合を考えてみましょう。もし **`&` 入れ子セレクター**が記載されていない場合、ホワイトスペースが追加されるため、入れ子スタイルは親ルールセレクターの子孫にあたる任意のホバー中の要素に適用されるルールセットになってしまいます。これは私たちが望んでいるものではありません。

```css
.parent-rule {
  /\* 親ルールスタイルプロパティ \*/
  :hover {
    /\* 子ルールスタイルプロパティ \*/
  }
}

/\* ブラウザーは上記の入れ子ルールを次のように解釈する \*/

.parent-rule {
  /\* 親ルールスタイルプロパティ \*/
}

.parent-rule \*:hover {
  /\* 子ルールスタイルプロパティ \*/
}
```

ホワイトスペースを含まない **`&` 入れ子セレクター**を追加すると、ホバーしたときに親ルールで一致する要素がスタイル設定されます。

```css
.parent-rule {
  /\* 親ルールスタイルプロパティ \*/
  &:hover {
    /\* 子ルールスタイルプロパティ \*/
  }
}

/\* ブラウザーは上記の入れ子ルールを次のように解釈する \*/

.parent-rule {
  /\* 親ルールスタイルプロパティ \*/
}

.parent-rule:hover {
  /\* 子ルールスタイルプロパティ \*/
}
```

`&` 入れ子セレクターの追加
---------------

`&` 入れ子セレクターを後に追加することで、ルールのコンテキストを逆にすることもできます。

```css
.card {
  /\* .card のスタイル \*/
  .featured & {
    /\* .featured .card のスタイル \*/
  }
}

/\* ブラウザーは上記の入れ子ルールを次のように解釈する \*/

.card {
  /\* .card のスタイル \*/
}

.featured .card {
  /\* .featured .card のスタイル \*/
}
```

`&` 入れ子セレクターは複数配置することができます。

```css
.card {
  /\* .card のスタイル \*/
  .featured & & & {
    /\* .featured .card .card .card のスタイル \*/
  }
}

/\* ブラウザーは上記の入れ子ルールを次のように解釈する \*/

.card {
  /\* .card のスタイル \*/
}

.featured .card .card .card {
  /\* .featured .card .card .card のスタイル \*/
}
```

例
-

次の例はどちらも同じ結果を出力します。最初のものは通常の CSS スタイルを使用し、 2 つ目は `&` 入れ子セレクターを使用しています。

### 通常の CSS スタイル

この例は通常の CSS スタイルを使用しています。

#### HTML

```html
<p class="example">
  この段落には<a href="#">リンクを含んでいます</a>。ポインターを当てるかフォーカスを当ててみてください。
</p>
```

#### CSS

```css
.example {
  font-family: system-ui;
  font-size: 1.2rem;
}

.example > a {
  color: tomato;
}

.example > a:hover,
.example > a:focus {
  color: ivory;
  background-color: tomato;
}
```

#### 結果

### 入れ子の CSS スタイル

この例は入れ子の CSS スタイルを使用しています。

#### HTML

```html
<p class="example">
  この段落には<a href="#">リンクを含んでいます</a>。ポインターを当てるかフォーカスを当ててみてください。
</p>
```

#### CSS

```css
.example {
  font-family: system-ui;
  font-size: 1.2rem;
  & > a {
    color: tomato;
    &:hover,
 &:focus {
      color: ivory;
      background-color: tomato;
    }
  }
}
```

#### 結果

### 入れ子ルール以外の使用方法

入れ子スタイルルールで使用しない場合、 `&` 入れ子セレクターはスコープルートを表します。

```html
<p>出力ボックスの上にポインターを当てると、文書の背景色を変更できます。</p>
```

```css
& {
  color: blue;
  font-weight: bold;
}

&:hover {
  background-color: wheat;
}
```

#### 結果

この場合、文書にすべてのスタイルを適用します。

仕様書
---

| Specification |
| --- |
| CSS Nesting Module # nest-selector |

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

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

関連情報
----

* CSS 入れ子の使用
* CSS 入れ子モジュール
* CSS セレクターモジュール


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

flex
====

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

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

* Learn more
* See full compatibility
* Report feedback
**`flex`** は CSS の一括指定プロパティで、フレックス*アイテム*をフレックスコンテナーの領域に収めるために、どのように伸長・収縮させるかを指定します。

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

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

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

* `flex-grow`
* `flex-shrink`
* `flex-basis`
構文
--

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

/\* 単位がない数値を 1 つ指定: flex-grow
この場合 flex-basis は 0 と等しくなる\*/
flex: 2;

/\* 幅または高さを 1 つ指定: flex-basis \*/
flex: 10em;
flex: 30%;
flex: min-content;

/\* 値を 2 つ指定: flex-grow | flex-basis \*/
flex: 1 30px;

/\* 値を 2 つ指定: flex-grow | flex-shrink \*/
flex: 2 2;

/\* 値を 3 つ指定: flex-grow | flex-shrink | flex-basis \*/
flex: 2 2 10%;

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

`flex` プロパティは 1 つ、2 つ、3 つの値を取ることができます。

* **値 1 つの構文:** 値は以下のうちの 1 つです。
    + `<flex-grow>` として有効な値の場合、一括指定は `flex: <flex-grow> 1 0` と展開されます。
    + `<flex-basis>` として有効な値の場合、一括指定は `flex: 1 1 <flex-basis>` と展開されます。
    + キーワード `none` またはグローバルキーワードのいずれか。
* **値 2 つの構文:**
    + 1 つ目は `flex-grow` として有効な値でなければなりません。
    + 2 つ目は以下のいずれかの値でなければなりません。
        - `flex-shrink` として有効な値の場合、一括指定は `flex: <flex-grow> <flex-shrink> 0` と展開されます。
        - `flex-basis` として有効な値の場合、一括指定は `flex: <flex-grow> 1 <flex-basis>` と展開されます。
* **値 3 つの構文:** 値は以下の順序でなければなりません。
    1. `flex-grow` として有効な値。
    2. `flex-shrink` として有効な値。
    3. `flex-basis` として有効な値。
### 値

`initial`

アイテムは `width` および `height` プロパティによって寸法が決められます。コンテナーに合うように最小サイズまで収縮しますが、フレックスコンテナーの空き領域を埋めるために伸長することはありません。これは "`flex: 0 1 auto`" と同等です。

`auto`

アイテムは `width` および `height` プロパティによって寸法が決められますが、フレックスコンテナーの空き領域を埋めるために伸長したり、コンテナーに合うように最小サイズまで収縮したりします。これは "`flex: 1 1 auto`" と同等です。

`none`

アイテムは `width` および `height` プロパティによって寸法が決められます。寸法は完全に固定で、フレックスコンテナーに連動して収縮したり伸長したりすることはありません。これは"`flex: 0 0 auto`" と同等です。

`<'flex-grow'>`

フレックスアイテムの `flex-grow` を定義します。負の値は無効とみなされます。省略時の既定値は `1` です。 (初期値は `0`)

`<'flex-shrink'>`

フレックスアイテムの `flex-shrink` を定義します。負の値は無効とみなされます。省略時の既定値は `1` です。 (初期値は `1`)

`<'flex-basis'>`

フレックスアイテムの `flex-basis` を定義します。希望サイズが `0` ならば、自由度として解釈されないように単位をつけなければなりません。省略時の既定値は `0` です。 (初期値は `auto`)

解説
--

多くの場合、 `flex` には `auto`, `initial`, `none`, または単位のない正の数を設定します。これらの値の効果を確認するには、以下のフレックスコンテナーの大きさを変更してみてください。
```

<div class="flex-container">
  <div class="item auto">auto</div>
  <div class="item auto">auto</div>
  <div class="item auto">auto</div>
</div>

<div class="flex-container">
  <div class="item auto">auto</div>
  <div class="item initial">initial</div>
  <div class="item initial">initial</div>
</div>

<div class="flex-container">
  <div class="item auto">auto</div>
  <div class="item auto">auto</div>
  <div class="item none">none</div>
</div>

<div class="flex-container">
  <div class="item initial">initial</div>
  <div class="item none">none</div>
  <div class="item none">none</div>
</div>

<div class="flex-container">
  <div class="item four">4</div>
  <div class="item two">2</div>
  <div class="item one">1</div>
</div>
```

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

.flex-container {
  background-color: #f4f7f8;
  resize: horizontal;
  overflow: hidden;
  display: flex;
  margin: 1em;
}

.item {
  margin: 1em;
  padding: 0.5em;
  width: 110px;
  min-width: 0;
  background-color: #1b5385;
  color: white;
  font-family: monospace;
  font-size: 13px;
}

.initial {
  flex: initial;
}

.auto {
  flex: auto;
}

.none {
  flex: none;
}

.four {
  flex: 4;
}

.two {
  flex: 2;
}

.one {
  flex: 1;
}
```

既定ではフレックスアイテムは内容物の最小の寸法よりも収縮することはありません。これを変更するには、 `min-width` または `min-height` を設定してください。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `flex-grow`: `0`
* `flex-shrink`: `1`
* `flex-basis`: `auto`
 |
| 適用対象 | フロー内の擬似要素を含むフレックスアイテム |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `flex-grow`: 指定通り
* `flex-shrink`: 指定通り
* `flex-basis`: 指定通り。ただし相対的な長さはは絶対的な長さに変換される
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `flex-grow`: 数値
* `flex-shrink`: 数値
* `flex-basis`: length または パーセント値, calc();
 |

形式文法
----
```

flex =
  none                                                |
  [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

```

例
-

### flex: auto の設定

この例では、 `flex: auto` を持つフレックスアイテムがコンテナー内の余白を吸収するように成長する様子を示しています。

#### HTML

```html
<div id="flex-container">
  <div id="flex-auto">flex: auto (click to toggle raw box)</div>
  <div id="flex-initial">flex: initial</div>
</div>
```

#### CSS

```css
#flex-container {
  display: flex;
  font-family: Consolas, Arial, sans-serif;
}

#flex-container > div {
  padding: 1rem;
}

#flex-auto {
  flex: auto;
  border: 1px solid #f00;
}

#flex-initial {
  border: 1px solid #000;
}
```

#### JavaScript

```js
const flexAuto = document.getElementById("flex-auto");
const flexInitial = document.getElementById("flex-initial");
flexAuto.addEventListener("click", () => {
  flexInitial.style.display =
    flexInitial.style.display === "none" ? "block" : "none";
});
```

#### 結果

このフレックスコンテナーには 2 つのフレックスアイテムがあります。

* "flex: auto" は `flex` の値が `auto` です。
* "flex: initial" は `flex` の値が `initial` です。

"flex: initial" のアイテムは、要求されるだけの幅を取りますが、それ以上空間を取るために伸長されることはありません。残りの空間はすべて "flex: auto" が占めます。

"flex: auto" をクリックすると、 "flex: initial" の `display` プロパティが `none` に設定され、レイアウトから除去されます。 "flex: auto" のアイテムが伸長され、コンテナー内で利用可能な空間をすべて占めます。

仕様書
---

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-property |

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

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

関連情報
----

* CSS フレックスボックスガイド: *フレックスボックスの基本概念*
* CSS フレックスボックスガイド: *主軸方向のフレックスアイテムの比率の制御*


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

border-inline-end-width
=======================

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

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

構文
--

```css
/\* <'border-width'> 値 \*/
border-inline-end-width: 2px;
border-inline-end-width: thick;

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

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

### 値

`<'border-width'>`

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

公式定義
----

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

形式文法
----
```

border-inline-end-width =
  <line-width>

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

```

例
-

### テキストが垂直方向の場合の境界の適用

#### HTML

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

##### CSS

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

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

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

inset-inline-end
================

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

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

構文
--

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

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

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

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

`inset-inline-start` と `inset-inline-end` の一括指定は `inset-inline` です。

### 値

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

公式定義
----

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

形式文法
----
```

inset-inline-end =
  auto                 |
  <length-percentage>

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

```

例
-

### インライン方向の末尾のオフセットの設定

#### HTML

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

#### CSS

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

.exampleText {
  writing-mode: vertical-rl;
  position: relative;
  inset-inline-end: 20px;
  background-color: #c8c800;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

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