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

radial-gradient()
=================

**`radial-gradient()`** は CSS の関数で、二つ以上の色の連続的な推移が原点から放射状に広がる画像を生成します。形状は円形または楕円形になります。関数の結果は `<gradient>` データ型のオブジェクトであり、これは `<image>` の特殊形です。

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

構文
--

```css
/\* コンテナーの中央にあるグラデーション、
 赤で始まり、青へ変わり、緑で終わる \*/
radial-gradient(circle at center, red 0, blue, green 100%)
```

放射状のグラデーションは、グラデーションの中心 (0％ の楕円の位置) と、*末端図形* (100％ の楕円) の大きさと形状を示すことで指定します。

値
-

`<position>`

グラデーションの位置で、 `background-position` や `transform-origin` と同じ方法で解釈されます。指定されなかった場合、既定値は `center` です。

`<ending-shape>`

グラデーションの末端図形です。値は `circle` (つまり、グラデーションの形状が一定の半径の円) か `ellipse` (つまり、軸に沿った楕円) のいずれかです。指定されなかった場合、既定値は `ellipse` です。

`<size>`

グラデーションの末端図形の大きさを決定します。省略した場合の既定値は farthest-corner です。これは明示的に指定することも、キーワードで指定することもできます。ここでのキーワード定義では、グラデーションボックスのエッジは有限の線分ではなく、両方向に無限に伸びているものと考えてください。

グラデーションが円でも楕円でも `<size>` に以下のキーワードを使用することができます。

| キーワード | 説明 |
| --- | --- |
| `closest-side` | グラデーションの末端図形は、ボックスの中心から最も近い辺 (circle の場合) または中心から最も近い縦の辺と横の辺 (ellipse の場合) に内接します。 |
| `closest-corner` | グラデーションの末端図形は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。 |
| `farthest-side` | `closest-side` と同様ですが、末端図形がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。 |
| `farthest-corner` | 既定値で、グラデーションの末端図形は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。 |

`<ending-shape>` を `circle` と指定した場合、大きさを明示的に `<length>` として与えることができ、円形の広がりの大きさを明示的に指定します。負の値は不正です。

`<ending-shape>` を `ellipse` と指定するか省略した場合、大きさを二つの `<length-percentage>` で指定して明示的な楕円の大きさを指定することができます。 1 つ目の値は水平の広がり、 2 つ目の値は垂直の広がりです。パーセント値はグラデーションボックスの対応する長さからの相対値です。負の値は不正です。

`<linear-color-stop>`

色経由点の `<color>` 値と、それに続く 1 つまたは 2 つの省略可能な経由位置 (グラデーション軸沿いの `<percentage>` または `<length>`) です。 percentage が `0%`、または length が `0` の場合は、グラデーションの中心を表します。 `100%` は末端図形と仮想グラデーション光線の交点を表します。その間のパーセント値はグラデーション光線における直線的な位置です。

`<color-hint>`

color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。

解説
--

他のグラデーションと同様、放射グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然な寸法や推奨される寸法、推奨される縦横比もありません。具体的な寸法は、適用先の要素の寸法に一致します。

繰り返してコンテナーを埋める放射グラデーションを生成するには、代わりに `repeating-radial-gradient()` 関数を使用してください。

`<gradient>` は `<image>` データ型に属するため、 `<image>` が使用できるところでしか使用できません。このため、 `radial-gradient()` は `background-color` や、その他の `<color>` データ型を使用するプロパティでは動作しません。

### 放射グラデーションの構成

![](/ja/docs/Web/CSS/gradient/radial-gradient/radial_gradient.png)放射グラデーションは*中心点*、*末端図形*、および二つ以上の*色経由点*で定義されます。

滑らかなグラデーションを生成するために、 `radial-gradient()` 関数は中央から*末端図形* (およびその先) に向けて一連の同心円の形状を描きます。図形の端は円または楕円です。

色経由点は、中心から右方向に水平に延びる*仮想グラデーション光線*の上に配置されます。色経由点の位置を決めるパーセント値は、図形の端とこのグラデーション光線の交点を `100%` としたときの相対値です。各形状は単色で、色は交差したグラデーション光線の色によって定義されます。

例
-

### シンプルなグラデーション
```

<div class="radial-gradient"></div>
```

```
.radial-gradient {
  width: 240px;
  height: 120px;
}
```

```css
.radial-gradient {
  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
}
```

### 中央から外れたグラデーション
```

<div class="radial-gradient"></div>
```

```
.radial-gradient {
  width: 240px;
  height: 120px;
}
```

```css
.radial-gradient {
  background-image: radial-gradient(
    farthest-corner at 40px 40px,
    #f35 0%,
    #43e 100%
  );
}
```

### 他の radial-gradient の例

他の例は CSS グラデーションの使用を参照してください。

仕様書
---

| Specification |
| --- |
| CSS Images Module Level 3 # radial-gradients |

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

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

関連情報
----

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


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

repeating-linear-gradient()
===========================

**`repeating-linear-gradient()`** は CSS の関数で、反復線形グラデーションによる画像を生成します。 `linear-gradient()` と似ており、同じ引数を取りますが、両方向に無限に色経由点を繰り返してコンテナー全体を埋めます。関数の返値は `<gradient>` データ型のオブジェクトであり、これは `<image>` の特殊型です。

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

繰り返すグラデーションの長さは、最初の色経由点と最後の色経由点の間の距離です。最初の色に color-stop-length がない場合、 color-stop-length の既定値は 0 になります。それぞれの繰り返しにおいて、色経由点の位置は基本的な線形グラデーションの長さの倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるでしょう。これは最初の色を最後の色として再び使用することで修正することができます。

他のグラデーションと同じく、線形反復グラデーションも自身の寸法を持ちません。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。

`<gradient>` は CSS の `<image>` データ型に所属しますので、 `<image>` が使用できるところでのみ使用できます。このため、 `repeating-linear-gradient()` は `background-color` や、その他の `<color>` を要求するプロパティでは動作しません。

構文
--

```css
/\* 45 度方向に軸を延ばし、青で始め赤で終わり、
 3 回繰り返す反復グラデーション \*/
repeating-linear-gradient(45deg, blue, red 33.3%);

/\* 右下から左上に延び、青で始め赤で終わり、
 20px ごとに繰り返す反復グラデーション \*/
repeating-linear-gradient(to left top, blue, red 20px);

/\* 下から上に延び、青で始め、 40% から緑になり、
 赤で終わるグラデーション。最後の色経由点が既定で
 100% なので、グラデーションは繰り返されない \*/
repeating-linear-gradient(0deg, blue, green 40%, red);

/\* 5 回繰り返し、左から右に、赤で始まり、緑に変わり、
 赤に戻るグラデーション \*/
repeating-linear-gradient(to right, red 0%, green 10%, red 20%);
```

### 値

`<side-or-corner>`

グラデーション線の開始点の位置。指定する場合は、 `to` に続けて 2 つ以下のキーワードを指定します。一つは水平方向の辺 (`left` または `right`)、もう一方は垂直方向の辺 (`top` または `bottom`) です。辺を表すキーワードは順不同です。指定しない場合は、 `to bottom` が既定になります。

`to top`, `to bottom`, `to left`, `to right` の値は、 `0deg`, `180deg`, `270deg`, `90deg` の角度にそれぞれ対応します。他の値は角度に変換されます。

`<angle>`

グラデーション線の方向を角度で示します。 `0deg` の値は `to top` と等価で、値が増加するとそこから時計回りに回ります。

`<linear-color-stop>`

色経由点の `<color>` の値であり、任意でその後に停止位置を指定します(グラデーションの軸に沿った `<percentage>` または `<length>` の位置)。 `0%` のパーセント値または `0` の長さは、グラデーションの先頭を表します。 `100%` の値は画像の寸法の 100% であり、つまりグラデーションは反復されません。

`<color-hint>`

color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。

**メモ:** CSS グラデーションにおける色経由点の描画は、 SVG グラデーションと同じ規則に従います。

### 形式文法

```css
repeating-linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
 \---------------------------------/ \---------------/
 グラデーション線の定義 色経由点のリスト

where <side-or-corner> = [left | right] || [top | bottom]
 and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
 and <linear-color-stop> = <color> [ <color-stop-length> ]?
 and <color-stop-length> = [ <percentage> | <length> ]{1,2}
  and <color-hint> = [ <percentage> | <length> ]
```

例
-

### 縞模様
```

body {
  width: 100vw;
  height: 100vh;
}
```

```css
body {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 20px,
    black 20px,
    black 40px
  );
  /\* 複数の色経由点の位置 \*/
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 20px,
    black 20px 40px
  );
}
```

### 10 回繰り返す水平線
```

body {
  width: 100vw;
  height: 100vh;
}
```

```css
body {
  background-image: repeating-linear-gradient(
    to bottom,
    rgb(26, 198, 204),
    rgb(26, 198, 204) 7%,
    rgb(100, 100, 100) 10%
  );
}
```

最後の色経由点が 10% であり、グラデーションが垂直なので、反復グラデーション内の各グラデーションは 10% の高さになり、 10 本の水平線に相当します。

**メモ:** 他の例は CSS グラデーションの使用を参照してください。

仕様書
---

| Specification |
| --- |
| CSS Images Module Level 3 # repeating-gradients |

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

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

関連情報
----

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


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

linear-gradient()
=================

**`linear-gradient()`** は CSS の関数で、二つ以上の色の連続的な直線に沿った変化から構成される画像を生成します。結果は `<gradient>` データ型のオブジェクトであり、これは `<image>` の特殊型です。

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

構文
--

```css
/\* 45度に傾いたグラデーションで、
 青から始まり赤で終わる \*/
linear-gradient(45deg, blue, red);

/\* 右下から左上に向かうグラデーションで、
 青から始まり赤で終わる \*/
linear-gradient(to left top, blue, red);

/\* 色経由点: 下から上に向かうグラデーションで、
 青から始まり、長さの 40% のところで緑になり、
 赤で終わる \*/
linear-gradient(0deg, blue, green 40%, red);

/\* 色ヒント: 左から右に向かうグラデーションで、
 赤から始まり、グラデーションの長さ全体の
 10% に中間点が来て、残りの 90% の長さをかけて
 青色に変わる \*/
linear-gradient(.25turn, red, 10%, blue);

/\* 複数位置の色経由点: 45 度傾いたグラデーションで、
 左下半分が赤で右上半分が青、
 赤から青への変化は明確な線 \*/
linear-gradient(45deg, red 0 50%, blue 50% 100%);
```

### 値

`<side-or-corner>`

グラデーション軸の開始点の位置。指定する場合は、 `to` に続けて 2 つ以下のキーワードから成ります。一つは水平方向の辺 (`left` または `right`)、もう一方は垂直方向の辺 (`top` または `bottom`) です。辺を表すキーワードは順不同です。指定しない場合は、 `to bottom` が既定になります。

`to top`, `to bottom`, `to left`, `to right` の値は、 `0deg`, `180deg`, `270deg`, `90deg` の角度にそれぞれ対応します。他の値は角度に変換されます。

`<angle>`

グラデーション軸の方向を角度で示します。 `0deg` の値は `to top` と等価で、値が増加するとそこから時計回りに回ります。

`<linear-color-stop>`

色経由点の `<color>` の値であり、任意でその後に停止位置を指定します (グラデーションの軸に沿った `<percentage>` または `<length>` の位置)。

`<color-hint>`

隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。

**メモ:** CSS グラデーションにおける色経由点の描画は、 SVG グラデーションと同じ規則に従います。

なお、上記の最初の例は、 Mozilla Firefox (特にバージョン 80.0b3) では、正確には図のようには表示されません。描かれているように表示するには、 html の height プロパティを 100% または 100vh に設定する必要があります。

解説
--

他のグラデーションと同様、線形グラデーションは自身の寸法を持ちません。つまり、画像本来の寸法や、推奨される縦横比を持たないということです。実際の寸法は、適用先の要素の寸法と一致します。

繰り返して領域を埋め尽くす線形グラデーションを生成するには、代わりに `repeating-linear-gradient()` 関数を使用してください。

`<gradient>` は CSS の `<image>` データ型に所属しますので、 `<image>` が使用できるところでのみ使用できます。このため、 `linear-gradient` は `background-color` や、その他の `<color>` を要求するプロパティでは動作しません。

### 線形グラデーションの構成

線形グラデーションは、グラデーション軸 (Gradient line) と呼ばれる軸によって定義されます。軸上の各点にはそれぞれ違った色が割り当てられます。なめらかなグラデーションを作成するために、 `linear-gradient()` 関数はグラデーション軸と直行する直線を、グラデーション軸上の交点の色で連続して引きます。

![linear-gradient.png](/ja/docs/Web/CSS/gradient/linear-gradient/linear-gradient.png)

グラデーション軸は、グラデーション画像を含むボックスの中心と、角度によって定義されます。グラデーションの色は、開始点 (Starting point)、 終了点 (Ending point) と、省略可能な色経由点 (color-stop point) の各点でそれぞれ定義されます。

開始点は、グラデーション軸の最初の色が始まる点です。終了点は最後の色が終わるところです。これらの点は、グラデーション軸とそれに直交し、ボックスの同一象限にあるコーナーを通る直線との交点によって定義されます。ただ、もっと簡単に、ボックスの中心を原点としたときの開始点の点対称な位置としても定義できます。こうした何だかややこしい開始点と終了点の定義が、*マジックコーナー*と呼ばれる興味深い効果を生みました。開始点と終了点に近いコーナーは、それぞれ開始点と終了点と同じ色を持ちます。

#### グラデーションのカスタマイズ

グラデーション軸に色経由点を追加することで、開始点と終了点の間で高度にカスタマイズした変化を作成することができます。色経由点は `<length>` や `<percentage>` データ型を使って、明示的に定義することができます。もし場所を定義しなかったときは、直前の点と直後の点の中間点になります。以下の二つのグラデーションは等価です。

```css
linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
```

ある色経由点の色から次の色経由点の色まで滑らかに色が変化し、色と色の中間点は、既定では色の変化の中間の位置になります。色の変化の中間点をどこに置くかを示すために、二つの色の間でラベルのない % の色ヒントを追加することで、色の中間点を二つの色経由点の間の任意の位置に移動することができます。次の例では、純粋な赤を先頭から 10% の位置まで、純粋な青を 90% の位置から末尾までに配置します。 10% から 90％ までの間は、赤から青への色変化ですが、色ヒントがない 30% があるので、変化の中間点は 50% の位置ではなく 30% の位置になります。

```css
linear-gradient(red 10%, 30%, blue 90%);
```

二つ以上の色経由点が同じ位置である場合、その位置で宣言された最初と最後の色の間で明確な線になります。

色経由点は昇順に並べてください。次の色経由点がより小さな値になると、以前の色経由点を上書きすることになり、急な変化になります。以下の例では、赤から始まって 40% の位置で黄色になり、それから 25% にわたって黄色から青への変化になります。

```css
linear-gradient(red 40%, yellow 30%, blue 65%);
```

色経由点には複数の位置が利用できます。 CSS 宣言の中で二つの位置を含めることで、二つの隣り合う色経由点として色を宣言することができます。

```css
linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);
```

既定では、 0% の経由点に色がない場合、宣言されている最初の色がその場所の色になります。同様に、最後の色経由点に位置が宣言されていない場合は、最後の色が 100% の位置まで続くか、 100% の位置の色になります。

例
-

### 45 度 のグラデーション
```

body {
  width: 100vw;
  height: 100vh;
}
```

```css
body {
  background: linear-gradient(45deg, red, blue);
}
```

### グラデーション軸の 60% から始まるグラデーション
```

body {
  width: 100vw;
  height: 100vh;
}
```

```css
body {
  background: linear-gradient(135deg, orange 60%, cyan);
}
```

### 複数の位置の色経由点があるグラデーション

この例は複数の位置の色経由点を使用しており、隣り合う色に同じ色経由値があるため、縞模様の効果になります。
```

body {
  width: 100vw;
  height: 100vh;
}
```

