recursal/MDN huggingface dataset:
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()
========

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

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

**`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 での画像スプライトの実装
================

**画像スプライト**は、複数の画像を使用する多くのウェブアプリで使用されています。それぞれの画像を個別の画像ファイルとして含めるのではなく、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
論理的プロパティと値の基本概念
===============

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
* 書字方向
寸法の論理的プロパティ
===========

このガイドでは、ページ上の要素の寸法の設定に使用する、物理的な方向のプロパティと論理的なプロパティのフローに関連した対応付けを説明します。

アイテムの寸法を指定するときに、論理的プロパティと値仕様書により、水平・垂直の物理的な長さ (左や右など) に関連する物理的な寸法ではなく、テキストの流れ (インラインとブロック) に関連した寸法を示すことができます。これらのフローに関連した対応付けは、私たちの大多数にとって普通であることもあるので、デザインでは物理的・論理的の両方の寸法を使用することができます。書字方向がどうであっても物理的な長さに関連した機能が使用したい場合もあるでしょう。

長さへの対応付け
--------

以下の表は、論理的なプロパティと物理的なプロパティの対応付けを示しています。この対応付けは、英語やアラビア語のような `horizontal-tb` の書字方向を想定しており、この場合は `width` が `inline-size` に対応付けられます。

縦書きモードの場合は、 `inline-size` は `height` に対応付けられます。

| 論理的プロパティ | 物理的プロパティ |
| --- | --- |
| `inline-size` | `width` |
| `block-size` | `height` |
| `min-inline-size` | `min-width` |
| `min-block-size` | `min-height` |
| `max-inline-size` | `max-width` |
| `max-block-size` | `max-height` |

幅と高さの例
------

`width` と `height` の論理的な対応付けでは、 `inline-size` がインライン方向の長さを設定し、 `block-size` がブロック方向の長さを設定します。英語の場合は、 `width` を `inline-size` で、 `height` を `block-size` で置き換えると同じレイアウトになります。

以下のライブデモでは、書字方向を `horizontal-tb` に設定しました。これを `vertical-rl` に変更すると、最初の例 — `width` と `height` を使用したもの — では、テキストが縦書きになるにもかかわらず、それぞれの方向が同じ寸法です。二番目の例 — `inline-size` と `block-size` を使用したもの — は、ブロック全体が回転したようにテキストの方向に従います。

最小幅と最小高さの例
----------

`min-width` と `min-height` も、 `min-inline-size` と `min-block-size` に対応付けられます。これらは `inline-size` および `block-size` プロパティと同様に動作しますが、固定の寸法ではなく最小寸法を設定します。

最初の例のように、以下の例を `vertical-rl` に変更してみて、その作用を確認してみてください。最初の例では `min-height` を使用しており、二番目の例では `min-block-size` を使用しています。

最大幅と最大高さの例
----------

最後に `max-inline-size` と `max-block-size` を、 `max-width` と `max-height` の論理的な置き換えとして使用することができます。以下の例を前と同様に操作してみてください。

大きさ変更の論理キーワード
-------------

`resize` プロパティは、アイテムの大きさが変わるかどうかを物理的な値である `horizontal` および `vertical` で指定します。 `resize` プロパティは論理的なキーワード値にも対応しています。 `resize: inline` を使用すると、インライン方向の大きさが変わることを許可し、 `resize: block` を使用すると、ブロック方向の大きさが変わることを許可します。

`both` のキーワード値は物理的または論理的に考えて動作します。これは両方を同時に設定します。以下の例を実行してみてください。
浮動と位置指定の論理的プロパティ
================

論理的プロパティと値仕様書 (Logical Properties and Values specification) には、 `float` および `clear` の物理的な値の論理的な対応付けと、位置指定レイアウトで使用する位置指定プロパティを含んでいます。このガイドはこれらの使い方を見てみます。

マッピングされるプロパティと値
---------------

以下の表はこのガイドで物理的なマッピングに沿って議論されるプロパティや値を説明しています。水平方向の `writing-mode` は、左書きを想定しています。

| 論理的プロパティまたは値 | 物理的プロパティまたは値 |
| --- | --- |
| `float`: inline-start | `float`: left |
| `float`: inline-end | `float`: right |
| `clear`: inline-start | `clear`: left |
| `clear`: inline-end | `clear`: right |
| `inset-inline-start` | `left` |
| `inset-inline-end` | `right` |
| `inset-block-start` | `top` |
| `inset-block-end` | `bottom` |
| `text-align`: start | `text-align`: left |
| `text-align`: end | `text-align`: right |

これらの対応付けられたプロパティに加えて、ブロック方向やインライン方向を示すことができる一括指定プロパティがいくつかあります。これらは `inset` プロパティを除いて物理的なプロパティに対応付けられていません。

| 論理的プロパティ | 目的 |
| --- | --- |
| `inset-inline` | インライン方向に上記の両方のインセット値を同時に設定する。 |
| `inset-block` | ブロック方向に上記の両方のインセット値を同時に設定する。 |
| `inset` | 多値の物理的マッピングで 4 つのインセット値を同時に設定します。 |

浮動と解除の例
-------

`float` および `clear` プロパティで用いられる物理的な値 `left`, `right`, `both` です。論理的プロパティの仕様では、 `inline-start` および `inline-end` の値を `left` および `right` に対応付けて定義しています。

下記の例では、2 つのボックスがあります。 — 1 つ目は `float: left` で、2 つ目は `float: inline-start` で浮動させています。 `writing-mode` を `vertical-rl` に変更したり、 `direction` を `rtl` に変更したりすると、 left で浮動させたボックスは常に左にくっつきますが、 `inline-start` で浮動させたアイテムは `direction` や `writing-mode` に従います。

例: 位置指定レイアウトにおける inset プロパティ
----------------------------

一般的に位置指定では、要素を含むブロックに対して相対的に要素を配置することができます。基本的に、通常のフローに基づいてアイテムが配置された場所に対して相対的にアイテムを挿入します。これを行うために、歴史的には `top`, `right`, `bottom`, `left` の物理的なプロパティを使用してきました。

これらのプロパティは、長さまたはパーセント値を値として取り、ユーザーの画面の寸法の相対になります。

論理的プロパティの仕様書では、指定した書字方向におけるテキストの流れに関連した位置合わせを行いたい場合のために、新しいプロパティが作成されました。これらは `inset-block-start`, `inset-block-end`, `inset-inline-start`, `inset-inline-end` になります。

以下の例では、 `inset-block-start` と `inset-inline-end` プロパティを使用して、青枠を灰色の点線で囲まれた領域 (`position: relative`) の内側に絶対位置を使用して配置しています 。 `writing-mode` プロパティを `vertical-rl` に変更するか、 `direction: rtl` を追加して、フロー相対ボックスがテキストの方向に従う様子を見てみましょう。

新しい 2 つまたは 4 つの値の一括指定
---------------------

仕様書の他のプロパティと同様に、いくつかの新しい一括指定プロパティがあり、一度に 2 つまたは 4 つの値を設定することができます。

* `inset` — 物理的な対応付けを使用して四辺をすべて設定します。
* `inset-inline` — 論理的なインライン方向の内側の距離を両方設定します。
* `inset-block` — 論理的なブロック方向の内側の距離を両方設定します。
例: text-align の論理的な値
--------------------

`text-align` プロパティは、テキストの方向に関連する論理値を持っています。 `left` と `right` に代わり、 `start` と `end` を使用することができます。以下の例では、最初のブロックで `text-align: right`、2番目のブロックで `text-align: end` を設定しています。

`direction` の値を `rtl` に変更すると、最初のブロックでは配置が右に留まりますが、2 番目のブロックでは論理的な末尾が左になることがわかります。

これは、物理的な方向ではなく、先頭と末尾を使用したボックス配置を使用した場合に、より一貫性のある方法で動作します。
CSS スクロールスナップの基本概念
==================

CSS スクロールスナップ仕様書は、ユーザーが文書をスクロールする際に、特定の位置にスクロールをスナップさせる方法を提供します。これにより、モバイルでも、デスクトップであっても、アプリのような操作感を実現することができます。

スクロールスナップの基本
------------

スクロールスナップ仕様の主要なプロパティは、`scroll-snap-type` と `scroll-snap-align` です。`scroll-snap-type` プロパティは、スクロールの種類と方向を指定するために、スクロールコンテナーで使用されます。

`scroll-snap-align` プロパティは子要素で、スクロールがスナップする位置を設定するために使用する必要があります。以下の例では `y` 軸に沿ってスクロールをスナップさせるために、`scroll-snap-align` をセクション要素に使用してスクロールを停止する位置を指定しています。

scroll-snap-type の使用
--------------------

`scroll-snap-type` プロパティは、スクロールスナップが発生する方向を指定する必要があります。これには `x` や `y`、論理マッピングの `block` や `inline` などがあります。また、キーワード `both` を使用すると、スクロールスナップが両軸で動作するようになります。

また、`mandatory` や `proximity` のキーワードを渡すこともできます。`mandatory` キーワードは、スクロールの位置に関係なく、コンテンツが特定の位置にスナップ*しなければならない*かどうかをブラウザーに伝えます。`proximity` キーワードは、その位置にスナップしてもよいが、しなくてもよいことを意味します。

`mandatory` を使用すると、とても一貫した操作感が得られます。つまり、ブラウザーは定義された各位置に必ずスナップすることがわかります。つまり、画面の上部にあると期待されるものが、スクロールが終了したときにあると確信できるのです。しかし、コンテンツが予想以上に大きい場合には、問題が発生する可能性があります。ユーザーは、スクロールしてもコンテンツの特定の位置を見ることができないという、もどかしい状況に陥るかもしれません。そのため、`mandatory` の使用は慎重に検討し、一度に画面に表示されるコンテンツの量が分かっている場合にのみ使用するようにしてください。

`proximity` の値は、近くにある場合にのみ位置にスナップしますが、正確な距離はブラウザーの判断に委ねられています。以下の例では、`mandatory` と `proximity` の間で値を変更し、スクロールの操作感に与える影響を確認することができます。

scroll-snap-align の使用
---------------------

`scroll-snap-align` プロパティには、スクロールコンテナ内でコンテンツがスナップするポイントを示す、`start`、`end`、`center` の値を取ることができます。以下の例では、`scroll-snap-align` の値を変更することで、スクロールの動作がどのように変化するかを確認できます。

スクロールコンテナーのパディング
----------------

スクロールコンテナーの端にコンテンツをスナップさせたくない場合は、`scroll-padding` プロパティまたはそれに相当する個別指定の値を使ってパディングを設定することができます。

以下の例では、`scroll-padding` を 40 ピクセルに設定しています。2 つ目と 3 つ目のセクションの開始点にスナップすると、スクロールはセクションの開始点から 40 ピクセル離れたところで止まります。`scroll-padding` の値を変更して、距離の変化を確認してみてください。

これは、例えばナビゲーションバーなどの固定要素があり、スクロールしたコンテンツと重なってしまう場合に便利です。`scroll-padding` を使用すると、下の例のように、コンテンツがスクロールしても `<h1>` が画面上に残るように、見出しのための空間を確保することができます。パディングがないと、スナップが発生したときに見出しがコンテンツの一部と重なってしまいます。

スクロールの子のマージン
------------

`scroll-margin` プロパティは、子要素に設定することができ、定義されたボックスの外側を定義することができます。これにより、子要素ごとに異なるスペースを確保することができ、親要素の `scroll-padding` と組み合わせて使用することができます。以下の例で試してみてください。

scroll-snap-stop プロパティ
----------------------

`scroll-snap-stop` プロパティは、定義された各スナップ位置にスナップするかどうか — つまり上記の例では、それぞれのセクションの先頭で停止するか、またはセクションをスキップできるかどうか — をブラウザーに伝えます。このプロパティは、他の仕様に比べて実装しているブラウザーが少ないです。

このプロパティは、ユーザーがスクローラーの各セクションを確実に確認し、誤ってスキップしてしまわないようにするのに役立ちます。しかし、ユーザーが特定のセクションを探している場合、スクロールの速度が遅くなるという問題があります。

**メモ:** `scroll-snap-stop` プロパティは、現在の勧告候補の仕様ではリスクがあるとされているため、削除される可能性があります。

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

個々のプロパティページでは、スクロールスナップについてブラウザーの互換性の状況を詳しく説明しています。なお、Firefox 68 以前の Firefox は、古いバージョンの仕様を実装していました。新旧両方の仕様をサポートするクロスブラウザー対応のコードを書く方法の概要については、次のガイドをお読みください。
セレクターでの :target 擬似クラスの利用
========================

URL が文書の特定の部分を指している場合、ユーザーが気づきにくい場合があります。いくつかのシンプルな CSS を使用して URL の対象に注目させ、ユーザーの利便性を向上させる方法を確認しましょう。

ターゲットの選択
--------

`:target` 擬似クラスは、フラグメント識別子を含む URL のターゲット要素にスタイルを適用するために使用されます。例えば、 `https://developer.mozilla.org/ja/docs/Web/CSS#リファレンス` という URL はフラグメント識別子 `#リファレンス` を含んでいます。 HTML では、 `id` および `name` 属性が名前空間を共用しているので、識別子はどちらかの値として見つかります。従って、この例の URL はその文書の「リファレンス」の見出しを指すことになります。

