recursal/MDN huggingface dataset:
ellipse()
=========

**`ellipse()`** は CSS の関数で、`<basic-shape>` データ型の一つです。

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

構文
--


```css
shape-outside: ellipse(40% 50% at left);
shape-outside: ellipse(closest-side farthest-side at 30%);
```


楕円は基本的に円を潰したものなので、`ellipse()` は、2 つの半径 x と y を指定しなければならないことを除けば、 `circle()` とよく似た方法で動作します。

### 値

`<shape-radius>`

2 つの半径で、x および y をその順で指定します。`<length>`、`<percentage>`、または `closest-side` および `farthest-side` の値の何れかです。

`closest-side`

シェイプの中心から参照ボックスの最も近い辺までの長さを使用します。楕円の場合は、半径の軸で最も近い辺となります。

`farthest-side`

シェイプの中心から参照ボックスの最も遠い辺までの長さを使用します。楕円の場合は、半径の軸で最も遠い辺となります。


`<position>`

円の中心を移動します。`<length>`、`<percentage>`、または `left` のような値の何れかです。

例
-

### 基本的な ellipse() の例

この例では、x 半径が 40%、y 半径が 50%、位置が左の楕円を示しています。これは、楕円の中心がボックスの左端にあることを意味しており、テキストを回り込ませるための半楕円の形になります。これらの値を変更すると、楕円の変化を確認することができます。

### closest-side / farthest-side の値の使用

キーワード値の `closest-side` と `farthest-side` は、浮動要素の参照ボックスの大きさに基づいて、素早く楕円を作成するのに便利です。

仕様書
---

| Specification |
| --- |
| CSS Shapes Module Level 1 # funcdef-basic-shape-ellipse |

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

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

関連情報
----

* このデータ型を使用するプロパティ: `clip-path`, `shape-outside`
* 基本シェイプのガイド
段抜きと段の均衡
========

このガイドでは、段組みコンテナー内で段抜きを作成する方法、段がどのように充足されるかを制御する方法を見てみます。

**メモ:** このガイドで紹介している段抜きや均衡を取る機能は、このガイドの前二章で紹介した機能ほどブラウザーの対応が進んでいないことに注意してください。

段抜き
---

あるアイテムを段抜きする場合は、 `column-span` プロパティの値を `all` に設定してください。これで、要素はすべての段にまたがります。

段組みコンテナーの子孫要素は、直接の子でも間接の子でも段抜き (spanner) になることができます。例えば、コンテナーの中に直接含まれる見出しは段抜きになることができますし、段組みコンテナーの中のセクションに含まれる見出しも同様です。

以下の例では、 h2 要素が `column-span: all` に設定され、すべての段に段抜きされます。

次の例では、見出しが `<article>` 要素の中にありますが、期待通りにコンテンツが段抜きになります。

段抜きが導入されると、段組みの流れが中断され、段抜きの後で実際に新しい一連の段ボックスを作成して段組みが再開します。内容物が段抜き要素をまたぐことはありません。

### column-span の制約

現在の Level 1 仕様書では、 `column-span` に許可されている値は二つしかありません。 `none` の値は初期値で、アイテムを段抜きせず、段の中に収めます。 `all` の値はアイテムがすべての段を段抜きすることを意味します。例えばアイテムを 3 段中 2 段に段抜きすることはできません。

### 注意すべきこと

段抜き要素がマージン、パディング、境界、背景色を持つ他の要素の中にあった場合、次の例に示すように、ボックスの上端が段抜きの上に現れ、残りの部分が段抜きの下に表示されることがあります。このため、要素を段抜きにするときにはいくらか注意が必要で、このシナリオに注意する必要があります。

加えて、コンテンツの後方に段抜き要素が現れる場合は、段組みをするのに十分なコンテンツが段抜きの後にないと、予期しない挙動または望まない挙動をすることがあります。段抜きは注意深く使用し、様々な分割点になったときに望み通りの結果が得られるかを検査してください。

段の充足と均衡
-------

均衡の取れた段組みは、すべての段のコンテンツの量がほぼ同じになっているものです。充足と均衡は、コンテンツの量が提供された空間の量に一致しない場合、例えばコンテナーの高さが宣言されている場合に発生します。

`column-fill` の段組みでの初期値は `balance` です。 balance の値は、可能な限りすべての段で均衡を取ることを意味します。ページ付きメディアのような断片化されたコンテキストにおいては、最後の断片のみで均衡が取られます。つまり、最後のページにおいて一連の段ボックスの均衡が取られます。

均衡を取るための第二の値は `balance-all` で、断片化されたコンテキストにおいて、最後の断片における段だけでなく、すべての段の均衡を取ろうとします。

