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

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() - CSS: カスケーディングスタイルシート

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() - CSS: カスケーディングスタイルシート

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() - CSS: カスケーディングスタイルシート

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() - CSS: カスケーディングスタイルシート

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() - CSS: カスケーディングスタイルシート

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: カスケーディングスタイルシート

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 入れ子の使用 - CSS: カスケーディングスタイルシート

CSS 入れ子の使用
==========

CSS 入れ子 モジュールにより、スタイルシートをより読みやすく、よりモジュール化しやすく、より保守しやすく書くことができます。常にセレクターを繰り返すわけではないので、ファイルサイズも縮小することができます。

CSS 入れ子は、 CSS プリプロセッサーで事前にコンパイルされるのではなく、ブラウザーで解釈できるという点で、 Sass のような CSS プリプロセッサーとは異なります。また、 CSS 入れ子において、 `&` 入れ子セレクターの詳細度は `:is()` 関数に似ており、関連するセレクターリストの中で最も高い詳細度を使用して計算されます。

このガイドでは、CSSで入れ子を配置するさまざまな方法を示します。

**メモ:** 仕様の初期のバージョンでは、 `&` 入れ子セレクターがないと、型セレクター を入れ子にすることができませんでした。これは更新され、`&` 入れ子セレクタは必要なくなりました。執筆時点で（2023 年 8 月）、 Firefox は新しいバージョンの仕様に対応していますが、 Chrome と Safariは 古いバージョンの仕様に対応しており、型セレクターの入れ子には `&` 入れ子セレクターを使用する必要があります。

子セレクター
------

CSS 入れ子を使用して、親の子セレクターを作成し、そのセレクターを使用して固有の親の子要素を対象とすることができます。これは `&` 入れ子セレクターを使っても使わなくても可能です。

特定の場面では、 `&` 入れ子セレクターが必要である場合や有益である場合があります。

* 複合セレクターまたは擬似クラスなどを使用して、セレクターを互いに結合する場合。
* 後方互換性のため。
* 読みやすさのための視覚的インジケーターとして、 `&` 入れ子セレクターを見たときに、 CSS 入れ子を使用していることがわかります。

```css
/\* 入れ子セレクターなし \*/
parent {
  /\* 親スタイル \*/
  child {
    /\* 親の子のスタイル \*/
  }
}

/\* 入れ子セレクターあり \*/
parent {
  /\* 親スタイル \*/
  & child {
    /\* 親の子のスタイル \*/
  }
}

/\* ブラウザーは両者を次のように解釈する \*/
parent {
  /\* 親スタイル \*/
}
parent child {
  /\* 親の子のスタイル \*/
}
```

### 例

この例では、 `&` 入れ子セレクターを使用しない場合と使用する場合で、 `<label>` 内の `<input>` は `<label>` の兄弟である `<input>` と異なる形でスタイル設定されています。これは `&` 入れ子セレクターを除外した場合の影響を示しています。

**メモ:** この例は、入れ子仕様の以前の仕様書と現在の仕様書を実装したブラウザーで出力が異なることを示しています。 Chrome や Safari で実装されている 2023 年 8 月以前の入れ子仕様では、 `&` の結合子が必須となっています。ブラウザーが現在の仕様に対応している場合、どちらの例も 2 番目の例と一致します。

#### 入れ子セレクターなし

##### HTML

```html
<form>
  <label for="name">Name:
    <input type="text" id="name" />
  </label>
  <label for="email">email:</label>
  <input type="text" id="email" />
</form>
```

##### CSS
```

form,
label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
```

```css
input {
  /\* label の中ではない input のスタイル \*/
  border: tomato 2px solid;
}
label {
  /\* label のスタイル \*/
  font-family: system-ui;
  font-size: 1.25rem;
  input {
    /\* label の中の input のスタイル \*/
    border: blue 2px dashed;
  }
}
```

##### 結果

#### 入れ子セレクターあり

##### HTML

```html
<form>
  <label for="name">Name:
    <input type="text" id="name" />
  </label>
  <label for="email">email:</label>
  <input type="text" id="email" />
</form>
```

##### CSS
```

form,
label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
```

```css
input {
  /\* label の中ではない input のスタイル \*/
  border: tomato 2px solid;
}
label {
  /\* label のスタイル \*/
  font-family: system-ui;
  font-size: 1.25rem;
  & input {
    /\* label の中の input のスタイル \*/
    border: blue 2px dashed;
  }
}
```

##### 結果

結合子
---

CSS 結合子は `&` 入れ子セレクターの有無にかかわらず使用することができます。

### 例

#### 兄弟結合子の入れ子

この例では、それぞれの `<h2>` の直後の段落を次兄弟結合子 (`+`) を使用して CSS の入れ子を使用して対象にしています。

##### HTML

```html
<h2>Heading</h2>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
```

##### CSS

```css
h2 {
  color: tomato;
  + p {
    color: white;
    background-color: black;
  }
}
/\* このコードは & 入れ子セレクターを用いて書くこともできる \*/
/\*
h2 {
 color: tomato;
 & + p {
 color: white;
 background-color: black;
 }
}
\*/
```

##### 結果

複合セレクター
-------

入れ子になっている CSS で複合セレクターを使用する場合、 `&` 入れ子セレクターを**使用しなければなりません**。これは、ブラウザーが `&` 入れ子セレクタを使用していないセレクターの間に自動的に空白を追加するためです。

`class="a b"` を持つ要素を対象とするためには、 `&` 入れ子セレクタが必要です。そうしないと、空白が複合セレクターを壊してしまいます。

```css
.a {
  /\* class="a" を持った要素のスタイル \*/
  .b {
    /\* class="a" を持った要素のスタイルの子孫である class="b" のスタイル \*/
  }
  &.b {
    /\* class="a b" を持った要素のスタイル \*/
  }
}

/\* the browser parses this as \*/
.a {
  /\* class="a" を持った要素のスタイル \*/
}
.a .b {
  /\* class="b" which is a descendant of class="a" を持った要素のスタイル \*/
}
.a.b {
  /\* class="a b" を持った要素のスタイル \*/
}
```

### 例

#### 入れ子と複合セレクター

この例では、 `&` 入れ子セレクタを使用して複合セレクターを作成し、複数のクラスを持つ要素をスタイル設定しています。

##### HTML

```html
<div class="notices">
  <div class="notice">
    <h2 class="notice-heading">Notice</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </div>
  <div class="notice warning">
    <h2 class="warning-heading">Warning</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </div>
  <div class="notice success">
    <h2 class="success-heading">Success</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </div>
</div>
```

##### CSS

`.notices` のスタイルで`フレックスボックスレイアウト`を使用して列を作成します。

```css
.notices {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 90%;
  margin: auto;
}
```

下記の CSS コードでは、 `&` の有無にかかわらず、入れ子を使用して複合セレクターを作成しています。最上位のセレクターは、 `class="notice"` を持つ要素の基本的なスタイルを定義します。そして、 `&` 入れ子セレクターは、 `class="notice warning"` または `class="notice success"` を持つ要素の複合セレクターを作成するために使用します。さらに、明示的に `&` を使用することなく複合セレクターを作成するために入れ子を使用することが、セレクター `.notice .notice-heading:before` でできます。

```css
.notice {
  width: 90%;
  justify-content: center;
  border-radius: 1rem;
  border: black solid 2px;
  background-color: #ffc107;
  color: black;
  padding: 1rem;
  .notice-heading:before {
    /\* `.notice .notice-heading:before` と同等 \*/
    content: "ℹ ";
  }
  &.warning {
    /\* `.notice.warning` と同等 \*/
    background-color: #d81b60;
    border-color: #d81b60;
    color: white;
    .warning-heading:before {
      /\* `.notice.warning .warning-heading:before` と同等 \*/
      content: "! ";
    }
  }
  &.success {
    /\* `.notice.success` と同等 \*/
    background-color: #004d40;
    border-color: #004d40;
    color: white;
    .success-heading:before {
      /\* `.notice.success .success-heading:before` と同等 \*/
      content: "✓ ";
    }
  }
}
```

##### 結果

追加した入れ子セレクター
------------

また、 `&` 入れ子セレクターを内側のセレクターの後に追加することもでき、これはコンテキストを反転させる効果があります。

これは、親要素に異なるクラスが指定されたときに変更される子要素のスタイルがある場合に有益なことがあります。

```html
<div>
  <span class="foo">text</span>
</div>
```

これは以下のものの逆になります。

```html
<div class="bar">
  <span class="foo">text</span>
</div>
```

```css
.foo {
  /\* .foo のスタイル \*/
  .bar & {
    /\* .bar .foo のスタイル \*/
  }
}
```

### 例

#### 入れ子セレクターの追加

この例では 3 枚のカードがあり、そのうちの 1 枚が機能です。カードはすべてまったく同じですが、 featured カードは見出しに別の色を保有します。入れ子セレクター `&` を追加することで、 `.featured .h2` のスタイルを `h2` のスタイルに入れ子にすることができます。

##### HTML

```html
<div class="wrapper">
  <article class="card">
    <h2>Card 1</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  </article>
  <article class="card featured">
    <h2>Card 2</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  </article>
  <article class="card">
    <h2>Card 3</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  </article>
</div>
```

##### CSS

```css
.wrapper {
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
  font-family: system-ui;
}
```

以下の CSS では、`.card`、`.card h2` のスタイルを作成し、 `h2` のスタイルでは、 `&` 入れ子セレクターを付加した `.featured` クラスを入れ子にすることで、 `.card.featured h2` のスタイルを作成しています。

```css
.card {
  padding: 0.5rem;
  border: 1px solid black;
  border-radius: 0.5rem;
  & h2 {
    /\* `.card h2` と同等 \*/
    color: slateblue;
    .featured & {
      /\* `.featured.card h2` と同等 \*/
      color: tomato;
    }
  }
}
```

##### 結果

連結（不可能）
-------

Sass のような CSS プリプロセッサーでは、入れ子を使用して文字列を結合し、新しいクラスを作成することが可能です。これは、 BEM のような CSS 手法では一般的です。

```css
.component {
  &\_\_child-element {
  }
}
/\* Sass ではこのようになる \*/
.component\_\_child-element {
}
```

**警告:** これは CSS の入れ子ではできません。結合子を用いない場合、入れ子のセレクターは要素型セレクターとして扱われます。連結を許可すると、これが壊れてしまいます。

複合セレクターでは、要素型セレクターを最初に入力しなければなりません。 `&Element` （要素型セレクター）を書くと、 CSS セレクターとセレクターブロック全体が無効になります。要素型セレクターを最初に入力しなければならないので、複合セレクターは `Element&` と書かなければなりません。

```css
.my-class {
  element& {
  }
}

/\* ブラウザーはこれを解釈して複合セレクターにする \*/
.my-class {
}
element.my-class {
}
```

無効な入れ子スタイルルール
-------------

ネストされた CSS ルールが無効な場合、その中に含まれるスタイルはすべて無視されます。これは親ルールや先行ルールには影響しません。

次の例では、無効なセレクターがあります（`%` はセレクターとして有効な文字ではありません）。このセレクターを含むルールは無視されますが、それ以降の有効なルールは無視されません。

```css
.parent {
  /\* .parent は動作する \*/
  & %invalid {
    /\* %invalid スタイルはすべて無視される \*/
  }
  & .valid {
    /\* .parent .valid は動作する \*/
  }
}
```

関連情報
----

* CSS 入れ子モジュール
* `&` 入れ子セレクター
* 入れ子 `@` アットルール
* 入れ子と詳細度


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() - 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`


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

rotateY()
=========

**`rotateY()`** は CSS の関数で、要素の形を変化させずに縦座標 (垂直軸) の周りを回転させる座標変換を定義します。結果は `<transform-function>` データ型になります。

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

回転軸は、CSS の `transform-origin` プロパティで定義される原点を通ります。

**メモ:** `rotateY(a)` は `rotate3d(0, 1, 0, a)` と等価です。

**メモ:** 2D 平面での回転とは異なり、 3D での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。

構文
--

`rotateY()` で生成される回転の量は、 `<angle>` で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。

```css
rotateY(a)
```

### 値

`a`

`<angle>` で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。

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

(

cos
(
a
)

0

sin
(
a
)

0

1

0

-
sin
(
a
)

0

cos
(
a
)

)

 |

(

cos
(
a
)

0

sin
(
a
)

0

0

1

0

0

-
sin
(
a
)

0

cos
(
a
)

0

0

0

0

1

)

 |

例
-

### HTML

```html
<div>Normal</div>
<div class="rotated">Rotated</div>
```

### CSS

```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotateY(60deg);
  background-color: pink;
}
```

### 結果

仕様書
---

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

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

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

関連情報
----

* `transform` プロパティ
* `rotate` プロパティ
* `<transform-function>`


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

skewX()
=======

**`skewX()`** は CSS の関数で、要素を 2D 平面上で水平方向にゆがめる変換を定義します。結果は `<transform-function>` データ型になります。

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

この変換はシアー変形 (せん断写像) で、要素内のそれぞれの点を水平方向に指定された角度でゆがませます。それぞれの点の横座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。

**メモ:** `skewX(a)` は `skew(a)` と等価です。

構文
--

```css
skewX(a)
```

### 値

`a`

`<angle>` で、横座標方向にゆがめるのに使用する角度を表します。

| 直交座標系 (ℝ^2) | 同次座標系 (ℝℙ^2) | 直交座標系 (ℝ^3) | 同次座標系 (ℝℙ^3) |
| --- | --- | --- | --- |
|

(

1

tan
(
a
)

0

1

)

 |

(

1

tan
(
a
)

0

0

1

0

0

0

1

)

 |

(

1

tan
(
a
)

0

0

1

0

0

0

1

)

 |

(

1

tan
(
a
)

0

0

0

1

0

0

0

0

1

0

0

0

0

1

)

 |
| `[1 0 tan(a) 1 0 0]` |

例
-

### HTML

```html
<div>Normal</div>
<div class="skewed">Skewed</div>
```

### CSS

```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skewX(10deg); /\* skew(10deg) と同じ \*/
  background-color: pink;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-skewx |

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

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