おそらく URL のターゲットになる `h2` 要素をすべてスタイル付けしたいでしょうが、他の種類の要素がターゲットのスタイルになることは望まないでしょう。単にこれで十分です。


```css
h2:target {
  outline: 2px solid;
}
```


文書の特定のフラグメントに特化してスタイルを作成することもできます。これは URI に見られる値と同じ識別子を使用することで実現できます。つまり、 `#リファレンス` フラグメントに背景色を追加するには、以下のように書きます。


```css
#リファレンス:target {
  background-color: yellow;
}
```

すべての要素を対象にする
------------

インテントを「ブランケット」スタイルで作成すれば、すべての対象となる要素に適用されますので、全称セレクターの代わりになります。


```css
:target {
  color: red;
}
```

例
-

以下の例には、同じ文書内で要素を指す 5 つのリンクがあります。例えば "First"のリンクを選択すると、 `<h1 id="one">` がターゲットの要素になります。なお、ターゲット要素は可能であればブラウザーウィンドウの先頭に配置されるため、文書は新しいスクロール位置へ移動する可能性があります。


```html
<h4 id="one">…</h4>
<p id="two">…</p>
<div id="three">…</div>
<a id="four">…</a> <em id="five">…</em>

<a href="#one">First</a>
<a href="#two">Second</a>
<a href="#three">Third</a>
<a href="#four">Fourth</a>
<a href="#five">Fifth</a>
```