```css
body {
  background: linear-gradient(
    to right,
    red 20%,
    orange 20% 40%,
    yellow 40% 60%,
    green 60% 80%,
    blue 80%
  );
}
```

### その他のグラデーションの例

他の例は CSS グラデーションの使用を参照してください。

仕様書
---

| Specification |
| --- |
| CSS Images Module Level 4 # linear-gradients |

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

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

関連情報
----

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


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

repeating-conic-gradient()
==========================

**`repeating-conic-gradient()`** は CSS の関数で、 (単一のグラデーションではなく) 繰り返しのグラデーションからなる、色の遷移が (中心から放射状に広がるのではなく) 中心点の周りを回転する画像を生成します。

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

構文
--

```css
/\* スターバースト: 青の上に青のスターブラスト:
 このグラデーションは左上 4 分の 1 の位置を中心とした
 明るい青と暗い青のスターブラストで、 3 度傾いている
 ため垂直線がありません。 \*/
background: repeating-conic-gradient(
    from 3deg at 25% 25%,
    hsl(200, 100%, 50%) 0deg 15deg,
    hsl(200, 100%, 60%) 10deg 30deg);
);
```

### 値

`<angle>`

`from` キーワードに続いて角度を指定することで、時計回りのグラデーションの位置を定義します。

`<position>`

`background-position` プロパティと同じ長さ、順番、キーワード値を使用して、グラデーションの中心の位置を定義します。省略すると、既定値は`center`、すなわちグラデーションに配置されます。

`<angular-color-stop>`

色経由点の `<color>` 値で、その後にオプションで 1 ～ 2 個の位置 (グラデーションの円周軸に沿った `<angle>`) が続きます。最後の色経由点から最初の色経由点までの角度が反復グラデーションの大きさを定義します。

`<color-hint>`

隣接する色経由点の間でグラデーションがどのように進行するかを定義する補間のヒントです。長さは、 2 つの色経由点の間のどの位置でグラデーションの色が色の遷移の中間点に到達するかを定義します。省略した場合、色の遷移の中間点は 2 つの色経由点間の中間点になります。

**メモ:** CSS グラデーションにおける色経由点の描画は、 SVG グラデーションと同じ規則に従います。

解説
--

反復扇形グラデーションの例にはスターバーストがあります。 `repeating-conic-gradient()` 関数の返値は `<gradient>` データ型のオブジェクトで、これは `<image>` の特殊形です。

最初と最後の色経由点がどちらも 0 度以上か 360 度未満になっていない場合、 conic-gradient は繰り返されません。

他のグラデーションと同様、扇形グラデーションは自身の寸法を持ちません。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。自身の寸法は適用先の要素の寸法、または要素の寸法以外で設定された `<image>` の寸法に一致します。

`<gradient>` は `<image>` データ型に属するため、 `<image>` が使用できるところでしか使用できません。このため、 `conic-gradient()` は `background-color` や、その他の `<color>` データ型を使用するプロパティでは動作しません。

**メモ:** 反復しない扇形グラデーションを作成するには、グラデーションを 360 度の回転にするか、 `conic-gradient()` 関数を使用するかしてください。

### 反復扇形グラデーションの理解

repeating-conic-gradient の構文は、 `conic-gradient()` や `repeating-radial-gradient()` の構文に似ています。反復しない扇形グラデーションのように、色経由点はグラデーションの円弧の周りに配置されます。反復放射グラデーションのように、反復部分の大きさは、最後の色経由点の角度から最初の色経由点を引いたものになります。

![反復／反復なしの扇形／放射グラデーションの色経由点の比較](/ja/docs/Web/CSS/gradient/repeating-conic-gradient/repeatingconicgradient.png)

上記のグラデーションは 3 分の 1 が青、 3 分の 1 が赤、 3 分の 1 が黄色として定義されています。

```css
repeating-conic-gradient(from 0deg, red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg);

repeating-radial-gradient(red 0 8%, yellow 8% 16%, blue 16% 24%);

conic-gradient(red 120deg, yellow 120deg 240deg, blue 240deg);

radial-gradient(red 33%, yellow 33% 66%, blue 66%);
```

反復グラデーションを繰り返すためには、最初と最後の色経由点を定義します。繰り返さないグラデーションと同様に、最初と最後の色経由点は、明示的に宣言されていない場合、 0 と 100% または 360deg のいずれかであると仮定されます。これらの値を既定値とした場合、反復アークは360度となるため、繰り返されません。

繰り返しのない扇形グラデーションと同様に、色経由点はグラデーションの中心から出ているグラデーション軸上ではなく、グラデーション円弧 (円の円周) の周りに配置されます。 `from <angle>` が宣言されていない場合は一番上から始まり、最大と最小の色の角度の違いである角度の大きさ分だけ時計回りに進み、それを繰り返すことで、円の中心を回るように色が推移します。

繰り返しの扇形グラデーションは、回転角度とグラデーションの中心を指定し、さらに色経由点のリストを指定します。反復のない扇形グラデーションと同様に、反復扇形グラデーションの色経由点は `<angle>` で指定します。単位は、度は `deg`、グラデーションは `grad`、ラジアンは `rad`、ターンは `turn` です。円は、360 度、400 グラード、2πラジアン、1 ターンです。反復扇形グラデーションに対応しているブラウザーでは、360 度を 100% とするパーセント値も受け付けますが、これは仕様にはありません。

放射グラデーションと扇形グラデーションの構文は、グラデーションの中心を画像内または画像外の任意の場所に配置することができます。位置を指定する値は、 2 値の `background-position` の構文と同様です。

グラデーション円弧はグラデーションの円周の一部です。 0 度は北、つまり 12 時の方向です。グラデーションの色は、角度のついた色経由点、その開始点、終了点、そしてその間にある、任意の角度の色経由点ポイントによって決定されます。色の遷移は、隣接する色の色経由点の間にあるカラーヒントで変更することができます。

#### グラデーションのカスタマイズ

グラデーションの円弧上に角度のついた色経由点ポイントをさらに追加することで、複数の色の間の高度なカスタマイズされた移行を行うことができます。色経由点の位置は、`<angle>` を使って明示的に定義することができます。色経由点の位置を指定しない場合は、その前の色経由点と後の色経由点の中間に配置されます。反復しないグラデーションと同様に、最初と最後の色経由点の角度を指定しない場合、その値は 0 度と 360 度になります。いずれの角度も指定しない場合は、非反復の円錐形グラデーションになります。最初と最後の色経由点にそれぞれ 0 度と 360 度以外の値を宣言すると、グラデーションはその値に基づいて繰り返されます。例えば、最初の色に角度を宣言せず、最後の色止めに 10% と宣言した場合、円弧は 10 回繰り返されます。むしろ、最初に宣言した色経由点が起点となり、最後の色経由点は最後に宣言した色経由点の角度となります。次の 2 つのグラデーションは等価です。

```css
repeating-conic-gradient(red, orange, yellow, green, blue 50%);
repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg)
```

既定では、色はある色経由点の色から次の色経由点の色へとスムーズに移行し、色と色の中間点が色移行の中間点となります。この色遷移の中間点は、色遷移の中間点の位置を示すカラーヒントを追加することで、 2 つの色経由点間の任意の位置に移動させることができます。

2 つ以上の色経由点が同じ場所にある場合、その場所で宣言された最初の色と最後の色の間で硬い線になります。

異なる角度の単位を混在させることは可能ですが、やめておきましょう。 CSS が読みづらくなります。

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

ブラウザは、背景画像に関する特別な情報を支援技術に提供しません。これは主にスクリーンリーダーにとって重要なことで、スクリーンリーダーはその存在を告知しないため、ユーザーに何も伝えられません。扇形グラデーションを使って円グラフや市松模様などの効果を出すことは可能ですが、 CSS 画像は代替テキストを割り当てるネイティブな方法を提供していないため、扇形グラデーションで表現された画像はスクリーンリーダーのユーザーが認知することはできません。ページの全体的な目的を理解するために重要な情報が画像に含まれている場合は、文書内で意味的に記述する方が良いでしょう。

* MDN WCAG を理解する, ガイドライン 1.1 の説明
* Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0
例
-

### 白黒のスターブラスト
```

div {
  width: 200px;
  height: 200px;
}
```

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

```css
div {
  background-image: repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg);
}
```

### 中心をずらしたグラデーション

このグラデーションは 18 回繰り返されますが、右半分しか見えないので、 9 回の繰り返しにしか見えません。
```

div {
  width: 200px;
  height: 200px;
}
```

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

```css
div {
  background: repeating-conic-gradient(
    from 3deg at 25% 25%,
    green,
    blue 2deg 5deg,
    green,
    yellow 15deg 18deg,
    green 20deg
  );
}
```

### その他の repeating-conic-gradient の例

それ以外の例は CSS グラデーションを参照してください。

仕様書
---

| Specification |
| --- |
| CSS Images Module Level 4 # repeating-gradients |

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

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

関連情報
----

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


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

repeating-radial-gradient()
===========================

**`repeating-radial-gradient()`** は CSS の関数で、原点から広がり反復するグラデーションから成る画像を生成します。 `radial-gradient()` と似ており、同じ引数を取りますが、 `repeating-linear-gradient()` と同様にすべての方向に色経由点を無限に繰り返してコンテナー全体を埋めます。関数の返値は `<gradient>` データ型のオブジェクトであり、これは `<image>` の特殊型です。

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

それぞれの繰り返しにおいて、色経由点の位置は基本的な放射グラデーションの寸法 (最初と最後の色経由点の間の距離) の倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるので、最初の色を最後の色として繰り返すことで緩和できます。

他のグラデーションと同じく、放射反復グラデーションも自身の寸法を持ちません。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。

`<gradient>` は `<image>` データ型に属するため、 `<image>` が使用できるところでしか使用できません。このため、 `repeating-radial-gradient()` は `background-color` や、その他の `<color>` データ型を使用するプロパティでは動作しません。

構文
--

```css
/\* コンテナーの中央からのグラデーションで、
 赤で始まり、青に変化し、緑で終わり、
 それぞれ 30px ごとに色が繰り返される \*/
repeating-radial-gradient(circle at center, red 0, blue, green 30px);

/\* 左上の角付近の楕円形のグラデーションで、
 赤で始まり、緑に変化し、また戻り、
 中央と右下の角の間で5回繰り返され、
 中央と左上の角の間は1回だけ \*/
repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);
```

### 値

`<position>`

グラデーションの位置で、 `background-position` や `transform-origin` と同じ方法で解釈されます。指定されなかった場合、既定値は `center` です。

`<shape>`

グラデーションの形状です。 `circle` (グラデーションの形状が一定の半径の円の意味) か `ellipse` (軸に沿った楕円の意味) のいずれかです。指定されなかった場合、既定値は `ellipse` です。

`<extent-keyword>`

終端の形状の大きさを指定するキーワードです。利用可能な値は次の通りです。

| キーワード | 説明 |
| --- | --- |
| `closest-side` | グラデーションの終端の形状は、中心から最も近いボックスの辺に (circle の場合) または中心から最も近い縦の辺と横の辺に (ellipse の場合) 内接します。 |
| `closest-corner` | グラデーションの終端の形状は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。 |
| `farthest-side` | `closest-side` と同様ですが、終端の形状がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。 |
| `farthest-corner` | グラデーションの終端の形状は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。 |

**メモ:** この関数の初期の実装では、他のキーワード (`cover` および `contain`) をそれぞれ標準の `farthest-corner` および `closest-side` の別名として含めていました。実装によってはすでに古い形を外しているので、標準的なキーワードのみを使用してください。

`<color-stop>`

色経由点の `<color>` 値と、それに続く省略可能な経由位置 (グラデーション軸沿いの `<percentage>` または `<length>`) です。 percentage が `0%`、または length が `0` の場合は、グラデーションの中心を表します。 `100%` は終端の形状と仮想グラデーション光の交点を表します。その間のパーセント値は仮想グラデーション光における直線的な位置です。

### 形式文法

```css
repeating-radial-gradient(
 [[ circle || <length> ] [at <position>]? , |
 [ ellipse || [<length> | <percentage> ]{2}] [at <position>]? , |
 [[ circle | ellipse ] || <extent-keyword> ] [at <position>]? , |
 at <position> , <color-stop-list> )
 \---------------------------------------------------------------/\-----------------/
 Contour, size and position of the ending shape List of color stops

where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
 and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
 and <linear-color-stop> = <color> [ <color-stop-length> ]?
 and <color-stop-length> = [ <percentage> | <length> ]{1,2}
   and <color-hint> = [ <percentage> | <length> ]
```

例
-

### 白と黒のグラデーション
```

<div class="radial-gradient"></div>
```

```
.radial-gradient {
  width: 120px;
  height: 120px;
}
```

```css
.radial-gradient {
  background: repeating-radial-gradient(
    black,
    black 5px,
    white 5px,
    white 10px
  );
}
```

### 最も遠い角
```

<div class="radial-gradient"></div>
```

```
.radial-gradient {
  width: 240px;
  height: 120px;
}
```

```css
.radial-gradient {
  background: repeating-radial-gradient(
    ellipse farthest-corner at 20% 20%,
    red,
    black 5%,
    blue 5%,
    green 10%
  );
  background: repeating-radial-gradient(
    ellipse farthest-corner at 20% 20%,
    red 0 5%,
    green 5% 10%
  );
}
```

楕円のグラデーションは左上から 20% の位置が中心となり、中心と最も遠い角 (右下の角) の間で 10 回繰り返します。色経由点で複数の位置に対応しているブラウザーでは、赤と緑の縞模様の楕円が表示されます。この構文にまだ対応していないブラウザーでは、赤から黒、それから青から緑へと変化するグラデーションが表示されます。

**メモ:** 他の例は CSS グラデーションの使用をご覧ください。

仕様書
---

| Specification |
| --- |
| CSS Images Module Level 3 # repeating-gradients |

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

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

関連情報
----

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


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

conic-gradient()
================

**`conic-gradient()`** は CSS の関数で、 (中心から広がるのではなく) 中心点の周りを回りながら色が変化する画像を生成します。扇型グラデーションの例としては、円グラフや色相環などがあります。 `conic-gradient()` 関数の結果は `<gradient>` データ型のオブジェクトであり、これは `<image>` の特殊型です。

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

構文
--

```css
/\* 45度回転した扇形グラデーション、
 青で始まり赤で終わる \*/
conic-gradient(from 45deg, blue, red);

/\* 青みがかった紫のボックス。グラデーションは青から赤へと
 進みます。しかし、扇形グラデーションの中心が左上にある
 ため、右下の四分の一しか見えません。 \*/
conic-gradient(from 90deg at 0 0, blue, red);

/\* 色相環 \*/
background: conic-gradient(
    hsl(360, 100%, 50%),
    hsl(315, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(225, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(135, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(45, 100%, 50%),
    hsl(0, 100%, 50%)
);
```

### 値

`<angle>`

`from` キーワードに続いて角度を指定することで、時計回りのグラデーションの位置を定義します。

`<position>`

`background-position` プロパティと同じ長さ、順番、キーワード値を使用して、グラデーションの中心の位置を定義します。省略すると、既定値は`center`、すなわちグラデーションに配置されます。

`<angular-color-stop>`

色経由点の `<color>` 値で、その後にオプションで 1 ～ 2 個の位置 (グラデーションの円周軸に沿った `<angle>`) が続きます。

`<color-hint>`

隣接する色経由点の間でグラデーションがどのように進行するかを定義する補間のヒントです。長さは、 2 つの色経由点の間のどの位置でグラデーションの色が色の遷移の中間点に到達するかを定義します。省略した場合、色の遷移の中間点は 2 つの色経由点間の中間点になります。

**メモ:** CSS グラデーションにおける色経由点の描画は、 SVG グラデーションと同じ規則に従います。

解説
--

他のグラデーションと同様、扇形グラデーションは自身の寸法を持ちません。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。自身の寸法は適用先の要素の寸法、または要素の寸法以外で設定された `<image>` の寸法に一致します。

繰り返して 360 度の回転を埋める扇形グラデーションを生成するには、代わりに `repeating-conic-gradient()` 関数を使用してください。