この例には、画像とテキストを含む均衡の取れた段があります。画像は分割できないので最初の段に入り、他の段はテキストの量が同じになるように充足されます。

`column-fill` の他の値として `auto` があります。この場合、すべての段を同じ量で充足して高さの均衡を図るのではなく、段を順番に充足させます。以下の例では `column-fill` を `auto` に変更し、段を段組みコンテナーの高さまで順番に充足させ、最後のいくつかの段は空のままにします。

なお、段の均衡はすべてのブラウザーが対応しているわけではありません。対応させるブラウザーで期待通りの効果が得られるかをチェックしてください。

次のガイドでは、段組みがはみ出しをどう扱うかを、段の中とコンテナーに合う数よりも多くの段ができる場合の両方について学習します。
段のスタイル付け
========

段組みコンテナー内に作られた段ボックスは無名ボックスなので、スタイル付けできることはわずかです。しかし、できることは少数ながらあります。このガイドは、段同士の間隔および段間罫をスタイル付けする方法を説明します。

段ボックスにスタイル付けできるか
----------------

残念ながら、現在はできません。段を構成する無名ボックスはスタイル付けの対象にする方法がないため、ボックスの背景色を変更したり、一段だけを他よりも広くしたりすることはできません。おそらく将来の版の仕様書でできるようになるでしょう。しかし現時点で、段同士の間隔と段間罫を変更することはできます。

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

段同士の間隔 (段間) は、 `column-gap` プロパティで制御されます。このプロパティはもともと段組みレイアウト仕様書で定義されていました。しかし、現在はボックス配置仕様書で定義され、 CSS グリッドレイアウトなどの他の仕様書におけるボックス同士の間隔と統合されました。

段組みにおける `column-gap` の初期値は `1em` です。つまり、段同士は互いに接しません。他のレイアウト方法では、 `column-gap` の初期値は 0 です。キーワード値 "normal" を使用した場合、間隔は 1em に設定されます。

段間は `column-gap` の値として任意の単位を使用して変更することができます。以下の例では、 `column-gap` は 40px に設定されます。

`column-gap` に許されている値は `<length-percentage>` です。つまり、パーセント値を使用することができます。 `column-gap` のパーセント値は、段組みコンテナーの幅に対するパーセント値として計算されます。

段間罫
---

仕様書では `column-rule-width`, `column-rule-style` `column-rule-color` と、一括指定する `column-rule` を定義しています。これらのプロパティは、 `border` プロパティとまったく同じように動作します。 `border-style` で有効な値が `column-rule-style` で使用できます。

これらのプロパティは段組みコンテナーである要素に適用されるため、すべての段に同じ段間罫が引かれます。段間罫は段同士の間にのみ引かれ、外の辺には引かれません。段間罫は内容のある段の間にのみ引かれます。

次の例は、幅 5px の点線の段間罫を rebeccapurple の色で、個別指定を使用して作成しています。

なお、段間罫自体は空間を占有しません。段間罫が太くなっても、段間が広がることはありません。その代わりに、段間罫が段間と重なります。

次の例では、とても太い 40px の段間罫を 10px の段間に引いています。段間罫は段の内容の下に表示されます。段間罫の両側に間隔を作るには、 gap を 40px より大きくする必要があるでしょう。

まとめ
---

ここでは、現在段ボックスに対してスタイル付けすることができるすべての方法を説明しました。次のガイドでは、コンテナー内ですべての段をまたがる要素の作成を見てみましょう。
段組みにおける内容物の分割の扱い
================

段組みレイアウトでは、段ボックス間で、ページ付きメディアのページ間と同様に内容が分割されます。どちらのコンテキストでも、 CSS 断片化仕様書のプロパティを用いて、どのように内容を分割するかを制御します。このガイドでは、段組みで断片化がどのように動作するかを見てみます。

断片化の基本
------

CSS Fragmentation specification は、断片化コンテナー (*fragmentainer*) 間でどのように内容を分割するかを詳述しています。段組みでは、断片化コンテナーは段ボックスです。

段ボックスは他のマークアップを含むことができ、できれば分割したくない場所がたくさんあります。例えば、ふつうは画像のキャプションは参照する画像と別な段に分割されないほうが望ましく、見出しが段の最後にあるのも変です。断片化プロパティはこれをいくらか制御するための方法を提供します。

分割を制御する可能性がある場所には、様々なものがあります。

* ボックス内での分割。例えば、 figure 要素の内部など。
* ボックスの前後の分割。上記の見出しの例など。
* 行間の分割。
ボックス内での分割
---------

ボックス内での分割を制御するには、 `break-inside` プロパティを使用します。このプロパティは以下の値を取ります。

* `auto`
* `avoid`
* `avoid-page`
* `avoid-column`
* `avoid-region`