まとめ
---

フラグメント識別子が文書の一部を指している場合、文書のどの部分を読むことを想定しているのか、読み手が分からなくなることがあります。 URI の対象をスタイル付けすることで、読み手の混乱を縮小したり除いたりすることができます。

関連情報
----

* `:target`
CSS セレクターの構造
============

CSS セレクターは、ツリー構造内の要素または要素の特定のパターンを表します。「セレクター」という用語は、単純セレクター、複合セレクター、複雑セレクターを参照することができます。has()`擬似クラスに引数として記載する場合、これらのセレクターは相対セレクターと呼ばれ、1つ以上のアンカー要素からの相対的な要素を表します。

これらのセレクターはカンマ区切りのセレクターリストで結合することができます。非寛容セレクターリストに含まれるセレクターが無効な場合、セレクターリスト全体が無効になります。

### 単純セレクター

**単純セレクター**とは、単一の型セレクター、属性セレクター、擬似クラスなどの単一の成分を持つセレクターのことで、他のセレクター成分や結合子と組み合わせたり含んだりすることがないものです。指定された要素が単純セレクターに一致すると言うのは、その単純セレクターが要素を正確に説明している場合です。単一の基本セレクター、属性セレクター、擬似クラス、擬似要素を含むセレクターは単純セレクターです。


```css
#myId {
}