`<gradient>` は `<image>` データ型に属するため、 `<image>` が使用できるところでしか使用できません。このため、 `conic-gradient()` は `background-color` や、その他の `<color>` データ型を使用するプロパティでは動作しません。

**メモ:** 英語ではなぜ "conic" (円錐) グラデーションと呼ばれるのか。色経由点が一方よりもう一方が明るい場合、上から見た円錐のように見えるからです。

### 扇型グラデーションの構成

扇形グラデーションの構文は放射グラデーションと似ていますが、色経由点はグラデーションの中心から現れるグラデーション軸上ではなく、グラデーション円弧、すなわち円周上に配置されます。扇形グラデーションでは、色の遷移は円の中心を回るように、上から始まって時計回りに行われます。放射グラデーションでは、色の遷移は楕円の中心から外に向けて、すべての方向に行われます。

![扇形グラデーションの円周と放射グラデーションの軸に沿った色経由点](/ja/docs/Web/CSS/gradient/conic-gradient/screenshot_2018-11-29_21.09.19.png)

扇形グラデーションは、回転角度とグラデーションの中心を指定し、色経由点のリストを指定します。長さを指定して色経由点を配置する線形グラデーションや放射グラデーションとは異なり、扇形グラデーションの色経由点は角度を指定します。単位には度を表す `deg`、グラードを表す `grad`、ラジアンを表す `rad`、回転数を表す `turn` があります。 1 つの円は 360 度、 400 グラード、 2π ラジアン、 1 回転になります。扇形グラデーションに対応しているブラウザーはパーセント値も受け付けており、 100% は 360 度に相当しますが、これは仕様にはありません。

放射グラデーションと同様に、扇形グラデーションの構文では、グラデーションの中心を画像内のどこにでも、あるいは画像の外側にでも配置することができます。位置の値は、 2 値の背景位置の構文に似ています。

グラデーション円弧は、グラデーションの円周です。グラデーションまたは円弧の*始点*は北、つまり 12 時の方向です。そして、グラデーションは *from* の角度だけ回転します。グラデーションの色は、角度のついた色経由点、それらの開始点、終了点、および、その間、および、任意の角度のついた色経由点によって決定されます。色間の遷移は、隣接する色の色経由点の間のカラーヒントで変更することができます。

#### グラデーションのカスタマイズ

グラデーション円弧上に角度のついた色経由点をさらに追加することで、複数の色の間で高度なカスタマイズされた遷移を行うことができます。色経由点の位置は、 `<angle>` を使って明示的に定義することができます。色経由点の位置を指定しない場合は、前の色経由点と後の色経由点の中間に配置されます。最初の色経由点と最後の色経由点に角度を指定しない場合、その値はそれぞれ 0deg と 360deg です。次の2つのグラデーションは同等です。

```css
conic-gradient(red, orange, yellow, green, blue);
conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);
```

既定では、色はある色経由点の色から次の色経由点の色へとスムーズに移行し、色と色の中間点が色移行の中間点となります。カラーヒントを追加して色遷移の中間点を示すことで、この色遷移の中間点を 2 つの色経由点間の任意の位置に移動させることができます。次の例は、開始点から 10% の印までは赤一色で、回転の 80% 以上で赤から青に移行し、最後の 10% は青一色になっています。しかし、赤から青へのグラデーション変化の中間点は 20％ の位置になります。 80grad (20％) のカラーヒントがなかった場合は 50％ の位置になります。

```css
conic-gradient(red 40grad, 80grad, blue 360grad);
```

2 つ以上の色経由点が同じ場所にある場合、その場所で宣言された最初の色と最後の色の間に不連続の (硬い) 色変化として表示されます。扇形グラデーションを使用して円グラフを作成するには、 — 背景画像はアクセシビリティが確保できないため、正しい方法ではありませんが — 隣接する 2 つの色経由点の色経由点の角度が同じである、硬い色経由点を使用します。これを実現する最も簡単な方法は、複数のポジションの色経由点を使用することです。次の 2 つの宣言は等価です。

```css
conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn);
conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn);
```

色経由点は、昇順に並べる必要があります。後続の色経由点がより低い値であった場合、前の色経由点の値を上書きし、硬い (不連続の) 色変化を生成します。次の例では、 30% の地点で赤から黄色に変化し、グラデーションの 35% の地点で黄色から青に変化しています。

```css
conic-gradient(red .8rad, yellow .6rad, blue 1.3rad);
```

扇形グラデーションでは、他にもさまざまな効果を作り出すことができます。奇しくも市松模様もその一つです。左上と右下の白、左下と右上の黒で四分円を作り、グラデーションを16回 (横に4回、下に4回) 繰り返すと市松模様になります。

```css
conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad);
background-size: 25% 25%;
```

そして、そうですね、異なる角度のユニットを混ぜて使うこともできますが、やめておきましょう。以上、読みにくかったですね。

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

ブラウザは、背景画像に関する特別な情報を支援技術に提供しません。これは主にスクリーンリーダーにとって重要なことで、スクリーンリーダーはその存在を告知しないため、ユーザーに何も伝えられません。扇形グラデーションを使って円グラフや市松模様などの効果を出すことは可能ですが、 CSS 画像は代替テキストを割り当てるネイティブな方法を提供していないため、扇形グラデーションで表現された画像はスクリーンリーダーのユーザーが認知することはできません。ページの全体的な目的を理解するために重要な情報が画像に含まれている場合は、文書内で意味的に記述する方が良いでしょう。

* MDN WCAG を理解する, ガイドライン 1.1 の説明
* Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0
例
-

### 40 度のグラデーション
```

div {
  width: 100px;
  height: 100px;
}
```

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

```css
div {
  background-image: conic-gradient(from 40deg, #fff, #000);
}
```

### 中心をずらしたグラデーション
```

div {
  width: 100px;
  height: 100px;
}
```

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

```css
div {
  background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg);
}
```

### グラデーションの円グラフ

This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect.
```

div {
  width: 100px;
  height: 100px;
}
```

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

```css
div {
  background: conic-gradient(red 36deg, orange 36deg 170deg, yellow 170deg);
  border-radius: 50%;
}
```

### 市松模様
```

div {
  width: 100px;
  height: 100px;
}
```

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

```css
div {
  background: conic-gradient(
      #fff 0.25turn,
      #000 0.25turn 0.5turn,
      #fff 0.5turn 0.75turn,
      #000 0.75turn
    ) top left / 25% 25% repeat;
  border: 1px solid;
}
```

### その他の conic-gradient の例

他の例は CSS グラデーションの使用を参照してください。

仕様書
---

| Specification |
| --- |
| CSS Images Module Level 4 # conic-gradients |

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

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

関連情報
----

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


一貫性のあるリストのインデント - CSS: カスケーディングスタイルシート

一貫性のあるリストのインデント
===============

リストのスタイル変更でよくあるのが、インデントの幅 (リスト項目がどれだけ右に移動するか) の変更です。あるブラウザーではうまくいっても、別のブラウザーでは同じ効果が得られないことが多いので、これには不満が残ります。例えば、リストに左マージンをなくすと、Internet Explorer ではリストが移動しますが、Gecko ベースのブラウザーでは頑固に固定されてしまいます。この記事では、起こりうる問題を理解し、それを回避する方法をご紹介します。

なぜそうなるのか、もっと大切なことはどうすればその問題を回避できるのか、それを知るためには、リストの構造を詳しく知る必要があります。

リストの作成
------

まず、単一の純粋なリスト項目を考えます。このリスト項目は、マーカー (「ビュレット」とも) を持たず、まだリスト自体の一部ではありません。図 1 に示すように、シンプルで飾り気のない、空虚な空間に単独でぶら下がっています。

![図 1](/ja/docs/Web/CSS/CSS_lists/Consistent_list_indentation/consistent-list-indentation-figure1.gif)

赤い点線の境界線は、リスト項目のコンテンツ領域の外縁を表しています。この時点では、リスト項目にはパディングも境界もないことを覚えておいてください。さらに 2 つのリスト項目を追加すると、図 2 のような結果になります。

![図 2](/ja/docs/Web/CSS/CSS_lists/Consistent_list_indentation/consistent-list-indentation-figure2.gif)

これらを親要素で囲みます。ここでは順序なしリスト (`<ul>`) で囲みます。CSS のボックスモデルによると、リスト項目のボックスは、親要素のコンテンツ領域内に表示されなければなりません。親要素にはまだパディングもマージンもないので、図 3 のような状況になります。

![図 3](/ja/docs/Web/CSS/CSS_lists/Consistent_list_indentation/consistent-list-indentation-figure3.gif)

ここでは、青い点線の境界線が、`<ul>` 要素のコンテンツ領域の端を示しています。`<ul>` 要素にはパディングがないので、そのコンテンツは 3 つのリスト項目をぴったりと包み込んでいます。

次に、リスト項目のマーカーを追加します。これは順序なしリストなので、図 4 に示すように、伝統的な塗りつぶした円の「ビュレット」を追加します。

![図 4](/ja/docs/Web/CSS/CSS_lists/Consistent_list_indentation/consistent-list-indentation-figure4.gif)

視覚的には、マーカーが `<ul>` のコンテンツ領域の外側にありますが、ここで重要なのはその点ではありません。重要なのは、マーカーが `<ul>` ではなく、`<li>` 要素の「主要なボックス」の外に置かれていることです。マーカーはリスト項目の付属品のようなもので、`<li>` のコンテンツ領域の外にぶら下がっていますが、`<li>` には所属しています。

このため、Windows 版の Internet Explorer を除くすべてのブラウザーでは、`list-style-position` の値が `outside` であることを前提に、`<li>` 要素に設定された境界の外側にマーカーが配置されます。これが `inside` に変更されると、マーカーは `<li>` のコンテンツの中に入り、あたかも `<li>` の一番最初に置かれたインラインボックスのようになります。

2 回のインデント
---------

では、これらは文書の中でどのように表示されるのでしょうか。現時点では、以下のスタイルに似た状況になっています。

```css
ul,
li {
  margin-left: 0;
  padding-left: 0;
}
```

このリストをそのまま文書に落とし込むと、明らかなインデントがなく、マーカーがブラウザーのウィンドウの左端から外れてしまう危険性があります。

これを回避してインデントを行うためには、ブラウザーの実装者が利用できる選択肢は 3 つしかありません。

1. それぞれの `<li>` 要素に左マージンを設定する
2. `<ul>` 要素に左マージンを設定する
3. `<ul>` 要素に左パディングを設定する

結局のところ、第 1 の選択肢を使っている人はいないようです。2 番目の選択肢は、Internet Explorer と Opera が採用しました。3 つ目は Firefox が採用しました。

ちょっと 2 つのアプローチを見てみましょう。Internet Explorer と Opera では、40 ピクセルの左マージンを `<ul>` 要素に設定することで、リストをインデントしています。`<ul>` 要素に背景色を適用し、リスト項目と `<ul>` の境界線をそのままにしておくと、図 5 のような結果になります。

![図 5](/ja/docs/Web/CSS/CSS_lists/Consistent_list_indentation/consistent-list-indentation-figure5.gif)

一方で、Gecko は 40 ピクセルの左*パディング*を `<ul>` 要素に設定することで、図 5 と全く同じスタイルを作ることができます。この例を Gecko ベースのブラウザーに読み込むと、図 6 のようになります。

![図 6](/ja/docs/Web/CSS/CSS_lists/Consistent_list_indentation/consistent-list-indentation-figure6.gif)

見ての通り、マーカーはどの場合でも `<li>` 要素に付けられたままになっています。違いはひとえに `<ul>` の整形方法です。`<ul>` 要素に背景や境界を設定してみて初めて、その違いが分かります。

一貫性を探る
------

煮詰めていくと、こんな感じになります。Gecko、Internet Explorer、Opera の間でリストの表示を統一したい場合は、`<ul>` 要素の左マージンと左パディングの**両方**を設定する必要があります。このためには、`<li>` を意識する必要はありません。Netscape 6.xでの既定の表示を再現したい場合は、次のように書きます。

```css
ul {
  margin-left: 0;
  padding-left: 40px;
}
```

Internet Explorer や Opera のモデルの場合は、次のようになります。

```css
ul {
  margin-left: 40px;
  padding-left: 0;
}
```

もちろん、好きな値を入力することができます。お好みで両方とも `1.25em` に設定してください。ピクセルベースのインデントにこだわる必要はありません。もしリストをインデントがない状態にリセットしたい場合は、パディングとマージンの両方をゼロにする必要があります。

```css
ul {
  margin-left: 0;
  padding-left: 0;
}
```

ただし、そうすると、箇条書きがリストとその親要素の外にぶら下がってしまうことを忘れないでください。親要素が `body` の場合、箇条書きが完全にブラウザーウィンドウの外に出てしまい、表示されなくなる可能性が高くなります。

まとめ
---

結局、リストのレイアウトについて、この記事で触れたブラウザーのどれが正しくてどれが正くないとは言えないことが分かりました。既定のスタイルが異なるため、そこに問題が潜んでいるのです。リストの左パディングと左マージンの両方を確実にスタイル付けすることで、リストのインデントをブラウザー間でより一貫性のあるものにすることができます。

推奨事項
----

* リストのインデントを変更する場合は、パディングとマージンの両方を設定するようにしてください。
原著情報
----

* Author(s): Eric A. Meyer, Netscape Communications
* 最終更新日: 2002 年 8 月 30 日発行
* 著作権情報: Copyright © 2001-2003 Netscape. All rights reserved.
* メモ: この記事は、DevEdge サイトに掲載されたものを転載したものです。


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

color-mix()
===========

**`color-mix()`** 関数記法は 2 つの `<color>` 値を採り、指定された色空間の指定された量で混合した結果を返します。

構文
--

```css
color-mix(in lch, plum, pink);
color-mix(in lch, plum 40%, pink);
color-mix(in srgb, #34c9eb 20%, white);
color-mix(in hsl longer hue, hsl(120 100% 50%) 20%, white);
```

### 値

* 関数記法: `color-mix(method, color1[ p1], color2[ p2])`
* `method`
    + : `<color-interpolation-method>` で、色補間に使用する色空間を指定します。
* `color1`, `color2`
    + : 混合する `<color>` 値です。
* `p1`, `p2` 省略可
    + : `<percentage>` 値で `0%` から `100%` までであり、混合する各色の量を指定します。これらは以下のように正規化されます。
        - `p1` と `p2` の両方が省略された場合は、 `p1 = p2 = 50%` となります。
        - `p1` が省略されたら、 `p1 = 100% - p2` となります。
        - `p2` が省略されたら、 `p2 = 100% - p1` となります。
        - `p1 = p2 = 0%` であれば、関数は無効になります。
        - `p1 + p2 ≠ 100%` であれば、 `p1' = p1 / (p1 + p2)` および `p2' = p2 / (p1 + p2)` となり、ここで `p1'` と `p2'` は正規化された値です。
### 形式文法
```

<color-mix()> =
  color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2} )

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

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

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

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

```

例
-

### 2 つの色の混合

対応しているブラウザーでは、`#34c9eb`の混合率が高いほど、アイテムの青色が多くなり、白色が少なくなります。指定された値がない場合、パーセントの既定値は 50% です。

#### HTML

```html
<ul>
  <li>0%</li>
  <li>25%</li>
  <li>50%</li>
  <li>75%</li>
  <li>100%</li>
  <li></li>
</ul>
```

#### CSS
```

ul {
  display: flex;
  list-style-type: none;
  font-size: 150%;
  gap: 10px;
  border: 2px solid;
  padding: 10px;
}

li {
  padding: 10px;
  flex: 1;
  box-sizing: border-box;
  font-family: monospace;
  outline: 1px solid #34c9eb;
  text-align: center;
}
```