関連情報
----

* `transform`
* `<transform-function>`
* 独立した座標変換プロパティ:
    + `translate`
    + `scale`
    + `rotate`
    + 注: `skew` プロパティはありません


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

perspective()
=============

**`perspective()`** は CSS の関数で、ユーザーと z=0 平面との間の距離を定義し、閲覧者からの視点は二次元のインターフェイスが三次元であったかのようになります。結果は `<transform-function>` データ型になります。

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

`perspective()` 座標変換関数は `transform` 値の一部で、座標変換される要素に適用されます。これは `perspective` および `perspective-origin` の各プロパティが三次元空間に座標変換される子の親に付けられるのとは異なります。

構文
--

`perspective()` で使用する視点距離は、`<length>` 値でユーザーと z=0 平面との間の距離を指定するか、または `none` で指定します。
 z=0 平面とは、二次元表示ですべてが見える平面、つまり画面のことです。
 負の値は構文エラーになります。
 `1px` より小さい値 (ゼロを含む) は `1px` になります。
 値が `none` 以外の場合、 z が正の位置にある要素は大きく表示されます。また、z が負の位置にある要素は小さく表示されます。
 z 位置が `perspective` の値と同じか大きい要素は、ユーザーの背後にあるかのようになり、非表示になります。
 `perspective()` が大きいと、座標変換が小さいことを表します。`perspective()` の値が小さいと、座標変換が大きいことを表します。`perspective(none)` は無限の距離からの遠近感を表し、座標変換はありません。

```css
perspective(d)
```

### 値

*d*

`<length>` で、ユーザーと z=0 平面との間の距離を表します。 0 または負の数であった場合は、距離の変換は適用されません。

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

(

1

0

0

0

0

1

0

0

0

0

1

0

0

0

−
1
/
d

1

)

 |

例
-

### HTML

```html
<p>Without perspective:</p>
<div class="no-perspective-box">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>

<p>With perspective (9cm):</p>
<div class="perspective-box-far">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>

<p>With perspective (4cm):</p>
<div class="perspective-box-closer">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>
```

### CSS

```css
.face {
  position: absolute;
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 100px;
  text-align: center;
}

p + div {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  margin-left: 100px;
}
.no-perspective-box {
  transform: rotateX(-15deg) rotateY(30deg);
}

.perspective-box-far {
  transform: perspective(9cm) rotateX(-15deg) rotateY(30deg);
}

.perspective-box-closer {
  transform: perspective(4cm) rotateX(-15deg) rotateY(30deg);
}

.top {
  background-color: skyblue;
  transform: rotateX(90deg) translate3d(0, 0, 50px);
}

.left {
  background-color: pink;
  transform: rotateY(-90deg) translate3d(0, 0, 50px);
}

.front {
  background-color: limegreen;
  transform: translate3d(0, 0, 50px);
}
```

### 結果

仕様書
---

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

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

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

関連情報
----

* `transform`
* `<transform-function>`
* 独立の座標変換プロパティ:
    + `translate`
    + `scale`
    + `rotate`


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

rotate()
========

**`rotate()`** は CSS の関数で、要素を二次元平面上の特定の点を中心に、形を崩さずに回転させる座標変換を定義します。結果は `<transform-function>` データ型になります。

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

要素が回転する中心となる特定の点 — 前述 — は、**変換原点**とも呼ばれます。既定では要素の中央ですが、 `transform-origin` プロパティを使用して独自の座標変換原点を設定することができます。

構文
--

`rotate()` で生成される回転の量は、 `<angle>` で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。180 度で回転したものは*点対称*と呼ばれます。

```css
rotate(a)
```

### 値

*a*

`<angle>` で、回転する角度を表します。回転方向は書字方向に依存します。
 左書きの文脈では、正の角度は時計回りの回転を、負の角度は反時計回りの回転を表します。右書きの文脈では 正の角度は反時計回りの回転を、負の角度は時計回りの回転を表します。

| 直交座標系 (ℝ^2) | 同次座標系 (ℝℙ^2) | 直交座標系 (ℝ^3) | 同次座標系 (ℝℙ^3) |
| --- | --- | --- | --- |
|

(

cos
(
a
)

-
sin
(
a
)

sin
(
a
)

cos
(
a
)

)

 |

(

cos
(
a
)

-
sin
(
a
)

0

sin
(
a
)

cos
(
a
)

0

0

0

1

)

 |

(

cos
(
a
)

-
sin
(
a
)

0

sin
(
a
)

cos
(
a
)

0

0

0

1

)

 |

(

cos
(
a
)

-
sin
(
a
)

0

0

sin
(
a
)

cos
(
a
)

0

0

0

0

1

0

0

0

0

1

)

 |
| `[cos(a) sin(a) -sin(a) cos(a) 0 0]` |

例
-

### 基本的な例

#### HTML

```html
<div>Normal</div>
<div class="rotated">Rotated</div>
```

#### CSS

```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate(45deg); /\* rotateZ(45deg) と等価 \*/
  background-color: pink;
}
```

#### 結果

### 回転とその他の座標変換の組み合わせ

複数の座標変換を要素に適用したい場合は、座標変換を指定する順序に気を付けてください。例えば、平行移動前に回転すると、平行移動によって回転の軸が変わってしまいます。

#### HTML

```html
<div>Normal</div>
<div class="rotate">Rotated</div>
<div class="rotate-translate">Rotated + Translated</div>
<div class="translate-rotate">Translated + Rotated</div>
```

#### CSS

```css
div {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 100px;
  height: 100px;
  background-color: lightgray;
}

.rotate {
  background-color: transparent;
  outline: 2px dashed;
  transform: rotate(45deg);
}

.rotate-translate {
  background-color: pink;
  transform: rotate(45deg) translateX(180px);
}

.translate-rotate {
  background-color: gold;
  transform: translateX(180px) rotate(45deg);
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-rotate |

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

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

関連情報
----

* `transform` プロパティ
* `rotate` プロパティ
* `<transform-function>`
* `rotate3d()`


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

rotate3d()
==========

**`rotate3d()`** は CSS の関数は、要素を 3D 空間内の固定した軸を中心に、形を崩さずに回転させる座標変換を定義します。結果は `<transform-function>` データ型になります。

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

3D 空間では、回転には三次元の自由度があり、これらが一緒になって単一の回転軸を表します。回転軸は [x, y, z] ベクトルによって定義され、 (`transform-origin` プロパティで定義される) 原点を通過します。もし、指定値として、ベクトルが*正規化*されていない場合 (すなわち、3 つの座標の 2 乗の合計が 1 ではない場合)、ユーザーエージェントが内部的に正規化します。正規化できないベクトル、例えば null ベクトル [0, 0, 0] では、回転が無視されますが、 CSS プロパティ全体を無効化はしません。

**メモ:** 2D 平面での回転とは異なり、 3D での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。

構文
--

`rotate3d()` で行う回転の量は、3 つの `<number>` および 1 つの `<angle>` で指定します。 `<number>` は回転軸を表すベクトルの X, Y, Z 座標を表します。 `<angle>` は回転角を表します。正の数の場合、回転方向は時計回りで、負の数の場合、回転方向は反時計回りになります。

```css
rotate3d(x, y, z, a)
```

### 値

`x`

`<number>` で、回転軸を表すベクトルの X 座標を表し、 0 から 1 までの値を取ります。

`y`

`<number>` で、回転軸を表すベクトルの Y 座標を表し、 0 から 1 までの値を取ります。

`z`

`<number>` で、回転軸を表すベクトルの Z 座標を表し、 0 から 1 までの値を取ります。

`a`

`<angle>` で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。

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

(

1
+
(
1
−
cos
(
a
)
)
(

x
2

−
1
)

z
⋅
sin
(
a
)
+
x
y
(
1
−
cos
(
a
)
)

−
y
⋅
sin
(
a
)
+
x
z
(
1
−
cos
(
a
)
)

−
z
⋅
sin
(
a
)
+
x
y
(
1
−
cos
(
a
)
)

1
+
(
1
−
cos
(
a
)
)
(

y
2

−
1
)

x
⋅
sin
(
a
)
+
y
z
(
1
−
cos
(
a
)
)

y
⋅
sin
(
a
)
+
x
z
(
1
−
cos
(
a
)
)

−
x
⋅
sin
(
a
)
+
y
z
(
1
−
cos
(
a
)
)

1
+
(
1
−
cos
(
a
)
)
(

z
2

−
1
)

)

\begin{pmatrix}1 + (1 - \cos(a))(x^2 - 1) & z\cdot \sin(a) + xy(1 - \cos(a)) & -y\cdot \sin(a) + xz(1 - \cos(a))\\-z\cdot \sin(a) + xy(1 - \cos(a)) & 1 + (1 - \cos(a))(y^2 - 1) & x\cdot \sin(a) + yz(1 - \cos(a))\\y\cdot \sin(a) + xz(1 - \cos(a)) & -x\cdot \sin(a) + yz(1 - \cos(a)) & 1 + (1 - \cos(a))(z^2 - 1)\end{pmatrix}

 |
| 同次座標系 (ℝℙ^3) |

(

1
+
(
1
−
cos
(
a
)
)
(

x
2

−
1
)

z
⋅
sin
(
a
)
+
x
y
(
1
−
cos
(
a
)
)

−
y
⋅
sin
(
a
)
+
x
z
(
1
−
cos
(
a
)
)

0

−
z
⋅
sin
(
a
)
+
x
y
(
1
−
cos
(
a
)
)

1
+
(
1
−
cos
(
a
)
)
(

y
2

−
1
)

x
⋅
sin
(
a
)
+
y
z
(
1
−
cos
(
a
)
)

0

y
⋅
sin
(
a
)
+
x
z
(
1
−
cos
(
a
)
)

−
x
⋅
sin
(
a
)
+
y
z
(
1
−
cos
(
a
)
)

1
+
(
1
−
cos
(
a
)
)
(

z
2

−
1
)

0

0

0

0

1

)

\begin{pmatrix}1 + (1 - \cos(a))(x^2 - 1) & z\cdot \sin(a) + xy(1 - \cos(a)) & -y\cdot \sin(a) + xz(1 - \cos(a)) & 0\\-z\cdot \sin(a) + xy(1 - \cos(a)) & 1 + (1 - \cos(a))(y^2 - 1) & x\cdot \sin(a) + yz(1 - \cos(a)) & 0\\y\cdot \sin(a) + xz(1 - \cos(a)) & -x\cdot \sin(a) + yz(1 - \cos(a)) & 1 + (1 - \cos(a))(z^2 - 1) & 0\\0 & 0 & 0 & 1\end{pmatrix}

 |

例
-

### Y 軸に沿って回転

#### HTML

```html
<div>Normal</div>
<div class="rotated">Rotated</div>
```

#### CSS

```css
body {
  perspective: 800px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate3d(0, 1, 0, 60deg);
  background-color: pink;
}
```

#### 結果

### 独自の軸に沿って回転

#### HTML

```html
<div>Normal</div>
<div class="rotated">Rotated</div>
```

#### CSS

```css
body {
  perspective: 800px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate3d(1, 2, -1, 192deg);
  background-color: pink;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* `transform` プロパティ
* `rotate` プロパティ
* `<transform-function>`


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

matrix()
========

**`matrix()`** は CSS の関数で、二次元同次変換行列を定義します。結果は `<transform-function>` データ型になります。

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

**メモ:** `matrix(a, b, c, d, tx, ty)` は `matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)` の短縮形です。

構文
--

`matrix()` 関数は 6 つの値で指定されます。定数は内蔵されていて引数としては渡されず、その他の引数は列優先の順で記述されます。

```css
matrix(a, b, c, d, tx, ty)
```

### 値

*a* *b* *c* *d*

`<number>` で、線形変換を記述します。

*tx* *ty*

`<number>` で、適用する変換を記述します。

| 直交座標系 (ℝ^2) | 同次座標系 (ℝℙ^2) | 直交座標系 (ℝ^3) | 同次座標系 (ℝℙ^3) |
| --- | --- | --- | --- |
|

(

a

c

b

d

)

 |

(

a

c

tx

b

d

ty

0

0

1

)

 |

(

a

c

tx

b

d

ty

0

0

1

)

 |

(

a

c

0

tx

b

d

0

ty

0

0

1

0

0

0

0

1

)

 |
| `[a b c d tx ty]` |

 値は次の関数を表します。
 `matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())`

例
-

### HTML

```html
<div>Normal</div>
<div class="changed">Changed</div>
```

### CSS

```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.changed {
  transform: matrix(1, 2, -1, 1, 80, 80);
  background-color: pink;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-matrix |

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

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

関連情報
----

* `transform`
* 独立した座標変換プロパティ:
    + `translate`
    + `scale`
    + `rotate`
* `<transform-function>`
* `matrix3d()`
* Understanding the CSS Transforms Matrix


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

scale3d()
=========

**`scale3d()`** は CSS の関数で、 3D 空間において要素を変倍する座標変換を定義します。
 変倍量はベクトルで定義されるため、それぞれの次元ごとに異なる倍率で変倍することができます。結果は `<transform-function>` データ型になります。

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

この変倍座標変換は、三次元ののベクトルであることが特徴です。この座標は、それぞれの方向にどれだけ変倍を行うかを定義します。3 つすべての座標が等しい場合、変倍は一様 (*等方的*) で、要素の形が保たれます (これは相似変換です)。

座標の値が [-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は 点対称化 と大きさの変更を行います。1 と等しい場合、変倍は何もしません。

構文
--

`scale3d()` 関数は 3 つの値で指定され、それぞれの値はそれぞれの方向に適用される変倍率を表します。

```css
scale3d(sx, sy, sz)
```

### 値

`sx`

`<number>` で、変倍ベクトルの横軸を表します。

`sy`

`<number>` で、変倍ベクトルの縦軸を表します。

`sz`

`<number>` で、変倍ベクトルの Z 成分を表します。

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

(

sx

0

0

0

sy

0

0

0

sz

)

 |

(

sx

0

0

0

0

sy

0

0

0

0

sz

0

0

0

0

1

)

 |

例
-

### 原点の変更なし

#### HTML

```html
<div>Normal</div>
<div class="scaled">Scaled</div>
```

#### CSS

```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px);
  background-color: pink;
}
```

#### 結果

### 座標変換の原点を移動

#### HTML

```html
<div>Normal</div>
<div class="scaled">Scaled</div>
```

#### CSS

```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px);
  transform-origin: left;
  background-color: pink;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* `transform`