以下の例では、 break-inside を figure 要素に適用して、キャプションと画像が分割されることを防ぎます。

ボックスの前後の分割
----------

`break-before` および `break-after` プロパティを使用して、要素の前後の分割を制御します。段組みのコンテキストでは、以下の値を取ります。

* auto
* avoid
* avoid-column
* column

次の例では、 `h2` 要素の前で強制的に改段しています。

行間での分割
------

`orphans` および `widows` プロパティも便利です。 orphans プロパティは、断片の末尾に残る行数を制御します。 widows プロパティは、断片の先頭に残る行数を制御します。

`orphans` および `widows` プロパティは整数値を取り、断片のそれぞれ末尾および先頭の行数に残す行数を表します。なお、これらのプロパティは段落などのブロックコンテナー内でのみ動作します。ブロックの行数が値で指定された数より少なかった場合、すべての行が一緒に保持されます。

以下の例では、 `orphans` プロパティを用いて段の末尾に残す行数を制御しています。値を変更すると、内容を分割する効果を確認できます。

期待通りに動作しない場合
------------

内容の量が少なく、様々な方法で分割を制御しようとしている場合や、複数の要素があり、内容をどこかで分割する必要がある場合、常に意図する結果が得られるとは限りません。断片化の使用はある程度まで、常にブラウザーに対する提案であり、可能であればその方法で分割が制御されます。

上記に加えて、これらのプロパティーに対するブラウザーの対応は若干まばらです。ここ MDN の個別のプロパティページにおける互換性データ表は、どのブラウザーがどの機能に対応しているかを確認するのに便利かもしれません。多くの場合、分割が制御できない代替策により、美しくなく分割されることが次善の策であり、レイアウトが崩れるよりましです。
段組みの基本概念
========

段組みレイアウト (Multiple-column Layout) は、新聞のように内容物を複数の段ボックスにレイアウトする仕様です。このガイドでは、この仕様がどのように働くかを、いくつかのよくある使用例と共に説明します。

主要概念と用語
-------

段組みは他のレイアウト方法とは異なり、 CSS でコンテンツを分割し、すべての子孫要素を段に含めます。これは、印刷スタイルシートを作成するのに使われる CSS ページ付きメディアがコンテンツをページに分割するのと同様のことを行います。

仕様書で定義されているプロパティは次の通りです。

* `column-width`
* `column-count`
* `columns`
* `column-rule-color`
* `column-rule-style`
* `column-rule-width`
* `column-rule`
* `column-span`
* `column-fill`
* `column-gap`

`column-count` または `column-width` を要素に追加することで、要素は*段組みコンテナー*になります。段は無名のボックスになり、仕様書上では段ボックスと呼ばれます。

段の定義
----

段組みコンテナーを作成するには、少なくとも一つの `column-*` プロパティ、つまり `column-count` か `column-width` を使用する必要があります。

### `column-count` プロパティ

`column-count` プロパティは、内容物を表示したい段数を指定します。ブラウザーは要求された数の段を生成するために、それぞれの段ボックスに適正な大きさの空間を割り当てます。

以下の例では、 `column-count` プロパティを使用して `.container` 要素に 3 つの段を生成します。その内容は、 `.container` の子も含めて 3 つの段に分割されます。

上記の例では、内容物は既定のスタイルの段落 `p` タグで囲まれています。従って、それぞれの段落の上にはマージンがあります。マージンが働いてテキストの最初の行を押し下げているのが分かるでしょう。これは、段組みコンテナーは新しいブロック整形文脈 (BFC) を作成するため、子要素のマージンはコンテナーのマージンと相殺されないからです。

### `column-width` プロパティ

`column-width` プロパティは、それぞれの段ボックスの最適な幅を設定するために使用されます。 column-width を宣言すると、ブラウザーは段組みコンテナー内にその幅の段と、段間の均等の空間が収まる数を計算します。従って、段の幅は最小幅として扱われ、段ボックスはふつう、追加の空間があるためにより広くなります。

段ボックスは、利用できる幅が `column-width` の値よりも狭い一段組みの場合に限り、宣言された段の幅よりも狭くなることがあります。

以下の例では、 `column-width` の値を 200px にして使用しています。コンテナーに合うように 200 ピクセルの段が確保され、残りの空間は均等に配分されます。

### `column-count` と `column-width` の併用

段組みコンテナーに両方のプロパティを指定すると、 `column-count` は最大の段数として動作します。従って、 `column-count` の段数に達するまでは、 `column-width` で宣言された通りに動作します。これを超えると、 `column-width` で指定された寸法の段を追加する余裕があっても、段は追加されず、余った空間は既存の段に均等に割り当てられます。

両方のプロパティを併用すると、 `column-count` の値で指定されたよりも少ない数の段数になることがあります。