```css
li:nth-child(1) {
  background-color: color-mix(in srgb, #34c9eb 0%, white);
}

li:nth-child(2) {
  background-color: color-mix(in srgb, #34c9eb 25%, white);
}

li:nth-child(3) {
  background-color: color-mix(in srgb, #34c9eb 50%, white);
}

li:nth-child(4) {
  background-color: color-mix(in srgb, #34c9eb 75%, white);
}

li:nth-child(5) {
  background-color: color-mix(in srgb, #34c9eb 100%, white);
}

li:nth-child(6) {
  background-color: color-mix(in srgb, #34c9eb, white);
}
```

#### 結果

### color-mix() による色相の補間の使用

 短い色相補間を用いる場合、得られる色相角は、カラーホイールを最短ルートで回ったときの入力角の中間になります。
 より長い色相補間のメソッドを使用すると、カラーホイールの長いルートを取ったときの中点となる色相角が得られます。
 詳しい情報は `<hue-interpolation-method>` を参照してください。

```html
<div class="color-one">色 1</div>
<div class="color-two">色 2</div>
<div class="shorter">短い混色</div>
<div class="longer">長い混色</div>
```

#### CSS
```

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  border: 1px solid;
  font: bold 150% monospace;
  height: 100px;
  margin: 10px 5%;
  width: 30%;
}
```

```css
.color-one {
  background-color: hsl(10 100% 50%);
}
.color-two {
  background-color: hsl(60 100% 50%);
}
.shorter {
  background-color: color-mix(
    in hsl shorter hue,
    hsl(10 100% 50%),
    hsl(60 100% 50%)
  );
}
.longer {
  background-color: color-mix(
    in hsl longer hue,
    hsl(10 100% 50%),
    hsl(60 100% 50%)
  );
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 5 # color-mix |

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

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

関連情報
----

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


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

rgb()
=====

**`rgb()`** 関数記法は、赤、緑、青の成分によって色を表現します。オプションのアルファ成分は、色の透明度を表します。

**メモ:** 古い `rgba()` 構文は `rgb()` の別名であり、同じ引数を受け入れ、同じように動作します。

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

構文
--

```css
rgb(255 255 255)
rgb(255 255 255 / .5)
```

この関数は、すべての値をカンマで区切った古い構文も受け入れます。

### 値

* 関数記法: `rgb(R G B[ / A])`
* `R`, `G`, `B`
    + : それぞれ `<number>` で `0` から `255` の間、 `<percentage>` で `0%` から `100%` の間、またはキーワード `none` で、赤、緑、青のチャンネルを表します。
* `A` 省略可
    + : `<alpha-value>` またはキーワード `none` です。 `1` は `100%` （完全に不透明）に対応します。

**メモ:** この関数記法は sRGB 値にシリアライズされます。赤、緑、青の成分の値はシリアライズ時に丸められる可能性があります。

**メモ:** `none` の効果については色成分の欠落を参照してください。

### 形式文法
```

<rgb()> =
  <legacy-rgb-syntax>  |
  <modern-rgb-syntax>

<legacy-rgb-syntax> =
  rgb( <percentage>#{3} , <alpha-value>? )  |
  rgb( <number>#{3} , <alpha-value>? )

<modern-rgb-syntax> =
  rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )

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

```

例
-

### 古い構文: カンマで区切った値

歴史的な理由から、 `rgb()` 関数はすべての値をカンマで使用する区切り文字による形式を受け入れます。

#### HTML

```html
<div class="space-separated"></div>
<div class="comma-separated"></div>
```

#### CSS

```css
div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.space-separated {
  background-color: rgb(255 0 0 / 0.5);
}

div.comma-separated {
  background-color: rgb(255, 0, 0, 0.5);
}
```

#### 結果

### 古い構文: rgba()

古い `rgba()` の構文は `rgb()` の別名です。

#### HTML

```html
<div class="rgb"></div>
<div class="rgba"></div>
```

#### CSS

```css
div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.rgb {
  background-color: rgb(255 0 0 / 0.5);
}

div.rgba {
  background-color: rgba(255 0 0 / 0.5);
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4 # rgb-functions |

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

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

関連情報
----

* `<color>` データ型: すべての色記法の一覧


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

color-contrast()
================

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

**`color-contrast()`** は関数表記で、ある`色`の値と他の`色`の値のリストを取り、リストから最もコントラストが高くなる値を選択します。

構文
--

```css
color-contrast(wheat vs tan, sienna, #d2691e)
color-contrast(#008080 vs olive, var(--myColor), #d2691e)
```

### 値

* 関数記法: `color-contrast(color vs color-list)`
* `color`
    + : あらゆる有効な `<color>` です。
* `vs`
    + : 構文の部品としてのリテラルトークンです。
* `color-list`
    + : 最初の値と比較する、少なくとも 2 つの色値のカンマ区切りリストです。
仕様書
---

| Specification |
| --- |
| CSS Color Module Level 6 # colorcontrast |

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

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


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

oklab()
=======

**`oklab()`** 関数記法は、指定された色を、人間の目による色の知覚方法を模倣しようとするOKlab色空間で表現する。この `oklab()` は Oklab 色空間上の同次座標系、 a 軸と b 軸で動作します。極座標系、彩度、色相が必要な場合は、 `oklch()` を使用してください。

Oklab は知覚的色空間で、次のような場合に使用されます。

* 画像の明度を変えずに、グレースケールに変換する。
* ユーザーが感じる色相や明度を維持したまま、色の彩度を変更することができる。
* 色の滑らかで均一なグラデーションを作成する。例えば、 `<canvas>` 要素で手動で補間した場合。

`oklab()` 関数は、Oklab 色空間から、RGB よりも広い、広色域や P3 色を含む任意の色を表現することができます。

構文
--

```css
oklab(40.1% 0.1143 0.045);
oklab(59.69% 0.1007 0.1191);
oklab(59.69% 0.1007 0.1191 / 0.5);
```

### 値

関数記法: `oklab(L a b[ / A])`

`L`

`<number>` で `0` ～ `1` の範囲、 `<percentage>` で `0%` ～ `100%` の範囲、またはキーワード `none` であり、 CIE の明るさを指定します。ここで数値 `0` は `0%` （黒）に、数値 `100` は `100%` （白）に対応します。

`a`

`<number>` で `-0.4` ～ `0.4` の範囲、 `<percentage>` で `-100%` ～ `100%` の範囲、またはキーワード `none` であり、 Oklab 色空間における `a` 軸上の距離（緑と赤の色合い）を指定します。

`b`

`<number>` で `-0.4` ～ `0.4` の範囲、 `<percentage>` で `-100%` ～ `100%` の範囲、またはキーワード `none` であり、 Oklab 色空間における `b` 軸上の距離（青と黄の色合い）を指定します。

`A` 省略可

`<alpha-value>` またはキーワード `none` です。 `1` は `100%` （完全に不透明）に対応します。

**メモ:** `none` の効果については色成分の欠落を参照してください。

### 形式文法
```

<oklab()> =
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

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

```

例
-

### 明るさと色の軸を oklab() で調整

次の例は、 `oklab()` 関数の明度、 a 軸、 b 軸の値を変化させたときの効果を示しています。

#### HTML

```html
<div data-color="blue"></div>
<div data-color="blue-light"></div>

<div data-color="red"></div>
<div data-color="red-a"></div>

<div data-color="green"></div>
<div data-color="green-b"></div>
```

#### CSS
```

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
```

```css
[data-color="blue"] {
  background-color: oklab(0.5 -0.3 -0.4);
}
[data-color="blue-light"] {
  background-color: oklab(0.7 -0.3 -0.4);
}

[data-color="red"] {
  background-color: oklab(100% 0.4 0.4);
}
[data-color="red-a"] {
  background-color: oklab(100% 0.2 0.4);
}

[data-color="green"] {
  background-color: oklab(100% -100% 0.4);
}
[data-color="green-b"] {
  background-color: oklab(100% -100% 0.6);
}
```

#### 結果

### 透明度を oklab() で調整

 次の例は `oklab()` 関数記法の `A`（アルファ）値を変化させたときの効果を示しています。
 `red` と `red-alpha` 要素は `#background-div` 要素に重なり、透明度の効果を示しています。
 `A` に `0.4` の値を与えると、色は 40% の不透明度になります。

#### HTML

```html
<div id="background-div">
  <div data-color="red"></div>
  <div data-color="red-alpha"></div>
</div>
```

#### CSS
```

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
#background-div {
  background-color: lightblue;
  width: 150px;
  height: 40px;
}
```

```css
[data-color="red"] {
  background-color: oklab(0.628 0.225 0.126);
}
[data-color="red-alpha"] {
  background-color: oklab(0.628 0.225 0.126 / 0.4);
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4 # ok-lab |

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

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

関連情報
----

* `<color>` データ型: すべての色記法の一覧
* `oklch()` は `oklab()` と同じ色空間を使用しますが、極座標系を使用します
* A perceptual color space for image processing
* OKLAB color wheel (observablehq.com)


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

lch()
=====

**`lch()`** 関数記法は、指定された色を LCH 色空間で表現するものです。これは `lab()` と同じ L 軸を持っていますが、極座標系の C （彩度）と H （色相）を使用します。

構文
--

```css
lch(29.2345% 44.2 27);
lch(52.2345% 72.2 56.2);
lch(52.2345% 72.2 56.2 / .5);
```

### 値

* 関数記法: `lch(L C H [/ A])`
* `L`
    + : `<number>` で `0` ～ `100` の範囲、 `<percentage>` で `0%` ～ `100%` の範囲、またはキーワード `none` であり、 CIE の明るさを指定します。ここで数値 `0` は `0%` （黒）に、数値 `100` は `100%` （白）に対応します。
* `C`
    + : `<number>`、`<percentage>`、またはキーワード値 `none` であり、ここで `0%` は `0` に、 `100%` は数値 `150` に対応します。これは彩度の指標です（おおよそ「色の量」を表します）。その有効な最小値は `0` で、最大値は理論的には無制限です（しかし実際には `230` を超えることはありません）。
* `H`
    + : `<number>`、`<angle>`、またはキーワード値 `none` であり、色相角を表します。この型の詳細は、 `<hue>` のリファレンスにあります。
* `A` 省略可
    + : `<alpha-value>` またはキーワード `none` です。 `1` は `100%` （完全に不透明）に対応します。

**メモ:** 通常、 CSS でパーセント値が数値と等価である場合、 `100%` が数値 `1` と等しくなります。
 この場合は特別で、 `100%` は `L` 値では `100`、 `C` 値では `150` となります。

**メモ:** `none` の効果については色成分の欠落を参照してください。

### 形式文法
```

<lch()> =
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )

<hue> =
  <number>  |
  <angle>

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

```

例
-

### 明度、彩度、色相を lch() で調整

次の例は、関数記法 `lch()` の `L`（明度）、`C`（彩度）、`H`（色相）の値を変化させたときの効果を示しています。

#### HTML

```html
<div data-color="blue"></div>
<div data-color="blue-light"></div>

<div data-color="red"></div>
<div data-color="red-chroma"></div>

<div data-color="green"></div>
<div data-color="green-hue"></div>
```

#### CSS
```

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
```

```css
[data-color="blue"] {
  background-color: lch(0% 100 240);
}
[data-color="blue-light"] {
  background-color: lch(100% 100 240);
}

[data-color="red"] {
  background-color: lch(50% 130 20);
}
[data-color="red-chroma"] {
  background-color: lch(100% 30 20);
}

[data-color="green"] {
  background-color: lch(50% 132 130);
}
[data-color="green-hue"] {
  background-color: lch(50% 132 180);
}
```

#### 結果

### 透明度を lch() で調整

 次の例は `lab()` 関数記法の `A`（アルファ）値を変化させたときの効果を示しています。
 `red` と `red-alpha` 要素は `#background-div` 要素に重なり、透明度の効果を示しています。
 `A` に `0.4` の値を与えると、色は 40% の不透明度になります。

#### HTML

```html
<div id="background-div">
  <div data-color="red"></div>
  <div data-color="red-alpha"></div>
</div>
```

#### CSS
```

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
#background-div {
  background-color: lch(100% 100 240);
  width: 150px;
  height: 40px;
}
```

```css
[data-color="red"] {
  background-color: lch(50% 130 20);
}
[data-color="red-alpha"] {
  background-color: lch(50% 130 20 / 0.4);
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4 # lab-colors |

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

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

関連情報
----

* すべての色記法の一覧
* `<hue>` データ型
* LCH colors in CSS: what, why, and how?


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

color()
=======

**`color()`** 関数記法により、他のほとんどの色関数が暗黙に処理する sRGB 色空間ではなく、特定の指定した色空間で色を指定することができます。

特定の色空間に対応しているかどうかは、CSS メディア特性の `color-gamut` で検出することができます。

構文
--

```css
color(display-p3 1 0.5 0);
color(display-p3 1 0.5 0 / .5);
```

### 値

関数記法: `color(colorspace c1 c2 c3[ / A])`

`colorspace`

`<ident>` で、定義済みの色空間（`srgb`, `srgb-linear`, `display-p3`, `a98-rgb`, `prophoto-rgb`, `rec2020`, `xyz`, `xyz-d50`, `xyz-d65`）のうちの 1 つを記述します。

`c1`, `c2`, `c3`

0 と 1 の間の数値 (`<number>`)、`<percentage>`、キーワード `none` のいずれかで、その色空間における成分値を指定します。

`A` 省略可

`<alpha-value>` またはキーワード `none` で、 `1` は `100%` （完全に不透明）に対応します。

**メモ:** `none` の効果については色成分の欠落を参照してください。

### 形式文法
```

<color()> =
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )

<colorspace-params> =
  <predefined-rgb-params>  |
  <xyz-params>

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

<predefined-rgb-params> =
  <predefined-rgb> [ <number> | <percentage> | none ]{3}

<xyz-params> =
  <xyz-space> [ <number> | <percentage> | none ]{3}

<predefined-rgb> =
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020

<xyz-space> =
  xyz      |
  xyz-d50  |
  xyz-d65

```

例
-

### 定義済みの色空間で color() を使用

次の例は、 `color()` 関数の明度、 a 軸、 b 軸の値を変化させたときの効果を示しています。

#### HTML

```html
<div data-color="red-a98-rgb"></div>
<div data-color="red-prophoto-rgb"></div>
<div data-color="green-srgb-linear"></div>
<div data-color="green-display-p3"></div>
<div data-color="blue-rec2020"></div>
<div data-color="blue-srgb"></div>
```

#### CSS
```

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
```

```css
[data-color="red-a98-rgb"] {
  background-color: color(a98-rgb 1 0 0);
}
[data-color="red-prophoto-rgb"] {
  background-color: color(prophoto-rgb 1 0 0);
}
[data-color="green-srgb-linear"] {
  background-color: color(srgb-linear 0 1 0);
}
[data-color="green-display-p3"] {
  background-color: color(display-p3 0 1 0);
}
[data-color="blue-rec2020"] {
  background-color: color(rec2020 0 0 1);
}
[data-color="blue-srgb"] {
  background-color: color(srgb 0 0 1);
}
```

#### 結果

### xyz 色空間で color() を使用

次の例は `xyz` 色空間を使用して色を指定する方法を示しています。

#### HTML

```html
<div data-color="red"></div>
<div data-color="green"></div>
<div data-color="blue"></div>
```

#### CSS
```

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
```

```css
[data-color="red"] {
  background-color: color(xyz 45 20 0);
}

[data-color="green"] {
  background-color: color(xyz-d50 0.3 80 0.3);
}

[data-color="blue"] {
  background-color: color(xyz-d65 5 0 50);
}
```

#### 結果

### color-gamut メディアクエリーで color() を使用

この例では、`color-gamut` メディアクエリーを使用して、具体的な色空間への対応を検出し、その色空間を使用して色を指定する方法を示します。

#### HTML

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

#### CSS
```

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
```

```css
@media (color-gamut: p3) {
  div {
    background-color: color(display-p3 0 0 1);
  }
}

@media (color-gamut: srgb) {
  div:nth-child(2) {
    background-color: color(srgb 0 0 1);
  }
}