* `<transform-function>`
* `scaleZ()`
* `translate3d()`
* `rotate3d()`
* 独立した座標変換プロパティ:
    + `translate`
    + `scale`
    + `rotate`


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

rotateX()
=========

**`rotateX()`** は CSS の関数で、要素の形を変化させずに横座標 (水平軸) の周りを回転させる座標変換を定義します。結果は `<transform-function>` データ型になります。

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

回転軸は、CSS の `transform-origin` プロパティで定義される原点を通ります。

**メモ:** `rotateX(a)` は `rotate3d(1, 0, 0, a)` と等価です。

**メモ:** 2D 平面での回転とは異なり、 3D での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。

構文
--

`rotateX()` で生成される回転の量は、 `<angle>` で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。

```css
rotateX(a)
```

### 値

`a`

`<angle>` で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。

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

(

1

0

0

0

cos
(
a
)

-
sin
(
a
)

0

sin
(
a
)

cos
(
a
)

)

 |

(

1

0

0

0

0

cos
(
a
)

-
sin
(
a
)

0

0

sin
(
a
)

cos
(
a
)

0

0

0

0

1

)

 |

例
-

### HTML

```html
<div>Normal</div>
<div class="rotated">Rotated</div>
```

### CSS

```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotateX(45deg);
  background-color: pink;
}
```

### 結果

仕様書
---

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

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

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

関連情報
----

* `transform` プロパティ
* `rotate` プロパティ
* `<transform-function>`


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

skewY()
=======

**`skewY()`** は CSS の関数で、要素を 2D 平面上で垂直方向にゆがめる変換を定義します。結果は `<transform-function>` データ型になります。

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

 この変換はシアー変形（せん断写像）で、要素内のそれぞれの点を垂直方向に指定された角度でゆがませます。
 それぞれの点の縦座標は、指定された角度と原点からの距離に比例した値によって変更されます。
 よって、原点から遠くなるにしたがって、加えられる値が大きくなります。

構文
--

```css
skewY(a)
```

### 値

`a`

`<angle>` で、縦座標方向にゆがめるのに使用する角度を表します。

| 直交座標系 (ℝ^2) | 同次座標系 (ℝℙ^2) | 直交座標系 (ℝ^3) | 同次座標系 (ℝℙ^3) |
| --- | --- | --- | --- |
|

(

1

0

tan
(
a
)

1

)

 |

(

1

0

0

tan
(
a
)

1

0

0

0

1

)

 |

(

1

0

0

tan
(
a
)

1

0

0

0

1

)

 |

(

1

0

0

0

tan
(
a
)

1

0

0

0

0

1

0

0

0

0

1

)

 |
| `[1 tan(a) 0 1 0 0]` |

例
-

### HTML

```html
<div>Normal</div>
<div class="skewed">Skewed</div>
```

### CSS

```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skewY(40deg);
  background-color: pink;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-skewy |

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

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

関連情報
----

* `transform`
* `<transform-function>`
* 独立した座標変換プロパティ:
    + `translate`
    + `scale`
    + `rotate`
    + 注: `skew` プロパティはありません


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

scaleZ()
========

**`scaleZ()`** は CSS の関数で、要素を Z 軸に沿って変倍する座標変換を定義します。結果は `<transform-function>` データ型になります。

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

これは要素のそれぞれの点の Z 座標を一定の係数で修正しますが、係数が 1 である場合はこの関数が恒等変換になるので例外です。変倍は等方性ではなく、要素の角度は保存されません。 `scaleZ(-1)` は軸の線対称を定義し、Z 軸は (`transform-origin` プロパティの指定通りに) 原点を通過します。

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

**メモ:** `scaleZ(sz)` は `scale3d(1, 1, sz)` と等価です。

構文
--

```css
scaleZ(s)
```

### 値

`s`

`<number>` で、要素のそれぞれの点の Z 座標に適用される変倍率を表します。

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

(

1

0

0

0

1

0

0

0

s

)

 |

(

1

0

0

0

0

1

0

0

0

0

s

0

0

0

0

1

)

 |

例
-

### HTML

```html
<div>Normal</div>
<div class="perspective">Translated</div>
<div class="scaled-translated">Scaled</div>
```

### CSS

```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.perspective {
  /\* 3D 空間を生成するために視点を含める \*/
  transform: perspective(400px) translateZ(-100px);
  background-color: limegreen;
}

.scaled-translated {
  /\* 3D 空間を生成するために視点を含める \*/
  transform: perspective(400px) scaleZ(2) translateZ(-100px);
  background-color: pink;
}
```

### 結果

仕様書
---

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

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

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

関連情報
----

* `scaleX()`
* `scaleY()`
* `transform`
* `<transform-function>`
* `transform-origin`
* 独立した座標変換プロパティ:
    + `translate`
    + `scale`
    + `rotate`
    + 注: `skew` プロパティはありません


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

translate()
===========

**`translate()`** は CSS の関数で、要素を水平方向や垂直方向で再配置します。結果は `<transform-function>` データ型になります。

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

この変換は、二次元ベクトルであることが特徴です。それぞれの方向にどれだけ要素が移動するかの座標を定義します。

構文
--

```css
/\* 単一の <length-percentage> 値 \*/
transform: translate(200px);
transform: translate(50%);

/\* 二つの <length-percentage> 値 \*/
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);
```

### 値

単一の `<length-percentage>` values

この値は `<length>` または `<percentage>` で、変換ベクトルの横軸 (水平方向、X 座標) を表します。変換ベクトルの縦軸 (垂直方向、Y 座標) は `0` に設定されます。例えば、 `translate(2px)` は `translate(2px, 0)` と等価です。パーセント値の場合は、 `transform-box` で定義される参照ボックスの幅からの相対値です。

二つの `<length-percentage>` 値

この値は 2 つの `<length>` または `<percentage>` 値で、変換ベクトルの横軸 (水平方向、X 座標) と縦軸 (垂直方向、Y 座標) を表します。1 つ目にパーセント値が使用された場合は、 `transform-box` で定義された参照ボックスの幅からの相対値で、2 つ目にパーセント値が使用された場合は、高さからの相対値です。

| 直交座標系 (ℝ^2) | 同次座標系 (ℝℙ^2) | 直交座標系 (ℝ^3) | 同次座標系 (ℝℙ^3) |
| --- | --- | --- | --- |
| ℝ^2 では線形変換ではないので、直交座標の行列で表すことはできません。 |

(

1

0

tx

0

1

ty

0

0

1

)

 |

(

1

0

tx

0

1

ty

0

0

1

)

 |

(

1

0

0

tx

0

1

0

ty

0

0

1

0

0

0

0

1

)

 |
| `[1 0 0 1 tx ty]` |

### 形式文法

```css
translate(<length-percentage>, <length-percentage>?)
```

例
-

### 単一軸を使用した移動

#### HTML

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

#### CSS

```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  /\* translateX(10px) または translate(10px, 0) と同じ \*/
  transform: translate(10px);
  background-color: pink;
}
```

#### 結果

### Y 軸と X 軸の移動の組み合わせ

#### HTML

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

#### CSS

```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translate(10px, 10px);
  background-color: pink;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-translate |

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

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

関連情報
----

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


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

scale()
=======

**`scale()`** は CSS の関数で、二次元平面上における拡縮する座標変換を定義します。変倍の量がベクトルで定義されるため、水平方向と垂直方向に対して異なる変倍で大きさを変えることができます。結果は `<transform-function>` データ型になります。

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

この変倍座標変換は、二次元のベクトルであることが特徴です。この座標は、それぞれの方向にどれだけ変倍を行うかを定義します。両方の座標が等しい場合、変倍は一様 (*等方的*) で、要素の形が保たれます (これは相似変換です)。

座標の値が [-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は 点対称化 と大きさの変更を行います。1 と等しい場合、変倍は何もしません。

**メモ:** `scale()` 関数は、 2D の変換のみに適用されます。 3D 空間内での変倍を行うには、 `scale3d()` 関数を使用してください。

構文
--

`scale()` 関数は、1 つまたは 2 つの値で指定され、それにより各方向に適用される変倍が表現されます。

```css
scale(sx)

scale(sx, sy)
```

### 値

`sx`

変倍ベクトルの横座標を表す `<number>`。

`sy`

変倍ベクトルの縦座標を表す `<number>`。定義されない場合、これの既定値は `sx` であり、要素の形を保つ一様な変倍となります。

| 直交座標系 (ℝ^2) | 同次座標系 (ℝℙ^2) | 直交座標系 (ℝ^3) | 同次座標系 (ℝℙ^3) |
| --- | --- | --- | --- |
|

(

sx

0

0

sy

)

 |

(

sx

0

0

0

sy

0

0

0

1

)

 |

(

sx

0

0

0

sy

0

0

0

1

)

 |

(

sx

0

0

0

0

sy

0

0

0

0

1

0

0

0

0

1

)

 |
| `[sx 0 0 sy 0 0]` |

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

拡大や縮小のアニメーションは、特定の種類の偏頭痛を引き起こす原因になりやすいので、アクセシビリティの問題になることがあります。ウェブサイトにこのようなアニメーションを含める必要がある場合は、できればサイト全体で、ユーザーがアニメーションを止める制御ができるようしてください。

また、 `prefers-reduced-motion` メディア特性を使用することを検討してください。これを使用してメディアクエリーを書けば、ユーザーがシステムの設定でアニメーションを減らすよう指定した場合にアニメーションを止めることができます。

詳しくは以下の文書を参照してください。

* MDN WCAG の理解、ガイドライン 2.3 の解説
* Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1
例
-

### X と Y の大きさを一緒に変倍する

#### HTML

```html
<div>Normal</div>
<div class="scaled">Scaled</div>
```

#### CSS

```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(0.7); /\* Equal to scaleX(0.7) scaleY(0.7) \*/
  background-color: pink;
}
```

#### 結果

### X と Y の大きさを別々に変倍し、原点を平行移動させる

#### HTML

```html
<div>Normal</div>
<div class="scaled">Scaled</div>
```

#### CSS

```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(2, 0.5); /\* Equal to scaleX(2) scaleY(0.5) \*/
  transform-origin: left;
  background-color: pink;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-scale |

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

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

関連情報
----

* `transform`
* `scale`
* `<transform-function>`
* `scale3d()`
* 他の独立座標変換関数、 `translate` および `rotate`


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

matrix3d()
==========

**`matrix3d()`** は CSS の関数で、 4x4 の 3D 同次変換行列を定義します。
 結果は `<transform-function>` データ型になります。

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

構文
--

`matrix3d()` 関数は 16 個の値で指定します。列優先の順で記述します。

```css
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
```

### 値

*a1* *b1* *c1* *d1* *a2* *b2* *c2* *d2*
*a3* *b3* *c3* *d3*

`<number>` で、線形変換を記述します。

*a4* *b4* *c4 d4*

`<number>` で、適用する座標変換を記述します。

| 直交座標系 (ℝ^2) | 同次座標系 (ℝℙ^2) | 直交座標系 (ℝ^3) | 同次座標系 (ℝℙ^3) |
| --- | --- | --- | --- |
| この変換は 3D 空間に適用され、平面で表現することはできません。 | 一般的な 3D アフィン変換は、変換が線形座標変換ではないので、直交座標行列を使用して表現することはできません。 |

(

a1

a2

a3

a4

b1

b2

b3

b4

c1

c2

c3

c4

d1

d2

d3

d4

)

 |

例
-

### つぶれる立方体の例

次の例は、 DOM 要素と変換から作成された立方体を示しており、ポインターを置いたりフォーカスしたりすることで `matrix3d()` 変換を適用することができます。

#### HTML

```html
<section id="example-element" tabindex="0">
  <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>
</section>
```

#### CSS

```css
#example-element {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transition: transform 1.5s;
  transform: rotate3d(1, 1, 1, 30deg);
  margin: 50px auto;
}

#example-element:hover,
#example-element:focus {
  transform: rotate3d(1, 1, 1, 30deg) matrix3d(
      1,
      0,
      0,
      0,
      0,
      1,
      6,
      0,
      0,
      0,
      1,
      0,
      50,
      100,
      0,
      1.1
    );
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: #fff;
}

.front {
  background: rgba(90, 90, 90, 0.7);
  transform: translateZ(50px);
}