[pattern\*="\d"] {
}
```

### 複合セレクター

**複合セレクター**は、結合子で区切られていない一連の単純セレクターです。複合セレクターは、単一の要素に対する同時条件の集合を表します。指定された要素が複合セレクターに一致するというのは、その要素が複合セレクターに含まれるすべての単純セレクターに一致するときです。


```css
a#selected {
}

[type="checkbox"]:checked:focus {
}
```


複合セレクターでは、型セレクター または全称セレクターがセレクターの並びの先頭に来なければなりません。型セレクターまたは全称セレクターを入力することができるのは 1 つだけです。ホワイトスペースは子孫結合子を表しますので、複合セレクターを構成する単純セレクターの間にホワイトスペースを入れてはいけません。

### 複雑セレクター

**複雑セレクター**は、ホワイトスペースの子孫結合子を含む、結合子で区切られた 1 つ以上の単純セレクターや複合セレクターの並びです。

複雑セレクターは、一連の要素に対する一連の同時条件を表します。


```css
a#selected > .icon {
}

.box h2 + p {
}
```


セレクターは右から左に読むことができます。例えば、`a#selected > .icon` は `selected` という id を持つ `<a>` 要素の直接の子要素で、クラスが `icon` であるすべての要素に一致します。セレクター `.box h2 + p` は `box` クラスを持つ要素の子孫である `<h2>` 要素の直後に来る最初の `<p>` に一致します。