次の例では、 `column-width` を 200px に、 `column-count` を 2 にして使用しています。 3 段以上の空間があっても 2 段になります。しかし、 200px の段を 2 つ設置する空間の余裕がなければ、 1 段になります。

### `columns` 一括指定

`columns` 一括指定で `column-count` と `column-width` を設定することができます。長さの単位を設定すると、 `column-width` に使用され、整数値を設定すると、 `column-count` に使用されます。２つの値を空白で区切って両方を設定することができます。

この CSS は例 1 と同じ結果で、 `column-count` を 3 に設定します。


```css
.container {
  columns: 3;
}
```


この CSS は例 2 と同じ結果で、 `column-width` を 200px に設定します。


```css
.container {
  columns: 200px;
}
```


この CSS は例 3 と同じ結果で、 `column-count` と `column-width` の両方に設定します。


```css
.container {
  columns: 2 200px;
}
```

次のステップ
------

このガイドでは、段組みレイアウトの基本的な利用を学びました。次のガイドでは、 段のスタイル付けがどれだけできるかを見てみます。
段組みでのはみ出しの扱い
============

このガイドでは、段ボックス内部と、コンテナーに収まらないほど多くの内容物がある場合の両方において、段組みがどのようにはみ出しを扱うかを見てみます。

段ボックス内でのはみ出し
------------

はみ出しは、アイテムの寸法が段ボックスよりも大きな場合に発生します。例えば、段内の画像が `column-width` の幅、または `column-count` で宣言された段数に基づく段の幅よりも広い場合に発生します。

この場合、内容物は段ボックスで切り取られるのではなく、次の列にはみ出します。以下の例と、ブラウザーが描画時に別な方法で処理する予定のレンダリングの画像を見てください。

![](/ja/docs/Web/CSS/CSS_multicol_layout/Handling_overflow_in_multicol_layout/image-overflow-multicol.png)

画像を段ボックスに合うよう縮小したい場合は、 `max-width: 100%` を設定する標準的なレスポンシブ画像の解決方法で実現することができます。

より多くの段が生成される場合
--------------

印刷のような断片化されたメディアコンテキスト内と、ウェブページのような連続メディアコンテキスト内とで、あふれた段がどのように扱われるかです。

断片化されたメディアでは、 1 つの断片（例えば 1 ページ）が段で埋まると、段は新しいページに移動し、それを段で埋めます。連続メディアでは、段はインライン方向にはみ出します。ウェブでは、ここでスクロールバーが出現します。

以下の例ではこのはみ出しの挙動を紹介します。段組みコンテナーには高さが設定されており、列を生成する空間よりも多くのテキストがありますので、列がコンテナーをはみ出して作成されます。

将来の版の仕様書では、連続メディアでブロック方向に段をあふれさせることができるため、読み手は次の一連の段を見るために下スクロールすることができるので、便利になるでしょう。

垂直メディアクエリーの使用
-------------

ウェブでの段組みの問題の一つに、段がビューポートより高い場合、読み手は読むのに上下にスクロールしなければならなくなるので使い勝手が悪くなるというものがあります。これを防ぐ一つの方法が、十分な高さがあると分かった時にだけ段組みプロパティを適用することです。

以下の例では、 `min-height` クエリーを使用して、段組みプロパティを適用する前に高さを検査します。

このシリーズの最後のガイドでは、段組みが断片化仕様でどのように動作するかを見て、段をまたいで内容が分割される方法を制御します。
invert()
========

**`invert()`** は CSS の関数で、入力画像の色サンプルを反転します。結果は `<filter-function>` です。

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

構文
--


```css
invert(amount)
```

### 引数

`amount`

変換の度合いで、 `<number>` または `<percentage>` で指定します。 `100%` の値では完全に反転され、 `0%` の値では入力が変更されないままになります。 `0%` と `100%` の間の値は、効果の割合です。補間時の欠損値は `0` です。

例
-

### invert() の正しい値の例


```css
invert(0)     /\* 効果なし \*/
invert(.6)    /\* 60% 反転 \*/
invert(100%)  /\* 完全に反転 \*/
```

仕様書
---

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-invert |

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

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

関連情報
----

* `<filter-function>`
* `blur()`
* `brightness()`
* `contrast()`
* `drop-shadow()`
* `grayscale()`
* `hue-rotate()`
* `opacity()`
* `saturate()`
* `sepia()`
hue-rotate()
============

**`hue-rotate()`** は CSS の関数で、要素およびその中身のコンテンツの色相環を回転させます。結果は `<filter-function>` です。

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

構文
--


```css
hue-rotate(angle)
```

### 引数

`angle`