@media (color-gamut: rec2020) {
  div:nth-child(3) {
    background-color: color(rec2020 0 0 1);
  }
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4 # color-function |

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

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

関連情報
----

* `<color>` データ型: すべての色記法の一覧
* `color-gamut` メディア特性
* Wide Gamut Color in CSS with Display-p3


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

light-dark()
============

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

**`light-dark()`** は CSS の `<color>` 関数で、プロパティに 2 つの色を設定することができます。開発者が明色カラースキームまたは暗色カラースキームを設定したか、ユーザーがライト色またはダーク色のテーマをリクエストしたか検出することによって、 2 つの色の選択肢のいずれかを返します。テーマ色を `prefers-color-scheme` メディア特性クエリーに入れる必要はありません。
 ユーザーは O Sの設定（ライトモードやダークモードなど）やユーザーエージェントの設定を通じて、環境設定を推奨することができます。 `light-dark()` 関数は、任意の `<color>` 値が受け入れられる場合に、 2 つの色の値を指定することができます。 CSS の `light-dark()` 色関数は、ユーザーの環境設定が `light` に設定されている場合、または何も設定されていない場合に最初の値を返し、ユーザーの環境設定が `dark` に設定されている場合に 2 つ目の値を返します。

`light-dark()` 色の関数の対応を有効にするには、`color-scheme` に `light dark` という値がなければなりません。ふつうはこれを `:root` 擬似クラスに設定します。

```css
:root {
  color-scheme: light dark;
}
body {
  color: light-dark(#333b3c, #efefec);
  background-color: light-dark(#efedea, #223a2c);
}
```

構文
--

```css
/\* 名前付きのカラー値 \*/
color: light-dark(black, white);

/\* RGB カラー値 \*/
color: light-dark(rgb(0 0 0), rgb(255 255 255));

/\* カスタムプロパティ \*/
color: light-dark(var(--light), var(--dark));
```

### 値

関数記法: `light-dark(light-color, dark-color)`

`light-color`

`<color>` 値で、明色カラースキーム (light `color-scheme`) で設定するものです。

`dark-color`

`<color>` 値で、暗色カラースキーム (dark `color-scheme`) で設定するものです。

### 形式文法
```

<light-dark()> =
  light-dark( <color> , <color> )

```

例
-

### カラースキームに基づいた色の設定

対応しているブラウザーでは、既定で、 `light-dark()` 色関数で返される色は、オペレーティングシステムの設定（ライトモードやダークモードなど）やユーザーエージェントの設定から設定されたユーザー環境に依存します。この設定は、ブラウザーの developer tools で変更することもできます。

#### HTML

ライト色、ダーク色、ユーザーの推奨する配色に基づいて選択した色を対象とすることができるように、 3 つのセクションを設けています。

```html
<h1>CSS の <code>light-dark()</code> 関数</h1>
<section>
  <h2>自動</h2>
  <p>
    このセクションは、ユーザーシステムまたはユーザーエージェントの設定に反応します。
  </p>
</section>
<section class="light">
  <h2>ライト</h2>
  <p>
    このセクションは <code>color-scheme: light;</code> のために明色になっています。
  </p>
</section>
<section class="dark">
  <h2>ダーク</h2>
  <p>このセクションは <code>color-scheme: dark;</code> のために暗色になっています。</p>
</section>
```

#### CSS

ライトテーマとダークテーマの両方の色を含めています。また、文書全体の `light-dark()` 色関数を有効にするために、`:root` で文書の `color-scheme` を定義しています。

```css
:root {
  /\* これは、明暗の切り替えを設定する必要がある \*/
  color-scheme: light dark;

  --light-bg: ghostwhite;
  --light-color: darkslategray;
  --light-code: tomato;

  --dark-bg: darkslategray;
  --dark-color: ghostwhite;
  --dark-code: gold;
}
\* {
  background-color: light-dark(var(--light-bg), var(--dark-bg));
  color: light-dark(var(--light-color), var(--dark-color));
}
code {
  color: light-dark(var(--light-code), var(--dark-code));
}
```

`light-dark()` 関数を有効にするだけでなく、 `color-scheme` プロパティは文書内のセクションのユーザーの配色を上書きすることができます。ページセクションに明暗の配色のみを使用するように強制するには、 `color-scheme` プロパティを `light` または `dark` に設定するだけです。

**メモ:** 一般的にはこのようなことはすべきではありません。ここではデモのために使用しています。ユーザーが環境設定をした場合、通常はユーザーの環境設定を上書きしてはいけません。

```css
.light {
  /\* 強制的にライトモードにする \*/
  color-scheme: light;
}
.dark {
  /\* 強制的にダークモードにする \*/
  color-scheme: dark;
}
```

```
section {
  padding: 0.8rem;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 5 # light-dark |

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

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

関連情報
----

* `color-scheme`
* `<color>`
* CSS 色モジュール


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

hsl()
=====

**`hsl()`** 関数記法は、 sRGB 色を *色相*、*彩度*、*明度* の成分によって表現します。オプションの *アルファ* 成分は、その色の透明度を表します。

**メモ:** 古い `hsla()` 構文は `hsl()` の別名です。同じ引数を受け付け、同じように動作します。

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

`hsl()` による *補色* の定義は、色相環の同じ直径に配置されるため、単一の式で計算することができます。ある色の色相角を `θ` とすれば、その補色の色相角は `180deg - θ` となります。

構文
--

```css
hsl(120deg 75% 25%)
hsl(120deg 75% 25% / 0.6)
```

この関数は、すべての値がカンマで区切られた古い構文も受け付けます。

### 値

関数表記: `hsl(H S L[ / A])`

`H`

`<number>`、`<angle>` またはキーワード `none` であり、色相角を表します。この型の詳細は `<hue>` のリファレンスを参照してください。

`S`

`<percentage>` またはキーワード `none` であり、彩度を表します。`100%` は色の濃さが最大で、 `0%` は完全に色がありません（グレー）。

`L`

`<percentage>` またはキーワード `none` であり、輝度を表します。`100%` は白で、`0%` は黒で、`50%` は「通常」です。

`A` 省略可

`<alpha-value>` またはキーワード `none` であり、数値 `1` が `100%` (完全に不透明) を意味します。

**メモ:** この関数記法は sRGB 値にシリアライズされ、赤、緑、青の成分の値はシリアライズの際に丸められる可能性があります。

**メモ:** `none` の効果については色成分の欠落を参照してください。

### 形式文法
```

<hsl()> =
  <legacy-hsl-syntax>  |
  <modern-hsl-syntax>

<legacy-hsl-syntax> =
  hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )

<modern-hsl-syntax> =
  hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<hue> =
  <number>  |
  <angle>

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

```

例
-

### hsl() を conic-gradient() と組み合わせて使う

`hsl()` 関数と `conic-gradient()` はどちらも角度を扱うので、相性がよいものです。
```

<div></div>
```

#### CSS

```css
div {
  width: 100px;
  height: 100px;
  background: conic-gradient(
    hsl(360 100% 50%),
    hsl(315 100% 50%),
    hsl(270 100% 50%),
    hsl(225 100% 50%),
    hsl(180 100% 50%),
    hsl(135 100% 50%),
    hsl(90 100% 50%),
    hsl(45 100% 50%),
    hsl(0 100% 50%)
  );
  clip-path: circle(closest-side);
}
```

#### 結果

### 古い構文: カンマ区切りの値

歴史的な理由から、`hsl()` 関数はすべての値がカンマにより区切られた形式を受け付けます。

#### HTML

```html
<div class="space-separated"></div>
<div class="comma-separated"></div>
```

#### CSS

```css
div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.space-separated {
  background-color: hsl(0 100% 50% / 50%);
}

div.comma-separated {
  background-color: hsl(0, 100%, 50%, 50%);
}
```

#### 結果

### 古い構文: hsla()

古い `hsla()` 構文は `hsl()` の別名です。

#### HTML

```html
<div class="hsl"></div>
<div class="hsla"></div>
```

#### CSS

```css
div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.hsl {
  background-color: hsl(0 100% 50% / 50%);
}

div.hsla {
  background-color: hsla(0, 100%, 50%, 50%);
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4 # the-hsl-notation |

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

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

関連情報
----

* すべての色記法の一覧
* `<hue>` データ型
* 色選択ツール (MDN)
* Color picker (Lea Verou)


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

hwb()
=====

**`hwb()`** 関数記法は、指定された色を色相、白色度、黒色度による sRGB 色によって表現します。オプションのアルファ成分は、その色の透明度を表します。

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

構文
--

```css
hwb(194 0% 0%) /\* #00c3ff \*/
hwb(194 0% 0% / .5) /\* #00c3ff with 50% opacity \*/
```

### 値

* 関数記法: `hwb(H W B[ / A])`
* `H`
    + : 色相角を表す `<number>` または `<angle>`、またはキーワード `none`。この型の詳細は `<hue>` のリファレンスにあります。
* `W`, `B`
    + : `<percentage>` またはキーワード `none` であり、それぞれ白色度と黒色度を表します。これらは白と黒が混合される量を、 `0%` （白色度または黒色度なし）から `100%` （白色度または黒色度が最高）で指定します。
     `W + B = 100%` グレーの濃淡を定義します。 `W + B > 100%` である場合、 `W` および `B` はそれぞれ `W / (W + B)` および `B / (W + B)` で正規化されます。
* `A` 省略可
    + : `<alpha-value>` またはキーワード `none` です。 `1` は `100%` （完全に不透明）に対応します。

**メモ:** この関数記法は sRGB 値に直列化され、赤、緑、青の成分の値は直列化の際に丸められる可能性があります。

**メモ:** `none` の効果については色成分の欠落を参照してください。

### 形式文法
```

<hwb()> =
  hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<hue> =
  <number>  |
  <angle>

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

```

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4 # the-hwb-notation |

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

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

関連情報
----

* `<color>`: すべての色記法の一覧
* `<hue>`: 色の色相角を表すデータ型


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

oklch()
=======

**`oklch()`** 関数記法は、指定された色を Oklch 色空間で表現するものです。これは `oklab()` と同じ L 軸を持っていますが、極座標系の C （彩度）と H （色相）を使用します。

構文
--

```css
oklch(40.1% 0.123 21.57)
oklch(59.69% 0.156 49.77)
oklch(59.69% 0.156 49.77 / .5)
```

### 値

Functional notation: `oklch(L C H[ / A])`

`L`

`<number>` で `0` ～ `1` の範囲、 `<percentage>` で `0%` ～ `100%` の範囲、またはキーワード `none` であり、 CIE の明るさを指定します。ここで数値 `0` は `0%` （黒）に、数値 `1` は `100%` （白）に対応します。

`C`

`<number>`、`<percentage>`、またはキーワード値 `none` であり、ここで `0%` は `0` に、 `100%` は数値 `0.4` に対応します。これは彩度の指標です（おおよそ「色の量」を表します）。その有効な最小値は `0` で、最大値は理論的には無制限です（しかし実際には `0.5` を超えることはありません）。

`H`

`<number>`、`<angle>`、またはキーワード値 `none` であり、色相角を表します。この型の詳細は、 `<hue>` のリファレンスにあります。

`A` 省略可

`<alpha-value>` またはキーワード `none` です。 `1` は `100%` （完全に不透明）に対応します。

**メモ:** `none` の効果については色成分の欠落を参照してください。

### 形式文法
```

<oklch()> =
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )

<hue> =
  <number>  |
  <angle>

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

```

例
-

### 明度、彩度、色相の調整

次の例は、関数記法 `oklch()` の `L`（明度）、`C`（彩度）、`H`（色相）の値を変化させたときの効果を示しています。

#### HTML

```html
<div data-color="blue"></div>
<div data-color="blue-light"></div>

<div data-color="red"></div>
<div data-color="red-chroma"></div>

<div data-color="green"></div>
<div data-color="green-hue"></div>
```

#### CSS
```

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
```

```css
[data-color="blue"] {
  background-color: oklch(60% 0.4 240);
}
[data-color="blue-light"] {
  background-color: oklch(90% 0.4 240);
}

[data-color="red"] {
  background-color: oklch(100% 0.4 30);
}
[data-color="red-chroma"] {
  background-color: oklch(100% 0.3 40);
}

[data-color="green"] {
  background-color: oklch(60% 0.57 161);
}
[data-color="green-hue"] {
  background-color: oklch(60% 0.57 181);
}
```

#### 結果

### 色のアルファ値の調整

 次の例は `lab()` 関数記法の `A`（アルファ）値を変化させたときの効果を示しています。
 `red` と `red-alpha` 要素は `#background-div` 要素に重なり、透明度の効果を示しています。
 `A` に `0.4` の値を与えると、色は 40% の不透明度になります。

#### HTML

```html
<div id="background-div">
  <div data-color="red"></div>
  <div data-color="red-alpha"></div>
</div>
```

#### CSS
```

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
#background-div {
  background-color: oklch(100% 0.57 217);
  width: 150px;
  height: 40px;
}
```

```css
[data-color="red"] {
  background-color: oklch(50% 0.5 20);
}
[data-color="red-alpha"] {
  background-color: oklch(50% 0.5 20 / 0.4);
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4 # ok-lab |

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

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

関連情報
----

* すべての色記法の一覧
* `<hue>` データ型
* A perceptual color space for image processing
* OKLCH in CSS


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

lab()
=====

**`lab()`** 関数記法は、指定された色を CIE L\*a\*b\* 色空間で表現する。 Lab は人間が見ることのできる色の範囲をすべて表します。

構文
--

```css
lab(29.2345% 39.3825 20.0664);
lab(52.2345% 40.1645 59.9971);
lab(52.2345% 40.1645 59.9971 / .5);
```

### 値

* 関数記法: `lab(L a b[ / A])`
* `L`
    + : `<number>` で `0` ～ `100` の範囲、 `<percentage>` で `0%` ～ `100%` の範囲、またはキーワード `none` であり、 CIE の明るさを指定します。ここで数値 `0` は `0%` （黒）に、数値 `100` は `100%` （白）に対応します。
* `a`
    + : `<number>` で `-125` ～ `125` の範囲、 `<percentage>` で `-100%` ～ `100%` の範囲、またはキーワード `none` であり、 CIELAB 色空間における `a` 軸上の距離（緑と赤の色合い）を指定します。
* `b`
    + : `<number>` で `-125` ～ `125` の範囲、 `<percentage>` で `-100%` ～ `100%` の範囲、またはキーワード `none` であり、 CIELAB 色空間における `b` 軸上の距離（青と黄の色合い）を指定します。
* `A` 省略可
    + : `<alpha-value>` またはキーワード `none` です。 `1` は `100%` （完全に不透明）に対応します。

**メモ:** 通常、 CSS でパーセント値が数値と等価である場合、 `100%` が数値 `1` と等しくなります。
 この場合は特別で、 `100%` は `L` 値では `100`、 `a` 値と `b` 値では `125` となります。

**メモ:** `none` の効果については色成分の欠落を参照してください。

### 形式文法
```

<lab()> =
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

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

```

例
-

### 明るさと色の軸を lab() で調整

次の例は、 `lab()` 関数の明度、 a 軸、 b 軸の値を変化させたときの効果を示しています。

#### HTML

```html
<div data-color="red"></div>
<div data-color="red-a"></div>

<div data-color="green"></div>
<div data-color="green-b"></div>

<div data-color="blue"></div>
<div data-color="blue-light"></div>
```

#### CSS
```

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
```

```css
[data-color="red"] {
  background-color: lab(100 125 125);
}
[data-color="red-a"] {
  background-color: lab(100 110 125);
}

[data-color="green"] {
  background-color: lab(75% -120 125);
}
[data-color="green-b"] {
  background-color: lab(75% -120 10);
}

[data-color="blue"] {
  background-color: lab(0 -120 -120);
}
[data-color="blue-light"] {
  background-color: lab(70 -120 -120);
}
```

#### 結果

### 透明度を lab() で調整

 次の例は `lab()` 関数記法の `A`（アルファ）値を変化させたときの効果を示しています。
 `red` と `red-alpha` 要素は `#background-div` 要素に重なり、透明度の効果を示しています。
 `A` に `0.4` の値を与えると、色は 40% の不透明度になります。

#### HTML

```html
<div id="background-div">
  <div data-color="red"></div>
  <div data-color="red-alpha"></div>
</div>
```

#### CSS
```

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
#background-div {
  background-color: lightblue;
  width: 150px;
  height: 40px;
}
```

```css
[data-color="red"] {
  background-color: lab(100 125 125);
}
[data-color="red-alpha"] {
  background-color: lab(100 125 125 / 0.4);
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4 # lab-colors |

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

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

関連情報
----

* `<color>` データ型: すべての色記法の一覧
* LCH colors in CSS: what, why, and how?
* Safari Technology Preview 122 release notes: `lab()` および `lch()` 色を含む


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

device-cmyk()
=============

**`device-cmyk()`** 関数記法は、機器依存の形で CMYK 色を表現するために使用します。シアン、マゼンタ、黄色、黒の成分を指定します。

この色に対する手法は、特定のプリンターで出力する素材を作成する際、特定のインクの組み合わせでの出力が分かっている場合に有益なものです。 CSS プロセッサーは色を近似させることができますが、最終的な結果は表示されたものと異なる形になる可能性があります。

構文
--

```css
device-cmyk(0 81% 81% 30%);
device-cmyk(0 81% 81% 30% / .5);
device-cmyk(0 81% 81% 30% / .5, rgb(178 34 34));
```

### 値

関数記法: `device-cmyk(C M Y K[ / A][, color])`

`<cmyk-component>` は 4 つの `<number>` または `<percentage>` の値で、 CMYK 色のシアン、マゼンタ、黄、黒の成分を指定します。

`/ <alpha-value>` （アルファ）は `<number>` で `0` から `1` の間、または `<percentage>` で `1` から `100%` （完全に不透明）の間で、この色の透明度（またはアルファチャネル）を表します。

`<color>` は、ユーザーエージェントが CMYK 色を RGB に変換する方法を知らない場合に使用する、オプションの代替値の `<color>` です。

`C`, `M`, `Y`, `K`

`<number>` または `<percentage>` の値で、 CMYK 色の成分であるシアン、マゼンタ、黄、黒の成分を指定します。

`A` 省略可

`<alpha-value>` またはキーワード `none` で、 `1` は `100%` （完全に不透明）に対応します。

`color` 省略可

オプションで、代替の `<color>` です。ユーザーエージェントが CMYK 色から RGB への変換方法を知らない場合に使用されます。

### 形式文法
```

<device-cmyk()> =
  <legacy-device-cmyk-syntax>  |
  <modern-device-cmyk-syntax>

<legacy-device-cmyk-syntax> =
  device-cmyk( <number>#{4} )

<modern-device-cmyk-syntax> =
  device-cmyk( <cmyk-component>{4} [ / [ <alpha-value> | none ] ]? )

<cmyk-component> =
  <number>      |
  <percentage>  |
  none

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

```

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 5 # device-cmyk |

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

この機能を実装しているブラウザーはありません。


CSS トランジションの使用 - CSS: カスケーディングスタイルシート

CSS トランジションの使用
==============

**CSS トランジション**は、 CSS プロパティが変化する際のアニメーションの速度を操作する手段を提供します。プロパティの変更を直ちに有効にするのではなく、プロパティの変更を一定期間にわたって発生させることを可能にします。例えば、ある要素の前景色を白色から黒色に変更した場合、通常は即座に前景色が替わります。 CSS トランジションを有効にすると、加速カーブに従った時間間隔で変更が行われ、その変化のすべてをカスタマイズすることができます。

2 つの状態間のトランジションを含むアニメーションは、開始状態と最終状態の間の状態がブラウザーによって暗黙的に定義されるため、*暗黙的なトランジション*と呼ばれることがあります。

![CSS トランジションは、初期状態と最終状態の間にある中間状態を描画することで、ユーザーにスムーズな遷移を見せるものです。](/ja/docs/Web/CSS/CSS_transitions/Using_CSS_transitions/transitionsprinciple.png)

CSS トランジションは、アニメーションを開始する場合 (*遅延*を設定することで)、トランジションをどの程度持続するか (*持続時間*を設定することによって)、およびトランジションをどのように実行するか (*タイミング関数*を定義することによって、例えば、直線的または最初は速く、最後に遅くなど) を、 (明示的にリストすることによって) アニメーションするためのプロパティを決定させます。

トランジション可能な CSS プロパティとは
----------------------

ウェブサイトの作成者はどのプロパティを、どのようにアニメーションさせるのかを定義できます。これにより複雑な遷移を起こすことが可能です。プロパティによってはアニメーションさせることに意味がない場合があるので、アニメーション可能なプロパティは限られています。

**メモ:** アニメーションさせることのできるプロパティは仕様改訂により変化しています。

**メモ:** `auto` の値はしばしばとても複雑になります。仕様書では開始値および終了値が `auto` の場合はアニメーションしないよう推奨しています。 Gecko を利用したものなど、一部のユーザーエージェントはこの要件を実装しており、 WebKit を利用したものなどではより制約が少なくなります。 `auto` でアニメーションを利用すると、ブラウザーやそのバージョンによって予測できない結果になる可能性があるため、避けるべきです。

トランジションの定義
----------

CSS トランジションは一括指定の `transition` プロパティを使用して制御されます。トランジションを設定する上で最も良い方法で、パラメータを列挙する数がずれてしまって、とってもイライラしながら CSS のデバッグを多大な時間を使って行うことを防いでくれます。

それぞれのトランジションコンポーネントに対しては以下のサブプロパティを用いてコントロールできます。

`transition-property`

トランジションを適用する CSS プロパティの名前を指定します。ここに指定したプロパティだけが、トランジションによりアニメーションします。通常、それ以外のプロパティの変更は即座に反映されます。

`transition-duration`

トランジションの実行にかかる所要時間を指定します。単一の値を指定すると、すべてのプロパティのトランジションの所要時間として適用されます。または複数の値を指定すると、プロパティごとにトランジションの所要時間として異なる値を指定することができます。

`transition-timing-function`

プロパティの中間の値を計算する方法を定義する関数を指定します。*タイミング関数*はトランジションの中間の値がどのように計算されるかを定義します。多くのタイミング関数は対応する関数のグラフを提供することで指定され、これは三次ベジェ関数を定義する 4 つの点で定義されます。 Easing Functions Cheat Sheet からイージングを選択することもできます。

`transition-delay`

プロパティが変化した時点から、トランジションが実際に始まるまでの待ち時間を定義します。

一括指定の CSS の構文は以下のように書きます。

```css
div {
  transition: <property> <duration> <timing-function> <delay>;
}
```

例
-

### 単純な例

この例では 4 秒間のフォントの大きさのトランジションを行い、ユーザーがマウスを要素上に移動してからアニメーション効果が始まるまで 2 秒間の遅延を行います。

```css
#delay {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

#delay:hover {
  font-size: 36px;
}
```

### 複数のアニメーションするプロパティの例
```

<body>
  <p>
    The box below combines transitions for: width, height, background-color,
    transform. Hover over the box to see these properties animated.
  </p>
  <div class="box">Sample</div>
</body>
```

#### CSS コンテンツ

```css
.box {
  border-style: solid;
  border-width: 1px;
  display: block;
  width: 100px;
  height: 100px;
  background-color: #0000ff;
  transition:
    width 2s,
    height 2s,
    background-color 2s,
    transform 2s;
}

.box:hover {
  background-color: #ffcccc;
  width: 200px;
  height: 200px;
  transform: rotate(180deg);
}
```

### プロパティ値のリストの長さが異なる場合

何れかのプロパティで、値のリストが他よりも短い場合、以下のように、他と一致するまで繰り返されます。

```css
div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}
```

This is treated as if it were:

```css
div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}
```

同様に、何れかのプロパティで値のリストが `transition-property` のリストよりも長い場合は切り詰められますので、以下の CSS のようになります。

```css
div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}
```

This gets interpreted as:

```css
div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}
```

### メニューのハイライトにトランジションを用いる

CSS の一般的な使い方として、メニューのアイテムにマウスポインターを乗せたときに、そのアイテムをハイライトさせることがあります。より魅力的な効果を出すためにトランジションを使うことは、簡単にできます。

まずは、 HTML でメニューを作成します。

```html
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact Us</a>
  <a href="#">Links</a>