### 相対セレクター

**相対セレクター**は、結合子で始まる 1 つ以上のアンカー要素からの相対的な要素を表すセレクターです。明示的な結合子で始まらない相対セレクターは、暗黙の子孫結合子を持ちます。


```css
+ div#topic > #reference {
}

> .icon {
}

dt:has(+ img) ~ dd {
}
```

### セレクターリスト

**セレクターリスト**は、単純、複合、複雑セレクターのカンマ区切りのリストです。指定された要素がセレクターリストに一致するとき、その要素はセレクターリストに一致すると言われます。


```css
#main,
article.heading {
}
```


非寛容セレクターリストのセレクターが無効な場合、セレクターリスト全体が無効になります。


```css
#main,
:bad-pseudoclass,
.validClass {
  /\* `:bad-pseudoclass` は無効なので、このスタイルブロックは無効になりました \*/
}
```


`:is()` と `:where()` 擬似クラスは、寛容なセレクターリストを構築するために使用することができます。

仕様書
---

| Specification |
| --- |
| Selectors Level 4  |

関連情報
----

* CSS セレクターと結合子
* 寛容なセレクターリスト
* `Document.querySelector()`
* `Document.querySelectorAll()`
* CSS セレクターモジュール
* CSS 擬似要素モジュール
軸
=

XPath 仕様では 13 種類の軸 (Axis) が定められています。軸はコンテキストノードとの関連性を表し、ツリー上でのノードのコンテキストノードからの相対的な位置を示すのに用いられます。

XPath 式の使用に関するより詳しい情報は、 XSLT による XML の変換の記事の最後のさらなる読み物の節を参照してください。また、XPath 仕様書の 'axes' の節も参照してください。

`ancestor`

コンテキストノードの親ノードからルートノードまでのすべての祖先を示します。

`ancestor-or-self`

コンテキストノードと、そのすべてのルートノードを含む祖先を示します。

`attribute`

コンテキストノードの属性を示します。属性を持つのは要素のみです。この軸はアットマーク (`@`) によって省略できます。

`child`

コンテキストノードの子を示します。 XPath 式で軸が指定されていなければ、デフォルトでこの軸が指定されていると認識されます。子を持つのはルートノードか要素ノードのみなので、他のノードでこの軸を使用しても何も選択されません。

`descendant`

コンテキストノードのすべての子と、そのすべての子と、そのまたすべての･･･というように示します。属性ノードと名前空間ノードは**含まれません**。 `attribute` ノードの `parent` は要素ノードですが、`attribute` ノードはその要素ノードの子ではないからです。

`descendant-or-self`

コンテキストノードと、そのすべての子孫を示します。属性ノードと名前空間ノードは**含まれません**。 `attribute` ノードの `parent` は要素ノードですが、`attribute` ノードはその要素ノードの子ではないからです。