入力サンプルの色相の相対的な変化量を、 `<angle>` で指定します。 `0deg` は入力を変更しないままにします。正の回転角は色相の値を増加させるのに対し、負の回転角は色相の値を減少させます。補間時の欠損値は `0` です。最小値または最大値はなく、 `hue-rotate(Ndeg)` は `N` を 360 で割った余りと等価です。

例
-

### hue-rotate の正しい値の例


```css
hue-rotate(-90deg)  /\* 270 度の回転と同じ \*/
hue-rotate(0deg)    /\* 効果なし \*/
hue-rotate(90deg)   /\* 90 度の回転 \*/
hue-rotate(.5turn)  /\* 180 度の回転 \*/
hue-rotate(405deg)  /\* 45 度の回転と同じ \*/
```

仕様書
---

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-hue-rotate |

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

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

関連情報
----

* `<filter-function>`
* `blur()`
* `brightness()`
* `contrast()`
* `drop-shadow()`
* `grayscale()`
* `invert()`
* `opacity()`
* `saturate()`
* `sepia()`
grayscale()
===========

**`grayscale()`** は CSS の関数は、入力画像をグレースケールに変換します。結果は `<filter-function>` です。

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

構文
--


```css
grayscale(amount)
```

### 引数

`amount`

変換の度合いで、 `<number>` または `<percentage>` で指定します。 `100%` の値では完全にグレースケールになり、 `0%` の値では入力が変更されないままになります。 `0%` と `100%` の間の値は、効果の割合です。省略時の既定値は `1` です。補間時の欠損値は `0` です。

例
-

### grayscale() の正しい値の例


```css
grayscale(0)     /\* 効果なし \*/
grayscale(.7)    /\* 70% グレースケール \*/
grayscale(100%)  /\* 完全なグレースケール \*/
```

仕様書
---

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-grayscale |

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

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

関連情報
----

* `<filter-function>`
* `blur()`
* `brightness()`
* `contrast()`
* `drop-shadow()`
* `hue-rotate()`
* `invert()`
* `opacity()`
* `saturate()`
* `sepia()`
brightness()
============

**`brightness()`** は CSS の関数で、入力画像に線形乗算を適用し、明るくしたり暗くしたりします。その結果は `<filter-function>` です。

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

構文
--


```css
brightness(amount)
```

### 引数

`amount`

結果の明るさで、 `<number>` または `<percentage>` で指定します。 `100%` 未満の値では画像が暗くなり、 `100%` を超える値では画像が明るくなります。 `0%` の値では画像が完全に黒くなり、 `100%` の値では入力が変更されないままになります。補間時の欠損値は `1` です。

例
-

### 数値とパーセント値を用いた brightness の設定


```css
>brightness(0%)   /\* 完全に黒 \*/
brightness(0.4)  /\* 明るさ 40% \*/
brightness(1)    /\* 効果なし \*/
brightness(200%) /\* 明るさ 2 倍 \*/
```

仕様書
---

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-brightness |

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

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

関連情報
----

* `<filter-function>`
* `blur()`
* `contrast()`
* `drop-shadow()`
* `grayscale()`
* `hue-rotate()`
* `invert()`
* `opacity()`
* `saturate()`
* `sepia()`
blur()
======

**`blur()`** は CSS の関数で、入力画像にガウシアンぼかしを適用します。返値は `<filter-function>` です。

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

構文
--


```css
blur(radius)
```

### 引数

`radius`

ぼかしの半径で、 `<length>` で指定します。ガウス関数の標準偏差の値を定義します。つまり、画面上のピクセルをいくつ互いに混合するかということです。すなわち、大きい値になるほどよりぼかしが入ります。 `0` の値は入力を変更しません。補間時の欠損値は `0` です。

例
-

### ピクセル数と rem を用いた blur の設定


```css
blur(0)        /\* 効果なし \*/
blur(8px)      /\* 半径 8px でぼかす \*/
blur(1.17rem)  /\* 半径 1.17rem でぼかす \*/
```

仕様書
---

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-blur |

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

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

関連情報
----

* `<filter-function>`
* `brightness()`
* `contrast()`
* `drop-shadow()`
* `grayscale()`
* `hue-rotate()`
* `invert()`
* `opacity()`
* `saturate()`
* `sepia()`
contrast()
==========

**`contrast()`** は CSS の関数で、入力画像のコントラストを調整します。結果は `<filter-function>` です。

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

構文
--


```css
contrast(amount)
```

### 引数

`amount`

結果のコントラストで、 `<number>` または `<percentage>` で指定します。 `100%` 未満の値ではコントラストが下がり、 `100%` を超える値ではコントラストが上がります。 `0%` の値では画像が完全に灰色になり、 `100%` の値では入力が変更されないままになります。補間時の欠損値は `1` です。