.back {
  background: rgba(0, 210, 0, 0.7);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(210, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 210, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(210, 210, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(210, 0, 210, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}
```

#### 結果

### 行列変換と拡大縮小の例

もう一つの `transform3d()` の例は、変換と拡大縮小をアニメーションと組み合わせて実装したものです。

#### HTML

```html
<div class="foo">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quaerat sit
  soluta, quisquam exercitationem delectus qui unde in facere necessitatibus aut
  quia porro dolorem nesciunt enim, at consequuntur aliquam esse?
</div>
```

#### CSS

```css
html {
  width: 100%;
}
body {
  height: 100vh;
  /\* Centering content \*/
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
}
.foo {
  width: 50%;
  padding: 1em;
  color: white;
  background: #ff8c66;
  border: 2px dashed black;
  text-align: center;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  /\* より良いデモンストレーションのためのアニメーションの設定 \*/
  animation: MotionScale 2s alternate linear infinite;
}

@keyframes MotionScale {
  from {
    /\*
 ここでは恒等行列を基礎としています。
 以下の行列は、以下の変換を記述しています。
 それぞれの X 座標を -50px 移動する
 それぞれの Y 座標を -100px 移動する
 それぞれの Z 座標を 0 移動する
 10% 縮小する
 \*/
    transform: matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      -50, -100, 0, 1.1
    );
  }
  50% {
    transform: matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      0, 0, 0, 0.9
    );
  }
  to {
     transform: matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      50, 100, 0, 1.1
    )
  }
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

* `transform`
* 独立の座標変換プロパティ:
    + `translate`
    + `scale`
    + `rotate`
* `<transform-function>`
* Understanding the CSS Transforms Matrix (2012)


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

translateY()
============

**`translateY()`** は CSS の関数で、要素を二次元平面上の垂直方向で再配置します。結果は `<transform-function>` データ型になります。

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

**メモ:** `translateY(ty)` は `translate(0, ty)` または `translate3d(0, ty, 0)` と等価です。

構文
--

```css
/\* <length-percentage> 値 \*/
transform: translateY(200px);
transform: translateY(50%);
```

### 値

`<length-percentage>`

変換ベクトルの縦座標を表す `<length>` または `<percentage>` です。直交座標系では Y 座標の移動量をを表します。パーセント値は `transform-box` プロパティで定義される参照ボックスの幅からの相対値です。

| 直交座標系 (ℝ^2) | 同次座標系 (ℝℙ^2) | 直交座標系 (ℝ^3) | 同次座標系 (ℝℙ^3) |
| --- | --- | --- | --- |
| 平行移動は ℝ^2 の線形変換ではないので、直交座標行列を使用して表すことはできません。 |

(

1

0

0

0

1

t

0

0

1

)

 |

(

1

0

0

0

1

t

0

0

1

)

 |

(

1

0

0

0

0

1

0

t

0

0

1

0

0

0

0

1

)

 |
| `[1 0 0 1 0 t]` |

### 形式文法

```css
translateY(<length-percentage>)
```

例
-

### HTML

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

### CSS

```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translateY(10px);
  background-color: pink;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-translatey |

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

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

関連情報
----

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


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

rotateZ()
=========

**`rotateZ()`** は CSS の関数で、要素の形を変化させずに Z 軸の周りを回転させる座標変換を定義します。結果は `<transform-function>` データ型になります。

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

回転軸は、 `transform-origin` CSS プロパティで定義される原点を通ります。

**メモ:** `rotateZ(a)` は `rotate(a)` または `rotate3d(0, 0, 1, a)` と等価です。

**メモ:** 2D 平面での回転とは異なり、 3D での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。

構文
--

`rotateZ()` で生成される回転の量は、 `<angle>` で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。

```css
rotateZ(a)
```

### 値

`a`

`<angle>` で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。

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

(

cos
(
a
)

-
sin
(
a
)

0

sin
(
a
)

cos
(
a
)

0

0

0

1

)

 |

(

cos
(
a
)

-
sin
(
a
)

0

0

sin
(
a
)

cos
(
a
)

0

0

0

0

1

0

0

0

0

1

)

 |

例
-

### HTML

```html
<div>Normal</div>
<div class="rotated">Rotated</div>
```

### CSS

```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotateZ(45deg);
  background-color: pink;
}
```

### 結果

仕様書
---

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

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

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

関連情報
----

* `transform` プロパティ
* `rotate` プロパティ
* `<transform-function>`


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

scaleX()
========

**`scaleX()`** は CSS の関数で、要素を X 軸に沿って (水平に) 変倍する座標変換を定義します。結果は `<transform-function>` データ型になります。

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

これは要素のそれぞれの点の横座標（水平座標、 X 座標）を一定の係数で修正しますが、係数が 1 である場合はこの関数が恒等変換になるので例外です。変倍は等方性ではなく、要素の角度は保存されません。 `scaleX(-1)` は軸の線対称を定義し、垂直軸は (`transform-origin` プロパティの指定通りに) 原点を通過します。

**メモ:** `scaleX(sx)` は `scale(sx, 1)` または `scale3d(sx, 1, 1)` と等価です。

構文
--

```css
scaleX(s)
```

### 値

`s`

`<number>` で、要素のそれぞれの点の横座標に適用される変倍率を表します。

| 直交座標系 (ℝ^2) | 同次座標系 (ℝℙ^2) | 直交座標系 (ℝ^3) | 同次座標系 (ℝℙ^3) |
| --- | --- | --- | --- |
|

(

s

0

0

1

)

 |

(

s

0

0

0

1

0

0

0

1

)

 |

(

s

0

0

0

1

0

0

0

1

)

 |

(

s

0

0

0

0

1

0

0

0

0

1

0

0

0

0

1

)

 |
| `[s 0 0 1 0 0]` |

例
-

### HTML

```html
<div>Normal</div>
<div class="scaled">Scaled</div>
```

### CSS

```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scaleX(0.6);
  background-color: pink;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-scalex |

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

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

関連情報
----

* `scaleY()`
* `scaleZ()`
* `transform`
* `scale`
* `<transform-function>`
* `transform-origin`
* 他の独立した座標変換プロパティ:
    + `translate`
    + `rotate`
    + 注: `skew` プロパティはありません


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

translateX()
============

**`translateX()`** は CSS の関数で、要素を二次元平面上の水平方向で再配置します。結果は `<transform-function>` データ型になります。

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

**メモ:** `translateX(tx)` は `translate(tx, 0)` または `translate3d(tx, 0, 0)` と等価です。

構文
--

```css
/\* <length-percentage> 値 \*/
transform: translateX(200px);
transform: translateX(50%);
```

### 値

`<length-percentage>`

変換ベクトルの横座標を表す `<length>` または `<percentage>` です。直交座標系では X 座標の移動量をを表します。パーセント値は `transform-box` プロパティで定義される参照ボックスの幅からの相対値です。

| 直交座標系 (ℝ^2) | 同次座標系 (ℝℙ^2) | 直交座標系 (ℝ^3) | 同次座標系 (ℝℙ^3) |
| --- | --- | --- | --- |
| 平行移動は ℝ^2 の線形変換ではないので、直交座標行列を使用して表すことはできません。 |

(

1

0

t

0

1

0

0

0

1

)

 |

(

1

0

t

0

1

0

0

0

1

)

 |

(

1

0

0

t

0

1

0

0

0

0

1

0

0

0

0

1

)

 |
| `[1 0 0 1 t 0]` |

### 形式文法

```css
translateX(<length-percentage>)
```

例
-

### HTML

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

### CSS

```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translateX(10px); /\* translate(10px) と等価 \*/
  background-color: pink;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-translatex |

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

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

関連情報
----

* `translate()`
* `translateY()`
* `transform`
* `<transform-function>`
* `translate`


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

scaleY()
========

**`scaleY()`** は CSS の関数で、要素を Y 軸に沿って (垂直に) 変倍する座標変換を定義します。結果は `<transform-function>` データ型になります。

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

これは要素のそれぞれの点の横座標を一定の係数で修正しますが、係数が 1 である場合はこの関数が恒等変換になるので例外です。変倍は等方性ではなく、要素の角度は保存されません。 `scaleY(-1)` は軸の線対称を定義し、水平軸は (`transform-origin` プロパティの指定通りに) 原点を通過します。

**メモ:** `scaleY(sy)` は `scale(1, sy)` または `scale3d(1, sy, 1)` と等価です。

`transform: rotateX(180deg);` === `transform: scaleY(-1);`

構文
--

```css
scaleY(s)
```

### 値

`s`

`<number>` で、要素のそれぞれの点の縦座標に適用する変倍係数を表します。

| 直交座標系 (ℝ^2) | 同次座標系 (ℝℙ^2) | 直交座標系 (ℝ^3) | 同次座標系 (ℝℙ^3) |
| --- | --- | --- | --- |
|

(

1

0

0

s

)

 |

(

1

0

0

0

s

0

0

0

1

)

 |

(

1

0

0

0

s

0

0

0

1

)

 |

(

1

0

0

0

0

s

0

0

0

0

1

0

0

0

0

1

)

 |
| `[1 0 0 s 0 0]` |

例
-

### HTML

```html
<div>Normal</div>
<div class="scaled">Scaled</div>
```

### CSS

```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scaleY(0.6);
  background-color: pink;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-scaley |

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

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

関連情報
----

* `scaleX()`
* `scaleZ()`
* `transform`
* `<transform-function>`
* `transform-origin`
* 独立した座標変換プロパティ:
    + `translate`
    + `scale`
    + `rotate`
    + 注: `skew` プロパティはありません


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

skew()
======

**`skew()`** は CSS 関数で、要素を 2D 平面上でゆがめる変換を定義します。結果は `<transform-function>` データ型になります。

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

この変換はシアー変形 (せん断写像) で、要素内のそれぞれの点を水平および垂直方向に指定された角度でゆがませます。要素のそれぞれの角を掴んで、一定の角度に沿って引っ張ったような効果があります。

それぞれの点の座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。

構文
--

`skew()` 関数は 1 つまたは 2 つの値を指定し、それぞれの軸に適用されるゆがみの量を表します。1 つだけ値を設定した場合は X 軸に使用され、 Y 軸方向の変形は行いません。

```css
skew(ax)

skew(ax, ay)
```

### 値

`ax`

`<angle>` で、 X 軸 (横座標) 方向にゆがめるのに使用する角度を表します。

`ay`

`<angle>` で、 Y 軸 (縦座標) 方向にゆがめるのに使用する角度を表します。定義されていない場合、既定値は `0` となり、水平方向にのみゆがめます。

| 直交座標系 (ℝ^2) | 同次座標系 (ℝℙ^2) | 直交座標系 (ℝ^3) | 同次座標系 (ℝℙ^3) |
| --- | --- | --- | --- |
|

(

1

tan
(
ax
)

tan
(
ay
)

1

)

 |

(

1

tan
(
ax
)

0

tan
(
ay
)

1

0

0

0

1

)

 |

(

1

tan
(
ax
)

0

tan
(
ay
)

1

0

0

0

1

)

 |

(

1

tan
(
ax
)

0

0

tan
(
ay
)

1

0

0

0

0

1

0

0

0

0

1

)

 |
| `[1 tan(ay) tan(ax) 1 0 0]` |

例
-

### X 軸のみの変形

#### HTML

```html
<div>Normal</div>
<div class="skewed">Skewed</div>
```

#### CSS

```css
body {
  margin: 20px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skew(10deg); /\* Equal to skewX(10deg) \*/
  background-color: pink;
}
```

#### 結果

### 両方の軸の変形

#### HTML

```html
<div>Normal</div>
<div class="skewed">Skewed</div>
```

#### CSS

```css
body {
  margin: 20px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skew(10deg, 10deg);
  background-color: pink;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-skew |

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

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

関連情報
----

* `transform`
* `<transform-function>`
* skewX()
* skewY()
* 独立した座標変換プロパティ:
    + `translate`
    + `scale`
    + `rotate`
    + 注: `skew` プロパティはありません


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

translate3d()
=============

**`translate3d()`** は CSS の関数で、要素を三次元空間内で再配置します。返値は `<transform-function>` データ型です。

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

この変換は三次元ベクトルであることが特徴です。座標は要素がそれぞれの方向にどれだけ移動するかを定義します。

構文
--

```css
translate3d(tx, ty, tz)
```

### 値

`tx`

移動ベクトルの横座標を表す `<length>` または `<percentage>` です。

`ty`

移動ベクトルの縦座標を表す `<length>` または `<percentage>` です。

`tz`

移動ベクトルの z 成分を表す `<length>` です。 `<percentage>` 値は指定できません。この場合、これを含む座標変換は無効とされます。

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

(

1

0

0

tx

0

1

0

ty

0

0

1

tz

0

0

0

1

)

 |

例
-

### 単一軸の座標変換の使用

#### HTML

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

#### CSS

```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  /\* perspective(500px) translateX(10px) と等価 \*/
  transform: perspective(500px) translate3d(10px, 0, 0px);
  background-color: pink;
}
```

#### 結果

### z 軸と x 軸を組み合わせた座標変換

#### HTML

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

#### CSS

```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: perspective(500px) translate3d(10px, 0, 100px);
  background-color: pink;
}
```

#### 結果

仕様書
---

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

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

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

関連情報
----

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


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

CSS カウンターの使用
============

**CSS カウンター**では、文書内の位置に基づいてコンテンツの表示方法を調整することができます。
 例えば、ウェブページ内の見出し番号を自動的に振ったり、順序付きリストの番号を変更したりするのに使用することができます。

 カウンターは本質的に、 CSS が管理する変数であり、 CSS のルールによって増加・現象し、何回使用されたかを追跡するものです。
 名前付きカウンターを定義したり、あらゆる順序付きリストで既定で生成される `list-item` のカウンターを操作したりすることもできます。

カウンターの使用
--------

### カウンターの値の操作

 カウンターを使用するには、最初に必ず `counter-reset` プロパティで値を初期化する必要があります。
 このプロパティを使用して、カウンターの値を特定の数値に変更することもできます。

下記の例では、 `section` という名前のカウンターを既定値 (0) に初期化しています。

```css
counter-reset: section;
```

 複数のカウンターを初期化することもできます。任意でそれぞれに初期値を指定することができます。
 下記の例では、 `section` と `topic` のカウンターを既定値で、 `page` のカウンターを 3 で初期化しています。

```css
counter-reset: section page 3 topic;
```

 初期化されると、カウンターの値は `counter-increment` で増加させたり減少させたりすることができます。
 例えば、以下の宣言では `section` のカウンターを `h3` タグごとに 1 つずつ増加させます。

```css
h3::before {
  counter-increment: section; /\* section の値を 1 つずつ増加させる \*/
}
```

カウンター名の後に正の数や負の数を使用すると、そのカウンターを増加または減少させる値を指定することができます。

カウンターの名前を `none`, `inherit`, `initial` にすることはできません。そうすると宣言が無視されます。

### カウンターの表示

カウンターの値は、 `counter()` または `counters()` 関数を `content` の中で使用して表示することができます。

例えば、以下の宣言は `counter()` をそれぞれの `h3` 見出しの前に `Section <数値>:` というテキストを付けるために使用しています。ここで `<数値>` は、 10 進数 (既定の表示スタイル) でのカウントの値です。

```css
h3::before {
  counter-increment: section; /\* カウンター section の値を 1 つずつ増加 \*/
  content: "Section " counter(section) ": "; /\* カウンターの値を既定のスタイル（10 進数）で表示 \*/
}
```

`counter()` 関数は、内側のレベルの番号付けに親レベルのコンテキストが含まれない時に使用します。
 例えば、それぞれの内側のレベルは 1 からやり直します。
```

