recursal/MDN huggingface dataset:
z-index なしの重ね合わせ
================

どの要素にも `z-index` プロパティが指定されていない場合、要素は以下の順序で（下から上に）重ね合わせられます。

1. ルート要素の背景と境界
2. 位置指定なしの子孫ブロック、 HTML 内での出現順
3. 位置指定ありの子孫要素、 HTML 内での出現順

位置指定要素、位置指定なしの要素についての説明は、位置の種類を参照してください。

`order` プロパティによってフレックスコンテナー (`flex`) の中の描画を「HTML の中での出現順」から変更したとき、重ね合わせコンテキストの順も同様に影響することを意識しておいて下さい。

例
-

以下の例では、 #1 から #4 までの要素が位置指定要素です。 #5 の要素は static であり、 HTML マークアップの中で後に来ていたとしても、他の 4 つの要素の下に描かれます。

### HTML


```html
<div id="abs1" class="absolute">
  <strong>DIV #1</strong><br />position: absolute;
</div>
<div id="rel1" class="relative">
  <strong>DIV #2</strong><br />position: relative;
</div>
<div id="rel2" class="relative">
  <strong>DIV #3</strong><br />position: relative;
</div>
<div id="abs2" class="absolute">
  <strong>DIV #4</strong><br />position: absolute;
</div>
<div id="sta1" class="static">
  <strong>DIV #5</strong><br />position: static;
</div>
```

### CSS


```css
strong {
  font-family: sans-serif;
}

div {
  padding: 10px;
  border: 1px dashed;
  text-align: center;
}

.static {
  position: static;
  height: 80px;
  background-color: #ffc;
  border-color: #996;
}

.absolute {
  position: absolute;
  width: 150px;
  height: 350px;
  background-color: #fdd;
  border-color: #900;
  opacity: 0.7;
}

.relative {
  position: relative;
  height: 80px;
  background-color: #cfc;
  border-color: #696;
  opacity: 0.7;
}

#abs1 {
  top: 10px;
  left: 10px;
}

#rel1 {
  top: 30px;
  margin: 0px 50px 0px 50px;
}

#rel2 {
  top: 15px;
  left: 20px;
  margin: 0px 50px 0px 50px;
}

#abs2 {
  top: 10px;
  right: 10px;
}

#sta1 {
  background-color: #ffc;
  margin: 0px 50px 0px 50px;
}
```

結果
--

関連情報
----

* 浮動ブロックの重ね合わせ: 浮動要素が重ね合わせでどのように扱われるか
* z-index の追加: `z-index` を使って既定の重ね合わせ変更する方法
* 重ね合わせコンテキスト: 重ね合わせコンテキストについてのメモ
* 重ね合わせコンテキストの例 1: 2 階層の HTML 構造で、最終階層の `z-index`
* 重ね合わせコンテキストの例 2: 2 階層の HTML 構造、全レベルの `z-index`
* 重ね合わせコンテキストの例 3: 3 階層の HTML 構造、第 2 階層の `z-index`
浮動要素の重ね合わせ
==========

浮動 (floating) 要素については、重ね合わせ順序が少し異なります。浮動要素は位置指定なしの要素と位置指定要素の間に配置されます。

1. ルート要素の背景と境界
2. 位置指定なしの子孫要素、 HTML 内での出現順
3. *浮動要素*
4. 位置指定ありの子孫要素、 HTML 内での出現順

位置指定要素、位置指定なしの要素についての説明は、位置指定の種類を参照してください。

**メモ:** 位置指定なしの要素（下記の例の DIV #4）の `opacity` の値を変更すると、その要素の背景と境界が、浮動要素や位置指定要素の上に飛び出し、おかしな結果になります。これは、仕様書の中で、 `opacity` の値を適用すると新しい重ね合わせコンテキストを作成するという、奇妙な部分によるものです（What No One Told You About Z-Index を参照してください）。

例
-