例
-

### 数値とパーセント値を使用した contrast の設定


```css
contrast(0)     /\* 完全な灰色 \*/
contrast(65%)   /\* 65% のコントラスト \*/
contrast(1)     /\* 効果なし \*/
contrast(200%)  /\* 2 倍のコントラスト \*/
```

仕様書
---

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-contrast |

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

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

関連情報
----

* `<filter-function>`
* `blur()`
* `brightness()`
* `drop-shadow()`
* `grayscale()`
* `hue-rotate()`
* `invert()`
* `opacity()`
* `saturate()`
* `sepia()`
saturate()
==========

**`saturate()`** は CSS の関数で、入力画像の彩度を上げたり下げたりします。結果は `<filter-function>` です。

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

構文
--


```css
saturate(amount)
```

### 引数

`amount`

変換の量で、 `<number>` または `<percentage>` で指定します。 `100%` 未満の値では彩度を下げ、 `100%` を超える値では彩度を上げます。 `0%` の値では画像が完全に彩度がなくなり、 `100%` の値では入力が変更されないままになります。補間時の欠損値は `1` です。

例
-

### saturate() の正しい値の例


```css
saturate(0)     /\* 彩度なし \*/
saturate(.4)    /\* 彩度 40% \*/
saturate(100%)  /\* 効果なし \*/
saturate(200%)  /\* 2 倍の彩度 \*/
```

仕様書
---

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-saturate |

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

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

関連情報
----

* `<filter-function>`
* `blur()`
* `brightness()`
* `contrast()`
* `drop-shadow()`
* `grayscale()`
* `hue-rotate()`
* `invert()`
* `opacity()`
* `sepia()`
sepia()
=======

**`sepia()`** は CSS の関数で、入力画像をセピア色に、より暖かい、より黄色/茶色がかったの表現に変換します。結果は `<filter-function>` です。

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

構文
--


```css
sepia(amount)
```

### 引数

`amount`

変換の度合いで、 `<number>` または `<percentage>` で指定します。 `100%` の値では完全にセピア色になり、 `0%` の値では入力が変更されないままになります。 `0%` と `100%` の間の値は、効果の割合です。補間時の欠損値は `0` です。

例
-

### sepia() の正しい値の例


```css
sepia(0)     /\* 効果なし \*/
sepia(.65)   /\* 65% セピア色 \*/
sepia(100%)  /\* 完全にセピア色 \*/
```

仕様書
---

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-sepia |

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

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

関連情報
----

* `<filter-function>`
* `blur()`
* `brightness()`
* `contrast()`
* `drop-shadow()`
* `grayscale()`
* `hue-rotate()`
* `invert()`
* `opacity()`
* `saturate()`
opacity()
=========

**`opacity()`** は CSS の関数で、入力画像のサンプルに透過性を適用します。結果は `<filter-function>` です。

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

**メモ:** この関数はもっと一般的な `opacity` プロパティと似ています。違いはフィルターの場合、ブラウザーによってはハードウェアアクセラレーションにより性能が上がることです。

構文
--


```css
opacity(amount)
```

### 引数

`amount`

変換の度合いで、 `<number>` または `<percentage>` で指定します。 `0%` の値では完全に透明になり、 `100%` の値では入力が変更されないままになります。 `0%` と `100%` の間の値は、効果の割合です。補間時の欠損値は `1` です。

例
-

### opacity() の正しい値の例


```css
opacity(0%)   /\* 完全に透過 \*/
opacity(50%)  /\* 50% 透過 \*/
opacity(1)    /\* 効果なし \*/
```

仕様書
---

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-opacity |

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

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

関連情報
----

* `<filter-function>`
* CSS の `opacity` プロパティ
* `blur()`
* `brightness()`
* `contrast()`
* `drop-shadow()`
* `grayscale()`
* `hue-rotate()`
* `invert()`
* `saturate()`
* `sepia()`
drop-shadow()
=============

**`drop-shadow()`** は CSS の関数で、入力画像にドロップシャドウ効果を適用します。結果は `<filter-function>` です。

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

ドロップシャドウは効果的にぼけ、入力画像のアルファマスクのバージョンからずれ、特定の色で描かれて画像の下に混合されます。

**メモ:** この関数はいくらか `box-shadow` プロパティと似ています。 `box-shadow` プロパティは要素の*ボックス全体*の背後に長方形の影を作成しますが、 `drop-shadow()` フィルター関数は*画像自体*の形 (アルファチャネル) に合った影を作成します。

構文
--


```css
drop-shadow(offset-x offset-y blur-radius color)
```


`drop-shadow()` 関数は `<shadow>` 型の引数 (`box-shadow` プロパティで定義) を受け付けますが、 `inset` キーワードと `spread` 引数が許可されないという例外があります。