1 One
  1 Nested one
  2 Nested two
2 Two
  1 Nested one
  2 Nested two
  3 Nested three
3 Three
```

`counters()` 関数は、内側のレベルのカウントに親レベルのカウントが含まれる場合に使用されます。
 例えば、これを使用すると次のようにセクションをレイアウトすることができます。
```

1 One
  1.1 Nested one
  2.1 Nested two
2 Two
  1.1 Nested one
  2.1 Nested two
  3.1 Nested three
3 Three
```

`counter()` 関数には `counter(<カウンター名>)` と `counter(<カウンター名>, <カウンタースタイル>)` の 2 つの形があります。
 生成される文字列は、その擬似要素のスコープにある指定された名前の最も内側にあるカウンターの値です。

`counters()` 関数にも、 `counters(<カウンター名>, <セパレーター>)` と `counters(<カウンター名>, <セパレーター>, <カウンタースタイル>)` の 2 つの形があります。生成される文字列は、その擬似要素のスコープにある指定された名前のすべてのカウンターの値が、外側から内側に向けて、指定された文字列 (`<セパレーター>`) で区切られたものになります。

 どちらのメソッドでも、カウンターは指定された `<カウンタースタイル>` で表示されます（既定では `decimal` です）。
 `list-style-type` の値のいずれか、またはカスタムスタイルを使用することができます。

`counter()` と `counter()` の使用方法を示す例は、それぞれ下記の基本的な例と入れ子になったカウンターの例です。

### 逆行カウンター

 逆行カウンターは、カウントアップ（インクリメント）ではなく、カウントダウン（デクリメント）を目的としたものです。
 逆行カウンターは `reversed()` という関数記法を使って `counter-reset` でカウンターの名前を指定する際に作成します。

 逆行カウンターは、初期値が要素数と等しくなります（初期値が 0 である通常のカウンターとは異なります）。
 このため、要素数から 1 までカウントするカウンターを簡単に実装することができます。

例えば、 `section` という名前の逆行カウンターを初期値で作成するには、次のような構文を使用します。

```css
counter-reset: reversed(section);
```

もちろん、初期値は自由に指定することができます。

`counter-increment` に負の値を指定すると、カウンター値が減少します。

**メモ:** 逆行ではないカウンターを減少させるには、 `counter-increment` を使うこともできます。
 逆行カウンターを使用する主な利点は、既定の初期値と、 `list-item` カウンターが自動的に逆行カウンターを減少させてくれることです。

### list-item カウンター

`<ol>` 要素で作成される順序付きリストは、暗黙のうちに `list-item` という名前のカウンターを持っています。

 他のカウンターと同様に、これは既定の初期値として、順方向のカウンターでは 0、逆行カウンターでは「項目数」を持っています。
 作者が作成したカウンターとは異なり、 `list-item` はカウンタが逆行しているかどうかによって、リスト要素ごとに *自動的に* 1 つずつ増加または減少します。

`list-item` カウンターは、CSS を使用して、順序付きリストの既定の動作を操作するために使用することができます。
 例えば、既定の初期値を変更したり、 `counter-increment` を使用してリスト項目の増加または減少の方法を変更したりすることができます。

例
-

### 基本的な例

この例ではそれぞれの見出しの先頭に "第 [カウンターの値] 章:" を追加します。

#### CSS

```css
body {
  counter-reset: section; /\* 'section' という名前のカウンターを設定し、 0 で初期化する \*/
}

h3::before {
  counter-increment: section; /\* section カウンターの値に 1 を加算 \*/
  content: "第 " counter(section) " 章: "; /\* '第 ' という語、 section カウンターの値、
 ' 章' という語、コロンをそれぞれの
 h3 の内容の前に表示 \*/
}
```

#### HTML

```html
<h3>導入</h3>
<h3>本文</h3>
<h3>結論</h3>
```

#### 結果

### 基本的な例: 逆行カウンター

 この例は逆行カウンターを使用していることを除けば、上記のものと同じです。
 ブラウザーが `reversed()` 関数記法に対応している場合は、結果は次のようになります。

![逆行カウンター](/ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters/reversed_headings_basic.png)

#### CSS

```css
body {
  counter-reset: reversed(
    section
  ); /\* 'section' という名前のカウンターを設定し、初期値を 0 とする \*/
}

h3::before {
  counter-increment: section -1; /\* section カウンターの値から 1 を減算 \*/
  content: "第 " counter(section) " 章: "; /\* '第 ' という語、 section カウンターの値、
 ' 章' という語、コロンをそれぞれの
 h3 の内容の前に表示 \*/
}
```

#### HTML

```html
<h3>導入</h3>
<h3>本文</h3>
<h3>結論</h3>
```

#### 結果

### より洗練された例

 カウンターは、必ずしもインクリメントするたびに表示する必要はありません。
 この例はすべてのリンクをカウントし、リンクにテキストがないときだけ便利な代用品としてカウンターを表示します。

#### CSS

```css
:root {
  counter-reset: link;
}

a[href] {
  counter-increment: link;
}

a[href]:empty::after {
  content: "[" counter(link) "]";
}
```

#### HTML

```html
<p>See <a href="https://www.mozilla.org/"></a></p>
<p>Do not forget to <a href="contact-me.html">leave a message</a>!</p>
<p>See also <a href="https://developer.mozilla.org/"></a></p>
```

#### 結果

カウンターの入れ子
---------

 CSS カウンターはアウトラインのリストを作成するのには特に便利で、子要素でカウンターの新しいインスタンスが自動的に生成されます。
 `counters()` 関数を使用して、入れ子になったカウンターの階層間に区切り文字列を挿入することができます。

### 入れ子になったカウンターの例

#### CSS

```css
ol {
  counter-reset: section; /\* それぞれの ol 要素に、 section
 カウンターの新しいインスタンスを
 生成 \*/
  list-style-type: none;
}

li::before {
  counter-increment: section; /\* section カウンターのこのインスタンス
 のみを加算 \*/
  content: counters(section, ".") " "; /\* section カウンターのすべての
 インスタンスの値を、ピリオドで区切って
 結合 \*/
}
```

#### HTML

```html
<ol>
  <li>項目</li>          <!-- 1 -->
  <li>項目               <!-- 2 -->
    <ol>
      <li>項目</li>      <!-- 2.1 -->
      <li>項目</li>      <!-- 2.2 -->
      <li>項目           <!-- 2.3 -->
        <ol>
          <li>項目</li>  <!-- 2.3.1 -->
          <li>項目</li>  <!-- 2.3.2 -->
        </ol>
        <ol>
          <li>項目</li>  <!-- 2.3.1 -->
          <li>項目</li>  <!-- 2.3.2 -->
          <li>項目</li>  <!-- 2.3.3 -->
        </ol>
      </li>
      <li>項目</li>      <!-- 2.4 -->
    </ol>
  </li>
  <li>項目</li>          <!-- 3 -->
  <li>項目</li>          <!-- 4 -->
</ol>
<ol>
  <li>項目</li>          <!-- 1 -->
  <li>項目</li>          <!-- 2 -->
</ol>
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # auto-numbering |

関連情報
----

* `counter-reset`
* `counter-set`
* `counter-increment`
* `@counter-style`


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

CSS アニメーションの使用
==============

**CSS アニメーション**により、ある CSS のスタイル設定を別の設定へと遷移させることができます。アニメーションは、2 種類の要素で構成されています。 それは、アニメーションについて記述するスタイルと、アニメーションの先頭と末尾の CSS スタイルを示すキーフレームです。 同様に、アニメーション途中の通過点となるスタイルを示すこともできます。

CSS アニメーションは、従来のスクリプトによるアニメーションに比べて 3 つの長所があります。

1. 単純なアニメーションには使いやすくできています。 つまり、 JavaScript を知らなくてもアニメーションを作ることができます。
2. アニメーションは中程度以下のシステム負荷で、良く動作します。 JavaScript では、 (上手に作成しなければ) 単純なアニメーションでもシステムの負荷を高めてしまうことがあります。 レンダリングエンジンは可能な限りパフォーマンスをなめらかに保つため、フレームを省略するなどの技術を用いることができます。
3. ブラウザーはアニメーションの流れを制御して、パフォーマンスや効率を最適化します。 例えば、アクティブではないタブで動作しているアニメーションの更新の頻度を減らしたりします。
アニメーションの設定
----------

CSS アニメーションの流れ (シーケンス) を作成するには、アニメーションさせたい要素に `animation` プロパティまたはそのサブプロパティを付加します。 このプロパティはアニメーションのタイミングと長さを設定します。 同様に、アニメーションをどのように進めるかの詳細も設定できます。 なお、このプロパティはアニメーションの外見を指定するものでは**ありません**。 それらは、後述のキーフレームを用いたアニメーションの流れの定義で説明する `@keyframes` アットルールで定義します。

`animation` プロパティのサブプロパティは以下のとおりです。

`animation-name`

アニメーションのキーフレームを示す `@keyframes` アットルールの名前を指定します。

`animation-duration`

1 回のアニメーションサイクルに要する時間の長さを設定します。

`animation-timing-function`

アニメーションの進め方を設定します。 これは加速曲線を定義することで、キーフレーム間のアニメーションをどのように進めていくかを表します。

`animation-delay`

要素が読み込まれてからアニメーションを始めるまでの遅延時間を設定します。

`animation-iteration-count`

アニメーションを繰り返す回数を設定します。 アニメーションを無限に繰り返すには `infinite` を指定してください。

`animation-direction`

アニメーションのシーケンス完了時に、逆方向にアニメーションして繰り返すか、始めの状態にリセットしてアニメーションを繰り返すかを設定します。

`animation-fill-mode`

アニメーションの実行前後に、指定したスタイルを適用するかを設定します。

`animation-play-state`

アニメーションを一時停止したり、再開したりすることができます。

キーフレームを用いたアニメーションの流れの定義
-----------------------

アニメーションのタイミングを指定した後は、アニメーションの外見を定義することが必要です。 これは、`@keyframes` アットルールを用いて 2 つまたはそれ以上のキーフレームを定義することです。 各キーフレームは、アニメーションの流れの中で要素がどのように表現されるかを記述します。

CSS スタイルでアニメーションのタイミングを定義するため、キーフレームを `<percentage>` で指定し、アニメーションの流れの中でいつそのスタイルが適用されるかを示します。 0% はアニメーションシーケンスの始点、100% はアニメーションシーケンスの終点を表します。 これら始点と終点はとても重要であるため、それぞれ、0% は `from`、100% は `to` の別名でも代替できます。 両者の指定は任意ですが、`from`/`0%` と `to`/`100%` の両方が指定されていない場合、ブラウザーは、すべての属性から計算された値を用いてアニメーションを開始または終了します。

また、任意でアニメーションの始まりと終わりの中間地点を定義する追加のキーフレームを含めることも可能です。

例
-

**メモ:** (2017年以前の) 古いブラウザーでは、接頭辞が必要かもしれません。 クリックして参照できるライブサンプルには、`-webkit` 接頭辞を付加したプロパティも含まれています。

### 文字列がブラウザーのウィンドウを横切る

この例では文字列がブラウザーのウィンドウ右端の外側からすべり込むように、 `<p>` 要素へスタイルを設定しています。

このようなアニメーションは、ページ幅がブラウザーウィンドウの幅よりも広くなる原因になるので注意してください。 これは、アニメーションする要素をコンテナ内に置き、そのコンテナのスタイルに `overflow``:hidden` を指定することで回避できます。

```css
p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
```

`<p>` 要素では、アニメーションの始まりから終わりまでの実行に 3 秒かけることを `animation-duration` プロパティで定義しています。 また、アニメーションのキーフレームを定義する `@keyframes` アットルールの名前が "slidein" であることを定義しています。

`<p>` 要素に CSS アニメーションに対応していないブラウザーでのスタイルを設定したい場合は、この部分にそれらのスタイルを含めてください。 ただし、この例ではアニメーション効果以外のスタイル付けは必要ありません。

キーフレームは `@keyframes` アットルールで定義します。 この例には、2 つのキーフレームがあります。 1 番目のキーフレームは 0% (代替表記の `from` を使用しています) です。 ここでは、要素の左マージンを 100% (包含要素の右端を示します) に、要素の幅を 300% (包含要素の幅の 3 倍) に設定しています。 これによりアニメーションの始まりの時点では、見出しがブラウザーのウィンドウの右端の外側に描画されます。

2 番目 (かつ最後) のキーフレームは、100% (代替表記の `to` を使用しています) です。 要素の左マージンを 0% に、幅を 100% に設定しています。 これにより、見出しがコンテンツエリアの左端へすべり込むことでアニメーションが終わります。