</nav>
```

そして、メニューのルック＆フィールを実装するために CSS を作成します。関連のある部分を以下に示します。

```css
nav {
  display: flex;
  gap: 0.5rem;
}

a {
  flex: 1;
  background-color: #333;
  color: #fff;
  border: 1px solid;
  padding: 0.5rem;
  text-align: center;
  text-decoration: none;
  transition: all 0.5s ease-out;
}

a:hover,
a:focus {
  background-color: #fff;
  color: #333;
}
```

この CSS は、メニューの外見を決めています。また、要素が `:hover` および `:focus` の状態であるときに、背景色と前景色を変化させています。

JavaScript の例
-------------

**メモ:** 次のような場合の直後にトランジションを使用する場合は注意してください。

* `.appendChild()` を使用して DOM に要素を追加したとき
* 要素の `display: none;` プロパティを外したとき

この場合、初期の状態が発生せず、要素が常に最後の状態であるかのように扱われます。この制限を解決する簡単な方法は、トランジションを行いたい CSS プロパティを変更する前に、数ミリ秒の `window.setTimeout()` を適用することです。

### JavaScript の機能をスムーズにするためのトランジション

トランジションは、 JavaScript による機能に対して何も行うことなしに、よりスムーズにさせることができる素晴らしいツールです。以下の例をご覧ください。

```html
<p>Click anywhere to move the ball</p>
<div id="foo" class="ball"></div>
```

JavaScript を使用して、ある場所にボールを移動させる効果を作ることができます。

```js
var f = document.getElementById("foo");
document.addEventListener(
  "click",
  function (ev) {
    f.style.transform = "translateY(" + (ev.clientY - 25) + "px)";
    f.style.transform += "translateX(" + (ev.clientX - 25) + "px)";
  },
  false,
);
```

CSS により余分な努力をせずに、上記の効果をスムーズにさせることができます。単に要素へトランジションを追加すると、変化がスムーズに発生するようになります。

```css
.ball {
  border-radius: 25px;
  width: 50px;
  height: 50px;
  background: #c00;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 1s;
}
```

### トランジションの開始と完了の検出

`transitionend` イベントを使用することでで、アニメーションの実行が終了したことを検出することができます。これは `TransitionEvent` オブジェクトで、通常の `Event` オブジェクトに 2 つのプロパティを追加したものです。

`propertyName`

文字列で、トランジションが完了した CSS プロパティの名前を示します。

`elapsedTime`

浮動小数点値で、イベントが発行されてからトランジションが実行された時間を示します。この値は `transition-delay` の値に影響されません。

通常は、 `addEventListener()` メソッドを使用してこのイベントを監視することができます。

```js
el.addEventListener("transitionend", updateTransition, true);
```

トランジションの開始は `transitionrun` (遅延の前に発行) および `transitionstart` (遅延の後に発行) を使用して、同じ形で検出することができます。

```js
el.addEventListener("transitionrun", signalStart, true);
el.addEventListener("transitionstart", signalStart, true);
```

**メモ:** `transitionend` イベントは、要素に `display``: none` が適用されたりアニメーション中のプロパティの値が変更されたりして、トランジションが完了する前に中止された場合は発行されません。

仕様書
---

| Specification |
| --- |
| CSS Transitions  |

関連情報
----

* `TransitionEvent` インターフェイスと `transitionend` イベント
* CSS アニメーションの使い方


スクロールアンカリングの紹介 - CSS: カスケーディングスタイルシート

スクロールアンカリングの紹介
==============

ウェブのユーザーであれば、おそらくスクロールアンカリングが解決する問題をよく知っているはずです。速度の遅い接続で長いページを閲覧し、コンテンツを読むためにスクロールを始めるとします。一所懸命に読んでいる間に、ページの見ている部分が突然ジャンプしてしまうことがあります。これはコンテンツの上部に、大きな画像やその他の要素が読み込まれたことによって引き起こされます。

スクロールアンカリング (scroll anchoring) はブラウザーの機能で、ユーザーが既に文書の新しい部分にスクロールした後で、コンテンツが読み込まれたことでページ内容の移動が発生してしまう問題を解決するためのものです。

どのように動作するか
----------

スクロールアンカリングは、表示域 (viewport) 外で起こった変化に対し、スクロール位置を調整する機能です。つまり、文書内のスクロール位置が実際には変わっているのにもかかわらず、ユーザーが見ていた個所が表示域に留まり続けます。

スクロールアンカリングを有効にするには
-------------------

何もする必要はありません。この機能は、対応しているブラウザーでは既定で有効になっています。ほとんどの場合において、スクロールを固定することは望み通りでしょう。 — コンテンツが急に移動してしまうのは、誰にとっても使い勝手が悪いものです。

デバッグする必要がある場合
-------------

スクロールアンカリングを有効にしてページの動作がうまくいかない場合は、一部の `scroll` イベントリスナーがアンカーノードの動きを補うための余分なスクロールをうまく処理していないことが原因かもしれません。

Firefox では `about:config` で `layout.css.scroll-anchoring.enabled` を `false` に変更してスクロールアンカリングを無効にすることで、問題が解決するかどうかを確認できます。

解決した場合は、Firefox がアンカーとして使用しているノードを `layout.css.scroll-anchoring.highlight` スイッチで確認できます。これにより、アンカーノードの上に紫色のオーバーレイが表示されます。

あるノードがアンカーとして適切でないと思われる場合は、以下のように `overflow-anchor` を使用してそのノードを除外することができます。

無効にする必要がある場合は
-------------

仕様書では、新しいプロパティである `overflow-anchor` を追加し、スクロールアンカリングを文書全体、もしくは一部で無効にできるようにしています。基本的には、自動的に有効にされたスクロールアンカリングをオプトアウトする仕組みです。

指定できる値は、 `auto` または `none` のどちらかです。

* `auto` が初期値です。対応しているブラウザーでは、スクロールアンカリングの動作をします。そして、コンテンツの急な移動も少なくなります。
* `none` は、文書全体、もしくは一部でスクロールアンカリングを明示的にオプトアウトするための値です。

文書全体でスクロールアンカリングを無効にするには、`<body>` 要素にこのプロパティを指定してください。

```css
body {
  overflow-anchor: none;
}
```

文書の特定の部分でスクロールアンカリングを無効にしたい場合は、そのコンテンツを囲む要素に `overflow-anchor: none` を指定してください。

```css
.container {
  overflow-anchor: none;
}
```

**メモ:** 仕様書にも書かれていますが、スクロールアンカリングが無効にされた場合、その子孫要素から再び有効にすることはできません。例えば、スクロールアンカリングが文書全体で無効にされた際、文書内の一部に `overflow-anchor: auto` を指定しても、その部分でスクロールアンカリングは動作しません。

### 抑制トリガー

仕様書では、問題になる可能性がある場合はその場でスクロールアンカリングを無効にする、抑制トリガー (*suppression triggers*) についても説明しています。スクロールアンカリングを指定したノードもしくはその祖先でトリガーが発生した場合、スクロールアンカリングが抑制されます。

抑制トリガーとなるのは、次のプロパティの計算値 (computed value) が変更された場合です。

* `top`, `left`, `right`, `bottom`
* `margin`, `padding`
* `width` もしくは `height` に関連するプロパティすべて
* `transform`

さらに、スクロールボックス内の任意の場所で `position` を変更した場合もスクロールアンカリングが無効になります。

**メモ:** バグ Firefox バグ 1584285 で、Firefox Nightly に `layout.css.scroll-anchoring.suppressions.enabled` フラグが追加され、これらのトリガーを無効化できるようになりました。

その他の解説
------

* Explainer document on the WICG site
* Scroll anchoring for web developers on the Chromium blog
* Implement a pin-to-bottom scrolling element using scroll anchoring
ブラウザーの互換性
---------

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

ブラウザーでスクロールアンカリングが利用できるかどうかを検査する必要がある場合は、機能クエリーを使用して `overflow-anchor` プロパティに対応しているかどうかを検査してください。


ブロック、絶対配置、表レイアウトのブロック配置 - CSS: カスケーディングスタイルシート

ブロック、絶対配置、表レイアウトのブロック配置
=======================

ボックス配置仕様書は、様々なレイアウト方式でどのように配置が動作するかを詳説しています。このページでは、ボックス配置は浮動、位置指定、表要素を含むボックスレイアウトのレイアウトでどのように動作するかを明らかにします。このページはブロックレイアウトとボックス配置に固有のことを詳説するため、様々なレイアウト方式に共通のボックス配置の共通機能について説明している、中心となるボックス配置ページを併せて読んでください。

**メモ:** 執筆時点 (2018 年 5 月) では、ブロックレイアウトのボックス配置プロパティへの対応は実際にはありません。この文書では完全性を保つために、仕様がこれらのプロパティをどのように実装することを期待しているかを詳細に説明していますが、仕様やブラウザーの実装が発展するにつれて変更される可能性があります。

align-content と justify-content
-------------------------------

`justify-content` プロパティは、ブロックコンテナーや表のセルには適用されません。

`align-content` プロパティは、ブロック軸に適用され、ボックスの内容物をそのコンテナー内で整列させるためのものです。`space-between`、`space-around`、`space-evenly` などの内容物配分方法が要求されている場合は、内容物が 1 つの配置対象物として扱われるため、代替配置が使用されます。

justify-self
------------

`justify-self` プロパティは、インライン軸上で包含ブロックの内部にアイテムを配置するために使用されます。

このプロパティは浮動要素や表のセルには適用されません。

align-self
----------

`align-self` プロパティは、ブロックレベルボックスには (浮動要素を含め) 適用されません。ブロック軸に複数のアイテムがあるからです。表のセルにも適用されません。

### 絶対配置要素

配置コンテナーは、上、左、下、右のオフセット値を考慮して位置指定されたブロックです。normal キーワードは `stretch` に解決されますが、その位置指定アイテムが置換要素である場合は `start` に解決されます。

現在のレイアウト方法での整列
--------------

現在、ブラウザーはブロックレイアウトでのボックス配置に対応していないため、整列には既存の配置方法のいずれかを使用するか、コンテナー内の 1 つのアイテムでもフレックスボックスで指定された配置プロパティを使用するためにフレックスアイテムにするかのいずれかを選択できます。

フレックスボックスが導入される前のブロックの水平方向の整列は、ブロックに auto のマージンを設定する方法が一般的でした。`margin` を `auto` に設定すると、その次元で利用可能なすべての空間を吸収するため、左右のマージンを自動に設定すると、ブロックを中央に配置することができます。

```css
.container {
  width: 20em;
  margin-left: auto;
  margin-right: auto;
}
```

表レイアウトでは、`vertical-align` プロパティを使用して、セルの内容をそのセル内で配置させることができます。

多くの利用場面では、ブロックコンテナーをフレックスアイテムに変えることで、求めていた配置機能が得られます。以下の例では、アイテムが 1 つだけ入っているコンテナーを、配置プロパティを使用できるようにするためにフレックスコンテナーに変えています。

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

### CSS プロパティ

* `justify-content`
* `align-content`
* `justify-self`
* `align-self`
### 用語集の項目

* 配置対象物
* 配置コンテナー
* 代替配置


グリッドレイアウトでのボックス配置 - CSS: カスケーディングスタイルシート

グリッドレイアウトでのボックス配置
=================

ボックス配置の仕様書では、さまざまなレイアウト方式で配置がどのように働くかを詳述しています。このページでは、 CSS グリッドレイアウトにおいてボックス配置がどのように働くかを探ります。

このページの目的は、CSS グリッドレイアウトとボックス配置として定められた事柄を詳述するためのものですので、ボックス配置の様々なレイアウト方式の間で共通の機能について詳述した、主となるボックス配置ページを合わせてお読みください。

基本的な例
-----

このグリッドレイアウトの例では、固定幅のトラックをインライン (主) 軸にレイアウトした後、グリッドコンテナーに余分な空間があります。この空間を `justify-content` で分配しています。ブロック (交差) 軸では、グリッド領域内のアイテムの配置を `align-items` で制御しています。最初のアイテムは、グループに設定された `align-items` の値を、`align-self` を `center` に設定することでオーバーライドしています。

グリッド軸
-----

2 次元のレイアウト手法であるグリッドレイアウトでは、アイテムを配置する軸が常に 2 つあります。これを実現するために、すべてのボックス配置プロパティを利用することができます。

インライン軸は、使用されている書字方向において、文中の単語が走る方向に対応する軸です。したがって、英語やアラビア語のような横書きの言語では、インラインの方向は水平方向になります。縦書きの場合は、インライン軸は縦方向になります。

![](/ja/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout/inline_axis.png)

インライン軸上に配置するには `justify-` で始まるプロパティ、`justify-content`、`justify-items`、`justify-self` を使用します。

ブロック軸は、ブロックがページの下に表示される方向にインライン軸と交差しています。例えば、英語の段落は縦に 1 つずつ表示されます。つまり、これがブロック軸です。

ブロック軸上でものを揃えるには、`align-` で始まるプロパティ、`align-content`、`align-items`、`align-self` を使用します。

![](/ja/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout/block_axis.png)

自己配置
----

* `justify-self`
* `align-self`
* `place-self`
* `justify-items`
* `align-items`
* `place-items`

これらのプロパティは、アイテムが配置されたグリッド領域内に整列させるためのものです。`align-items` および `justify-items` プロパティはグリッドコンテナーに適用され、グループとして `align-self` および `justify-self` プロパティを設定します。つまり、すべてのグリッドアイテムの配置を一度に設定し、異なる配置が必要なアイテムは、個々のグリッドアイテムのルールに `align-self` または `justify-self` プロパティを適用してオーバーライドすることができるのです。

`align-self` および `justify-self` の初期値は `stretch` で、アイテムはグリッド領域全体に伸縮します。この規則の例外は、アイテムが固有のアスペクト比を持っている場合、例えば画像などです。この場合、画像が歪まないように、アイテムは両方の次元で `start` に揃えられます。

内容物の配置
------

* `justify-content`
* `align-content`
* `place-content`

これらのプロパティは、グリッドトラックを分配するための空間が余っている場合に、トラックの位置を調整するためのものです。このシナリオは、定義したトラックの合計がグリッドコンテナーの幅の合計よりも小さい場合に発生します。

gap と古い grid-gap プロパティ
----------------------

* `row-gap`
* `column-gap`
* `gap`

グリッド仕様書は、もとは `grid-row-gap`、`grid-column-gap`、`grid-gap` の各プロパティの定義がありました。これらはボックス配置仕様書に移され、`row-gap`、`column-gap`、`gap` と改名されました。これによって、他のレイアウト方式でもアイテム間の溝に使用することができるようになりました。

更新されたプロパティは、まだすべてのブラウザーには実装されていません。したがって、グリッドレイアウトで gap のプロパティを使用する場合は、完全な互換性を確保するために、`grid-row-gap`、`grid-column-gap`、`grid-gap` の各バージョンを使用する必要があります。ベンダー接頭辞と同じように、両方を使用してプロパティを重複利用することもできます。

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

### CSS プロパティ

* `justify-content`
* `align-content`
* `place-content`
* `justify-items`
* `align-items`
* `place-items`
* `justify-self`
* `align-self`
* `place-self`
* `row-gap`
* `column-gap`
* `gap`
### 用語集の項目

* 交差軸
* 主軸
ガイド
---

* グリッドレイアウトのボックス配置
外部リソース
------

* Box alignment cheatsheet
* CSS Grid, Flexbox and Box Alignment
* Thoughts on partial implementations of Box Alignment


段組みレイアウトでのボックス配置 - CSS: カスケーディングスタイルシート

段組みレイアウトでのボックス配置
================

ボックス配置仕様書では、さまざまなレイアウト方式で配置がどのように働くかを詳述しています。このページでは、段組みレイアウトのコンテキストにおいてボックス配置がどのように働くかを探ります。このページとしての目的は、段組みレイアウトとボックス配置として定められた事柄を詳述するためのものですので、ボックス配置の様々なレイアウト方式の間で共通の機能について詳述した、主となるボックス配置ページを合わせてお読みください。

段組みレイアウトでは、配置コンテナーは段組みコンテナーのコンテンツボックスです。配置対象物は段ボックスです。段組みレイアウトに適用するプロパティは以下に説明する通りです。

**メモ:** 段組みレイアウトはボックス配置仕様書に先立つものです。そしてここに挙げたプロパティは、段組みレイアウトのために設定されたものであっても、ブラウザーが対応していないことがあります。

align-content と justify-content
-------------------------------

`align-content` プロパティはブロック軸に、 `justify-content` はインライン軸に適用されます。段に追加された空間は配分に使用され、段間のすき間に追加されるため、段間は `column-gap` プロパティで指定された寸法よりも大きくなることがあります。

`justify-content` に `normal` または `stretch` 以外の値を使用すると、 `column-width` が指定された段組みコンテナーに表示し、残りの余白は justify-content の値によって配分されます。

column-gap
----------

段組みレイアウト仕様書の早期の版では、 `column-gap` プロパティが定義されていましたが、ボックス配置では他のレイアウト方式の gap プロパティと統合されました。他のレイアウト方式では、 column-gap の初期値を 0 として扱うのに対し、段組みレイアウトでは、一般に段間にすき間がないようにすることはないでしょうから、 1em として扱うようになっています。

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

### CSS プロパティ

* `justify-content`
* `align-content`
* `column-gap`
### 用語集の項目

* 配置対象物
* 配置コンテナー
* 代替配置


フレックスボックスでのボックス配置 - CSS: カスケーディングスタイルシート

フレックスボックスでのボックス配置
=================

ボックス配置の仕様書では、さまざまなレイアウト方式で配置がどのように働くかを詳述しています。このページでは、フレックスボックスのコンテキストにおいてボックス配置がどのように働くかを探ります。このページの目的は、フレックスボックスとボックス配置として定められた事柄を詳述するためのものですので、ボックス配置の様々なレイアウト方式の間で共通の機能について詳述した、主となるボックス配置ページを合わせてお読みください。

基本的な例
-----

この例では、3 つのフレックスアイテムが `justify-content` を使用して主軸に、 `align-items` を使用して交差軸に配置されます。最初のアイテムはグループに対して設定された `align-items` の値を上書きし、 `align-self` で `center` に設定しています。

軸と flex-direction
-----------------

フレックスボックスは文書の書字方向を尊重しますので、英語の場合で `justify-content` が `flex-end` に設定されていた場合、アイテムをフレックスコンテナーの末尾に配置します。 `flex-direction` が `row` に設定されていた場合、この配置はインライン方向になります。

しかし、フレックスボックスでは `flex-direction` を `column` に設定することで、主軸を変更することができます。この場合、 `justify-content` はアイテムをブロック方向に配置します。したがって、フレックスボックスでは主軸と交差軸について次のように考えると最も簡単です。

* 主軸 = `flex-direction` で設定された向き = `justify-content` で配置
* 交差軸 = 主軸と交差 = `align-content`, `align-self`/`align-items` で配置
### 主軸の配置

* `justify-content`
### 交差軸の配置

* `align-self`
* `align-items`
* `align-content`
### フレックスボックスには justify-self はない

主軸では、フレックスボックスはコンテンツをグループとして扱います。アイテムをレイアウトするために必要な空間の大きさが計算され、残りの空間は配分に利用されます。`justify-content` プロパティは、どのように残りの領域を使用するかを制御します。`justify-content: flex-end` に設定すると、余分な領域はアイテムの前に配置され、`justify-content: space-around` に設定すると、その大きさアイテムの両側に配置される、などです。

つまり、常にアイテムのグループ全体が動き回るよう配分されるため、`justify-self` プロパティはフレックスボックスでは意味を持ちません。

交差軸では、フレックスコンテナーのその方向に余白が追加され、単一のアイテムが始点と終点に動く可能性があるため、 `align-self` は意味を持ちます。

alignment および auto のマージン
------------------------

`justify-self` プロパティが必要であると考える可能性があるフレックスボックスの特定の利用場面があります。これは、おそらく分割ナビゲーションパターンを作成するために、一連のフレックスアイテムを分割したい場合です。この利用場面では、マージンに `auto` を使用することができます。 `auto` に設定されたマージンは、その方向で利用可能な領域をすべて吸収します。これが auto のマージンでブロックを中央揃えしたときの動作です。左右のマージンを `auto` に設定すると、ブロックの両側が利用可能なスペースをすべて利用しようとするので、ボックスは中央に配置されます。

開始点に配置された一連のフレックスアイテムのうち、1 つのアイテムで `margin` を `auto` に設定することで、分割ナビゲーションを作成できます。これは、フレックスボックスと alignment プロパティでうまくいきます。 auto のマージンに使用できる領域がなくなると、アイテムは他のすべてのフレックスアイテムと同じように動作し、空間に収まるように縮小します。

`gap` プロパティ
-----------

* `row-gap`
* `column-gap`
* `gap`
### アイテム間における固定幅の間隔の作成

主軸では、`column-gap` プロパティは兄弟アイテムの間に固定幅の間隔を作成します。

交差軸では、`row-gap` プロパティは、隣接するフレックス行の間隔を作成するので、この効果を得るには `flex-wrap` を `wrap` に設定する必要があります。

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

### CSS プロパティ

* `justify-content`
* `align-content`
* `place-content`
* `justify-items`
* `align-items`
* `place-items`
* `align-self`
* `row-gap`
* `column-gap`
* `gap`
### 用語集の項目

* 交差軸
* 主軸
ガイド
---

* フレックスコンテナー内のアイテムの配置
外部リソース
------

* Box alignment cheatsheet
* CSS Grid, Flexbox and Box Alignment
* Thoughts on partial implementations of Box Alignment


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

座標系
===

グラフィックのコンテキストでピクセルの位置を指定する場合（ちょうど代数学で座標系を指定する場合と同様）、その位置はコンテキスト内の固定点を基準として定義されます。この固定点は原点と呼ばれています。位置は、コンテキストの各次元に沿った原点からのピクセル単位のオフセットで指定されます。

このガイドでは、 CSS オブジェクトモデルで使われる標準的な座標系を説明します。これらは一般に、原点がどこにあるかという点でのみ異なっています。

座標軸
---

ウェブ技術で使われる座標系では、慣例として水平方向のオフセットを *X 座標*と呼び、負の値は原点より左に、正の値は原点より右に位置することを示します。*Y 座標*は垂直方向のオフセットを指定し、負の値は原点より上、正の値は原点より下にあることを示します。

ウェブ上では、既定の原点は与えられたコンテキストの左*上*隅です（正の Y 座標の値は原点より下になります）。これは、ほとんどの数学的モデルが原点を左*下*隅に置いており、正の Y 座標の値が原点よりも上を示すのとは異なることに注意してください。

3つ目の次元を用いてオブジェクトを前から後ろに重ねる場合、 Z 軸を使用します。 Z 軸は、視聴者から画面の表面へと向かいます。CSS の z-index 属性は、位置を指定した要素がこの軸のどこに位置するかに影響し、見る人から遠ざかったり近づいたりする効果を与えます。

**メモ:** 実際には、これらの座標系の定義や方向は、 `transform` などの CSS プロパティを使って変更することができます。しかし、ここでは標準的な座標系についてだけ説明します。

標準 CSSOM 座標系
------------

 CSS オブジェクトモデルで使用する 4 つの標準座標系があります。
 主要な座標系を支援するために、以下の図はビューポートの外にスクロールされたコンテンツを含むブラウザーウィンドウを持つモニターを表示させています。
 ビューポートの外にスクロールされたページコンテンツは、「ページ」座標の元がどこにあるかを示すために、ブラウザーウィンドウの上に半透過率で表示されています。
 「クライアント」、「ページ」、「ビューポート」座標系の原点が強調表示されています。

![ビューポートの外側にコンテンツを含むブラウザーウィンドウを持つコンピューターモニターの図。ラベルは、ページ、画面、ビューポート座標の元を表示させます。](/ja/docs/Web/CSS/CSSOM_view/Coordinate_systems/css-coords.svg)

### オフセット

「オフセット」モデルを用いて指定される座標は、検査される要素またはイベントが発生した要素の左上隅を使用します。

例えば、マウスイベントが発生すると、イベントの `offsetX` と `offsetY` 属性で指定されたマウスの位置は、イベントを配信したノードの左上の角に相対的に示されます。原点は `padding-left` と `padding-top` によって指定された距離だけ内側に置かれます。

### ビューポート

「ビューポート」（または「クライアント」）座標系は、イベントが発生したビューポートまたは閲覧コンテキストの左上隅を原点として使用します。これは文書が表示される表示領域全体です。

 例えばデスクトップコンピューターでは、 `MouseEvent.clientX` と `MouseEvent.clientY` プロパティは、イベント発生時のマウスカーソルの位置を、 `window` の左上角からの相対位置で示します。
 スタイラスやポインターを使用している場合、タッチイベントにおける `Touch.clientX` と `Touch.clientY` の座標は同じ原点からの相対座標です。

ウィンドウの左上隅は、文書の内容やスクロールの有無に関わらず、常に (0, 0) です。言い換えれば、文書をスクロールすると、文書内の任意の位置のビューポート座標が変化します。

### ページ

 「ページ」座標系は、レンダリングされた `Document` 全体の左上隅からの相対ピクセル位置を与えます。
 つまり、文書内の要素のこの点は、レイアウト変更によって要素が移動しない限り、ユーザーが文書内を水平または垂直にスクロールしても同じ座標になります。

 マウスイベントの `pageX` と `pageY` 属性は、イベントが発生した時のマウスの位置を、文書の左上隅を基準として提供するものです。
 タッチイベントにおける `Touch.pageX` と `Touch.pageY` の座標は同じ原点からの相対座標です。

### スクリーン

 最後に、「スクリーン」モデルについて説明します。これは、ユーザーの画面空間の左上を原点とするものです。
 この座標系の各点は、単一の論理ピクセルを表しますので、値は各軸に沿っ て整数値で増加したり減少したりします。
 文書内の指定された点の位置は、例えば格納されているウィンドウが移動された場合や、ユーザーの画面形状が変更された場合（ディスプレイの解像度が変更された場合や、システムにモニターが追加・除去された場合）などに変化します。
 `MouseEvent.screenX` と `MouseEvent.screenY` プロパティは、画面の原点を基準としたマウスイベントの位置の座標を示します。
 タッチイベントにおける `Touch.screenX` と `Touch.screenY` の座標は同じ原点からの相対座標です。

例
-

 要素内のマウス座標をログ出力する例を見ていきましょう。
 マウスが内側のボックスに入ったり、内側を移動したり、内側から出たりするたびに、利用できる 4 つのシステムのそれぞれで現在のマウス座標をログ出力することで、イベントが処理されます。

### JavaScript

 JavaScript では、コードは `addEventListener()` を呼び出して、 inner ボックスに `mouseenter`、`mousemove`、`mouseleave` のイベントハンドラーを設定します。
 それぞれのイベントに対して `setCoords()` 関数を呼び出して、`<p>` 要素の内部テキストに各システムの座標を設定しています。

```js
const log = document.querySelector(".log");
const inner = document.querySelector(".inner");