### 引数

`offset-x` `offset-y` (必須)

影のオフセットを指定する 2 つの `<length>` 値です。 `offset-x` は水平方向の距離を表し、負の数で影を要素の左方に配置します。 `offset-y` は垂直方向の距離を表し、負の数で影を要素の上方に配置します。どちらの値も `0` であれば、影は要素の真後ろに配置されます。

`blur-radius` (任意)

影をぼかす半径で、 `<length>` で指定します。値が大きくなるほど、影は広く薄くなります。指定されていない場合は、既定値の `0` になり、辺がはっきりとしてぼけなくなります。負の数は許可されていません。

`color` (任意)

影の色で、 `<color>` で指定します。指定されなかった場合は、 `color` プロパティの値が使用されます。

例
-

### ピクセル単位のオフセットとぼかし半径を用いたドロップシャドウの設定


```css
/\* 10px のぼかしで広がりのない黒い影 \*/
drop-shadow(16px 16px 10px black)
```

### rem 単位ののオフセットとぼかし半径を用いたドロップシャドウの設定


```css
/\* 1rem のぼかしで 3rem の広がりの赤っぽい影 \*/
drop-shadow(.5rem .5rem 1rem #e23)
```

仕様書
---

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-drop-shadow |

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

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

関連情報
----

* `<filter-function>`
* CSS の `box-shadow` プロパティ
* `blur()`
* `brightness()`
* `contrast()`
* `grayscale()`
* `hue-rotate()`
* `invert()`
* `opacity()`
* `saturate()`
* `sepia()`
CSS 入れ子アットルール
=============

本体にスタイルルールを含むアットルールは、 CSS の入れ子を使って別のスタイルルールの中に入れ子にすることができます。アットルール内に入れ子になったスタイル ルールは、最も近い祖先のスタイル ルールから入れ子のセレクタ定義を取得します。入れ子になったアットルールの内部には、 `& {...}` ブロックに入れ子になっているかのように動作するプロパティを直接含めることができます。

入れ子にすることができるアットルール
------------------

* `@media`
* `@supports`
* `@layer`
* `@scope` (en-US)
* `@container`
例
-

### 入れ子の `@media` アットルール

この例には CSS のブロックが 3 つあります。 1 つ目は典型的な入れ子アットルールの書き方を表し、 2 つ目はブラウザーが構文解析するとおりに入れ子を展開した書き方を表し、 3 つ目は入れ子でない同等のものを表しています。

#### 入れ子の CSS


```css
.foo {
  display: grid;
  @media (orientation: landscape) {
    grid-auto-flow: column;
  }
}
```


#### 展開した入れ子 CSS


```css
.foo {
  display: grid;
  @media (orientation: landscape) {
    & {
      grid-auto-flow: column;
    }
  }
}
```


#### 入れ子を使用しない同等のもの


```css
.foo {
  display: grid;
}

@media (orientation: landscape) {
  .foo {
    grid-auto-flow: column;
  }
}
```

### 多重に入れ子になった `@media` アットルール

アットルールは他のアットルールの中に入れ子にすることができます。以下にその例と、入れ子にしない場合の書き方を示します。

#### 入れ子のアットルール


```css
.foo {
  display: grid;
  @media (orientation: landscape) {
    grid-auto-flow: column;
    @media (min-width: 1024px) {
      max-inline-size: 1024px;
    }
  }
}
```


#### 入れ子を使用しない同等のもの


```css
.foo {
  display: grid;
}
@media (orientation: landscape) {
  .foo {
    grid-auto-flow: column;
  }
}
@media (orientation: landscape) and (min-width: 1024px) {
  .foo {
    max-inline-size: 1024px;
  }
}
```

### カスケードレイヤーの入れ子 (`@layer`)

カスケードレイヤーは子レイヤーを作成するために入れ子に数rことができます。これらは `.` （ドット）で接続します。

#### 親＆子レイヤーの定義

まず、名前付きカスケードレイヤーを使用する前に、スタイル割り当てなしで定義します。


```css
@layer base {
  @layer support;
}
```


#### ルールを入れ子になったレイヤーに割り当てる

ここでは `.foo` セレクターはそのルールを **base** `@layer` に割り当てています。入れ子になった **support** `@layer` は `base.support` サブレイヤーを作成し、 `&` 入れ子セレクターは `.foo .bar` セレクターのルールを作成するために使用されます。


```css
.foo {
  @layer base {
    block-size: 100%;
    @layer support {
      & .bar {
        min-block-size: 100%;
      }
    }
  }
}
```


#### 入れ子を使用しない同等のもの


```css
@layer base {
  .foo {
    block-size: 100%;
  }
}
@layer base.support {
  .foo .bar {
    min-block-size: 100%;
  }
}
```