```html
<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
</p>
```

**メモ:** アニメーションを見るにはページを再読み込みしてください。

### キーフレームの追加

先ほどのアニメーション例に、他のキーフレームを追加してみましょう。 例えば、見出しが右から左へ動くのにあわせて文字サイズを大きくしてゆき、その後元のサイズへ戻るようにしたいとします。 これには、単純に以下のキーフレームを追加します:

```css
75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}
```

コード全体は次のようなものです。

```css
p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
```

```html
<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
</p>
```

これはブラウザーに、アニメーションの流れの 75% 経過時点で見出しの左マージンを 25% に、また幅を 150% にするよう設定します。

**メモ:** アニメーションを見るにはページを再読み込みしてください。

### アニメーションの繰り返し

アニメーションを繰り返すためには `animation-iteration-count` を用いて、アニメーションを何回繰り返すかを設定します。 以下の例では、`infinite` を指定してアニメーションを無期限に繰り返します。

```css
p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
}
```

これを既存のコードの追加してください。

```css
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
```

```html
<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
</p>
```

### 前後の移動

アニメーションを繰り返すようにしましたが、毎回始めの状態にジャンプしてアニメーションが始まるのはとても不自然です。 画面上を前後に移動するようにしたいでしょう。 これは、`animation-direction` プロパティに `alternate` を設定することで簡単に実現できます。

```css
p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
```

そしてコードの残りは次の通りです。

```css
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
```

```html
<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
</p>
```

### animation 一括指定の利用

`animation` 一括指定はスペースの節約に便利です。 例として、この記事を通して使用してきているルールがあります。

```css
p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
```

このように置き換えることができます。

```css
p {
  animation: 3s infinite alternate slidein;
}
```

**メモ:** 詳しくは、 `animation` のリファレンスページをご覧ください。

### 複数のアニメーションプロパティ値の設定

CSS アニメーションの個別指定値は、カンマで区切って複数の値を受け付けることができます。 — この機能は複数のアニメーションに一つの規則を適用したり、別々なアニメーションに別々の期間、繰り返し回数などを適用したい時に使うことができます。 別々な変化を説明するために、いくつか簡単な例を見てみましょう。

この例では、 3 つのアニメーション名を設定していますが、期間と繰り返し回数は 1 つしか設定していません。 この場合、 3 つのアニメーションはすべて同じ期間と繰り返し回数になります。

```css
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;
```

第二の例では、 3 つの値を 3 つのプロパティ全てに設定しました。この場合、それぞれのアニメーションはそれぞれのプロパティの同じ位置で対応する値で実行されますので、例えば `fadeInOut` の長さは 2.5s で、繰り返し回数は 2 のようになります。

```css
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
```

第三の例では、 3 つのアニメーションが指定されていますが、期間と繰り返し回数は 2 つしかありません。 この場合、それぞれのアニメーションに個別の値が不足するので、値は最初から最後まで繰り返して使用されます。 ですから例えば、fadeInOut の長さは 2.5s で moveLeft300px の長さは 5s となります。 これで妥当な期間の値の最後に来たので、最初からまた始まります。 — 従って bounce の長さは 2.5s になります。 繰り返し回数 (および指定した他のプロパティ) は、同様に割り当てられます。

```css
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;
```

### アニメーションイベントの利用

アニメーションイベントを用いることで、アニメーションをさらに制御したり、アニメーションの有用な情報を得たりすることができます。 これらのイベントは `AnimationEvent` オブジェクトに集められており、アニメーションの開始・終了・繰り返しの始まりを検出することができます。 それぞれのイベントには発生した時間や、イベントが発生したアニメーションの名前が含まれています。

文字列がすべり込むアニメーションの例を、アニメーションがいつ発生したかの情報を出力するように変更して、イベントがどのように働くかを見てみましょう。

#### CSS の追加

アニメーションの CSS を作成することから始めます。 このアニメーションは、"slidein" が呼び出されて 3 秒後に終わり、3 回繰り返されます。 繰り返すたびに、逆方向へアニメーションします。 `@keyframes` 内で、要素が画面を横切るようにするため、 width と margin-left を操作します。

```css
.slidein {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: 3;
  animation-direction: alternate;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
```

#### アニメーションイベントのリスナーの追加

使用することができる 3 つのアニメーションイベントを取得するため、 JavaScript のコードを用います。 `setup()` 関数は、イベントのリスナーになります。 この関数は文書が読み込まれたとき、最初に呼び出します。

```js
var element = document.getElementById("watchme");
element.addEventListener("animationstart", listener, false);
element.addEventListener("animationend", listener, false);
element.addEventListener("animationiteration", listener, false);

element.className = "slidein";
```

これは一般的なコードです。 このコードがどのように働くかについて、詳しくは `eventTarget.addEventListener()` の文書を参照してください。 最後に setup() 関数では要素の `class` 属性を、アニメーションを設定したクラス "slidein" に設定しています。 これによりアニメーションを開始させています。

なぜこのような処理を行うのでしょうか？ それは、 `animationstart` イベントはアニメーションが始まるとすぐに発生するので、この例ではコードを実行する前にイベントが発生してしまうためです。 そこでコードの実行後に要素の class 属性をアニメーションのスタイルを記述したものに設定することで、アニメーションを開始させるようにしています。

#### イベントを受け取る

イベントは、以下の `listener()` 関数に送られます。

```js
function listener(event) {
  var l = document.createElement("li");
  switch (event.type) {
    case "animationstart":
      l.textContent = `Started: elapsed time is ${event.elapsedTime}`;
      break;
    case "animationend":
      l.textContent = `Ended: elapsed time is ${event.elapsedTime}`;
      break;
    case "animationiteration":
      l.textContent = `New loop started at time ${event.elapsedTime}`;
      break;
  }
  document.getElementById("output").appendChild(l);
}
```

こちらのコードも、非常に単純です。 単純に `event.type` を見てどのイベントが発生したかを判断して、発生したイベントの記録として、`<ul>` (順序なしリスト) で適切な情報を出力しています。

その出力は、最終的に以下のようになります。

* Started: elapsed time is 0
* New loop started at time 3.01200008392334
* New loop started at time 6.00600004196167
* Ended: elapsed time is 9.234000205993652

表示された時間が、アニメーションの設定時に指定した時間から予測されるものにとても近く、しかし厳密に一致はしていないことに注意してください。 また、最終の繰り返しの後に `animationiteration` イベントが発生していないことにも注意してください。 ただし、`animationend` イベントは発生しています。

#### HTML

この例を完成させるために、コンテンツの表示と受信したイベントの情報をスクリプトが挿入するために用いる HTML 文書を以下に掲載します:

```html
<h1 id="watchme">Watch me move</h1>
<p>
  This example shows how to use CSS animations to make <code>H1</code>
  elements move across the page.
</p>
<p>
  In addition, we output some text each time an animation event fires, so you
  can see them in action.
</p>
<ul id="output"></ul>
```

#### 結果

そしてこちらはライブ出力です。

**メモ:** アニメーションを見るにはページを再読み込みしてください。

関連情報
----

* `AnimationEvent`
* CSS アニメーションの対応の検出
* CSS トランジションの使用


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

CSS アニメーションのヒントとコツ
==================

CSS アニメーションを使えば、文書やアプリを構成する要素に、驚くようなことができるようになります。しかし、当たり前のようで当たり前でないことや、すぐには思いつかないような賢い方法があるかもしれません。この記事では、止まってしまったアニメーションを再び動かす方法など、作業を楽にするために見つけたヒントをまとめています。

再度アニメーションを実行する
--------------

CSS アニメーションの仕様書では再度アニメーションを実行する方法を提示していません。 要素に魔法の関数 `resetAnimation()` というものはなく、要素の `animation-play-state` を再び `"running"` に設定することさえもできません。その代わりに、停止したアニメーションをリプレイするための巧妙なトリックを使う必要があります。

ここでは、私たちが安定していて信頼性があると感じている方法をご紹介します。

### HTML の内容

はじめに、HTML にアニメーションしてほしい `<div>` と、アニメーションを再生 (またはリプレイ) するためのボタンを定義しましょう。

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

<div class="runButton">Click me to run the animation</div>
```

### CSS の内容

次に CSS を使ってアニメーションそのものを定義しましょう。 簡潔さのためにいくつかの重要ではない CSS ("Run" ボタンそのもののスタイル) はここではお見せしません。
```

.runButton {
  cursor: pointer;
  width: 300px;
  border: 1px solid black;
  font-size: 16px;
  text-align: center;
  margin-top: 12px;
  padding-top: 2px;
  padding-bottom: 4px;
  color: white;
  background-color: darkgreen;
  font:
    14px "Open Sans",
    "Arial",
    sans-serif;
}
```

```css
@keyframes colorchange {
  0% {
    background: yellow;
  }
  100% {
    background: blue;
  }
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.changing {
  animation: colorchange 2s;
}
```

ここに 2 つのクラスがあります。 `"box"` ボックスの外観に関する基本的な記述で、アニメーションの情報は含まれていません。アニメーションの詳細は `"changing"` クラスに含まれており、その中で `"colorchange"` と名付けられた `@keyframes` という名前の `"colorchange"` が 2 秒間に渡ってボックスをアニメーションさせるために使用されるべきであることを述べています。

このため、ボックスは所定の位置でアニメーション効果を開始しないので、アニメーションすることはないでしょう。

### JavaScript の内容

次にアニメーションを行うための JavaScript を見ていきます。 このテクニックの内容は `play()` 関数にあり、ユーザーが "Run" ボタンをクリックした時に呼ばれます。

```js
function play() {
  document.querySelector(".box").className = "box";
  window.requestAnimationFrame(function (time) {
    window.requestAnimationFrame(function (time) {
      document.querySelector(".box").className = "box changing";
    });
  });
}
```

これは奇妙だと思いませんか？なぜなら、アニメーションを再び再生する唯一の方法は、アニメーション効果を削除し、それを認識するために文書がスタイルを再計算してから、アニメーション効果を要素に追加することだからです。これを実現するには、工夫が必要です。

`play()` 関数が呼び出された時に起きることは次の通りです。

1. box の CSS クラスのリストを単純な `"box"` にリセットします。 これは、その box に現在適用されている他のどのクラスを取り除く効果を持ちます。 これにはアニメーションを扱う `"changing"` クラスが含まれます。 言い換えると、ボックスからアニメーション効果を取り除きます。 しかし、クラスのリストを変更することはそのスタイルの再計算が完了するまで効果を持たず、更新はその変更を反映するために発生し続けます。
2. スタイルが確実に再計算されるように、`window.requestAnimationFrame()` を使用し、コールバックを指定します。このコールバックは、文書の次の再描画の直前に実行されます。問題は、再描画の前なので、スタイルの再計算がまだ行われていないということです。
3. このコールバックは、巧妙に `requestAnimationFrame()` を 2 回目に呼び出しています。今回のコールバックは、スタイルの再計算が行われた後の、次の再描画の前に実行されます。このコールバックは、ボックスに `"changing"` クラスを追加し、再描画で再びアニメーションを開始するようにしています。

もちろん、実際に動作するために "Run" ボタンにイベントハンドラーを追加する必要があります。

```js
document.querySelector(".runButton").addEventListener("click", play, false);
```

### 結果

アニメーションの停止
----------

要素に適用されている `animation-name` を削除すると、その要素は次の状態にジャンプまたはカットします。しかし、アニメーションを完了させてから停止させたい場合は、別の方法を取らなければなりません。主なトリックは以下の通りです。

1. 可能なら自身を含めるようアニメーションさせること。 これは `animation-direction: alternate` を信頼するべきではないことを意味します。 代わりに一回の繰り返しの中で完全なアニメーションを経過するキーフレームアニメーションを明示的に書くべきです。
2. JavaScript を使用し、`animationiteration` イベントが発生した時に使われるアニメーションをクリアーすること。

次のデモは前述の JavaScript テクニックをどのように利用するかを示します。

```css
.slidein {
  animation-duration: 5s;
  animation-name: slidein;
  animation-iteration-count: infinite;
}

.stopped {
  animation-name: none;
}

@keyframes slidein {
  0% {
    margin-left: 0%;
  }
  50% {
    margin-left: 50%;
  }
  100% {
    margin-left: 0%;
  }
}
```

```html
<h1 id="watchme">Click me to stop</h1>
```

```js
let watchme = document.getElementById("watchme");

watchme.className = "slidein";
const listener = (e) => {
  watchme.className = "slidein stopped";
};
watchme.addEventListener("click", () =>
  watchme.addEventListener("animationiteration", listener, false),
);
```

デモ https://jsfiddle.net/morenoh149/5ty5a4oy/

関連情報
----

* CSS トランジションの使用
* `Window.requestAnimationFrame()`


CSS での画像スプライトの実装 - CSS: カスケーディングスタイルシート

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

**画像スプライト**は、複数の画像を使用する多くのウェブアプリで使用されています。それぞれの画像を個別の画像ファイルとして含めるのではなく、1 枚の画像として送信した方が、メモリーや帯域幅の面ではるかに有利です。同じ画像ファイル内の個々の画像を区別する方法として背景の位置を使用することで、 HTTP リクエストの数を減らすことができます。

**メモ:** HTTP/2 を使用する場合は、複数の小さなリクエストを使用する方が、実際には帯域幅に負荷を掛けない可能性があります。

実装
--

例えば、 `toolbtn` クラスを持つすべてのアイテムに画像が与えられたとします。

```css
.toolbtn {
  background: url(myfile.png);
  display: inline-block;
  height: 20px;
  width: 20px;
}
```

背景の位置は、 background の中で `url()` の後に x と y の 2 つの値として、または `background-position` として追加できます。

```css
#btn1 {
  background-position: -20px 0px;
}