function setCoords(e) {
  log.innerText = `
 オフセット X/Y: ${e.screenX}, ${e.screenY}
 ビューポート X/Y: ${e.clientX}, ${e.clientY}
 ページ X/Y: ${e.pageX}, ${e.pageY}
 スクリーン X/Y: ${e.screenX}, ${e.screenY}`;
}

inner.addEventListener("mousemove", setCoords);
inner.addEventListener("mouseenter", setCoords);
inner.addEventListener("mouseleave", setCoords);
```

### HTML

HTML は `"log"` クラスを持つ `<p>` を収めており、マウスイベントのデータを表示します。

```html
<div class="outer">
  <div class="inner">
    <p class="log">この部分にマウスオーバーすると座標が表示されます</p>
  </div>
</div>
```

### CSS

 コンテンツを含むボックスのクラス `"outer"` は、コンテンツをスクロールさせたときのマウス座標の影響を見るために、意図的に幅を広くしています。
 `"inner"` の段落はマウスイベントを記録する場所です。

```css
.outer {
  width: 1000px;
}

.inner {
  font-family: monospace;
  position: relative;
  width: 500px;
  height: 150px;
  top: 25px;
  left: 100px;
  background-color: darkblue;
  color: white;
  cursor: crosshair;
  user-select: none;
}