関連情報
----

* CSS 入れ子モジュール
* `&` 入れ子セレクター
* CSS 入れ子の使用
* 入れ子と詳細度
CSS 入れ子と詳細度
===========

`&` 入れ子セレクターの`詳細度`は、関連するセレクターリストの中で最大の詳細度を使用して計算されます。これは、 `:is()` 関数を使用した場合の詳細度の計算方法と同じです。


```html
<b class="foo">
  <c>Blue text</c>
</b>
```

`&` 入れ子構文
---------


```css
#a, b {
  & c {
    color: blue;
  }
}

.foo c {
  color: red;
}
```

`:is()` 構文
----------


```css
:is(#a, b) {
  & c {
    color: blue;
  }
}

.foo c {
  color: red;
}
```


この例では、 id セレクター (`#a`) の詳細度は `1-0-0` になり、要素型セレクター (`b`) の詳細度は `0-0-1` になります。ネスティングセレクター と `:is()` 擬似クラスはどちらも、 `#a` という id セレクターを使わなくても詳細度は `1-0-0` になります。

``.foo`クラスセレクターの特異度は`0-1-0`です。これにより、`& c`の特異性の合計は`1-0-1`となり、`.foo c`の特異性は`0-1-1`となるので、`color: blue;` が勝ちます。

関連情報
----

* CSS 入れ子モジュール
* `&` 入れ子セレクター
* CSS 入れ子の使用
* 入れ子アットルール
translateZ()
============

**`translateZ()`** は CSS の関数で、三次元空間の z 軸に沿って、すなわち閲覧者に近づいたり遠ざかったりするように要素を移動させます。その結果は `<transform-function>` データ型となります。

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

この変換は、 `<length>` によって定義され、要素または要素がどれだけ内側または外側に移動するかを指定します。

上記のデモでは、`perspective: 550px;` (3D 空間を作るため) と `transform-style: preserve-3d;` (立方体の 6 つの面である子を 3D 空間に配置) を立方体に設定しました。

**メモ:** `translateZ(tz)` は、`translate3d(0, 0, tz)` と等価です。

構文
--


```css
translateZ(tz)
```

### 値

`tz`

変換ベクトルの z 成分を表す`<length>`。直交座標系では Z 軸方向の移動量をを表します。正の値では要素が閲覧者に向かって移動し、負の値で移動すると遠ざかります。



| 直交座標系 (ℝ^2) | 同次座標系 (ℝℙ^2) | 直交座標系 (ℝ^3) | 同次座標系 (ℝℙ^3) |
| --- | --- | --- | --- |
| この変換は 3D 空間に適用されます。平面上では表現できません。 | この変換は ℝ^3 の線形変換ではなく、直交座標系の行列では表現できません。 | 

(

1

0

0

0

0

1

0

0

0

0

1

t

0

0

0

1

)

 |

例
-

この例では、2 つのボックスが作成されます。1 つはページ上で通常の位置に配置され、座標変換されることはありません。もう一つは、遠近法を適用して三次元空間を作り、ユーザーの方に移動させます。

### HTML


```html
<div>Static</div>
<div class="moved">Moved</div>
```

### CSS


```css
div {
  position: relative;
  width: 60px;
  height: 60px;
  left: 100px;
  background-color: skyblue;
}

.moved {
  transform: perspective(500px) translateZ(200px);
  background-color: pink;
}
```


 ここで重要なのは "moved" というクラスで、その機能を見てみましょう。まず、
 `perspective()` 関数は、 z=0 の位置にある平面 (要するに画面の表面) の相対位置に閲覧者を位置付けます。 `500px` という値は、ユーザーが z=0 にある画像の 500 ピクセル「前」にいることを意味します。

次に、`translateZ()` 関数は、要素を画面からユーザーの方に「外向きに」200 ピクセル移動します。 これは、二次元のディスプレイ上で見たときに要素を大きく見せる、または VR ヘッドセットや他の三次元ディスプレイ機器を使用して見たときに要素をより近く見せるという効果があります。

なお、 `perspective()` の値が `translateZ()` の値よりも小さい場合、例えば `transform: perspective(200px) translateZ(300px);` の場合、変換された要素はユーザーのビューポートよりも手前にあるため、表示されません。 perspective と translateZ の値の差が小さければ小さいほど、ユーザーは要素に近づき、変換された要素は大きく見えます。

**メモ:** 変換の合成は交換可能ではないので、異なる関数を書く順番は重要です。具体的な例として、一般的には `perspective()` を `translateZ()` の前に配置します。

### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 2 # funcdef-translatez |

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

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

関連情報
----

* `transform`
* `<transform-function>`
* `translate`