以下の例に見られるように、位置指定なしの要素 (DIV #4) の背景と境界は、完全に浮動要素の影響を受けませんが、内容は影響を受けます。この挙動は、上記のリストに規則を追加することで示すことができます。

1. ルート要素の背景と境界
2. 位置指定なしの子孫要素、 HTML 内での出現順
3. 浮動要素
4. *位置指定なしの子孫のインライン要素*
5. 位置指定ありの子孫要素、 HTML 内での出現順
### HTML


```html
<div id="abs1"><strong>DIV #1</strong><br />position: absolute;</div>

<div id="flo1"><strong>DIV #2</strong><br />float: left;</div>

<div id="flo2"><strong>DIV #3</strong><br />float: right;</div>

<br />

<div id="sta1"><strong>DIV #4</strong><br />no positioning</div>

<div id="abs2"><strong>DIV #5</strong><br />position: absolute;</div>

<div id="rel1"><strong>DIV #6</strong><br />position: relative;</div>
```

### CSS


```css
div {
  padding: 10px;
  text-align: center;
}

strong {
  font-family: sans-serif;
}

#abs1 {
  position: absolute;
  width: 150px;
  height: 200px;
  top: 10px;
  right: 140px;
  border: 1px dashed #900;
  background-color: #fdd;
}

#sta1 {
  height: 100px;
  border: 1px dashed #996;
  background-color: #ffc;
  margin: 0px 10px 0px 10px;
  text-align: left;
}

#flo1 {
  margin: 0px 10px 0px 20px;
  float: left;
  width: 150px;
  height: 200px;
  border: 1px dashed #090;
  background-color: #cfc;
}

#flo2 {
  margin: 0px 20px 0px 10px;
  float: right;
  width: 150px;
  height: 200px;
  border: 1px dashed #090;
  background-color: #cfc;
}

#abs2 {
  position: absolute;
  width: 150px;
  height: 100px;
  top: 80px;
  left: 100px;
  border: 1px dashed #990;
  background-color: #fdd;
}

#rel1 {
  position: relative;
  border: 1px dashed #996;
  background-color: #cff;
  margin: 0px 10px 0px 10px;
  text-align: left;
}
```

結果
--

関連情報
----

* z-index なしの重ね合わせ: 既定の重ね合わせ規則
* z-index の追加: `z-index` を使って既定の重ね合わせ変更する方法
* 重ね合わせコンテキスト: 重ね合わせコンテキストについてのメモ
* 重ね合わせコンテキストの例 1: 2 階層の HTML 構造で、最終階層の `z-index`
* 重ね合わせコンテキストの例 2: 2 階層の HTML 構造、全レベルの `z-index`
* 重ね合わせコンテキストの例 3: 3 階層の HTML 構造、第 2 階層の `z-index`
重ね合わせコンテキストの例 1
===============

解説
--

基礎的な例から始めましょう。ルートの重ね合わせコンテキストに、2 つの DIV (DIV #1 と DIV #3) があって、どちらも relative の位置指定がされていますが、 z-index プロパティの指定はありません。 DIV #1 の中に absolute の位置指定がされた DIV #2 があり、一方 DIV #3 の中には absolute の位置指定がされた DIV #4 があります。どちらも z-index プロパティの指定はありません。

唯一の重ね合わせコンテキストはルート要素にあります。 z-indexe がなければ要素は出現した順に重なります。

![重ね合わせコンテキストの例 1](/ja/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1/understanding_zindex_05a.png)

DIV #2 に正の (ゼロでなく auto でもない) z-index 値が代入されれば、他のどの DIV よりも上に描画されます。

![重ね合わせコンテキストの例 1](/ja/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1/understanding_zindex_05b.png)

さらにまた、DIV #4 に DIV #2 のものより大きな正の z-index が代入されれば、DIV #4 は、DIV #2を含む他のどの要素よりも上に描画されます。

![重ね合わせコンテキストの例 1](/ja/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1/understanding_zindex_05c.png)

最後に見た例では、 DIV #2 と DIV #4 が兄弟要素ではないことがわかります。これは、HTML 要素の階層構造においては、それぞれ別の親要素を持っているからです。そうだとしても、DIV #4 と DIV #2 間の重なり順は、z-index を使って制御できます。たまたま、DIV #1 と DIV #3 には z-index 値が代入されていなかったため、重ね合わせコンテキストを作らなかったのです。これは、DIV #2 と DIV #4 を含むそれら要素の中身がどれも、同一のルートの重ね合わせコンテキストに含まれるということです。

重ね合わせコンテキストの見地からは、DIV #1 と DIV #3 は単にルート要素に吸収され、結果の階層構造は次のようになっています:

* ルートの重ね合わせコンテキスト
    + DIV #2 (`z-index`: 1)
    + DIV #4 (`z-index`: 2)

**メモ:** DIV #1 と DIV #3 は半透明ではありません。位置指定された要素に1未満の不透明度を与えると、ちょうど z-index 値を追加したのと同じように、暗黙的に重ね合わせコンテキストが作られることを忘れないのは大切です。また、この例は、親要素が重ね合わせコンテキストを作らないときに、何が起こるのかを示しています。

例
-

### HTML


```html
<div id="div1">
  <br /><span class="bold">DIV #1</span> <br />position: relative;
  <div id="div2">
    <br /><span class="bold">DIV #2</span> <br />position: absolute;
    <br />z-index: 1;
  </div>
</div>

<br />

<div id="div3">
  <br /><span class="bold">DIV #3</span> <br />position: relative;
  <div id="div4">
    <br /><span class="bold">DIV #4</span> <br />position: absolute;
    <br />z-index: 2;
  </div>
</div>
```

### CSS


```css
.bold {
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
}

#div1,
#div3 {
  height: 80px;
  position: relative;
  border: 1px dashed #669966;
  background-color: #ccffcc;
  padding-left: 5px;
}

#div2 {
  opacity: 0.8;
  z-index: 1;
  position: absolute;
  width: 150px;
  height: 200px;
  top: 20px;
  left: 170px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}

#div4 {
  opacity: 0.8;
  z-index: 2;
  position: absolute;
  width: 200px;
  height: 80px;
  top: 65px;
  left: 50px;
  border: 1px dashed #000099;
  background-color: #ddddff;
  text-align: left;
  padding-left: 10px;
}
```

### 結果

関連情報
----

* z-index なしの重ね合わせ: `z-index` が使用されなかった場合に適用される既定の重ね合わせ規則
* 浮動ブロックの重ね合わせ: 浮動要素が重ね合わせでどのように扱われるか
* z-index の使用: `z-index` を使って既定の重ね合わせ変更する方法
* 重ね合わせコンテキスト: 重ね合わせコンテキストについてのメモ
* 重ね合わせコンテキストの例 2: 2 階層の HTML 構造、全レベルの `z-index`
* 重ね合わせコンテキストの例 3: 3 階層の HTML 構造、第 2 階層の `z-index`
z-index の使用
===========

この記事の最初の部分、 z-index なしの重ね合わせは、既定でどのように重ね合わせが行われるのかを説明します。独自の重ね合わせ順を定義したい場合は、位置指定要素に `z-index` プロパティを使用して行うことができます。

`z-index` プロパティは整数値（正の数、ゼロ、負の数）で指定することができ、 Z 軸方向の要素の位置を表します。もし Z 軸になじみがないのであれば、重ね合わされたレイヤーがあって、それぞれに番号が付いていることを想像してください。レイヤーは番号順に、大きな番号は小さな番号の上に描画されます。

| レイヤー | 説明 |
| --- | --- |
| 最下位レイヤー | 観ている人から最も遠い |
| レイヤー -X | `z-index` が負の値のレイヤー |
| レイヤー 0 | 既定のレンダリングレイヤー |
| レイヤー X | `z-index` が正の値のレイヤー |
| 最上位レイヤー | 観ている人に最も近い |

**メモ:**

* `z-index` プロパティが定義されていなければ、要素は既定の描画レイヤー 0 (ゼロ) に描画されます。
* 同じ `z-index` 値を持つ要素が複数あれば (＝同じレイヤー上にある場合)、 z-index なしの重ね合わせで説明した重ね合わせ規則が当てはまります。

例
-

この例では、レイヤーの重ね合わせ順が `z-index` を使って決め直されています。#5 の `z-index` は 、位置指定要素でないため効果を持ちません。

### HTML


```html
<div id="abs1">
  <strong>DIV #1</strong>
  <br />position: absolute; <br />z-index: 5;
</div>

<div id="rel1">
  <strong>DIV #2</strong>
  <br />position: relative; <br />z-index: 3;
</div>

<div id="rel2">
  <strong>DIV #3</strong>
  <br />position: relative; <br />z-index: 2;
</div>

<div id="abs2">
  <strong>DIV #4</strong>
  <br />position: absolute; <br />z-index: 1;
</div>

<div id="sta1">
  <strong>DIV #5</strong>
  <br />no positioning <br />z-index: 8;
</div>
```

### CSS


```css
div {
  padding: 10px;
  opacity: 0.7;
  text-align: center;
}

strong {
  font-family: sans-serif;
}

#abs1 {
  z-index: 5;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  left: 10px;
  border: 1px dashed #900;
  background-color: #fdd;
}

#rel1 {
  z-index: 3;
  height: 100px;
  position: relative;
  top: 30px;
  border: 1px dashed #696;
  background-color: #cfc;
  margin: 0px 50px 0px 50px;
}

#rel2 {
  z-index: 2;
  height: 100px;
  position: relative;
  top: 15px;
  left: 20px;
  border: 1px dashed #696;
  background-color: #cfc;
  margin: 0px 50px 0px 50px;
}

#abs2 {
  z-index: 1;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  right: 10px;
  border: 1px dashed #900;
  background-color: #fdd;
}

#sta1 {
  z-index: 8;
  height: 70px;
  border: 1px dashed #996;
  background-color: #ffc;
  margin: 0px 50px 0px 50px;
}
```

結果
--

関連情報
----

* z-index なしの重ね合わせ : 既定の重ね合わせ規則
* 浮動ブロックの重ね合わせ: 浮動要素が重ね合わせでどのように扱われるか
* 重ね合わせコンテキスト: 重ね合わせコンテキストについてのメモ
* 重ね合わせコンテキストの例 1: 2 階層の HTML 構造で、最終階層の `z-index`
* 重ね合わせコンテキストの例 2: 2 階層の HTML 構造、全レベルの `z-index`
* 重ね合わせコンテキストの例 3: 3 階層の HTML 構造、第 2 階層の `z-index`
背景画像の拡大縮小
=========

**`background-size`** は CSS のプロパティで、要素の背景画像の大きさを変更し、画像の幅や高さから見た完全な大きさの画像をタイル表示するという既定の動作を変更することができます。こうすることで、画像を必要に応じて拡大したり縮小したりすることができます。

巨大な画像を並べて表示
-----------

巨大な画像、2982 x 2808 の Firefox のロゴ画像を想像してください。この画像を 300 x 300 ピクセルの要素の中に 4 枚並べて表示したいとします (いくつかの理由で恐ろしく悪いサイトデザインですが)。 `background-size` に固定値の 150 ピクセルの値を使用すると、このようにすることができます。

### HTML


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

### CSS


```css
.tiledBackground {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}
```

### 結果

画像の拡大縮小
-------

以下のように、画像の水平と垂直の両方の寸法を指定することもできます。


```css
background-size: 300px 150px;
```


結果は以下のようになります。

![引き伸ばされた新しい Firefox のロゴ](/ja/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images/s.codepen.io_richienb_debug_lonxgp_pnkvygvggyxa.png)

画像の拡大
-----

一方で、背景の画像を拡大することができます。ここでは 32 x 32 ピクセルのファビコンを 300 x 300 ピクセルに拡大します。

![拡大された MDN ロゴ](/ja/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images/favicon57.de33179910ae.1.1.png)


```css
.square2 {
  background-image: url(favicon.png);
  background-size: 300px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  text-shadow: white 0px 0px 2px;
  font-size: 16px;
}
```


見てのとおり、 CSS は画像ファイルの名前を除けば、実際には基本的に同一です。

特殊な値: "contain" と "cover"
-------------------------

`<length>` の値以外に、 CSS の `background-size` プロパティは `contain` と `cover` という二つの特殊な寸法の値を提供しています。これらを見てみましょう。

### contain

`contain` の値は、包含ボックスの寸法にかかわらず、背景画像をそれぞれの方向にできるだけ大きくなるように、ただしコンテナーの対応する辺の長さを超えないように拡大します。以下の例の大きさを変えて試してみてください。

#### HTML


```html
<div class="bgSizeContain">
  <p>この要素の寸法を変更してみてください！</p>
</div>
```


#### CSS


```css
.bgSizeContain {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: contain;
  width: 160px;
  height: 160px;
  border: 2px solid;
  color: pink;
  resize: both;
  overflow: scroll;
}
```


#### 結果

### cover

`cover` の値は、背景画像が対応する方向のコンテナーの寸法より大きいか同じであることを保証しつつ、できるだけ画像が小さくなるように拡大縮小することを指定します。以下の例の大きさを変えて試してみてください。

#### HTML


```html
<div class="bgSizeCover">
  <p>この要素の寸法を変更してみてください！</p>
</div>
```


#### CSS


```css
.bgSizeCover {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: cover;
  width: 160px;
  height: 160px;
  border: 2px solid;
  color: pink;
  resize: both;
  overflow: scroll;
}
```


#### 結果

関連情報
----

* `background-size`
* `background`
* SVG の背景画像の拡大縮小
複数の背景画像の利用
==========

**複数の背景画像**を要素に適用できます。これらは、最初に記述した背景が一番上になり、後に記述した背景がその下になるように重ね合わされます。最後の背景にだけ、背景色が指定できます。

複数の背景の指定は、下記のように簡単です。


```css
.myclass {
  background: background1, background2, ..., backgroundN;
}
```


`background-color` を除いて、一括指定プロパティの `background` と個々のプロパティの両方で指定できます。つまり、`background`, `background-attachment`, `background-clip`, `background-image`, `background-origin`, `background-position`, `background-repeat`, `background-size` のプロパティは背景ひとつずつに対して指定することができます。

例
-

この例では、3 つの背景が重なっています。Firefox のロゴ、泡の画像、そして linear-gradient です。

### HTML


```html
<div class="multi-bg-example"></div>
```

### CSS


```css
.multi-bg-example {
  width: 100%;
  height: 400px;
  background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position:
    bottom right,
    left,
    right;
}
```

### 結果

(CodePen で画像が表示されない場合、CSS 部分の「Tidy CSS」をクリックしてください)

ご覧のように、Firefox のロゴ (`background-image` で最初に記載) が一番上になり、泡の画像がそれに続き、グラデーション (最後に記述) が前述の全ての画像の下に配置されています。後に続くプロパティ (`background-repeat` と `background-position`) はそれぞれの背景に対応して適用されています。つまり、`background-repeat` の最初の値は最初(最前面)の画像に適用され、後に続くものも順番に適用されます。

関連情報
----

* CSS グラデーションの利用
境界角丸作成ツール
=========

このツールを使用して、 CSS3 の `border-radius` の効果を生成することができます。
ボックスの影作成ツール
===========

このツールで CSS の `box-shadow` 効果を組み立てて、 CSS オブジェクトにボックスの影の効果を追加することができます。

ボックスの影作成ツールは、 1 つまたは複数のボックスの影を要素に追加することができます。

ツールを開くと、右上の部分に四角形があります。これがシャドウを適用する対象となる要素です。この要素が選択されている状態 (ページを最初に読み込んだときの状態) では、基本的なスタイルを適用することができます。

* カラーピッカーツールを使って、要素の `color` を設定しましょう。
* "border" チェックボックスを使って、要素の `border` をつけましょう。
* スライダーを使って、要素の `top`, `left`, `width`, `height` の各プロパティを設定しましょう。

ボックスの影を追加するには、左上の「+」ボタンをクリックしてください。これで影を追加し、左側の列に並べます。それで新しい影の値を設定することができるようになります。

* カラーピッカーツールを使って、影の `color` を設定しましょう。
* "inset" チェックボックスを使って、影が内側になるようにしましょう。
* スライダーを使って、影の位置、ぼかし、広がりを設定しましょう。

他の影を追加するには、「+」をまたクリックしてください。ここで設定した値は、この新しい影にも適用されます。左上の↑と↓のボタンで、 2 つの影の適用順を変更します。左側の列で最初の影をクリックして再度選択してください。要素のスタイルを更新するには、要素を選択し、上部にある「element」というボタンをクリックします。

要素に `::before` と `::after` の擬似要素を追加して、ボックスの影を付けることもできます。要素とその擬似要素を切り替えるには、上部にある「element」「:before」「:after」と書かれたボタンを使います。

右下のボックスには、要素と `before::` または `::after` 擬似要素の CSS が表示されます。
境界画像作成ツール
=========

このツールを使用して、 CSS3 の `border-image` の値を作成できます。
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()
================

**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.
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?
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 色モジュール