.log {
  position: relative;
  width: 100%;
  text-align: center;
}
```

### 結果

この結果を実際に見てみましょう。青いボックスの中をマウスで移動しながら、マウスの X 座標と Y 座標の値がさまざまな座標系で変化する様子をご覧ください。

関連情報
----

* CSS 座標変換の使用: 座標系を変更する方法
* マウスイベントの座標:
    + `MouseEvent.offsetX` と `MouseEvent.offsetY`
    + `MouseEvent.clientX` と `MouseEvent.clientY`
    + `MouseEvent.pageX` と `MouseEvent.pageY`
    + `MouseEvent.screenX` と `MouseEvent.screenY`
* `タッチイベント`の座標:
    + `Touch.clientX` と `Touch.clientY`
    + `Touch.pageX` と `Touch.pageY`
    + `Touch.screenX` と `Touch.screenY`


CSS 座標変換の使用 - CSS: カスケーディングスタイルシート

CSS 座標変換の使用
===========

**CSS 座標変換** (CSS transforms) は、座標空間を編集することで、通常の文書フローを混乱させずに影響下にあるコンテンツの形状や位置を変えることができます。このガイドは座標変換の使用についての解説を行ないます。

CSS 座標変換は、アフィン線形変換を HTML 要素に対して適用する一連の CSS プロパティによって実現されます。座標変換には、回転 (rotation)、歪め (skewing)、変倍 (scaling)、平行移動 (translation) などがあり、平面と 3D 空間の両方で行われます。

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

CSS 座標変換のプロパティ
--------------

CSS 座標変換の定義に使われる主なプロパティが 2 つあります。 `transform` （または独立した `translate`, `rotate`, `scale` の各プロパティ）と `transform-origin` です。

`transform-origin`

原点位置を指定します。既定では、これは要素の中央ですが、移動することができます。特定の点を引数として必要とする回転、拡大縮小や傾斜などの座標変換で使用されます。

`transform`

要素に適用する座標変換を指定します。座標変換の空白区切りのリストで、合成操作の要求された順番で適用されます。座標変換の合成は右から左の順に適用されます。

例
-

これが座標変換前の MDN ロゴの画像です。

![MDN ロゴ](/ja/docs/Web/CSS/CSS_transforms/Using_CSS_transforms/logo.png)

### 回転

ここでは MDN ロゴを、左下の角から 90 度回転させます。

```html
<img
 style="rotate: 90deg;
 transform-origin: bottom left;"
 src="logo.png"
 alt="MDN ロゴ" />
```

### 歪めと平行移動

この例は div 要素を 10 度歪め、 X 軸に沿って 150 ピクセル平行移動します。

```html
<img
 style="transform: skewX(10deg) translateX(150px);
 transform-origin: bottom left;"
 src="logo.png"
 alt="MDN logo" />
```

3D 特有の CSS プロパティ
----------------

立体空間で CSS 座標変換 を行うには、もう少し複雑になります。視点を与えて 3D 空間の環境設定を行うことから始める必要があり、それから 2D の要素がその空間でとる挙動を設定しなければなりません。

### 視点

設定する最初の要素は視点 (perspective) です。視点は 3D の印象を与えるものです。見る人から遠ざかるほど、ものが小さくなります。

#### 視点の設定

この例は様々な位置に視点が設定された立方体を表示します。どのように立方体が早く縮まるかは、 `perspective` プロパティで定義されます。小さい値ほど、視点は近くなります。

##### HTML

以下の HTML は、４つの同じボックスのコピーを、様々な値の視点を設定して作成します。

```html
<table>
  <tbody>
    <tr>
      <th><code>perspective: 250px;</code></th>
      <th><code>perspective: 350px;</code></th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <div class="cube pers250">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
      <td>
        <div class="container">
          <div class="cube pers350">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>perspective: 500px;</code></th>
      <th><code>perspective: 650px;</code></th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <div class="cube pers500">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
      <td>
        <div class="container">
          <div class="cube pers650">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
```

##### CSS

様々な距離の遠近法を設定するために使用することができる CSS のクラスです。コンテナーボックスや立方体自身、それぞれの面のためのクラスも含みます。

```css
/\* さまざまな perspective の値のためのショートハンドクラス \*/
.pers250 {
  perspective: 250px;
}

.pers350 {
  perspective: 350px;
}

.pers500 {
  perspective: 500px;
}

.pers650 {
  perspective: 650px;
}

/\* コンテナーの div、立方体の div、面の一般的な設定 \*/
.container {
  width: 200px;
  height: 200px;
  margin: 75px 0 0 75px;
  border: none;
}

.cube {
  width: 100%;
  height: 100%;
  backface-visibility: visible;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
}

.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}

/\* 方向に基づいてそれぞれの面を設定 \*/
.front {
  background: rgba(0, 0, 0, 0.3);
  transform: translateZ(50px);
}

.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(196, 0, 196, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

/\* テーブルの見栄えをよくする \*/
th,
p,
td {
  background-color: #eeeeee;
  padding: 10px;
  font-family: sans-serif;
  text-align: left;
}
```

##### 結果

二つ目の設定要素は見る人の位置で、 `perspective-origin` プロパティを使います。既定では視点は見る人の中央に合わせられますが、いつも妥当であるとは限りません。

#### 視点の変更

この例は主要な `perspective-origin` 値で立方体を表示します。

##### HTML

```html
<section>
  <figure>
    <figcaption><code>perspective-origin: top left;</code></figcaption>
    <div class="container">
      <div class="cube potl">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: top;</code></figcaption>
    <div class="container">
      <div class="cube potm">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: top right;</code></figcaption>
    <div class="container">
      <div class="cube potr">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: left;</code></figcaption>
    <div class="container">
      <div class="cube poml">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: 50% 50%;</code></figcaption>
    <div class="container">
      <div class="cube pomm">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: right;</code></figcaption>
    <div class="container">
      <div class="cube pomr">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: bottom left;</code></figcaption>
    <div class="container">
      <div class="cube pobl">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: bottom;</code></figcaption>
    <div class="container">
      <div class="cube pobm">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: bottom right;</code></figcaption>
    <div class="container">
      <div class="cube pobr">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: -200% -200%;</code></figcaption>
    <div class="container">
      <div class="cube po200200neg">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: 200% 200%;</code></figcaption>
    <div class="container">
      <div class="cube po200200pos">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: 200% -200%;</code></figcaption>
    <div class="container">
      <div class="cube po200200">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>
</section>
```

##### CSS

```css
/\* perspective-origin の値（例ごとに異なる） \*/
.potl {
  perspective-origin: top left;
}
.potm {
  perspective-origin: top;
}
.potr {
  perspective-origin: top right;
}
.poml {
  perspective-origin: left;
}
.pomm {
  perspective-origin: 50% 50%;
}
.pomr {
  perspective-origin: right;
}
.pobl {
  perspective-origin: bottom left;
}
.pobm {
  perspective-origin: bottom;
}
.pobr {
  perspective-origin: bottom right;
}
.po200200neg {
  perspective-origin: -200% -200%;
}
.po200200pos {
  perspective-origin: 200% 200%;
}
.po200200 {
  perspective-origin: 200% -200%;
}

/\* コンテナーの div、立方体の div、面の一般的な設定 \*/
.container {
  width: 100px;
  height: 100px;
  margin: 24px;
  border: none;
}

.cube {
  width: 100%;
  height: 100%;
  backface-visibility: visible;
  perspective: 300px;
  transform-style: preserve-3d;
}

.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}

/\* 方向に基づいてそれぞれの面を設定 \*/
.front {
  background: rgba(0, 0, 0, 0.3);
  transform: translateZ(50px);
}
.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
}
.right {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}
.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}
.top {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}
.bottom {
  background: rgba(196, 0, 196, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

/\* レイアウトの見栄えをよくする \*/
section {
  background-color: #eee;
  padding: 10px;
  font-family: sans-serif;
  text-align: left;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
```

##### 結果

ここまで行えば、 3D 空間に要素を配置することができます。

関連情報
----

* CSS の `transform` プロパティおよび CSS `<transform-function>` データ型
* 独立した座標変換プロパティ: `translate`, `rotate`, `scale` （`skew` プロパティはありません）
* 端末の向きと 3D 座標変換の併用
* Intro to CSS 3D transforms (David DeSandro によるブログ記事)
* CSS Transform Playground (CSS 座標変換機能を視覚化するオンラインツール)


ボックス値からのシェイプ - CSS: カスケーディングスタイルシート

ボックス値からのシェイプ
============

シェイプを作るのに直接的な方法が、 CSS ボックスモデルの値を使用することです。この記事では、これを行う方法を説明します。

シェイプの値として許可されているボックス値は次の通りです。

* `content-box`
* `padding-box`
* `border-box`
* `margin-box`

`border-radius` の値にも対応しており、これはページに丸い縁を持った物を作ることができ、シェイプは作成されたシェイプに従うことができます。

CSS ボックスモデル
-----------

上に挙げた値は CSS ボックスモデルの様々な部分に対応します。 CSS のボックスにはコンテンツ、パディング、境界、マージンがあります。

![ボックスモデルはマージン、境界、パディング、コンテンツの各ボックスから成ります。](/ja/docs/Web/CSS/CSS_shapes/From_box_values/box-model.png)

シェイプにボックス値を使用することで、これらの値で定義された辺でコンテンツを折り返すことができます。以下の例で、コンテンツの様々な流れ方が分かるように、パディング、境界、マージンを持つ要素を使用しています。

### margin-box

`margin-box` は外側のマージンの縁と、要素の定義で `border-radius` を使用することで、シェイプの角の半径によって定義されます。

以下の例では、高さ、幅、背景色を設定した `<div>` である紫色の丸いアイテムが表示されます。 `border-radius` プロパティを使用して丸を作成しており、 `border-radius: 50%` と設定しています。要素にマージンがあるので、コンテンツは丸いシェイプに回り込み、マージンが適用されています。

### border-box

`border-box` の値は、境界の外側の縁で定義されるシェイプです。このシェイプは通常の、境界の外側におけるすべての角の丸め規則に従います。 CSS の `border` プロパティを使用していなくても、境界は存在します。この場合、境界は `padding-box` と同じになり、シェイプはパディングの縁の外側として定義されます。

次の例では、テキストが境界線によって作成された線に従うようになったのが分かります。境界寸法を変更すると、コンテンツがそれに従います。

### padding-box

`padding-box` の値は、パディングの縁に囲まれたシェイプを定義します。このシェイプは境界の内側におけるすべての角の丸め規則に従います。パディングがない場合、 `padding-box` は `content-box` と同じです。

### content-box

`content-box` の値は、コンテンツの外側の縁で囲まれたシェイプを定義します。このボックスにおけるそれぞれの角の丸めは、0または border-radius − border-width − padding より大きくなります。つまり、ここでは負の数を取ることはできません。

ボックス値を使用する場面
------------

シェイプを作成するのに、ボックス値を使用すると簡単ですが、これはよく対応されている `border-radius` プロパティを使用して定義することができる簡単なシェイプしか実現することができません。上記の使用例にあるような使い方の一つです。 border-radius を使用して円形のシェイプを作成し、それに沿って文字列をカーブさせます。

いくらかの面白い効果を作成することができますが、単純なテクニックしか使っていません。この章の最後の例で、左右に 2 つの浮動状態の要素を作成し、それぞれの文字列寄りの方向に対して、 border-radius を 100% に設定しています。

もっと複雑なシェイプについては、この章の他のガイドにあるように、基本シェイプのうちの一つを値として使用するか、画像からシェイプを定義するかする必要があります。