`following`

コンテキストノードの後に現れる、`descendant`、`attribute`、`namespace` ノードを除くすべてのノードを示します。

`following-sibling`

コンテキストノードと同じ親を持ち、ソース文書内でコンテキストノードの後に現れるすべてのノードを示します。

`namespace` *(未対応)*

コンテキストノードのスコープ内にあるすべてのノードを示します。この場合、コンテキストノードは要素ノードでなければなりません。

`parent`

コンテキストノードの親である単一のノードを示します。この軸は 2 つのピリオド (`..`) によって省略できます。

`preceding`

文書内でコンテキストノードの前に現れる、 `ancestor`、 `attribute` 、 `namespace` ノードを除くすべてのノードを示します。

`preceding-sibling`

コンテキストノードと同じ親を持ち、ソース文書内でコンテキストノードの前に現れるすべてのノードを示します。

`self`

コンテキストノード自身を示します。 この軸はピリオド (`.`) によって省略できます。
関数
==

以下はコア XPath 関数及び XSLT 固有の追加 XPath 関数の、解説、構文、引数一覧、返される型、該当する W3C 勧告の原典を含む注釈付きの一覧です。 XPath/XSLT 関数の使用に関するより詳しい情報は、より詳しい読み物のページをご覧ください。

* boolean()
* ceiling()
* choose()
* concat()
* contains()
* count()
* current() *XSLT 固有*
* document() *XSLT 固有*
* element-available()
* false()
* floor()
* format-number() *XSLT 固有*
* function-available()
* generate-id() *XSLT 固有*
* id()
* key() *XSLT 固有*
* lang()
* last()
* local-name()
* name()
* namespace-uri()
* normalize-space()
* not()
* number()
* position()
* round()
* starts-with()
* string()
* string-length()
* substring()
* substring-after()
* substring-before()
* sum()
* system-property() *XSLT 固有*
* translate()
* true()
* unparsed-entity-url() *XSLT 固有*
CSS セレクターと XPath の比較
====================

この記事では、ウェブ開発者が適材適所のツールを選択できるように、CSSセレクターとXPathの違いを説明することを目的としています。

| XPath 機能 | 相当する CSS |
| --- | --- |
| `ancestor`, `parent` or `preceding-sibling` 軸 | `:has()` セレクター 
Experimental
 |
| `attribute` 軸 | 属性セレクター |
| `child` 軸 | 子結合子 |
| `descendant` 軸 | 子孫結合子 |
| `following-sibling` 軸 | 後続兄弟結合子または次兄弟結合子 |
| `self` 軸 | `:scope` または `:host` セレクター＾ |
boolean
=======

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`boolean` 関数は式を評価し、 true または false を返します。

構文
--
```

boolean( expression )
```

引数
--

`expression`

評価される式です。式は論理値のほか、数値やノード集合を参照することができます。

返値
--

`expression` を評価した結果から得られる論理値 `true` または `false`。

メモ
--

* 数値は、正のゼロ、負のゼロ、 `NaN` の場合は false と評価されます。それ以外の場合は true と評価されます。
* ノード集合は、空集合でなければ true と評価されます。
* 文字列は、空文字列ならば false と評価されます。そうでなければ true と評価されます。
* 4 つの基本型以外の型のオブジェクトは、その型に応じた方法で論理値に変換されます。
定義
--

XPath 1.0 4.3

Gecko の対応
---------

対応済み。
element-available
=================

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`element-available` 関数は、要素が利用可能かどうかを判断し、true または false を返します。

### 構文
```

element-available(QName )
```

### 引数

`QName`

有効な QName を評価する必要があります。QName は式のスコープ内の名前空間宣言を使用して展開された名前に展開されます。

### 返値

展開された名前が命令の名前である場合にのみ true を返します。展開された名前が XSLT 名前空間 URI と等しい名前空間 URI を持つ場合、XSLT で定義された要素を参照します。それ以外の場合は拡張要素を参照します。展開された名前が null の名前空間 URI を持つ場合、要素利用可能な関数は false を返します。

### 定義

XSLT 1.0 15

### Gecko のサポート

サポート済み