#btn2 {
  background-position: -40px 0px;
}
```

これは ID が 'btn1' の要素を左に20ピクセル、 ID が 'btn2' の要素を左に40ピクセル移動します (これらの要素には `toolbtn` クラスが割り当てられており、上記の画像ルールの影響を受けているとします)。

同様に、ホバー状態にすることもできます。

```css
#btn:hover {
  background-position: <右方向へずらすピクセル数>px <下方向へずらすピクセル数>px;
}
```

関連記事
----

* Full working demo at CSS Tricks


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

CSS グラデーションの使用
==============

**CSS グラデーション**は `<gradient>` データ型で表現され、2つ以上の色の間の連続的な変化から成る `<image>` の特殊型です。グラデーションは3種類から選択することができます。線形 (*linear*) (`linear-gradient()` 関数によって生成)、放射 (*radial*) (`radial-gradient()` 関数によって生成)、扇形 (*conic*) (`conic-gradient()` 関数によって生成) の3種類です。 `repeating-linear-gradient()`, `repeating-radial-gradient()`, `repeating-conic-gradient()` の各関数によって、反復グラデーションを生成することもできます。

グラデーションは、例えば背景など、`<image>` が使えるところならば、どこでも利用できます。グラデーションは動的に生成されるため、従来は同様の効果を実現するために使用されていたラスタ画像ファイルを必要としません。加えて、グラデーションはブラウザーによって生成されるため、拡大した際に見栄えがより良く、その場で大きさを変更することもできます。

最初に線形グラデーションの紹介から始め、次にすべてのグラデーション型で対応している機能を、線形グラデーションを例として紹介し、それから放射グラデーション、扇形グラデーション、反復グラデーションへと移ります。

線形グラデーションの使用
------------

線形グラデーションは、直線に沿った色の帯の変化を生成します。

### 基本的な線形グラデーション

グラデーションの最も基本的な形を作成するために必要なことは、2 つの色を指定することです。これらは色経由点 (color stops) と呼ばれています。少なくとも 2 つ必要ですが、必要なだけの数を設定することができます。
```

<div class="simple-linear"></div>
```

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

```css
.simple-linear {
  background: linear-gradient(blue, pink);
}
```

### 方向の変更

既定では、線形グラデーションは上から下へ向けて変化します。方向を指定することで向きを変更することができます。
```

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

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

```css
.horizontal-gradient {
  background: linear-gradient(to right, blue, pink);
}
```

### 対角グラデーション

グラデーションを角から角へ、対角に作成することもできます。
```

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

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

```css
.diagonal-gradient {
  background: linear-gradient(to bottom right, blue, pink);
}
```

### 角度の指定

方向についてもっと制御したい場合は、グラデーションに特定の角度を設定することができます。
```

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

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

```css
.angled-gradient {
  background: linear-gradient(70deg, blue, pink);
}
```

角度を指定した場合、 `0deg` は下から上への垂直グラデーションを生成し、 `90deg` は左から右への水平グラデーションを生成し、同様に、時計回りに回転します。負の数の角度を指定すると、反時計回りになります。

![](/ja/docs/Web/CSS/CSS_images/Using_CSS_gradients/linear_red_angles.png)

色の宣言と効果の生成
----------

すべての CSS グラデーション型は位置に依存した色の範囲です。 CSS グラデーションで生成される色は、位置によって連続的に変化し、円滑な色の遷移を生み出します。単色の帯や、2 つの色の間の急な遷移を生成することもできます。以下のことはすべてのグラデーション関数に言えます。

### 3 つ以上の色の使用

2 つの色に限定する必要はありません — 好きなだけ使うことができます。既定では、各色はグラデーション内で等分の幅になります。
```

<div class="auto-spaced-linear-gradient"></div>
```

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

```css
.auto-spaced-linear-gradient {
  background: linear-gradient(red, yellow, blue, orange);
}
```

### 色経由点の配置

色経由点は既定の位置から動かすこともできます。位置を細かく調整するには、それぞれの色経由点に0～2個のパーセント値、または放射・線形グラデーションの場合は絶対的な長さの値を指定することができます。一をパーセント値で指定する場合は、 `0%` が開始点を示し、 `100%` が終了点を示します。但し、実現したい効果を得るために必要であれば、この範囲外の値を使用することもできます。位置を指定しないままにした場合は、その色経由点の位置は自動的に計算され、最初の色経由点は `0%` に、最後の色経由点は `100%` になり、他の色経由点は隣の色経由点の間の中間点になります。
```

<div class="multicolor-linear"></div>
```

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

```css
.multicolor-linear {
  background: linear-gradient(to left, lime 28px, red 77%, cyan);
}
```

### 不連続線の生成

2 つの色の間に不連続線を生成して、グラデーションの遷移の代わりに縞模様を生成するなら、隣り合う色経由点を同じ位置に設定することができます。この例では、2 つの色がグラデーションの中心である `50%` の色経由点を共有しています。
```

<div class="striped"></div>
```

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

```css
.striped {
  background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
}
```

### グラデーションのヒント

既定では、グラデーションは 1 つの色から次の色へ均等に変化します。色ヒントを加えることで、変化値の中心点をグラデーションの特定の位置に移動することができます。この例では、変化の中心点を 50% の位置から 10% の位置へ移動します。
```

<div class="color-hint"></div>
<div class="simple-linear"></div>
```

```
div {
  width: 120px;
  height: 120px;
  float: left;
  margin-right: 10px;
}
```

```css
.color-hint {
  background: linear-gradient(blue, 10%, pink);
}
.simple-linear {
  background: linear-gradient(blue, pink);
}
```

### 色の帯と縞の生成

グラデーションの中に単色で遷移しない色の領域を含めるには、色経由点に 2 つの位置を含めます。色経由点には 2 つの位置を設定することができ、これは、異なる位置に同じ色を持つ 2 つの連続した色経由点に相当します。色は、第 1 の色経由点で完全な彩度に達し、第 2 の色経由点までその彩度を維持し、隣接する色経由点の第 1 の位置を介して隣接する色経由点の色に遷移します。
```

<div class="multiposition-stops"></div>
<div class="multiposition-stop2"></div>
```

```
div {
  width: 120px;
  height: 120px;
  float: left;
  margin-right: 10px;
  box-sizing: border-box;
}
```

```css
.multiposition-stops {
  background: linear-gradient(
    to left,
    lime 20%,
    red 30%,
    red 45%,
    cyan 55%,
    cyan 70%,
    yellow 80%
  );
  background: linear-gradient(
    to left,
    lime 20%,
    red 30% 45%,
    cyan 55% 70%,
    yellow 80%
  );
}
.multiposition-stop2 {
  background: linear-gradient(
    to left,
    lime 25%,
    red 25%,
    red 50%,
    cyan 50%,
    cyan 75%,
    yellow 75%
  );
  background: linear-gradient(
    to left,
    lime 25%,
    red 25% 50%,
    cyan 50% 75%,
    yellow 75%
  );
}
```

上記の第 1 の例では、ライムは、暗黙の 0% の位置から 20% の位置まで進み、グラデーションの幅の次の 10% の間にライムから赤へと変化し、 30% の位置で単色の赤に到達し、グラデーションを通して 45% まで単色の赤のままであり、ここでシアンにフェードアウトし、グラデーションの 15% の間は完全にシアンになる、というようになっています。

第 2 の例では、各色の 2 番目の色経由点は、隣接する色の第1の色経由点と同じ位置にあり、縞模様の効果を生み出しています。

いずれの例でも、グラデーションは2回書かれます。第 1 の例は CSS Images Level 3 の方法で、色経由点ごとに色を繰り返しており、第 2 の例は CSS Images Level 4 の方法で、それぞれの色経由点の宣言に色経由の長さが 2 つずつ含まれています。

### グラデーションの進行の制御

既定では、グラデーションは隣接する2つの色経由点の色の間で均等に進行し、それら2つの色経由点の間の中間点が中間の色の値となります。カラーヒントの位置を指定することで、2つの色経由点間の補間、つまり進行を制御することができます。この例では、色はグラデーションの途中でライムとシアンの間の中間点に到達しますが、50% の割合ではなく、20% の割合で到達しています。第2の例では、カラーヒントが作ることができる違いをハイライトするためのヒントは含まれていません。
```

<div class="colorhint-gradient"></div>
<div class="regular-progression"></div>
```

```
div {
  width: 120px;
  height: 120px;
  float: left;
  margin-right: 10px;
  box-sizing: border-box;
}
```

```css
.colorhint-gradient {
  background: linear-gradient(to top, black, 20%, cyan);
}
.regular-progression {
  background: linear-gradient(to top, black, cyan);
}
```

### グラデーションの重ね合わせ

グラデーションは透明度に対応しているので、複数の背景を重ねて、かなり派手な効果を得ることができます。背景は上から下に重ねられ、最初に指定されたものが上になります。
```

<div class="layered-image"></div>
```

```
div {
  width: 300px;
  height: 150px;
}
```

```css
.layered-image {
  background: linear-gradient(to right, transparent, mistyrose),
    url("critters.png");
}
```

### グラデーションの重ね合わせ

グラデーションを他のグラデーションと重ねることもできます。上のグラデーションが完全に不透明でない限り、下のグラデーションは表示されます。
```

<div class="stacked-linear"></div>
```

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

```css
.stacked-linear {
  background: linear-gradient(
      217deg,
      rgba(255, 0, 0, 0.8),
      rgba(255, 0, 0, 0) 70.71%
    ), linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
    linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
}
```

放射グラデーションの使用
------------

放射グラデーションは線形グラデーションと似ていますが、中心点から放射状に広がる点が異なります。中心点をどこに置くかは決めることができます。円形や楕円形を作成することもできます。

### 基本的な放射グラデーション

線形グラデーションと同様に、放射グラデーションを作成するために必要なのは 2 つの色だけです。既定では、グラデーションの中心は 50% 50% の位置にあり、グラデーションはボックスの縦横比に合わせて楕円形になっています。
```

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

```
div {
  width: 240px;
  height: 120px;
}
```

```css
.simple-radial {
  background: radial-gradient(red, blue);
}
```

### 放射色経由点の配置

ここでも線形グラデーションのように、放射の各色経由点をパーセント値または絶対長で配置することができます。
```

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

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

```css
.radial-gradient {
  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
}
```

### グラデーションの中心の配置

グラデーションの中心の位置は、キーワード、パーセント値、絶対的な長さで配置することができ、長さとパーセント値が 1 つだけの場合は繰り返して用いられ、それ以外の場合は左からの位置と上からの位置の順で用いられます。
```

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

```
div {
  width: 120px;
  height: 240px;
}
```

```css
.radial-gradient {
  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
}
```

### 放射グラデーションの大きさの変更

線形グラデーションとは異なり、放射グラデーションは大きさを指定することができます。指定可能な値には、`closest-corner`, `closest-side`, `farthest-corner`, `farthest-side` があり、`farthest-corner` が既定値です。

#### 例: 楕円の closest-side

この例では大きさに `closest-side` の値を使用しています。つまり、開始点 (中心) からボックスを囲む最近接の辺までの距離で大きさが設定されます。
```

<div class="radial-ellipse-side"></div>
```

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

```css
.radial-ellipse-side {
  background: radial-gradient(
    ellipse closest-side,
    red,
    yellow 10%,
    #1e90ff 50%,
    beige
  );
}
```

#### 例: 楕円の farthest-corner

この例は、大きさが `farthest-corner` と指定されていることを除けば、前の例と似ています。これは、グラデーションの大きさを、出発点から囲んだボックスの出発点から最も遠い角までの距離で設定するものです。
```

<div class="radial-ellipse-far"></div>
```

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

```css
.radial-ellipse-far {
  background: radial-gradient(
    ellipse farthest-corner at 90% 90%,
    red,
    yellow 10%,
    #1e90ff 50%,
    beige
  );
}
```

#### 例: 円の closest-side

この例では `closest-side` を使用しており、円の大きさが開始点 (中心) と最も近い辺との間の距離になります。円の半径は、グラデーションの中心と最も近い辺との間の距離で、上から 25%、下から 25% の位置関係から、この場合は高さが幅よりも狭いので、最も下に近い位置になります。
```

<div class="radial-circle-close"></div>
```

```
div {
  width: 240px;
  height: 120px;
}
```

```css
.radial-circle-close {
  background: radial-gradient(
    circle closest-side at 25% 75%,
    red,
    yellow 10%,
    #1e90ff 50%,
    beige
  );
}
```

#### 例: 楕円の長さまたはパーセント値

楕円のみの場合、長さまたはパーセント値を使って楕円の大きさを決めることができます。最初の値は水平方向の半径、2 番目の値は垂直方向の半径を表し、パーセント値を使用した場合は、その次元でのボックスの大きさに対応します。以下の例では、水平方向の半径にパーセント値を使用しています。
```

<div class="radial-ellipse-size"></div>
```

```
div {
  width: 240px;
  height: 120px;
}
```

```css
.radial-ellipse-size {
  background: radial-gradient(
    ellipse 50% 50px,
    red,
    yellow 10%,
    #1e90ff 50%,
    beige
  );
}
```

#### 例: 円の長さ

円においては大きさを <length> で指定することができ、これが円の大きさになります。
```

<div class="radial-circle-size"></div>
```

```
div {
  width: 240px;
  height: 120px;
}
```

```css
.radial-circle-size {
  background: radial-gradient(circle 50px, red, yellow 10%, #1e90ff 50%, beige);
}
```

### 放射グラデーションの重ね合わせ

線形グラデーションのように、放射グラデーションも重ね合わせることができます。最初に指定されたものが最上位に、最後のものが最下位になります。
```

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

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

```css
.stacked-radial {
  background:
    radial-gradient(
      circle at 50% 0,
      rgba(255, 0, 0, 0.5),
      rgba(255, 0, 0, 0) 70.71%
    ),
    radial-gradient(
      circle at 6.7% 75%,
      rgba(0, 0, 255, 0.5),
      rgba(0, 0, 255, 0) 70.71%
    ),
    radial-gradient(
        circle at 93.3% 75%,
        rgba(0, 255, 0, 0.5),
        rgba(0, 255, 0, 0) 70.71%
      ) beige;
  border-radius: 50%;
}
```

扇形グラデーションの使用
------------

**`conic-gradient()`** は CSS の関数で、 (中心から広がるのではなく) 中心点の周りを回りながら色が変化するグラデーションから成る画像を生成します。扇型グラデーションの例としては、円グラフや色相環などがありますが、チェッカーボードやその他の面白い効果を生み出すために使用することもできます。

扇形グラデーションは放射グラデーションの構文と似ていますが、色経由点はグラデーションの中心から現れるグラデーション線上ではなく、グラデーション弧、すなわち円周上に配置され、色経由点はパーセント値または角度で表します。絶対的な長さは有効ではありません。

放射グラデーションでは、楕円の中心から外側に向かって、すべての方向に色が変化していきます。扇形グラデーションでは、円の中心を中心にして、上から時計回りに回転するように色が変化します。放射グラデーションと同様に、グラデーションの中心の位置を決めることができます。線形グラデーションと同様に、グラデーションの角度を変更することができます。

### 基本的な扇形グラデーション

線形グラデーションや放射グラデーションと同様に、扇形グラデーションを作成するのに必要なのは 2 つの色だけです。既定では、グラデーションの中心は 50% 50% の位置で、グラデーションの開始点は上向きです。
```

<div class="simple-conic"></div>
```

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

```css
.simple-conic {
  background: conic-gradient(red, blue);
}
```

### 扇形の中心の配置

放射グラデーションのように、扇形グラデーションの中心を配置するには、キーワード、パーセント値、絶対的な長さの何れかをキーワード "at" の後に続けます。
```

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

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

```css
.conic-gradient {
  background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
}
```

### 角度の変更

既定では、指定したそれぞれの色経由点は、円の周囲に等間隔に配置されます。扇形グラデーションの開始角度を指定するには、最初に "from" キーワードを使用し、その後に角度または長さを指定します。また、色経由点の位置を指定するには、それらの後に角度または長さを指定します。
```

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

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

```css
.conic-gradient {
  background: conic-gradient(from 45deg, red, orange 50%, yellow 85%, green);
}
```

反復グラデーションの使用
------------

`linear-gradient()`, `radial-gradient()`, `conic-gradient()` の各関数は自動的に反復される色経由点に対応していません。しかし、 `repeating-linear-gradient()`, `repeating-radial-gradient()`, `repeating-conic-gradient()` の各関数はこの機能を提供することができます。

繰り返されるグラデーション線または弧の大きさは、最初の色経由点の位置と最後の色経由点の位置の間の長さです。最初の色経由点が色だけで、色経由点の位置がなかった場合、値は既定で 0 になります。最後の色経由点が色だけで、色経由点の長さがなかった場合、値はデフォルトで100%になります。どちらも宣言されていない場合、グラデーション線は 100% になります。つまり、線形グラデーションと扇形グラデーションの場合は繰り返されず、放射グラデーションの場合は、グラデーションの半径がグラデーションの中心から最も遠い角までの長さよりも小さい場合にのみ繰り返されます。最初の色経由点が宣言されていて、その値が 0 より大きい場合、最初の色経由点と最後の色経由点の差が 100% または 360 度より小さいため、線または円弧の大きさはグラデーションが繰り返されます。

### 反復線形グラデーション

この例では、`repeating-linear-gradient()` を使用して、直線的に繰り返し進行するグラデーションを作成しています。グラデーションが繰り返されることで、色が循環していきます。この例では、グラデーションの線の長さは 10px です。
```

<div class="repeating-linear"></div>
```

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

```css
.repeating-linear {
  background: repeating-linear-gradient(
    -45deg,
    red,
    red 5px,
    blue 5px,
    blue 10px
  );
}
```

### 複数の反復線形グラデーション

通常の線形グラデーションや放射グラデーションと同様に、複数のグラデーションを重ねて表示することができます。これは、グラデーションの一部を透明にして、透明部分から後続のグラデーションが見えるようにしたり、各グラデーション画像に異なる background-size や、オプションで異なる background-position のプロパティ値を含める場合にのみ意味を持ちます。透過性を利用しています。

この例では、グラデーション線の長さは 300px、230px、300px です。
```

<div class="multi-repeating-linear"></div>
```

```
div {
  width: 600px;
  height: 400px;
}
```

```css
.multi-repeating-linear {
  background: repeating-linear-gradient(
      190deg,
      rgba(255, 0, 0, 0.5) 40px,
      rgba(255, 153, 0, 0.5) 80px,
      rgba(255, 255, 0, 0.5) 120px,
      rgba(0, 255, 0, 0.5) 160px,
      rgba(0, 0, 255, 0.5) 200px,
      rgba(75, 0, 130, 0.5) 240px,
      rgba(238, 130, 238, 0.5) 280px,
      rgba(255, 0, 0, 0.5) 300px
    ), repeating-linear-gradient(
      -190deg,
      rgba(255, 0, 0, 0.5) 30px,
      rgba(255, 153, 0, 0.5) 60px,
      rgba(255, 255, 0, 0.5) 90px,
      rgba(0, 255, 0, 0.5) 120px,
      rgba(0, 0, 255, 0.5) 150px,
      rgba(75, 0, 130, 0.5) 180px,
      rgba(238, 130, 238, 0.5) 210px,
      rgba(255, 0, 0, 0.5) 230px
    ), repeating-linear-gradient(23deg, red 50px, orange 100px, yellow 150px, green
        200px, blue 250px, indigo 300px, violet 350px, red 370px);
}
```

### 格子縞のグラデーション

格子模様を作るために、透明度のあるグラデーションをいくつか重ねています。最初の背景宣言では、すべての色経由点を個別にリストアップしています。2 つ目の背景のプロパティ宣言では、複数の位置にある色経由点の構文を使用しています。
```

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

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

```css
.plaid-gradient {
  background: repeating-linear-gradient(
      90deg,
      transparent,
      transparent 50px,
      rgba(255, 127, 0, 0.25) 50px,
      rgba(255, 127, 0, 0.25) 56px,
      transparent 56px,
      transparent 63px,
      rgba(255, 127, 0, 0.25) 63px,
      rgba(255, 127, 0, 0.25) 69px,
      transparent 69px,
      transparent 116px,
      rgba(255, 206, 0, 0.25) 116px,
      rgba(255, 206, 0, 0.25) 166px
    ), repeating-linear-gradient(
      0deg,
      transparent,
      transparent 50px,
      rgba(255, 127, 0, 0.25) 50px,
      rgba(255, 127, 0, 0.25) 56px,
      transparent 56px,
      transparent 63px,
      rgba(255, 127, 0, 0.25) 63px,
      rgba(255, 127, 0, 0.25) 69px,
      transparent 69px,
      transparent 116px,
      rgba(255, 206, 0, 0.25) 116px,
      rgba(255, 206, 0, 0.25) 166px
    ), repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 5px,
      rgba(143, 77, 63, 0.25) 5px,
      rgba(143, 77, 63, 0.25) 10px
    ), repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(
          143,
          77,
          63,
          0.25
        ) 5px, rgba(143, 77, 63, 0.25) 10px);

  background: repeating-linear-gradient(
      90deg,
      transparent 0 50px,
      rgba(255, 127, 0, 0.25) 50px 56px,
      transparent 56px 63px,
      rgba(255, 127, 0, 0.25) 63px 69px,
      transparent 69px 116px,
      rgba(255, 206, 0, 0.25) 116px 166px
    ), repeating-linear-gradient(
      0deg,
      transparent 0 50px,
      rgba(255, 127, 0, 0.25) 50px 56px,
      transparent 56px 63px,
      rgba(255, 127, 0, 0.25) 63px 69px,
      transparent 69px 116px,
      rgba(255, 206, 0, 0.25) 116px 166px
    ), repeating-linear-gradient(
      -45deg,
      transparent 0 5px,
      rgba(143, 77, 63, 0.25) 5px 10px
    ), repeating-linear-gradient(45deg, transparent 0 5px, rgba(
          143,
          77,
          63,
          0.25
        ) 5px 10px);
}
```

### 反復放射グラデーション

この例は `repeating-radial-gradient()` を使用して、中心点から放射状に反復されるグラデーションを生成します。色はグラデーションが反復するたびに周期的に繰り返されます。
```

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

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

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

### 複数の反復放射グラデーション
```

<div class="multi-target"></div>
```

```
div {
  width: 250px;
  height: 150px;
}
```

```css
.multi-target {
  background:
    repeating-radial-gradient(
        ellipse at 80% 50%,
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5) 15px,
        rgba(255, 255, 255, 0.5) 15px,
        rgba(255, 255, 255, 0.5) 30px
      ) top left no-repeat,
    repeating-radial-gradient(
        ellipse at 20% 50%,
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5) 10px,
        rgba(255, 255, 255, 0.5) 10px,
        rgba(255, 255, 255, 0.5) 20px
      ) top left no-repeat yellow;
  background-size:
    200px 200px,
    150px 150px;
}
```

関連記事
----

* グラデーション関数: `linear-gradient()`, `radial-gradient()`, `conic-gradient()`, `repeating-linear-gradient()`, `repeating-radial-gradient()`, `repeating-conic-gradient()`
* グラデーション関連の CSS データ型: `<gradient>`, `<image>`
* グラデーション関連の CSS プロパティ: `background`, `background-image`
* CSS Gradients Patterns Gallery, by Lea Verou
* CSS3 Gradients Library, by Estelle Weyl
* Gradient CSS Generator


論理的プロパティと値の基本概念 - CSS: カスケーディングスタイルシート

論理的プロパティと値の基本概念
===============

Logical Properties and Values (論理的プロパティと値) 仕様書では、 CSS のたくさんのプロパティや値のフローに関する対応付けを紹介しています。この記事はこの仕様書を紹介し、フローに関するプロパティと値を説明します。

なぜ論理的プロパティが必要なのか
----------------

CSS は従来、画面の物理的な軸に沿って寸法を取っていました。したがって、ボックスを `width` および `height` を用いて記述したり、アイテムを `top` および `left` で配置したり、 left に浮動させたり、境界、マージン、パディングを `top`, `right`, `bottom`, `left` で割り当てたりします。 Logical Properties and Values 仕様書はこれらの物理的な値を論理的、またはフローやその反対に関連したものへの対応付けを定義します。例えば `start` と `end` は `left` と `right` または `top` と `bottom` に対応します。

なぜこれらの対応付けが必要なのでしょうか。 CSS グリッドを使用したレイアウトがあり、グリッドコンテナーに幅が設定されていて、アイテムを配置するために `align-self` および `justify-self` を使用していたとします。これらのプロパティはフローに相対的です。 `justify-self: start` はインライン軸の先頭にアイテムを配置し、 `align-self: start` はブロック軸の先頭にアイテムを配置します。

![横書きモードでのグリッド](/ja/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values/grid-horizontal-width-sm.png)

この部分の書字方向として `vertical-rl` を `writing-mode` プロパティに設定すると、配置は同様の方向で動作し続けます。インライン軸は垂直になり、ブロック軸は水平になります。しかし、幅がコンテナーの水平の寸法で割り当てられており、寸法が論理的またはテキストの流れではなく物理的な方向に結び付けられているため、グリッドは同じようには見えません。

![縦書きモードでのグリッド](/ja/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values/grid-vertical-width-sm.png)

`width` プロパティの代わりに論理的プロパティである `inline-size` を使用すれば、コンポーネントは表示される書字方向が何であっても同じように動作するようになります。

![縦書きモードでのグリッドレイアウト](/ja/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values/grid-vertical-inline-size-small.png)

次の実行例を試してみましょう。 `.box` の `writing-mode` を `vertical-rl` から `horizontal-tb` へ変更して、プロパティが変わるとどのようにレイアウトが変わるかを確認することができます。

水平方向、下方向以外の書字方向でサイトを操作する場合や、クリエイティブな理由で書字方向を使用する場合、コンテンツの流れに関連づけることができるのはとても意味のあることです。

ブロック軸とインライン軸
------------

フローに対して相対的なプロパティや値を扱う上で重要な概念は、ブロックとインラインという 2 つの軸です。前述したように、フレックスボックスやグリッドレイアウトなどの新しい CSS レイアウト手法では、アイテムを配置する際に、 `right` と `left` や `top` と `bottom` ではなく、 `block` と `inline` の概念を使用します。

`inline` 軸は、使用されている書字方向でテキストの行が流れる方向の軸です。したがって、テキストが水平方向に左から右へ流れる英語の文書や、テキストが水平方向に右から左へ流れるアラビア語の文書では、インライン軸は*水平*になります。縦書きの文書 (日本語の文書など) に切り替えると、行が垂直方向に流れるので、縦書きの文書では行が縦に流れるので、インライン軸は*垂直*になります。

ブロック軸はもう一つの軸で、段落などのブロックが次々と表示される方向を示します。英語やアラビア語では垂直方向に表示されますが、縦書きの場合は水平方向に表示されます。

下の図は、横書きモードの場合のインラインとブロックの方向を示しています。

![インライン軸が横方向、ブロック軸が縦方向の図。](/ja/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values/mdn-horizontal.png)

この図は、縦書きモードでのブロックとインラインの方向を示しています。

![ブロック軸が水平方向、インライン軸が垂直方向に走っている図。](/ja/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values/mdn-vertical.png)

関連情報
----

* グリッドレイアウトのボックス配置
* フレックスレイアウトのボックス配置
* Understanding Logical Properties and Values
* 書字方向