寸法の論理的プロパティ - CSS: カスケーディングスタイルシート

寸法の論理的プロパティ
===========

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

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

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

以下の表は、論理的なプロパティと物理的なプロパティの対応付けを示しています。この対応付けは、英語やアラビア語のような `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` のキーワード値は物理的または論理的に考えて動作します。これは両方を同時に設定します。以下の例を実行してみてください。


マージン、境界、パディングの論理的プロパティ - CSS: カスケーディングスタイルシート

マージン、境界、パディングの論理的プロパティ
======================

論理的プロパティと値仕様書 (Logical Properties and Values specification) では、それぞれのマージン、境界、パディングのプロパティおよびその一括指定について、フローに関連する対応付けを定義します。

CSS 論理的プロパティと値のメインページを見ると、たくさんのプロパティが並んでいます。これは多くがマージン、境界、パディングのそれぞれの辺について 4 つの個別指定値と、一括指定値のすべてがあるためです。

マージン、境界、パティングの対応付け
------------------

この仕様では、それぞれの論理値の物理的な対応関係を詳細に示しています。下の表では、使用されている `writing-mode` が `horizontal-tb` — 左書きであると仮定して、これらに対応する値を与えています。インラインの方向は左から右への水平方向で、`margin-inline-start` は `margin-left` と同じになります。

`horizontal-tb` を使用して右書きである場合は、 `margin-inline-start` が `margin-right` と同じになり、縦書きの場合は `margin-top` を使うのと同じになります。

| 論理的プロパティ | 物理的プロパティ |
| --- | --- |
| `border-block-end` | `border-bottom` |
| `border-block-end-color` | `border-bottom-color` |
| `border-block-end-style` | `border-bottom-style` |
| `border-block-end-width` | `border-bottom-width` |
| `border-block-start` | `border-top` |
| `border-block-start-color` | `border-top-color` |
| `border-block-start-style` | `border-top-style` |
| `border-block-start-width` | `border-top-width` |
| `border-inline-end` | `border-right` |
| `border-inline-end-color` | `border-right-color` |
| `border-inline-end-style` | `border-right-style` |
| `border-inline-end-width` | `border-right-width` |
| `border-inline-start` | `border-left` |
| `border-inline-start-color` | `border-left-color` |
| `border-inline-start-style` | `border-left-style` |
| `border-inline-start-width` | `border-left-width` |
| `border-start-start-radius` | `border-top-left-radius` |
| `border-start-end-radius` | `border-bottom-left-radius` |
| `border-end-start-radius` | `border-top-right-radius` |
| `border-end-end-radius` | `border-bottom-right-radius` |
| `margin-block-end` | `margin-bottom` |
| `margin-block-start` | `margin-top` |
| `margin-inline-end` | `margin-right` |
| `margin-inline-start` | `margin-left` |
| `padding-block-end` | `padding-bottom` |
| `padding-block-start` | `padding-top` |
| `padding-inline-end` | `padding-right` |
| `padding-inline-start` | `padding-left` |

また、ボックスの両方のブロックまたは両方のインライン側の縁を同時に対象にできることから、いくつかの追加の略語があります。これらの略語は、物理的プロパティに同等のものはありません。

| プロパティ | 目的 |
| --- | --- |
| `border-block` | `border-color`, `border-style`, `border-width` をブロック方向の両方の境界に設定します。 |
| `border-block-color` | `border-color` をブロック方向の両方の境界に設定します。 |
| `border-block-style` | `border-style` をブロック方向の両方の境界に設定します。 |
| `border-block-width` | `border-width` をブロック方向の両方の境界に設定します。 |
| `border-inline` | `border-color`, `-style`, `-width` をインライン方向の両方の境界に設定します。 |
| `border-inline-color` | `border-color` をインライン方向の両方の境界に設定します。 |
| `border-inline-style` | `border-style` をインライン方向の両方の境界に設定します。 |
| `border-inline-width` | `border-width` をインライン方向の両方の境界に設定します。 |
| `margin-block` | ブロック方向のすべての `margin` を設定します。 |
| `margin-inline` | インライン方向のすべての `margin` を設定します。 |
| `padding-block` | ブロック方向のすべての `padding` を設定します。 |
| `padding-inline` | インライン方向のすべての `padding` を設定します。 |

マージンの例
------

対応付けられたされたマージンのプロパティである `margin-inline-start`, `margin-inline-end`, `margin-block-start`, `margin-inline-end` は、物理的に対応するプロパティの代わりに使用できます。

下の例では、2 つのボックスを作成し、それぞれの端に異なるサイズのマージンを加えています。マージンがよりわかりやすくなるように、境界付きの特別なコンテナーを追加しています。

一方のボックスは物理的なプロパティを使用しており、もう一方は論理的なプロパティを使用しています。`direction` プロパティを `rtl` に変更して、ボックスが右から左の方向に表示されるようにしてみてください。1 つ目のボックスのマージンは同じ場所に留まりますが、2 つ目のボックスのインライン方向のマージンは切り替わります。

また、`writing-mode` を `horizontal-tb` から `vertical-rl` に変更してみてください。ここでも、最初のボックスではマージンが同じ場所に留まっていますが、2 つ目のボックスではテキストの方向に合わせて切り替わっていることに注意してください。

### マージンの一括指定

ボックスの両側 (インラインの両側またはブロックの両側) を対象とすることができるようになったため、`margin-inline` と `margin-block` という新しい一括指定が用意されており、2 つの値を受け入れます。1 つ目の値はその次元の先頭に適用され、2 つ目の値は末尾に適用されます。1 つの値しか使用しない場合は、両方に適用されます。

横書きの場合、この CSS はボックスの上部に 5px のマージンを、下部に 10px のマージンを適用します。

```css
.box {
  margin-block: 5px 10px;
}
```

パディングの例
-------

`padding-inline-start`, `padding-inline-end`, `padding-block-start`, `padding-inline-end` の対応付けられたパディングプロパティは、物理的な対応の代わりに使用することができます。

以下の例では、2 つのボックスがあり、一方は物理的なパディングプロパティを使用しており、もう一方は論理的なパディングプロパティを使用しています。 `writing-mode` が `horizontal-tb` の場合は、両方のボックスは同じように表示されるはずです。

`direction` プロパティを `rtl` に変更して、ボックスが右から左の方向に表示されるようにしてみてください。1 つ目のボックスのパディングは同じ場所に留まりますが、2 つ目のボックスのインライン方向のパディングは切り替わります。

また、`writing-mode` を `horizontal-tb` から `vertical-rl` に変更してみてください。ここでも、最初のボックスではパディングは同じ場所に留まっていますが、2 つ目のボックスではテキストの方向に合わせて切り替わっていることに注意してください。

### パディングの一括指定

マージンと同様に、パディングにも 2 つの値の一括指定 — `padding-inline` と `padding-block` — があります。これにより、2 つのインライン方向と 2 つのブロック方向のパディングをそれぞれ設定することができます。

`writing-mode` が横書きである場合、この CSS はボックスの上部に `5px` のパディングを、下部に 10px のパディングを適用します。

```css
.box {
  padding-block: 5px 10px;
}
```

境界の例
----

境界のプロパティは、論理的プロパティと値が非常に多くのプロパティを持っているように見える主な原因であり、ボックスのそれぞれの辺の境界線の色、幅、スタイルを表す個別指定と、それぞれの辺に 3 つを一度に設定する一括指定があります。マージンやパディングと同様に、それぞれの物理的なプロパティの対応付けされたバージョンがあります。

以下のデモでは、いくつかの個別指定と 3 つの一括指定の値を使用しています。他のデモと同様に、`direction` プロパティを `rtl` に変更してボックスを右から左の方向に表示させたり、`writing-mode` を `horizontal-tb` から `vertical-rl` に変更したりしてみてください。

### 新しい境界の一括指定

ブロックやインライン方向の幅、スタイル、色を設定する 2 値の一括指定と、ブロックやインライン方向の 3 つの値をすべて設定する 2 値の一括指定があります。下のコードは、横書きの場合、ボックスの上下に 2px の緑の実線の境界線、左右に 4px の紫の点線の境界線が表示されます。

```css
.box {
  border-block: 2px solid green;
  border-inline-width: 4px;
  border-inline-style: dotted;
  border-inline-color: rebeccapurple;
}
```

### フローに関連した border-radius プロパティ

この仕様では、かなり最近になって `border-radius` の個別指定にフロー相対値が追加されました。これらはまだどのブラウザーでも実装されていません。以下の例では、横長の `writing-mode` で、右上の境界の半径を 1em、右下を 0、左下を 20px、左上を 40px に設定しています。

```css
.box {
  border-end-start-radius: 1em;
  border-end-end-radius: 0;
  border-start-end-radius: 20px;
  border-start-start-radius: 40px;
}
```

4 つの値の一括指定構文で論理的な値を示す
---------------------

仕様書では、`margin` プロパティのような 4 つの値の一括指定を提案していますが、これをどのように表示するかの最終決定はまだなされておらず、この Issue で議論されています。

margin、padding、border などの 4 つの値の一括指定を使用すると、現在は物理的なバージョンが使用されるので、文書の流れに従うことが重要な場合は、当面は個別指定のプロパティを使用してください。


浮動と位置指定の論理的プロパティ - CSS: カスケーディングスタイルシート

浮動と位置指定の論理的プロパティ
================

論理的プロパティと値仕様書 (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: カスケーディングスタイルシート

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 は、古いバージョンの仕様を実装していました。新旧両方の仕様をサポートするクロスブラウザー対応のコードを書く方法の概要については、次のガイドをお読みください。


CSS セレクターと結合子 - CSS: カスケーディングスタイルシート

CSS セレクターと結合子
=============

CSS セレクターは、選択した要素に一連の CSS ルールを適用するために、選択する要素のパターンを定義するために使用します。結合子は、セレクター間の関係を定義します。様々なセレクターと結合子を使用することで、入力する要素の型、属性、状態、他の要素との関係に基づいて、必要な要素を正確に選択し、スタイル設定することができます。

セレクターの型
-------

セレクターと結合子は 80 以上あります。 CSS セレクターは、選択する要素の種類に応じて以下のカテゴリーに分類されます。

### 基本セレクター

要素型セレクターは、指定されたノード名を持つすべての要素を選択します。例えば `div` ですべての `<div>` 要素を選択し、 `input` ですべての `<input>` 要素に一致します。アスタリスク (`*`) で示される全称セレクターは、すべての要素を選択する特殊な種類のセレクターです。

クラスセレクターは、指定された `class` 属性を持つ要素をすべて選択します。クラス名の接頭辞はピリオド (`.`) です。例えば、 `.index` は `class="index"` のついたすべての要素に一致します。 ID セレクターは、 `id` 属性の値に基づいて要素を選択します。セレクターは `id` の接頭辞に「ナンバーサイン」 (U+0023, `#`) を付けたものです。例えば、 `#toc` は `id="toc"` のついた要素に一致します。 `class` と `id` はどちらもグローバル属性です。 1 つの文書の中で
 ある `id` を持つ要素は 1 つだけであるべきですが、もし複数の要素が存在した場合、 ID セレクターはその `id` を持つすべての要素に一致します。

要素型セレクターまたは全称セレクターと、クラスセレクターまたは id セレクターを組み合わせて複合セレクターを作成する場合、要素型セレクターや全称セレクターはクラスまたは id の前になければなりません。

#### CSS

この例では、 4 つの単純セレクターと、 1 つの複合セレクターを、上記の 4 つの基本セレクター型を使用して宣言しています。

```css
\* {
  font-style: italic;
}
p {
  color: red;
}
.myClass {
  text-decoration: underline;
}
#myId {
  font-family: monospace;
}
p.myClass#myId {
  font-size: 1.5rem;
}
```

#### HTML

```html
<p class="myClass" id="myId">これはすべてに一致します。</p>
<p>これは全称セレクターと要素型セレクターにのみ一致します。</p>
```

#### 結果

結合子
---

CSS の結合子を用いることで、セレクターを組み合わせて、文書ノードツリー内の他の要素との関係に基づいて DOM ノードを選択することができます。このセレクターと結合子の組み合わせによって、複雑セレクターが作成されます。

### 子孫結合子

子孫結合子は、 1 つ以上のスペースで示すもので、最初の要素の子孫であるノードを選択します。例えば、 `div span` は `<div>` 要素の中にあるすべての `<span>` 要素に一致します。

### 子結合子

子結合子は、子孫結合子よりも厳密です。子結合子は大なり文字 (`>`) で示し、最初の要素の直接の子であるノードを選択します。前回の例と比較すると、 `div > span` は `<div>` 要素の直接の子である `<span>` 要素にのみに一致します。

### 後続兄弟結合子

子孫セレクターに加えて、 CSS は兄弟関係に基づいて要素を選択することもできます。後続兄弟結合子はチルダ (`~`) で示され、兄弟を選択します。 `A ~ B` と指定された場合、 `A` の前に `B` があり、 `A` と `B` が同じ親であれば、`B` に一致する要素がすべて選択されます。例えば、 `h2 ~ p` は、 h2 の直後またはその後に続くすべての `<p>` 要素に一致します。

### 次兄弟結合子

次兄弟結合子はプラス記号 (`+`) で表され、後続兄弟結合子と似ています。ただし、 `A + B` が指定された場合、 `B` の直前に `A` があり、両者が同じ親を共有している場合にのみ `B` に一致します。前回の例を `h2 + p` に修正すると、 `<h2>` 要素の直後に続く単一の `<p>` 要素にのみ一致します。

### 列結合子

列結合子もあります。これは 2 つのパイプ文字 (`||`) で表され、対応している場合、ある列に属するノードを選択します。例えば、 `col || td` は `<col>` のスコープに属するすべての `<td>` 要素に一致します。

### 名前空間セパレーター

名前空間セパレーター (en-US)は、一般に `@namespace` アットルールと組み合わせて使用する結合子の一つです。この結合子は単一のパイプ文字 (`|`) で示されます。これにより、要素型セレクターと全称セレクターを特定の名前空間に限定することができます。例えば、`@namespace SVG url('http://www.w3.org/2000/svg');` のように名前空間を定義することで、 SVG 名前空間に入れ子になっている要素のみを対象とするセレクターを含めることができます。 `SVG|a` と宣言すれば、 SVG 内のリンクに一致し、文書内の他の要素には一致しません。名前空間は HTML 内の MathML や SVG、他にも XML ベースのコンテンツを対象とするのに有益です。

#### CSS

この例では、 5 つの相対セレクターを宣言しています。これは単純セレクターを結合子で結合したものです。

```css
h2 + p ~ p {
  font-style: italic;
}
h2 + p + p {
  color: red;
}
.myClass + p {
  text-decoration: underline;
}
#myId > .myClass {
  outline: 3px dashed red;
}
> p {
  font-size: 1.1rem;
}
```

#### HTML

```html
<h2 class="myClass" id="myId">
  No selectors match. <span class="myClass">This span has an outline</span> as
  it is both myClass and a child of #myId.
</h2>
<p>The first paragraph is underlined. All the paragraphs are 1.1rem.</p>
<p>
  The second paragraph is red. This and the following paragraphs are italic.
</p>
<p>The third paragraph is NOT red. It is italic and 1.1rem.</p>
<p class="myClass">
  Does not have an outline; this is a sibling of H2, not a child. It is italic
  and 1.1rem.
</p>
```

#### 結果

### CSS 入れ子による複雑セレクターの作成

上記の複雑セレクターは、単純セレクター、結合子、CSS 入れ子 を使用して定義することもできます。 `&` 入れ子セレクター はあってもなくても構いません。

#### CSS

この例では、単純セレクターと結合子を使用して同じ 5 つの相対セレクターを複製しますが、今回は CSS 入れ子を使用します。

```css
h2 {
  & + p {
    & ~ p {
      font-style: italic;
    }
    & + p {
      color: red;
    }
  }
}
.myClass {
  & + p {
    text-decoration: underline;
  }
}
#myId {
  & > .myClass {
    outline: 3px dashed red;
  }
}
> p {
  font-size: 1.1rem;
}
```

#### HTML

```html
<h2 class="myClass" id="myId">
  No selectors match. <span class="myClass">This span has an outline</span> as
  it is both myClass and a child of #myId.
</h2>
<p>The first paragraph is underlined. All the paragraphs are 1.1rem.</p>
<p>
  The second paragraph is red. This and the following paragraphs are italic.
</p>
<p>The third paragraph is NOT red. It is italic and 1.1rem.</p>
<p class="myClass">
  Does not have an outline; this is a sibling of H2, not a child. It is italic
  and 1.1rem.
</p>
```

#### 結果

属性セレクター
-------

属性セレクターは、セレクターの書き方によって、指定された属性を持つか、指定された属性と部分文字列の値が一致する要素をすべて選択します。
 例えば、 `[type]` は `type` 属性が設定されている（任意の値の）すべての要素に一致し、 `[type="submit"]` は `<input type="submit">` と `<button type="submit">` のほか、 `type="submit"` が設定されている任意の要素に一致します（この属性と値のペアは `<input>` と `<button>` 要素でのみ対応していますが）。照合は大文字と小文字を区別しません。

属性の大文字と小文字の区別は言語に依存します。一般的に HTML では、属性が列挙型の場合、その値が列挙された値の一つでなくても、あるいはその属性が設定するには有効な値でなくても、セレクター内の値は大文字と小文字を区別しません。 `class`, `id`, `data-*` 属性のような列挙型ではない属性、または `role` や `aria-*` 属性のような非 HTML 属性では、値の照合は大文字と小文字を区別します。大文字小文字を区別しない修飾子 (`i`) で大文字小文字の区別をなくすこともできます。

擬似クラスセレクター
----------

CSS セレクターモジュールでは、 60 以上の 擬似クラス を定義しています。擬似クラスはコロン (`:`) を接頭辞とする単純セレクターで、文書ツリー内に含まれない状態の情報に基づいて要素を選択できるようにします。`擬似クラス`を使用することで、状態にに基づいて要素をスタイル設定することができます。
 例えば、 `:target` 単純セレクターはフラグメント識別子を持つ URL の要素を対象とし、 `a:visited` 複合セレクターはユーザーが訪問したすべての `<a>` 要素に一致します。

擬似クラスは、要素の表示状態、入力、言語、位置、リソース状態、時間軸、ツリー構造、ユーザー操作、関数に分類することができます。

複数の擬似クラスを組み合わせて複合セレクターを作成することができます。擬似クラスを要素型セレクターや全称セレクターと複合セレクターに結合する場合、擬似クラスは、要素型セレクターや全称セレクターの後に置かなければなりません。

擬似要素セレクター
---------

すべての CSS セレクターが CSS セレクターモジュールで定義されているわけではありません。 CSS 擬似要素のセレクターは CSS 擬似要素モジュールで定義されています。

CSS 擬似要素は接頭辞としてコロン (`::`) を 2 つ付けたもので、 HTML に含まれない要素を表します。例えば、単純セレクターである `::marker` はリスト項目の箇条書き記号を選択し、複合セレクター `p::first-line` はすべての `<p>` 要素の最初の行に一致します。

仕様書
---

| Specification |
| --- |
| Selectors Level 4  |
| CSS Pseudo-Elements Module Level 4  |

擬似クラスと擬似要素については、それぞれの仕様書表を参照してください。

関連情報
----

* セレクターリスト
* CSS セレクターの構造
* 詳細度
* CSS 入れ子モジュール


セレクターでの :target 擬似クラスの利用 - CSS: カスケーディングスタイルシート

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

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 スニペット - XPath

XPath スニペット
===========

この記事ではいくつか XPath コードスニペットを提供します。それは XPath 機能を JavaScript コードに公開する DOM Level 3 XPath 仕様の標準インタフェースに基づく簡単な**ユーティリティ関数**の簡単な例です。スニペットは実際に自身のコードの中で使用できる関数です。

### ノード指定の評価関数

次のカスタムユーティリティ関数を使用して、指定された XML ノードの XPath 式を評価できます。最初の引数は DOM ノードまたは Document オブジェクトで、2 番目の引数は XPath 式を定義する文字列です。

##### 例:ノード指定のカスタム `evaluateXPath()` ユーティリティ関数を定義する

```js
// 指定された DOM ノードまたは Document オブジェクト (aNode) に対して
// XPath 式 aExpression を評価し、結果を配列として返します。
// 最初の作業をしてくれた morethanwarm dot mail dot com の
// wanderingstan に感謝します。
function evaluateXPath(aNode, aExpr) {
  const xpe = new XPathEvaluator();
  const nsResolver = xpe.createNSResolver(
    aNode.ownerDocument === null
      ? aNode.documentElement
      : aNode.ownerDocument.documentElement,
  );
  const result = xpe.evaluate(aExpr, aNode, nsResolver, 0, null);
  const found = [];
  let res;
  while ((res = result.iterateNext())) found.push(res);
  return found;
}
```

ただし、`createNSResolver` は、XPath 式の名前空間接頭辞が問い合わせる文書の名前空間接頭辞と一致する（かつ既定の名前空間が使用されていない (回避策については document.createNSResolver を参照)）ことが確認されている場合にのみ使用する必要があります。それ以外の場合は、XPathNSResolver の独自の実装を提供する必要があります。

XMLHttpRequest を使用してローカルまたはリモートの XML ファイルを DOM ツリー（XML の解釈とシリアライズを参照）に読み込む場合、`evaluateXPath()`の最初の引数は`req.responseXML`である必要があります。

#### 使用例

次の XML ドキュメント（DOM ツリーの作成方法とXML の解釈とシリアライズも参照してください）があるとします。

##### 例: カスタム `evaluateXPath()` ユーティリティ関数と一緒に使用する XML 文書

```xml
<?xml version="1.0"?>
<people>
  <person first-name="eric" middle-initial="H" last-name="jung">
    <address street="321 south st" city="denver" state="co" country="usa"/>
    <address street="123 main st" city="arlington" state="ma" country="usa"/>
  </person>

  <person first-name="jed" last-name="brown">
    <address street="321 north st" city="atlanta" state="ga" country="usa"/>
    <address street="123 west st" city="seattle" state="wa" country="usa"/>
    <address street="321 south avenue" city="denver" state="co" country="usa"/>
  </person>
</people>
```

XPath 式を使用して文書を「照会」できるようになりました。 DOM ツリーを眺めることでも同様の結果が得られますが、 XPath 式を使用する方がはるかに高速で強力です。id 属性に頼ることができるのであれば、 `document.getElementById()` はまだ強力ですが、 XPath ほど強力ではありません。下記は用例です。

##### 例: カスタムの `evaluateXPath()` ユーティリティ関数がある JavaScript コード

```js
// display the last names of all people in the doc
let results = evaluateXPath(people, "//person/@last-name");
for (const i in results)
  console.log(`Person #${i} has the last name ${results[i].value}`);

// get the 2nd person node
results = evaluateXPath(people, "/people/person[2]");

// get all the person nodes that have addresses in denver
results = evaluateXPath(people, "//person[address/@city='denver']");

// get all the addresses that have "south" in the street name
results = evaluateXPath(people, "//address[contains(@street, 'south')]");
console.log(results.length);
```

### docEvaluateArray

以下の例は、名前空間リゾルバーなどの特別な必要があるかどうかに関係なく、XPath の結果を配列に（順序付きで）取得する単純なユーティリティ関数です。これは、 `document.evaluate()` の複雑な構文が要求されない場合や、 `XPathResult` において（代わりに配列を返すことで）特別なイテレーターを使わなければならない状況を避けることができます。

##### 例: シンプルな `docEvaluateArray()` ユーティリティ関数を定義する

```js
// Example usage:
// const els = docEvaluateArray('//a');
// console.log(els[0].nodeName); // gives 'A' in HTML document with at least one link

function docEvaluateArray(expr, doc, context, resolver) {
  let i;
  const a = [];
  doc = doc || (context ? context.ownerDocument : document);
  resolver = resolver || null;
  context = context || doc;

  const result = doc.evaluate(
    expr,
    context,
    resolver,
    XPathResult.ORDERED\_NODE\_SNAPSHOT\_TYPE,
    null,
  );
  for (let i = 0; i < result.snapshotLength; i++) {
    a.push(result.snapshotItem(i));
  }
  return a;
}
```

### getXPathForElement

次の関数により、要素と XML 文書を渡して、その要素につながる一意の文字列 XPath 式を検索することができます。

##### 例: `getXPathForElement()` ユーティリティ関数を定義する

```js
function getXPathForElement(el, xml) {
  let xpath = "";
  let pos, tempitem2;

  while (el !== xml.documentElement) {
    pos = 0;
    tempitem2 = el;
    while (tempitem2) {
      if (tempitem2.nodeType === 1 && tempitem2.nodeName === el.nodeName) {
        // If it is ELEMENT\_NODE of the same name
        pos += 1;
      }
      tempitem2 = tempitem2.previousSibling;
    }

    xpath = `\*[name()='${el.nodeName}' and namespace-uri()='${
 el.namespaceURI ?? ""
 }'][${pos}]/${xpath}`;

    el = el.parentNode;
  }
  xpath = `/\*[name()='${xml.documentElement.nodeName}' and namespace-uri()='${
 el.namespaceURI ?? ""
 }']/${xpath}`;
  xpath = xpath.replace(/\/$/, "");
  return xpath;
}
```

### 資料

* XPath
* このトピックのフォーラムでの議論
関連情報
----

* JavaScript での XPath の使用


軸 - XPath

軸
=

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

関数
==

以下はコア 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 の比較 - XPath

CSS セレクターと XPath の比較
====================

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

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


JavaScript での XPath の利用の手引き - XPath

JavaScript での XPath の利用の手引き
===========================

この文書では、拡張機能やウェブサイトから JavaScript 内で XPath を使うためのインターフェイスについて解説します。 Mozilla は DOM 3 XPath のかなりの部分を実装しており、 HTML 文書と XML 文書のどちらに対しても XPath 式を実行することができます。

XPath を使用するための主となるインターフェイスは document オブジェクトの evaluate 関数です。

document.evaluate()
-------------------

このメソッドは XPath 式を XML ベースの文書 ( HTML を含む) に対して評価し、 `XPathResult` オブジェクトを返します。これは単一のノード、もしくはノードの集合になります。このメソッドの既存のドキュメントは document.evaluate ですが、このメソッドの解説のためには内容が薄いため、以下でさらに詳しく説明します。

```js
const xpathResult = document.evaluate(
  xpathExpression,
  contextNode,
  namespaceResolver,
  resultType,
  result,
);
```

### 引数

`evaluate()` 関数は 5 つの引数を取ります。

* `xpathExpression`: 評価する XPath 式を文字列で指定します。
* `contextNode`: `xpathExpression` を評価する対象となる文書内のノードを指定します。指定されたノードの全ての子ノードに対しても評価が行われます。もっともよく使用される値は document ノードです。
* `namespaceResolver`: `xpathExpression` に含まれるあらゆる名前空間接頭辞を渡され、その接頭辞に対応する名前空間 URI を表す文字列を返す関数です。この関数により、 XPath 式で使われている接頭辞と文書内で使われている接頭辞が異なっていたとしてもそれを変換することが可能になります。この関数は次のいずれかです。
    + `XPathEvaluator` オブジェクトの `createNSResolver` メソッドにより作成されたもの。ほとんどの場合はこれを使うべきでしょう。
    + HTML 文書の場合や、名前空間接頭辞が使われていない場合は `null`。 `xpathExpression` に名前空間接頭辞が含まれている場合は、 `DOMException` が `NAMESPACE_ERR` のコードで発生するので注意してください。
    + ユーザー定義のカスタム関数。詳しくは付録のユーザー定義名前空間リゾルバーの使用の節を参照してください。
* `resultType`: 評価の結果返してほしい値の型を示す定数です。もっともよく指定される定数は `XPathResult.ANY_TYPE` で、この場合、指定された XPath 式に対して一番適切な型で結果が返されます。指定できる定数の一覧は付録の定数一覧の節を参照してください。それぞれの定数の使い方は「返値の型の指定」の節を参考にしてください。
* `result`: 既存の `XPathResult` オブジェクトが指定された場合には、そのオブジェクトが再利用されます。 `null` が指定された場合は、新しい `XPathResult` オブジェクトが生成されます。
### 返値

`xpathResult` を返します。これは引数 `resultType` で指定されたの `XPathResult` 型のオブジェクトです。`XPathResult` インターフェイスはここで定義されています。

### 既定の名前空間リゾルバーの実装

名前空間リゾルバーを作成するには、普通は document オブジェクトの `createNSResolver` メソッドを使います。

```js
const nsResolver = document.createNSResolver(
  contextNode.ownerDocument === null
    ? contextNode.documentElement
    : contextNode.ownerDocument.documentElement,
);
```

または、 `XPathEvaluator` オブジェクトの `createNSResolver` メソッドを使います。

```js
const xpEvaluator = new XPathEvaluator();
const nsResolver = xpEvaluator.createNSResolver(
  contextNode.ownerDocument === null
    ? contextNode.documentElement
    : contextNode.ownerDocument.documentElement,
);
```

それから 変数 `nsResolver` を引数 `namespaceResolver` として `document.evaluate` に渡します。

メモ: XPath では接頭辞のない QName は名前空間が null の要素にのみ一致すると定義しています。 XPath には、通常の要素参照に適用される既定の名前空間を取得する手段はありません（例: `xmlns='http://www.w3.org/1999/xhtml'` に対する `p[@id='_myid']`）。名前空間が null ではない既定の要素に一致させるには、 `['namespace-uri()='http://www.w3.org/1999/xhtml' and name()='p' and @id='_myid']` のような形を使用して特定の要素を参照するか（このアプローチは名前空間が不明である可能性のある動的な XPath で有効です）、接頭辞つきの名前テストを使用し、その接頭辞を名前空間にマッピングする名前空間リゾルバーを作成する必要があります。詳しくは下記のユーザー定義の名前空間リゾルバーを作成する方法を参照して下さい。

### メモ

任意の DOM ノードを名前空間の解決に適応させると、 XPath 式が文書内に現れたノードのコンテキストに関連して簡単に評価できるようになります。このアダプターは、ノード上の DOM Level 3 メソッド `lookupNamespaceURI` と同様に動作し、 `lookupNamespaceURI` が呼び出された時点でノードの階層で利用可能な現在の情報を使用して、指定された接頭辞から `namespaceURI` を解決します。また、暗黙の `xml` 接頭辞も正しく解決します。

### 返値の型の指定

`document.evaluate` から返される変数 `xpathResult` は、単一のノード（単純型）もしくはノードのコレクション（ノード集合型）から成ります。

#### 単純型

`resultType` で要求された結果型が次のうちのどれかであった場合、

* `NUMBER_TYPE` - 倍精度浮動小数点数 (double)
* `STRING_TYPE` - 文字列
* `BOOLEAN_TYPE` - 論理値

それぞれ以下の `XPathResult` オブジェクトのプロパティにアクセスすることで式の返値を得る事ができます。

* `numberValue`
* `stringValue`
* `booleanValue`

##### 例

下の例では XPath 式 `count(//p)` によって HTML 文書内の `<p>` 要素の数を取得しています。

```js
const paragraphCount = document.evaluate(
  "count(//p)",
  document,
  null,
  XPathResult.ANY\_TYPE,
  null,
);

console.log(
  `この文書には ${paragraphCount.numberValue} 個の段落要素が含まれています`,
);
```

JavaScript では数値を表示しようとすると文字列に変換されますが、 XPath インターフェイスは `stringValue` プロパティを要求しても数値の結果を自動的に変換しないので、下のコードは**動作しません**。

```js
const paragraphCount = document.evaluate(
  "count(//p)",
  document,
  null,
  XPathResult.ANY\_TYPE,
  null,
);

console.log(
  `この文書には ${paragraphCount.stringValue} 個の段落要素が含まれています`,
);
```

これを実行すると `NS_DOM_TYPE_ERROR` コードの例外が返されます。

#### ノード集合型

`XPathResult` オブジェクトが返すノード集合には主として 3 種類の型があります。

* イテレーター
* スナップショット
* ファーストノード

##### イテレーター

引数 `resultType` で指定された結果型が次のどちらかの場合、

* `UNORDERED_NODE_ITERATOR_TYPE`
* `ORDERED_NODE_ITERATOR_TYPE`

一致したノードのノード集合が `XPathResult` オブジェクトとして返されます。これはイテレーターのようにふるまい、 `XPathResult` の `iterateNext()` メソッドを使ってその中に含まれる個々のノードにアクセスできます。

一致したノードに対する反復が全て終了すると、 `iterateNext()` は `null` を返します。

ただし、反復処理中に文書が変異した (文書ツリーが改変された) 場合、反復処理は無効化され、`XPathResult` の `invalidIteratorState` プロパティが `true` に設定され、`NS_ERROR_DOM_INVALID_STATE_ERR` 例外が投げられます。

```js
const iterator = document.evaluate(
  "//phoneNumber",
  documentNode,
  null,
  XPathResult.UNORDERED\_NODE\_ITERATOR\_TYPE,
  null,
);

try {
  let thisNode = iterator.iterateNext();

  while (thisNode) {
    console.log(thisNode.textContent);
    thisNode = iterator.iterateNext();
  }
} catch (e) {
  console.error(`Error: Document tree modified during iteration ${e}`);
}
```

##### スナップショット

引数 `resultType` で指定された結果型が次のどちらかの場合、

* `UNORDERED_NODE_SNAPSHOT_TYPE`
* `ORDERED_NODE_SNAPSHOT_TYPE`

返される `XPathResult` オブジェクトは一致したノードの静的な集合となり、 `XPathResult` オブジェクトの `snapshotItem(itemNumber)` メソッドによってそれぞれのノードにアクセスできます。`itemNumber` は取り出すノードのインデックスです。含まれるノードの総数は `snapshotLength` プロパティから得られます。

スナップショットは文書が変化しても変更されず、イテレーターと違って無効になることはありませんが、スナップショットは現在の文書に対応しないことがあります。ノードが移動されていたり、既に存在しないノードが含まれていたり、新しいノードが追加されている可能性もあります。

```js
const nodesSnapshot = document.evaluate(
  "//phoneNumber",
  documentNode,
  null,
  XPathResult.ORDERED\_NODE\_SNAPSHOT\_TYPE,
  null,
);

for (let i = 0; i < nodesSnapshot.snapshotLength; i++) {
  console.log(nodesSnapshot.snapshotItem(i).textContent);
}
```

##### ファーストノード

引数 `resultType` で指定された結果型が次のどちらかの場合、

* `ANY_UNORDERED_NODE_TYPE`
* `FIRST_ORDERED_NODE_TYPE`

返される `XPathResult` オブジェクトは XPath 式に一致するノードのうち最初に見つかったもののみです。このノードには `XPathResult` オブジェクトの `singleNodeValue` プロパティによってアクセスできます。ノード集合が空ならばこのプロパティは `null` になります。

ただし、 unordered サブタイプの場合、返される単一のノードは文書順において最初のものではない可能性があるので注意が必要です。 ordered サブタイプの場合は文書順において最初に一致するノードであることが保証されます。

```js
const firstPhoneNumber = document.evaluate(
  "//phoneNumber",
  documentNode,
  null,
  XPathResult.FIRST\_ORDERED\_NODE\_TYPE,
  null,
);

console.log(
  `The first phone number found is ${firstPhoneNumber.singleNodeValue.textContent}`,
);
```

#### ANY\_TYPE 定数

引数 `resultType` に指定された結果型が `ANY_TYPE` である場合、返される `XPathResult` オブジェクトは、式を評価した結果から導き出される適切な型になります。

返される結果型は単純型 (`NUMBER_TYPE`, `STRING_TYPE`, `BOOLEAN_TYPE`) のうちのいずれにもなり得ます**が**、もしノード集合であった場合には、`UNORDERED_NODE_ITERATOR_TYPE` に**しか**なり得ません。

評価の後に型を判断するには、 `XPathResult` オブジェクトの `resultType` プロパティを使います。このプロパティの定数値は付録に記載されています。

例
-

### HTML 文書内で

下のコードは、 XPath 式を評価する対象となる HTML 文書の内部や、それにリンクされた JavaScript 内に設置するためのものです。

XPath を使って HTML 文書内のすべての `<h2>` 見出し要素を抽出したければ、`xpathExpression` は単に '`//h2`' となります。 `//` は再帰下降演算子 (Recursive Descent Operator) なので、この式は文書ツリー内のあらゆる位置にある、nodeName が `h2` である要素に一致します。

```js
const headings = document.evaluate(
  "//h2",
  document,
  null,
  XPathResult.ANY\_TYPE,
  null,
);
```

HTML には名前空間がないため、引数 `namespaceResolver` には `null` を渡している事に注目してください。

文書全体から見出し要素を探すため、ここでは document オブジェクト自体を `contextNode` として使っています。

この式の結果は `XPathResult` オブジェクトです。返された結果の型を知りたい場合は、返されたオブジェクトの `resultType` プロパティを評価してください。この場合は `4` 、つまり `UNORDERED_NODE_ITERATOR_TYPE` と評価されるでしょう。これは XPath 式の結果がノード集合であった場合の既定の結果型です。この型はノードに一つずつアクセスすることができ、返されるノードの順序は決まっていません。返されたノードにアクセスするには、返されたオブジェクトの `iterateNext()` メソッドを使います。

```js
let thisHeading = headings.iterateNext();

let alertText = "この文書内のレベル 2 の見出しは、\n";

while (thisHeading) {
  alertText += `${thisHeading.textContent}\n`;
  thisHeading = headings.iterateNext();
}
```

反復によってノードを得られたら、そのノードのすべての標準 DOM インターフェイスにアクセスできます。式によって返される `h2` 要素に対する反復処理が全て終了すると、それ以降は `iterateNext()` を何度呼び出しても `null` が返されます。

### 拡張機能内の XML 文書に対して評価する

例として XML 文書が `chrome://yourextension/content/peopleDB.xml` にあったとします。

```xml
<?xml version="1.0"?>
<people xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
  <person>
    <name first="george" last="bush" />
    <address street="1600 pennsylvania avenue" city="washington" country="usa"/>
    <phoneNumber>202-456-1111</phoneNumber>
  </person>
  <person>
    <name first="tony" last="blair" />
    <address street="10 downing street" city="london" country="uk"/>
    <phoneNumber>020 7925 0918</phoneNumber>
  </person>
</people>
```

拡張機能内で XML 文書の内容を取得できるようにするため、`XMLHttpRequest` オブジェクトを作成して文書を同期的に読み込みます。変数 `xmlDoc` には文書が `XMLDocument` オブジェクトとして格納されるので、それに対して `evaluate` メソッドを使う事ができます。

拡張機能の xul/js 文書で使用する JavaScript は以下の通りです。

```js
const req = new XMLHttpRequest();

req.open("GET", "chrome://yourextension/content/peopleDB.xml", false);
req.send(null);

const xmlDoc = req.responseXML;

const nsResolver = xmlDoc.createNSResolver(
  xmlDoc.ownerDocument === null
    ? xmlDoc.documentElement
    : xmlDoc.ownerDocument.documentElement,
);

const personIterator = xmlDoc.evaluate(
  "//person",
  xmlDoc,
  nsResolver,
  XPathResult.ANY\_TYPE,
  null,
);
```

付録
--

### ユーザー定義の名前空間リゾルバーの実装

この例は説明のためだけのものです。 この関数は、`xpathExpression` から名前空間接頭辞を取り、その接頭辞に対応する URI を返さなければなりません。例えば、この式は、
```

'//xhtml:td/mathml:math'
```

(X)HTML のテーブルデータセル要素の子要素である全ての MathML 式を選択します。

接頭辞 '`mathml:`' と 名前空間 URI '`http://www.w3.org/1998/Math/MathML`' を、接頭辞 '`xhtml:`' と URI '`http://www.w3.org/1999/xhtml`' をそれぞれ関連付けるため、関数を用意します。

```js
function nsResolver(prefix) {
  const ns = {
    xhtml: "http://www.w3.org/1999/xhtml",
    mathml: "http://www.w3.org/1998/Math/MathML",
  };
  return ns[prefix] || null;
}
```

そうすると `document.evaluate` をこのようにして呼び出せます。

```js
document.evaluate(
  "//xhtml:td/mathml:math",
  document,
  nsResolver,
  XPathResult.ANY\_TYPE,
  null,
);
```

### XML 文書の既定の名前空間を実装する

既定の名前空間リゾルバーの実装で述べたように、既定のリゾルバーは XML 文書の既定の名前空間を処理しません。たとえばこの文書では、

```xml
<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <entry />
    <entry />
    <entry />
</feed>
```

`doc.evaluate('//entry', doc, nsResolver, XPathResult.ANY_TYPE, null)` は、`nsResolver` が `createNSResolver` によって返されたリゾルバーである場合、空集合を返します。リゾルバーとして `null` を渡しても同じです。

正しい既定の名前空間 (この場合は Atom 名前空間) を返すカスタムリゾルバーを作成すれば、この問題を解決できます。この時、 XPath 式の中ではなんらかの名前空間接頭辞を使わなければならないことに注意してください。これはリゾルバー関数がその接頭辞を指定した名前空間に変換できるようにするためです。例えばこのようにします。

```js
function resolver() {
  return "http://www.w3.org/2005/Atom";
}
doc.evaluate("//myns:entry", doc, resolver, XPathResult.ANY\_TYPE, null);
```

なお、文書で複数の名前空間が使われている場合には、より複雑なリゾルバーが必要になります。

次の節では、より効果的に機能する (名前空間を事前に知らなくてもよい) アプローチについて説明します。

### XPath 関数を使用して既定の名前空間の要素を参照する

null ではない名前空間の既定の要素に一致させる (そして名前空間が分からない動的な XPath 式で上手く動作する) もう一つの方法として、 `[namespace-uri()='http://www.w3.org/1999/xhtml' and name()='p' and @id='_myid']` のような形式で特定の要素を参照する方法があります。これにより、XPath クエリーが正規にラベル付けされた要素の既定の名前空間を検出できないという問題が回避されます。

### 接頭辞に関係ない、名前空間付きの要素や属性の取得

名前空間の要素や属性を見つける際に特定の接頭辞を必ずしも必要とせず、 (意図的に) 名前空間に柔軟性を持たせたい場合は、特別な手法を用いなければなりません。

上の節のアプローチを応用して、選択された接頭辞に関係なく名前空間の要素をテストすることは (`local-name()` と `namespace-uri()` を組み合わせて `name()` の代わりに使用すれば) 可能ですが、特定の名前空間属性を持つ要素を述語の中に取り込みたい場合には、より困難な状況が発生します (XPath 1.0 には実装に依存しない変数が存在しないため)。

たとえば、次のように namespaced 属性を持つ要素を取得しようとすると、 (間違って) `var xpathlink = someElements[local-name(@*)="href" and namespace-uri(@*)='http://www.w3.org/1999/xlink'];` となります。

この方法では、ローカル名が "`href`" である属性が存在しても、その属性が (`[@href](/ja/docs/Web/XPath/Axes/attribute)` ではなく) 対象となる (XLink) 名前空間を持つ別の属性であった場合、誤って一部の要素を取得してしまう可能性があります。

XLink の `@href` 属性を持つ要素を (名前空間リゾルバーで定義済みの接頭辞にとらわれずに) 正確に把握するためには、次のようにして取得することができます。

```js
const xpathEls =
  'someElements[@\*[local-name() = "href" and namespace-uri() = "http://www.w3.org/1999/xlink"]]'; // Grabs elements with any single attribute that has both the local name 'href' and the XLink namespace
const thislevel = xml.evaluate(xpathEls, xml, null, XPathResult.ANY\_TYPE, null);
let thisitemEl = thislevel.iterateNext();
```

### XPathResult の定義済み定数

| 定義済みの結果型定数 | 値 | 説明 |
| --- | --- | --- |
| ANY\_TYPE | 0 | 式の評価によって導き出される適切な型を格納した結果の集合。結果がノード集合ならば、結果の型は常に UNORDERED\_NODE\_ITERATOR\_TYPE となるので注意が必要。 |
| NUMBER\_TYPE | 1 | 一つの数値を格納した結果。 `count()` 関数を使用した XPath 式などで有用。 |
| STRING\_TYPE | 2 | 一つの文字列を格納した結果。 |
| BOOLEAN\_TYPE | 3 | 一つの論理値を格納した結果。 `not()` 関数を使用した XPath 式などで有用。 |
| UNORDERED\_NODE\_ITERATOR\_TYPE | 4 | 一致した全てのノードを格納した結果ノード集合。ノードの順番は文書内に現れる順番と必ずしも一致しない。 |
| ORDERED\_NODE\_ITERATOR\_TYPE | 5 | 一致した全てのノードを格納した結果ノード集合。ノードの順番は文書内に現れる順番に一致する。 |
| UNORDERED\_NODE\_SNAPSHOT\_TYPE | 6 | 一致した全てのノードのスナップショットを格納した結果ノード集合。ノードの順番は文書内に現れる順番と必ずしも一致しない。 |
| ORDERED\_NODE\_SNAPSHOT\_TYPE | 7 | 一致した全てのノードのスナップショットを格納した結果ノード集合。ノードの順番は文書内に現れる順番に一致する。 |
| ANY\_UNORDERED\_NODE\_TYPE | 8 | 一致したノードのうちのどれか一つを格納した結果ノード集合。これは必ずしも文書内で式に一致した最初のノードというわけではない。 |
| FIRST\_ORDERED\_NODE\_TYPE | 9 | 一致内で式に一致した最初のノードを格納した結果ノード集合。 |

関連情報
----

* XPath
* XML Path Language from *What is XSLT?* by G. Ken Holman
原著情報
----

* 原文の著者: James Graham
* その他の貢献者: James Thompson


boolean - XPath

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 - XPath

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 のサポート

サポート済み


translate - XPath

translate
=========

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

`translate` 関数は、文字列と、その文字列を変換するための文字の集合を評価し、変換された文字列を返します。

### 構文
```

translate(string, abc, XYZ)
```

### 引数

`string`

評価する文字列。

`abc`

置換の対象となる文字を格納した文字列。

`XYZ`

置換に使用する文字を格納した文字列。 例えば `string` の中に `abc` の 1 文字目が見つかると、それらはすべて `XYZ` の 1 文字目に置き換えられる。

### 返値

変換された文字列。

### 注

XPath では、大文字と小文字の変換に使用するための解決策としては、translate 関数はすべての言語において十分なものであるとは言えないと注記されています。 XPath の将来のバージョンでは、大文字と小文字の変換のための関数が追加されるかもしれません。

ですが、現在のところはこの関数が文字列を大文字や小文字に変換するのには最も適しています。

例
```

<xsl:value-of select="translate('The quick brown fox.', 'abcdefghijklmnopqrstuvwxyz', 'ABCDEFGHIJKLMNOPQRSTUVWXYZ')" />
```

出力
```

THE QUICK BROWN FOX.
```

* `abc` が `XYZ` よりも長い場合、`XYZ` の中に対応する文字がない `abc` の文字はすべて削除されます。

例
```

<xsl:value-of select="translate('The quick brown fox.', 'brown', 'red')" />
```

出力
```

The quick red fdx.
```

* `XYZ` に `abc` よりも多く文字が含まれている場合、余分な文字は無視されます。
### 定義

XPath 1.0 4.2

### Gecko での対応

対応済み。


string-length - XPath

string-length
=============

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

`string-length` 関数は、与えられた文字列の文字数に等しい数値を返します。

### 構文
```

string-length( [string] )
```

### 引数

`string` (省略可)

評価する文字列。省略すると、コンテキストノードを文字列に変換したものが使用されます。

### 返値

文字列の文字数に等しい整数。

### 定義

XPath 1.0 4.2

### Gecko での対応

対応済み。


not - XPath

not
===

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

`not` 関数は式を論理値として評価し、その逆の値を返します。

### 構文
```

not(expression )
```

### 引数

`expression`

この式は boolean() 関数の引数として渡された場合とまったく同じように評価されます。

### 返値

false と評価できる式に対しては true を返し、true と評価できる式に対しては false を返します。

### 注

* この関数は boolean() 関数と同様のふるまいをしますが、返される値はその逆です。
* 要素に一部の属性がないことを検査することができます。
```

<xsl:for-each match="//a[not(@name and @name = 'badname')]">
  <!-- iterates over any <a> element in the document, that
       either has no 'name' attribute at all, or it has one,
       but its value is not "badname". -->
</xsl:template>
```

### 定義

XPath 1.0 4.3

### Gecko での対応

対応済み。


concat - XPath

concat
======

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

`concat` 関数は 2 つ以上の文字列を連結し、その結果として得られる文字列を返します。

### 構文
```

concat(string1 ,string2 [,stringn]* )
```

### 引数

`stringn`

この関数は 2 つ以上の引数を受け入れます。それぞれの引数は文字列です。

### 返値

関数に引数として渡されたすべての文字列を連結した、単一の文字列。

### 定義

XPath 1.0 4.2

### Gecko での対応

対応済み。


key - XPath

key
===

`key` 関数は、指定されたキーに対して指定された値を持つノードのノード集合を返します。

### 構文
```

key( keyname, value )
```

### 引数

`keyname`

使用される `xsl:key` 要素の名前を含む文字列。

`value`

返されるノード集合には、指定されたキーに対してこの値を持つすべてのノードが含まれます。

### 返値

ノード集合です。

### メモ

* `xsl:key` 要素は、指定された要素がキーと一致するために使用される属性を定義します

この関数は XPath への XSLT 固有の追加です。コア XPath 関数ライブラリの一部ではありません。

### 定義

XSLT 1.0 12.2

### Gecko の対応

対応済み。


unparsed-entity-url - XPath

unparsed-entity-url
===================

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

`unparsed-entity-url()`関数は、指定された名前を持つ解析されていないエンティティの URI を返します。これは、ソース文書の DTD で参照される非 XML データです。

### 構文
```

string unparsed-entity-url(string)
```

### 引数

解析されていないエンティティの名前。引数が文字列でない場合は、 string() 関数の規則を使用して変換されます。名前は XML 名でなければなりません。

### 返値

存在する場合、 DTD から取り出された未解析エンティティの URI。それ以外の場合は空の文字列です。

### 定義

XSLT 1.0 12.4

### Gecko の対応状況

未対応


contains - XPath

contains
========

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

`contains` 関数は、第 1 引数の文字列に第 2 引数の文字列が含まれているかどうかを判定し、論理値 true または false を返します。

### 構文
```

contains(haystack ,needle )
```

### 引数

`haystack`

検索される文字列

`needle`

`haystack` の部分文字列かどうかを検索する文字列

### 返値

`haystack` に `needle` が含まれていれば `true`。 そうでなければ `false`。

### 定義

XPath 1.0 4.2

### Gecko でのサポート

サポート済み。


floor - XPath

floor
=====

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

`floor` 関数は小数を評価し、その小数以下の最も大きい整数を返します。

### 構文
```

floor( number )
```

### 引数

`number`

評価する小数。

### 返値

`number` 以下の最も近い整数。

### 定義

XPath 1.0 4.4

### Gecko での対応

対応済み。


substring - XPath

substring
=========

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

`substring` 関数は与えられた文字列の一部を返します。

### 構文
```

substring(string ,start [,length] )
```

### 引数

`string`

評価する文字列。

`start`

`string` 内での部分文字列の開始位置。

`length` (省略可)

部分文字列の長さ。 省略すると、返される文字列には `start` の位置から `string` の最後までのすべての文字が格納される。

### 返値

文字列。

### 注

他の XPath 関数と同様に、位置はゼロ始まりではありません。 文字列内の最初の文字の位置は 1 であり、0 ではありません。

### 定義

XPath 1.0 4.2

### Gecko での対応

対応済み。


lang - XPath

lang
====

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

`lang` 関数は、コンテキストノードの言語が渡された言語に一致するかどうかを判定し、論理値 true または false を返します。

### 構文
```

lang(string )
```

### 引数

`string`

マッチさせる言語コードまたはローカライゼーション (言語と国) コード。

### 返値

コンテキストノードが与えられた言語に一致すれば `true`。そうでなければ `false`。

### 注

* ノードの言語はそのノードの `xml:lang` 属性で決定されます。 現在のノードが `xml:lang` 属性を持たなければ、 `xml:lang` 属性を持つ直近の祖先の `xml:lang` 属性の値が現在のノードの言語を決定します。言語を判定することができなければ (どの祖先も `xml:lang` 属性を持たなければ)、この関数は false を返します。

* 与えられた `string` に国コードが指定されていなければ、国コードにかかわらずその言語のどのノードにもマッチします。その逆は真ではありません。

このような XML の断片と、
```

<p xml:lang="en">I went up a floor.</p>
<p xml:lang="en-GB">I took the lift.</p>
<p xml:lang="en-US">I rode the elevator.</p>
```

このような XSL テンプレートの一部があったとすると、
```

<xsl:value-of select="count(//p[lang('en')])" />
<xsl:value-of select="count(//p[lang('en-GB')])" />
<xsl:value-of select="count(//p[lang('en-US')])" />
<xsl:value-of select="count(//p[lang('de')])" />
```

出力は次のようになるでしょう。
```

3
1
1
0
```

### 定義

XPath 1.0 4.3

### Gecko での対応

対応済み。


string - XPath

string
======

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

`string` 関数は与えられた引数を文字列に変換します。

### 構文
```

string( [object] )
```

### 引数

`object` (省略可)

文字列に変換するオブジェクト。省略すると、コンテキストノードが使用されます。

### 返値

文字列。

### 注

* オブジェクトがノード集合ならば、その集合内の最初のノードの文字列値が返されます。
* 数値は次のように変換されます。
    + NaN は文字列 NaN に変換されます。
    + 正のゼロは文字列 0 に変換されます。
    + 負のゼロは文字列 0 に変換されます。
    + 正の無限大は文字列 Infinity に変換されます。
    + 負の無限大は文字列 -Infinity に変換されます。
    + -1 と 1 の間の小数は、小数点の前に 0 を 1 つ付けた形式で文字列に変換されます。
    + 論理値の true は文字列の true に変換されます。
    + 論理値の false は文字列の false に変換されます。
### 定義

### Gecko での対応

対応済み。


ceiling - XPath

ceiling
=======

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

`ceiling` 関数は小数を評価し、その小数以上の最も小さい整数を返します。

### 構文
```

ceiling(number )
```

### 引数

`number`

評価する数値。

### 返値

`number` 以上の最も近い整数。

例:

`ceiling (5.2)` = *6*

`ceiling (-5.2)` = *-5*

### 定義

XPath 1.0 4.4

### Gecko での対応

対応済み。


namespace-uri - XPath

namespace-uri
=============

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

`namespace-uri` 関数は、指定されたノード集合内の最初のノードの名前空間 URI を表す文字列を返します。

### 構文
```

namespace-uri( [node-set] )
```

### 引数

`node-set` (省略可)

このノード集合内の最初のノードの名前空間 URI が返されます。引数を省略すると、現在のコンテキストノードが使用されます。

### 返値

指定されたノードが属する名前空間の URI を表す文字列。

### 注

* 指定されたノードが特定の名前空間を持たなければ、空文字列が返されます。

* 要素ノードおよび属性ノード以外のノードに対しては、常に空文字列が返されます。
### 定義

XPath 1.0 4.1

### Gecko での対応

対応済み。


position - XPath

position
========

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

`position` 関数は、式評価コンテキストのコンテキスト位置に等しい数値を返します。

### 構文
```

position()
```

### 返値

式評価コンテキストのコンテキスト位置に等しい整数。

### 注

* コンテキストにおけるノードの位置はゼロ起点ではないことに注意してください。最初のノードの位置は 1 です。

* コンテキストはパスのほかの部分によって決定します。
```

<xsl:template match="//a[position() = 5]">
 <!-- このテンプレートは文書内のあらゆる位置にある
         5 番目の a 要素にマッチする -->
</xsl:template>
```

```
<xsl:template match="//div[@class='foo']/bar[position() = 1]">
 <!-- このテンプレートは class 属性が "foo" に等しい div 要素の子である
      1 番目の bar 要素にマッチする -->
</xsl:template>
```

### 定義

XPath 1.0 4.1

### Gecko での対応

対応済み。


local-name - XPath

local-name
==========

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

`local-name` 関数は、与えられたノード集合内の最初のノードのローカル名 (local name) を表す文字列を返します。

### 構文
```

local-name( [node-set] )
```

### 引数

`node-set` (省略可)

このノード集合内の最初のノードのローカル名が返されます。引数を省略すると、現在のコンテキストノードが使用されます。

### 返値

文字列。

### 注

* ローカル名は展開名 (expanded-name) のローカル部分です。
### 定義

XPath 1.0 4.1

### Gecko での対応

対応済み。


name - XPath

name
====

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

`name` 関数は、与えられたノード集合内の最初のノードの QName を表す文字列を返します。

### 構文
```

name( [node-set] )
```

### 引数

`node-set` (省略可)

このノード集合内の最初のノードの QName が返されます。引数を省略すると、現在のコンテキストノードが使用されます。

### 返値

ノードの QName を表す文字列。

### 注

* QName はノードの修飾名であり、名前空間接頭辞とローカル名が含まれます。
### 定義

XPath 1.0 4.1

### Gecko での対応

対応済み。


system-property - XPath

system-property
===============

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

`system-property`関数は、指定されたシステムプロパティを表すオブジェクトを返します。

### 構文
```

system-property(name)
```

### 引数

`name` (任意)

システムプロパティの名前。引数は QName である文字列に評価される必要があります。 QName は、式のスコープ内の名前空間宣言を使用して名前に展開されます。 system-property 関数は、名前によって識別されるシステムプロパティの値を表すオブジェクトを戻します。そのようなシステムプロパティがない場合は、空の文字列を返す必要があります。

### 返値

指定されたシステムプロパティを表すオブジェクト。

### 注

* xsl:version: プロセッサーによって実装された XSLT のバージョンを示す数字。このドキュメントで指定されているバージョンの XSLT を実装している XSLT プロセッサの場合、これは 1.0 です
* xsl:vendor: XSLT プロセッサーのベンダーを識別する文字列
* xsl:vendor-url: XSLT プロセッサーのベンダーを識別する URL を含む文字列。通常これはベンダーのウェブサイトのホストページ (ホームページ) です
### 定義

XSLT 1.0 12.4

### Gecko での対応

対応済み


choose - XPath

choose
======

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

`choose` 関数は正負値に基づいて、指定されたオブジェクトのうち 1 つを返します。

**メモ:** このメソッドは廃止予定である `if()` の代わりに使われるべきです。

### 構文
```

choose( boolean , object1, object2 )
```

### 値

`boolean`

どのオブジェクトを返すかを決定するのに使われる正負オペレーション。

`object1`

戻されるか検討される 1 つめのオブジェクト。

`object2`

戻されるか検討される 2 つめのオブジェクト。

### 返値

もし与えられた正負値が正であれば、1 つめのオブジェクトが戻される。そうでなければ 2 つめのオブジェクトが戻される。

**メモ:** 値が戻らないものまで含めて、全てのパラメータが評価される。

### 定義

XForms 1.1

### Gecko のサポート状況

サポート済み.


last - XPath

last
====

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

`last` 関数は、式評価コンテキストのコンテキストサイズに等しい数値を返します。

### 構文
```

last()
```

### 返値

式評価コンテキストのコンテキストサイズに等しい整数。

### 注

* この関数は、特定のノードがノード集合内で最後のものであるかどうかを判定するために、 position() 関数をともなってよく用いられます。
### 定義

XPath 1.0 4.1

### Gecko での対応

対応済み。


function-available - XPath

function-available
==================

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

`function-available`関数は、指定された関数が使用可能かどうかを判断し、論理値 true または false を返します。

### 構文
```

function-available(name )
```

### 引数

`name`

テストする関数の名前

### 返値

論理値の `true` もしくは `false`

### 定義

XPath 1.0 15

### Gecko のサポート

サポート済み


generate-id - XPath

generate-id
===========

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

`generate-id`関数は、指定されたノード集合の最初のノードの一意の ID を生成し、その ID を含む文字列を返します。

### 構文
```

generate-id( [node-set] )
```

### 引数

`node-set` (任意)

このノード集合の最初のノードに対して ID が生成されます。省略すると、現在のコンテキストノードが使用されます。

### 返値

生成された ID を含む文字列。

### 注記

* 同じ ID は、現在の変換で現在の文書の同じノードに対して毎回生成されなければなりません

* 生成された ID は、その後の変換では同じではない可能性があります

この関数は XPath への XSLT 固有の追加です。コア XPath 関数ライブラリの一部ではありません。

### 定義

XSLT 1.0 12.4

### Gecko のサポート

サポート済み


number - XPath

number
======

`number` 関数はオブジェクトを数値に変換し、その数値を返します。

### 構文
```

number( [object] )
```

### 引数

`object` (省略可)

数値に変換するオブジェクト。引数を省略すると、現在のコンテキストノードが使用されます。

### 返値

オブジェクトを変換した結果として得られる数値。

### 注

* 文字列は、文字列内で数値の前にある空白文字を取り除き、数値の後にある空白文字を無視することによって数値に変換されます。文字列がこのパターンに一致しない場合は、NaN に変換されます。
* 論理値 true は 1 に変換され、 false は 0 に変換されます。
* ノード集合は、まず string() 関数を呼び出したかのように文字列に変換され、それから文字列の引数と同じ方法で変換されます。
* 4 つの基本型以外の型のオブジェクトは、その型に応じた方法で数値に変換されます。
### 定義

XPath 1.0 4.4

### Gecko での対応

対応済み。


format-number - XPath

format-number
=============

`format-number` 関数は数値を評価し、指定された書式で数値を表す文字列を返します。

### 構文
```

format-number(number, pattern)
format-number(number, pattern, decimalFormat)
```

### 引数

`number`

書式化する数値

`pattern`

Java の DecimalFormat クラスの書式の文字列。

`decimalFormat` (任意)

使用する数値書式を定義する`xsl:decimal-format`要素の名前。省略すると、既定の 10 進形式が使用されます。

### 返値

新しい書式の数値を表す文字列。

### メモ

この関数は XPath への XSLT 固有の追加です。コア XPath 関数ライブラリーの一部ではありません。

### 定義

XSLT 1.0 12.3

### Gecko の対応

対応済み


substring-after - XPath

substring-after
===============

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

`substring-after` 関数は、与えられた文字列内で、与えられた部分文字列よりも後にある残りの部分を返します。

### 構文
```

substring-after(haystack ,needle )
```

### 引数

`haystack`

評価される文字列。この文字列の一部が返される。

`needle`

検索する文字列。`haystack` 内で最初に見つかった `needle` よりも後にあるすべての文字が返される。

### 返値

文字列。

### 例

| XPath の例 | 出力 |
| --- | --- |
| `substring-after('aa-bb','-')` | `bb` |
| `substring-after('aa-bb','a')` | `a-bb` |
| `substring-after('aa-bb','b')` | `b` |
| `substring-after('aa-bb','q')` | (空文字列) |

### 定義元

XPath 1.0 4.2

### Gecko での対応

対応済み。


round - XPath

round
=====

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

`round` 関数は、与えられた数値に最も近い整数を返します。

### 構文
```

round(decimal )
```

### 引数

`decimal`

丸められる小数。

### 返値

`decimal` よりも小さいか、大きいか、等しい、最も近い整数。

### 注

* -0.5 は負のゼロに丸められます。 0.4 は正のゼロに丸められます。
### 定義

XPath 1.0 4.4

### Gecko での対応

対応済み。


false - XPath

false
=====

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

`false` 関数は論理値 false を返します。

### 構文
```

false()
```

### 返値

論理値 `false` です。

### 注

この関数は比較の一部として役立ちます。
```

<xsl:if test="boolean((1 > 2) = false())">
 The expression evaluates as true
</xsl:if>
```

### 定義

XPath 1.0 4.3

### Gecko での対応

対応済み。


id - XPath

id
==

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

`id` 関数は渡された ID に一致するノードを探し、識別されたノードを格納するノード集合を返します。

### 構文
```

id(expression )
```

### 引数

`expression`

`expression` がノード集合ならば、そのノード集合内のそれぞれのノードの文字列値が個々の ID として扱われます。返されるノード集合はそれらの ID に対応するノードの集合です。
 `expression` が文字列、またはその他のノード集合以外の型である場合、`expression` は空白で区切られた ID のリストとして扱われます。返されるノード集合はそれらの ID に対応するノードの集合です。

### 返値

与えられた単一または複数の ID によって識別された、単一または複数のノードを格納したノード集合。

### 注

* どの属性が ID として扱われるかは、XML 文書の DTD によって決定されます。 XPath 1.0 5.2.1 を参照してください。
### 定義

XPath 1.0 4.1

### Gecko での対応

一部対応。


substring-before - XPath

substring-before
================

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

`substring-before` 関数は、与えられた文字列内で、与えられた部分文字列よりも前にある部分の文字列を返します。

### 構文
```

substring-before(haystack ,needle )
```

### 引数

`haystack`

評価される文字列。この文字列の一部が返される。

`needle`

検索する文字列。`haystack` 内で最初に見つかった `needle` よりも前にあるすべての文字が返される。

### 返値

文字列。

### 例

| XPath の例 | 出力 |
| --- | --- |
| `substring-before('aa-bb','-')` | `aa` |
| `substring-before('aa-bb','a')` | `(空文字列)` |
| `substring-before('aa-bb','b')` | `aa-` |
| `substring-before('aa-bb','q')` | (空文字列) |

### 定義元

XPath 1.0 4.2

### Gecko の対応

対応済み。


current - XPath

current
=======

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

`current`関数を使用して、XSLT 命令でコンテキストノードを取得できます。

### 構文
```

current()
```

### 返値

現在のノードのみを含むノード集合。

### 注記

この関数は XSLT 固有の XPath への追加です。コア XPath 関数ライブラリの一部ではありません。

一番外側の式（別の式内に現れない式）の場合、現在のノードは常にコンテキストノード（`.`または`self`構文によって返されます）と同じです。次の 2 つは意味的に同等です。
```

<xsl:value-of select="current()"/>
```

```
<xsl:value-of select="."/>
```

内側の式（角括弧など）では、現在のノードは一番外側の式の場合と同じです。したがって、次の 3 つの式のすべてにおいて`current`関数（式全体ではない）が同じノードを返します。さらに、後者の 2 つは意味的に同等です。
```

<xsl:value-of select="current()"/>
```

```
<xsl:value-of select="foo/bar[current() = X]"/>
```

```
<xsl:variable name="current" select="current()"/>
<xsl:value-of select="foo/bar[$current = X]"/>
```

そして、次のコードは最も外側の式に`.`があるので、後者のコードと意味的に同じです。
```

<xsl:variable name="current" select="."/>
<xsl:value-of select="foo/bar[$current = X]"/>
```

しかし、`.`は常に最も狭い文脈に関係しています。したがって、
```

<xsl:value-of select="foo/bar[. = X]"/>
```

`.`は`bar`ノードを返します。これは現在のノードとは異なる場合があります。

### 定義

XSLT 1.0 12.4

### Gecko のサポート状況

サポート済み


true - XPath

true
====

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

`true` 関数は true の論理値を返します。

### 構文
```

true()
```

### 返値

論理値 `true` です。

### 定義

XPath 1.0 4.3

### Gecko の対応

対応済み。


starts-with - XPath

starts-with
===========

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

`starts-with` 関数は第 1 引数の文字列が第 2 引数の文字列で始まるかどうかを調べ、true または false を返します。

### 構文
```

starts-with(haystack, needle)
```

### 引数

`haystack`

検索される文字列。

`needle`

検索する文字列。

### 返値

`haystack` が `needle` で始まれば `true`。 そうでなければ `false`。

### 定義

XPath 1.0 4.2

### Gecko での対応

対応済み。


document - XPath

document
========

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

`document` は、外部の文書、または複数の外部の文書からノード集合を見つけ、結果のノード集合を返します。

構文
--
```

document(URI [,node-set] )
```

引数
--

`URI`

取得する文書の絶対 URI または相対 URI。 URI にはフラグメント識別子を含むこともあります。

`node-set` (省略可)

返却する外部文書内のノードの集合を指す式です。

返値
--

ノード集合です。

メモ
--

* URI にフラグメント識別子が含まれ、そのフラグメントが外部文書で識別できる場合、そのフラグメントが `node-set` 引数の式のルートとして扱われます。`node-set` 引数を省略すると、フラグメント全体が返されます。

* `URI` 引数がノード集合で第 2 引数が存在する場合、ノード集合の各ノードは別個の URI として評価され、返されたノード集合は `document` 関数が複数回 (毎回、関数呼び出しで指定されたのと同じ 2 番目の引数を使用) 呼び出されたかのようになり、結果のノード集合は 1 つのノード集合に連結されていました。

* 他の特定の条件が特定の挙動と共に存在します。詳細については、XSLT 1.0 のマニュアルを参照してください。

* URI は XSL 文書に関連するため、`document("")` は現在の文書のルートノードを返します。

この関数は XPath への XSLT 固有の追加です。コア XPath 関数ライブラリの一部ではありません。

定義
--

XSLT 1.0 12.1

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

対応済み。


sum - XPath

sum
===

`sum` 関数は、指定されたノード集合内のそれぞれのノードの数値としての値を合計した数値を返します。

### 構文
```

sum(node-set)
```

### 引数

`node-set`

評価されるノード集合。 このノード集合内のそれぞれのノードが number() 関数に渡されたかのように評価され、その結果として得られた数値の合計が返されます。

### 返値

数値です。

### メモ

なし。

### 定義

XPath 1.0 4.3

### Gecko での対応

対応済み。


normalize-space - XPath

normalize-space
===============

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

`normalize-space` 関数は、文字列から前後のホワイトスペースを取り除き、連続するホワイトスペースを 1 つのスペースに置き換え、その結果として得られる文字列を返します。

構文
--
```

normalize-space( [string] )
```

引数
--

`string` (省略可)

正規化する文字列。省略すると、コンテキストノードを文字列に変換したものが使用されます。

返値
--

正規化された文字列。

定義
--

XPath 1.0 4.2

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

対応済み。


count - XPath

count
=====

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

`count` 関数はノード集合に含まれるノードの数を数え、その整数を返します。

### 構文
```

count(node-set )
```

### 引数

`node-set`

カウント対象のノード集合。

### 返値

ノード集合に含まれるノードの数を表す整数。

### 定義

XPath 1.0 4.1

### Gecko での対応

対応済み。


グローバル属性 - HTML: ハイパーテキストマークアップ言語

グローバル属性
=======

**グローバル属性**は、すべての HTML 要素で共通の属性です。すべての要素で使用できますが、要素によっては効果がないこともあります。

グローバル属性は、*標準仕様で定義されていない要素を含む*、すべての HTML 要素で指定することができます。つまり、その要素を使用することで文書が HTML5 に準拠しなくなるような標準外の要素であっても、これらの属性は受け入れなければなりません。例えば、 `<foo hidden>…</foo>` とマークアップされたコンテンツは、 `<foo>` が妥当な HTML 要素ではなくても、 HTML5 準拠のブラウザーは非表示にします。

基本的な HTML グローバル属性に加えて、以下のグローバル属性も存在します。

* `xml:lang` と `xml:base`。これらは XHTML 仕様から継承したもので非推奨ですが、互換性のために残されています。
* アクセシビリティを確保するために使用される、 ARIA の `role` 属性および複数の `aria-*` 状態およびプロパティ。
* イベントハンドラー属性: `onabort`, `onautocomplete`, `onautocompleteerror`, `onblur`, `oncancel`, `oncanplay`, `oncanplaythrough`, `onchange`, `onclick`, `onclose`, `oncontextmenu`, `oncuechange`, `ondblclick`, `ondrag`, `ondragend`, `ondragenter`, `ondragleave`, `ondragover`, `ondragstart`, `ondrop`, `ondurationchange`, `onemptied`, `onended`, `onerror`, `onfocus`, `oninput`, `oninvalid`, `onkeydown`, `onkeypress`, `onkeyup`, `onload`, `onloadeddata`, `onloadedmetadata`, `onloadstart`, `onmousedown`, `onmouseenter`, `onmouseleave`, `onmousemove`, `onmouseout`, `onmouseover`, `onmouseup`, `onmousewheel`, `onpause`, `onplay`, `onplaying`, `onprogress`, `onratechange`, `onreset`, `onresize`, `onscroll`, `onseeked`, `onseeking`, `onselect`, `onshow`, `onsort`, `onstalled`, `onsubmit`, `onsuspend`, `ontimeupdate`, `ontoggle`, `onvolumechange`, `onwaiting`
グローバル属性の一覧
----------

`accesskey`

現在の要素に対するキーボードショートカットを生成するヒントを与えます。この属性の値は、空白区切りの文字のリストです。ブラウザーは、この文字リストの中から、コンピューターのキーボードレイアウトに存在する最初の文字を使用します。

`autocapitalize`

ユーザーが入力／編集したとき、入力文字列の大文字化を自動的に行うか、どこを大文字化するかを制御します。以下の値を指定することができます。

* `off` または `none`: 自動的な大文字化は行いません (すべての文字は小文字のままです)。
* `on` または `sentences`: 各文の最初の文字を大文字にします。それ以外の文字は小文字のままです。
* `words`:各単語の最初の文字を大文字にします。それ以外の文字は小文字のままです。
* `characters`: すべての文字を大文字にします。

`autofocus`

ページの読み込み時、またはその一部である `<dialog>` が表示された時点で、その要素がフォーカスされるようにすることを示す。この属性は論理値で、初期値は false です。

`class`

要素のクラスの空白区切りリストです。 CSS の クラスセレクター や JavaScript の `Document.getElementsByClassName()` メソッドのような関数を使えば、特定の要素を選択したりアクセスしたりすることができます。

`contenteditable`

ユーザーによる要素の編集が可能かどうかを示す列挙型属性です。編集可能な場合、ブラウザーはその要素を編集可能なものに変更します。この属性の値は、以下のどちらかでなければなりません。

* `true` または *空文字列*: 要素が編集可能であることを示す
* `false`: 要素は編集不可であることを示す

`contextmenu`
非推奨

その要素のコンテキストメニューとして使用する `<menu>` の **`id`** を指定します。

`data-*`

これらの属性はカスタムデータ属性と呼ばれており、 HTML とその DOM 表現との間で、固有の情報を交換できるようにします。すべてのカスタムデータは、その属性を設定した要素の `HTMLElement` インターフェイスを通して使用することができます。 `HTMLElement.dataset` プロパティでカスタムデータにアクセスできます。

`dir`

要素のテキストの書字方向を示す、列挙型属性です。以下の値を使用することができます。

* `ltr`: *left to right* を表し、左書きの言語 (日本語、英語など) に対して使用します。
* `rtl`: *right to left* を表し、右書きの言語 (アラビア語など) に対して使用します。
* `auto`: ユーザーエージェントに決定させます。要素の中の文字を、書字方向を強く決定する文字が見つかるまで解析し、その方向を要素全体に適用する基本的なアルゴリズムを使用します。

`draggable`

ドラッグ＆ドロップ API を使用して要素をドラッグすることができるかを示す列挙型属性です。以下の値を使用することができます。

* `true`: 要素がドラッグ可能であることを示す
* `false`: 要素がドラッグ不可であることを示す

`enterkeyhint`

仮想キーボードの Enter キーにどのようなアクションラベル（またはアイコン）を表示するかを指示します。

`exportparts`
Experimental

シャドウ部品を入れ子になったシャドウツリーから軽いツリーへ変換しながらエクスポートするために使用します。

`hidden`

列挙型の属性で、要素がまだ、あるいはもはや関連性がないことを示します。例えば、ログイン処理が完了するまで使えない要素を隠すために使用できます。ブラウザーはこの要素を表示しません。この属性は、表示することが正当なコンテンツを隠すために使用してはいけません。

`id`

文書全体で一意でなければならない識別子 (ID) を定義します。(フラグメント識別子を使った) リンク、スクリプト、 (CSS での) スタイルづけなど要素を特定するために使用されます。

`inert`

ブラウザーがその要素に対するユーザー入力イベントを無視するようにする論理値です。クリックイベントが存在している場合に有用です。

`inputmode`

この要素やその内容を編集する時に使用する仮想キーボードの種類の構成に関するヒントをブラウザーに与えます。主に `<input>` 要素で使用されますが、 `contenteditable` モードにあるすべての要素で使用することができます。

`is`

標準の HTML 要素が、登録したカスタム組み込み要素のようにふるまうように指定することができます（詳しくはカスタム要素の使用を参照）。

**メモ:** `item*` 属性は、 WHATWG HTML Microdata 仕様の一部です。

`itemid`

項目の一意でグローバルな識別子です。

`itemprop`

項目にプロパティを追加するために使用します。すべての HTML 要素で `itemprop` 属性を指定することができ、この `itemprop` は名前と値の組で構成されます。

`itemref`

`itemscope` 属性を持つ要素の子孫以外のプロパティは、 `itemref` を使用して項目に関連付けることができます。文書中の他の場所で追加のプロパティがある要素の id (`itemid` ではない) の一覧を提供します。

`itemscope`

`itemscope` は (通常) `itemtype` とともに、ブロックに含まれている HTML が特定の項目に関するものであることを指定します。 `itemscope` は項目を作成し、それに関連付けられる `itemtype` のスコープを定義します。 `itemtype` は、項目やそのプロパティの文脈を説明する語彙 (schema.org など) の有効な URL です。

`itemtype`

データ構造内の `itemprop` （項目のプロパティ）を定義するために使う、語彙の URL を指定します。 `itemscope` は、 `itemtype` で設定した語彙がデータ構造内でアクティブになるスコープを設定するために使用します。

`lang`

要素の言語を定義します。編集不可能な要素を記述している言語、または編集可能な要素に記述されるべき言語を定義します。この属性の値は、 RFC 5646: Tags for Identifying Languages (also known as BCP 47) で定義された形式の「言語タグ」（ハイフン区切りの「言語サブタグ」列）です。 **xml:lang** はこの要素より優先します。

`nonce`

暗号化ノンス ("number user once") で、コンテンツセキュリティポリシーが取得を許可するかどうかを決定するために使用することがあります。

`part`

要素のパート名の空白区切りによるリストです。パート名を利用すると、 CSS がシャドウツリー内にある特定の要素を `::part` 擬似要素を使用することで選択し、スタイル付けすることができます。

`role`

ロールはコンテンツの意味づけを定義し、スクリーンリーダーや他のツールが、その種類のオブジェクトに対するユーザーの期待に沿った方法でオブジェクトを表示し、対話を支援することを可能にします。ロールは `role="role_type"` を使って HTML 要素に追加します。ここで `role_type` は ARIA 仕様書でのロールの名前です。

`slot`

シャドウ DOM のシャドウツリー内のスロットを、要素に割り当てます。`slot` 属性を持つ要素は、`slot` 属性の値と一致する `name` 属性の値を持つ `<slot>` 要素が生成したスロットに割り当てられます。

`spellcheck`

列挙型属性で、要素でスペルチェックを行うかどうかを定義します。以下の値が利用できます。

* 空文字列または `true`: 可能であればその要素でスペルチェックを行うことを示す
* `false`: その要素でスペルチェックを行わないことを示す

`style`

要素に適用する CSS スタイル宣言を設定します。なお、スタイルは別のファイルで定義することが推奨されます。この属性と `<style>` 要素の主な用途は、例えばテストのために、すばやくスタイルを適用することです。

`tabindex`

要素が入力フォーカスを受け付ける (*focusable* の) 場合に、順番的なキーボードナビゲーションに参加するかどうか、参加するならばどの位置に入るかを示す、整数値属性です。いくつかの値を取ることができます。

* *負の数*: 要素はフォーカスを受け付けますが、順番的なキーボードナビゲーションでは到達できません。
* `0`: 要素はフォーカスを受け付けて、順番的なキーボードナビゲーションで到達できます。その順番はプラットフォームの慣習に従って定義されます。
* *正の数*: 要素はフォーカスを受け付けて、順番的なキーボードナビゲーションで到達できることを表します。その相対的な順序は属性の値で定義され、 **tabindex** の数値の昇順にフォーカスを移します。複数の要素が同じ tabindex の値を持っている場合は、文書内における要素の相対的な位置に従います。

`title`

要素に関するアドバイザリー情報を表すテキストを設定します。この情報は通常、ツールチップとしてユーザーに表示されますが、必ず表示されるとは限りません。

`translate`
Experimental

列挙型属性で、要素の属性値や子孫 `Text` ノードの値が、ページをローカライズするときに翻訳対象となるか、あるいは変更せずにおくかを指定します。以下の値を使用することができます。

* 空文字列または `yes`: 要素が翻訳対象になることを示します。
* `no`: 要素が翻訳対象にならないことを示します。

`virtualkeyboardpolicy`

列挙型属性で、`contenteditable` 属性を使用している要素について、タブレットや携帯電話など、ハードウェアキーボードが利用できない可能性のある機器上で画面の内側への仮想キーボード動作を制御するために使用されます。

* `auto` または空文字列: 要素がフォーカスまたはタップされたときに、自動的に仮想キーボードを示します。
* `manual`: 要素へのフォーカスやタップを仮想キーボードの状態から切り離します。

仕様書
---

| Specification |
| --- |
| HTML Standard # the-accesskey-attribute |
| HTML Standard # attr-autocapitalize |
| HTML Standard # attr-fe-autocomplete |
| HTML Standard # dom-fe-autofocus |
| HTML Standard # global-attributes:classes-2 |
| HTML Standard # attr-contenteditable |
| HTML Standard # attr-data-\* |
| HTML Standard # the-dir-attribute |
| HTML Standard # the-draggable-attribute |
| HTML Standard # attr-enterkeyhint |
| CSS Shadow Parts # element-attrdef-html-global-exportparts |
| HTML Standard # the-hidden-attribute |
| HTML Standard # global-attributes:the-id-attribute-2 |
| HTML Standard # the-inert-attribute |
| HTML Standard # attr-inputmode |
| HTML Standard # attr-is |
| HTML Standard # attr-itemid |
| HTML Standard # names:-the-itemprop-attribute |
| HTML Standard # attr-itemref |
| HTML Standard # attr-itemscope |
| HTML Standard # attr-itemtype |
| HTML Standard # attr-lang |
| HTML Standard # attr-nonce |
| CSS Shadow Parts # part-attr |
| HTML Standard # the-popover-attribute |
| HTML Standard # attr-popovertarget |
| HTML Standard # attr-popovertargetaction |
| HTML Standard # attr-slot |
| DOM Standard # ref-for-dom-element-slot① |
| HTML Standard # attr-spellcheck |
| HTML Standard # the-style-attribute |
| HTML Standard # attr-tabindex |
| HTML Standard # the-title-attribute |
| HTML Standard # attr-translate |
| VirtualKeyboard API # dom-elementcontenteditable-virtualkeyboardpolicy |

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

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

関連情報
----

* `Element` インターフェイスで、ほとんどのグローバル属性を調べることができます。


HTML で使われる日付や時刻の形式 - HTML: ハイパーテキストマークアップ言語

HTML で使われる日付や時刻の形式
==================

一部の HTML 要素は日付や時刻の値を使用します。この記事ではこれらの値を指定する文字列の形式について説明しています。

このような形式を使用する要素には、ユーザーに日付、時刻、またはその両方を選択または指定させる `<input>` 要素の一部の形、同様に `<ins>` および `<del>` 要素で、`datetime` 属性によって内容の挿入または削除が行われた日付や日時を指定しているものなどがあります。

`<input>` については、 `type` の値のうち日付や時刻を表す文字列を含む `value` を返すものは次の通りです。

* `date`
* `datetime-local`
* `month`
* `time`
* `week`
例
-

日付と時刻文字列が HTML でどのように記述され解析されるかの複雑さを理解する前に、より一般的に使用される日付と時刻文字列形式がどのように見えるかを理解するための例をいくつか示します。

HTML の日付と時刻文字列の例| 文字列 | 日付または時刻 |
| --- | --- |
| `2005-06-07` | 2005 年 6 月 7 日 | [詳細] |
| `08:45` | 午前 8 時 45 分 | [詳細] |
| `08:45:25` | 午前 8 時 45 分 25 秒 | [詳細] |
| `0033-08-04T03:40` | 33 年 8 月 4 日午前 3 時 40 分 | [詳細] |
| `1977-04-01T14:00:30` | 1977 年 4 月 1 日午後 2 時 30 秒 | [詳細] |
| `1901-01-01T00:00Z` | UTC での 1901 年 1 月 1 日の夜半 | [詳細] |
| `1901-01-01T00:00:01-04:00` | 米東部標準時の 1901 年 1 月 1 日の夜半から 1 秒後 | [詳細] |

基本
--

HTML 要素で使用される文字列に関する日付や時刻のさまざまな形式を見てみる前に、これらの定義方法についての基本的な事実をいくつか理解してしておくと有用です。HTML では、日付や時刻文字列に ISO 8601 標準の一種を使用します。HTML 仕様書には、実際に ISO 8601 よりも詳細に文字列を解析するアルゴリズムが含まれており、日付と時刻の外見について微妙な違いがある可能性があるので、文字列が実際に HTML と互換性があることを確認するためには、使用している形式の説明を確認する価値があります。

### 文字セット

HTML において、日付と時刻は常に ASCII 文字セットを使用した文字列です。

### 年

HTML で日付文字列に使われる基本的な形式を単純化するために、仕様書ではすべての年をグレゴリオ暦（または**先発グレゴリオ暦**）を使用して指定することを要求しています。ユーザーインターフェイスは他のカレンダーを使用した日付を入力することもできますが、元となる値は常にグレゴリオ暦を使用します。

グレゴリオ暦は（よく似たユリウス暦を置き換えた）1582 年まで作成されていませんでしたが、 HTML の目的上、グレゴリオ暦は紀元 1 年まで延長されています。古い日付については、それを考慮してください。

HTML の日付の目的上、年は常に 4 桁以上の長さになります。1000 年より前の年は、先頭にゼロ ("`0`") を入れますので、72 年は `0072` と書かれます。紀元 1 年以前の年には対応していないので、 HTML は紀元前 1 年以前の年に対応していません。

1 年はふつうは 365 日ですが、**うるう年** は例外です。

#### うるう年

**うるう年**は 400 で割れる年、または 4 で割れる年で 100 で割れない年です。暦年の長さは通常 365 日ですが、実際には地球が太陽の周りを一周するのにおよそ 365.2422 日かかります。うるう年は、惑星の軌道上の実際の位置に合わせてカレンダーを調整するのに役立ちます。4 年ごとに 1 日を加えると、平均的な 1 年の長さは 365.25 日になり、これはほぼ正確に近くなります。

アルゴリズムの調整（年を 400 で割ることができる場合はうるう年とし、年を 100 で割ることができる場合はうるう年としない）は、平均をさらに正しい日数（365.2425 日）に近づけるのに役立ちます。科学者たちは、残りの 1 万分の 3 日を処理し、地球の自転が自然に徐々に遅くなるのを補うために、閏秒をカレンダーに追加することがあります（真面目な話）。

`02` の月、すなわち 2 月は通常 28 日ですが、うるう年には 29 日になります。

### 月

1 年には 12 ヶ月があり、1 から 12 まで番号が振られています。これらは常に 2 桁の ASCII 文字列、 `01` から `12` の範囲で表現されます。日の節にある表で、対応する名前を（と日数）を確認してください。

### 日付

1, 3, 5, 7, 8, 10, 12 月は 31 日あります。 4, 6, 9, 11 月は 30 日あります。 2 月は多くの年では 28 日ですが、うるう年には 29 日になります。これは下記の表で詳しく説明しています。

月とその日数| 月番号 | 名前（英語） | 日数 |
| --- | --- | --- |
| 01 | January | 31 |
| 02 | February | 28（うるう年では 29） |
| 03 | March | 31 |
| 04 | April | 30 |
| 05 | May | 31 |
| 06 | June | 30 |
| 07 | July | 31 |
| 08 | August | 31 |
| 09 | September | 30 |
| 10 | October | 31 |
| 11 | November | 30 |
| 12 | December | 31 |

週文字列
----

週文字列は、特定の年の中の 1 週間を指定します。**有効な週文字列**は、有効な年、ハイフン文字 ("`-`", U+002D)、大文字の "`W`" (U+0057)、2 桁の週が続きます。

年の週は、`01` から `53` の間の 2 桁文字列です。各週は月曜日から始まり、日曜日に終わります。つまり、1 月の最初の数日間は直前の週と同じとみなし、12 月の最後の数日間を直後の週と同じとみなすことが可能です。年の最初の週は、*その年の最初の木曜日* がある週です。例えば、1953 年の最初の木曜日は 1 月 1 日だったので、12 月 29 日（月）から始まる週がその年の最初の週とみなされます。したがって、1952 年 12 月 30 日は `1953-W01` の週となります。

以下の場合、1 年は 53 週となります。

* 暦年の最初の日（1 月 1 日）が木曜日であること、**または**
* 1 年の最初の日（1 月 1 日）が水曜日で、その年がうるう年であること。

他の年はすべて 52 週です。

| 週文字列 | 年と週（日付の範囲） |
| --- | --- |
| `2001-W37` | 2001 年第 37 週（2001 年 9 月 10～16 日） |
| `1953-W01` | 1953 年第 1 週（1952 年 12 月 29 日～1953 年 1 月 4 日） |
| `1948-W53` | 1948 年第 53 週（1948 年 12 月 27 日～1948 年 1 月 2 日） |
| `1949-W01` | 1949 年第 1 週（1949 年 1 月 3～9 日） |
| `0531-W16` | 531 年第 16 週（531 年 4 月 13～19 日） |
| `0042-W04` | 42 年第 4 週（42 年 1 月 21～27 日） |

なお、年と週番号の両方に先頭のゼロを入れ、年は 4 桁、週は 2 桁になるようにパディングされます。

月文字列
----

月文字列は、その年の一般的な月ではなく、時刻の中の特定の月を表します。つまり、HTML の月文字列は、「1 月」を表すのではなく、「1972 年 1 月」のように年と月が対になっているものを表します。

**有効な月文字列**は、有効な年（4 桁以上の文字列）にハイフン ("`-`", U+002D) が続き、2 桁の数字の月からなり、`01` は 1 月を、`12` は 12 月を表します。

| 月文字列 | 年月 |
| --- | --- |
| `17310-09` | 17310 年 9 月 |
| `2019-01` | 2019 年 1 月 |
| `1993-11` | 1993 年 11 月 |
| `0571-04` | 571 年 4 月 |
| `0001-07` | 紀元 1 年 7 月 |

年はすべて 4 文字以上であることに注意してください。4 桁未満の年は、先頭がゼロでパディングされます。

日付文字列
-----

有効な日付文字列は、月文字列、ハイフン文字 ("`-`", U+002D)、2 桁の日付が続きます。

| 月文字列 | 日付全体 |
| --- | --- |
| `1993-11-01` | 1993 年 11 月 1 日 |
| `1066-10-14` | 1066 年 10 月 14 日 |
| `0571-04-22` | 571 年 4 月 22 日 |
| `0062-02-05` | 62 年 2 月 5 日 |

時刻文字列
-----

時刻文字列は、分、秒、ミリ秒のいずれかの精度で時刻を指定することができます。時や分だけを指定することはできません。**有効な時刻文字列**は、最小で 2 桁の「時」にコロン ("`:`", U+003A) が続き、次に 2 桁の「分」で構成されています。分の値には、オプションで、さらにコロンと 2 桁の秒数が続くことがあります。ミリ秒は、オプションで、小数点文字 ("`.`", U+002E) の後に 1 桁、2 桁、3 桁を続けて指定することができます。

さらに基本的なルールがいくつかあります。

* 時は常に 24 時間制を使用して指定し、`00` が午前 0 時、午後 11 時が `23` となります。`00` ～ `23` の範囲外の値は許可されません。
* 分は `00` から `59` の間の 2 桁の数字でなければなりません。その範囲外の値は許可されません。
* 秒を省略した場合（分単位で正確な時刻を指定する場合）、分の値の後にコロンをつけてはいけません。
* 指定する場合、秒数の整数部分は `00` から `59` の間でなければなりません。`60` や `61` のような値を用いてうるう秒を指定することはできません。
* 秒を指定し、それが整数である場合、その後に小数点以下を続けてはいけません。
* 2 秒の小数部を記述する場合は、1 桁から 3 桁の長さで、ミリ秒の数を示すことができます。時刻文字列の秒成分の後に小数点に続いて指定します。

| 時刻文字列 | 時刻 |
| --- | --- |
| `00:00:30.75` | 午前 12:00:30.75（真夜中から 30.75 ） |
| `12:15` | 午後 12:15 |
| `13:44:25` | 午後 1:44:25（午後 1:44 から 25 秒後） |

ローカル日時文字列
---------

有効な `datetime-local` 文字列は、`date` 文字列と `time` 文字列を文字 "`T`" または空白文字で区切って結合したものです。 文字列にはタイムゾーンの情報は含まれず、日付と時刻はユーザーのローカルタイムゾーンにあると推定されます。

`datetime-local` 入力欄の `value` を設定すると、文字列が**正規化**されます。正規化された `datetime` 文字列は常に文字 "`T`" を使用して日付と時刻を区切り、時刻の部分はできるだけ短くなるようにします。これは、秒成分の値が`:00`の場合、秒成分を省くことで実現されます。

 有効な
 `datetime-local`
 文字列の例
 | 日時文字列 | 正規化された日時文字列 | 実際の日付と時刻 |
| --- | --- | --- |
| `1986-01-28T11:38:00.01` | `1986-01-28T11:38:00.01` | 1986 年 1 月 20 日午前 11 時 30 分 0.01 秒 |
| `1986-01-28 11:38:00.010` | `1986-01-28T11:38:00.01`
正規化後は、一つ前の `datetime-local` と同じ文字列となることに注意してください。空白文字は "`T`" に置き換えられ、秒の小数部の末尾の 0 を削除して、文字列ができるだけ短くなるようになります。 | 1986 年 1 月 20 日午前 11 時 30 分 0.01 秒 |
| `0170-07-31T22:00:00` | `0170-07-31T22:00`
この日付の正規化形式では、秒が 0 であることを示す "`:00`" がないことに注意してください。秒はゼロの場合に省略可能で、正規化された文字列は長さが最小になるからです。 | 170 年 7 月 31 日午後 10 時ちょうど |

グローバル日時文字列
----------

グローバル日時文字列は、日付と時刻、およびその時刻が発生するタイムゾーンを指定するものです。**有効なグローバル日時文字列**は、末尾に時刻に続いてタイムゾーン文字列が続くことを除けば、ローカル日時文字列と同じ形式です。

### タイムゾーンオフセット文字列

タイムゾーンオフセット文字列は、標準時からのオフセットを正の値または負の値で指定します。標準時のベースは 2 つあり、とても似通っているのですが、全く同じではありません。

* 1960 年代初頭に協定世界時 (UTC) が制定された以降の日付については、タイムベースは `Z`、オフセットは経度 0° の本初子午線（イギリス、グリニッジの王立天文台を通過）の時刻からの具体的なタイムゾーンへのオフセットを示します。
* UTC 以前の日付の場合、タイムベースは代わりに UT1 で表現されていました。これは、同じ本初子午線における現代の地球の太陽時です。

タイムゾーン文字列は、日時文字列の時刻の直後に付加されます。タイムゾーンオフセット文字列として "`Z`" を指定すると、時刻を UTC で指定することを示すことができます。それ以外の場合、タイムゾーン文字列は以下のように構成されます。

1. オフセットの符号を示す文字: 本初子午線より東側の時間帯はプラス文字 ("`+`"、または U+002B)、本初子午線より西側の時間帯はマイナス文字 ("`-`"、または U+002D) です。
2. その時刻が本初子午線から何時間ずれているかを示す 2 桁の数字。
3. オプションのコロン ("`:`") 文字。
4. 2 桁の時から経過した分の値。この値は `00` から `59` の間である必要があります。

この形式では -23:59 から +23:59 までのタイムゾーンを許容していますが、現在のタイムゾーンのオフセットの範囲は -12:00 から +14:00 であり、現在、正時から `00`、`30`、`45` 以外のオフセットを持つタイムゾーンはありません。これは、国がいつでも自由にタイムゾーンを変更することができるため、いくつか変更される可能性があります。

有効なグローバル日時文字列の例| グローバル日時文字列 | 実際のグローバル日時 | 本初子午線上の日時 |
| --- | --- | --- |
| `2005-06-07T00:00Z` | 2005 年 7 月 7 日真夜中 (UTC) | 2005 年 7 月 7 日真夜中 |
| `1789-08-22T12:30:00.1-04:00` | 1789 年 8 月 22 日午後 12 時 30 分から 0.1 秒後（東部夏時間） | 1789 年 8 月 22 日午後 4 時 30 分から 0.1 秒後 |
| `3755-01-01 00:00+10:00` | 3755 年 1 月 1 日真夜中（オーストラリア東部標準時） | 3754 年 12 月 31 日午後 2:00 |

関連情報
----

* `<input>`
* `<ins>` および `<del>`: datetime`属性を参照してください。この属性は、コンテンツが挿入または削除された日付またはローカル日時を指定します。
* The ISO 8601 specification
* 数値と日付 (JavaScript ガイド)
* JavaScript の `Date` オブジェクト
* `Intl.DateTimeFormat` オブジェクト（指定されたロケールで日時を書式化）


制約検証 - HTML: ハイパーテキストマークアップ言語

制約検証
====

ウェブフォームの作成は常に複雑な作業でした。フォーム自体をマークアップすること自体は簡単ですが、それぞれの入力欄が妥当で一貫しているかどうかをチェックすることはもっと難しく、問題をユーザーに伝えることは頭痛がするかもしれません。HTML5 では、フォームに新しい仕組みが導入されました。 `<input>` 要素に意味を持つ新しい型と、クライアント側でフォームの内容をチェックする作業を簡単にする*制約検証*が追加されました。基本的な、よくある制約は、JavaScript を必要とせずに、新しい属性を設定することでチェックできます。もっと複雑な制約は制約検証 API を使用して検査することができます。

これらの概念の基本的な入門 (サンプル付き) は、フォーム検証チュートリアルをご覧ください。

**メモ:** HTML5 の制約検証は、*サーバー側*での検証の必要性をなくす訳ではありません。不正なフォームのリクエストは減少すると思われますが、不正なリクエストはまだ互換性のないブラウザー（例えば、HTML5 や JavaScript に対応していないブラウザー）から送られたり、ウェブアプリケーションをだまそうとする悪意のある人から送られたりする可能性があります。従って、HTML4 の時と同様、クライアント側で行われている検証と一貫性のある方法で、サーバー側でも入力の制約を検証する必要があります。

組み込みの基本的な制約
-----------

HTML5 では、基本的な制約は 2 通りの方法で定義されます。

* `<input>` 要素の `type` 属性に意味的に最も適切な値を選択する。例えば `email` を選択することで、値が妥当なメールアドレスであるかどうかをチェックする制約が自動的に作成されます。
* 検証関連属性を設定することで、基本的な制約を簡単な方法で、JavaScript の必要なく記述できます。
### 意味を持つ入力型

`type` 属性の組込み制約は次の通りです。

| 入力型 | 制約の説明 | 関連付けられた違反 |
| --- | --- | --- |
| `<input type="URL">` | 値は絶対 URL であり、 URL Living Standard で定義された通りでなければなりません。 | **TypeMismatch** 制約違反 |
| `<input type="email">` | 値は統語的に妥当なメールアドレスで、ふつうは `username@hostname.tld` の書式でなければなりません。 | **TypeMismatch** 制約違反 |

これらの入力型のどちらでも、`multiple` 属性が設定されていたら、この入力欄にカンマ区切りのリストで複数の値を設定することができます。これらの中でここで書かれた条件に満足しないものがある場合、 **Type mismatch** 制約違反が発生します。

なお、ほとんどの入力型には内部的な制約がありません。制約検証が禁止されているものや、不正な値を正しい既定値に変換する無害化アルゴリズムがあるものがあるためです。

### 検証関連属性

上記で述べた `type` 属性に加えて、下記の要素が基本的な制約を記述するのに使われます。

| 属性 | 属性をサポートする入力型 | とりうる値 | 制約の説明 | 関連する違反 |
| --- | --- | --- | --- | --- |
| `pattern` | `text`, `search`, `url`,
 `tel`, `email`, `password` | JavaScript 正規表現
 （ECMAScript 5 で `global`, `ignoreCase`, `multiline` フラグが*無効*でコンパイルされたもの）
  | 値がパターンに一致する必要がある。 | **`patternMismatch`**
 制約違反
  |
| `min` | `range`, `number` | 有効な数値 | 値がその値以上であること。 | **`rangeUnderflow`**
 制約違反
  |
| `date`, `month`, `week` | 有効な日付 |
| `datetime`, `datetime-local`, `time` | 有効な日付と時刻 |
| `max` | `range`, `number` | 有効な数値 | 値がその値以下であること。 | **`rangeOverflow`**
 制約違反
  |
| `date`, `month`, `week` | 有効な日付 |
| `datetime`, `datetime-local`, `time` | 有効な日付と時刻 |
| `required` | `text`, `search`, `url`,
 `tel`, `email`, `password`,
 `date`, `datetime`, `datetime-local`,
 `month`, `week`, `time`,
 `number`, `checkbox`, `radio`,
 `file` および `<select>` と `<textarea>` 要素にも
  | *なし*。論理属性のため、存在すれば *true*、存在しなければ *false* を意味する。 | 値は必須 (設定された場合)。 | **`valueMissing`**
 制約違反
  |
| `step` | `date` | 日の整数値 | step がリテラル値 `any` 以外に設定されていた場合、値は **min** + step の整数倍である必要がある。 | **`stepMismatch`**
 制約違反
  |
| `month` | 月の整数値 |
| `week` | 週の整数値 |
| `datetime`, `datetime-local`, `time` | 秒の整数値 |
| `range`, `number` | 整数値 |
| `minlength` | `text`, `search`, `url`,
 `tel`, `email`, `password` と
 `<textarea>` 要素
  | 整数長 | 空でない場合、文字数 (コードポイント数) は属性値より少なくなってはならない。 `<textarea>` では、改行はすべて (CRLF の組ではなく) 1 文字に正規化される。 | **`tooShort`**
 制約違反
  |
| `maxlength` | `text`, `search`, `url`,
 `tel`, `email`, `password` と
 `<textarea>` 要素
  | 整数長 | 文字数 (コードポイント数) が属性値を超えてはいけない。 | **`tooLong`**
 制約違反
  |

制約検証プロセス
--------

制約検証は、制約検証 API を通じて、単一のフォーム要素、またはフォームレベルの `<form>` 要素自体に対して行われます。制約検証は以下の方法で行われます。

* `checkValidity()` または `reportValidity()` メソッドをフォーム関連 DOM インターフェイス (`HTMLInputElement`, `HTMLSelectElement`, `HTMLButtonElement`, `HTMLOutputElement`, `HTMLTextAreaElement`) に対して呼び出すことによって、この要素のみの制約を評価し、スクリプトがこの情報を取得できるようにします。 `checkValidity()` メソッドは、この要素の値が制約に合格するかどうかを論理値で返します。（これはふつう、 CSS 擬似クラスの `:valid` または `:invalid` のどちらを適用するかを判断する際に、ブラウザーが呼び出します。）一方、 `reportValidity()` メソッドはあらゆる制約違反をユーザーに報告します。
* `checkValidity()` または `reportValidity()` メソッドを `HTMLFormElement` インターフェイスに対して呼び出すことによって。
* フォーム自身を送信することによって。

`checkValidity()` を呼び出すことは、制約を*静的*に検証するといい、`reportValidity()` を呼び出したり、フォームを送信したりすることは、制約を*対話的*に検証するといいます。

**メモ:**

* `novalidate` 属性が `<form>` 要素に設定されている場合、制約の*対話的*な検証は行われません。
* `submit()` メソッドを `HTMLFormElement` インターフェイスで呼び出しても、制約検証は行われません。言い換えれば、このメソッドは制約を満たさなくてもフォームデータをサーバーに送信します。代わりに送信ボタンの `click()` メソッドを呼び出してください。

制約検証 API を使用した複雑な制約
-------------------

JavaScript と制約 API を使用すると、より複雑な制約を実装することができます。例えば、複数のフィールドを組み合わせた制約や、複雑な計算を含む制約などです。

基本的には、制約に違反しているかどうかを計算するために、何らかのフォームフィールドイベント (**onchange**など) で JavaScript を起動し、検証の結果を設定するためにメソッド `field.setCustomValidity()` を使用することです。空文字列は制約が満たされていることを意味し、その他の文字列はエラーがあったことを意味し、この文字列がユーザーに表示するエラーメッセージになります。

### 複数のフィールドを組み合わせた制約：郵便番号の検証

郵便番号の形式は、国によって異なります。ほとんどの国では、国コードの前に任意の接頭辞を付けることができるだけでなく（ドイツでは `D-`、フランスやスイスでは `F-` のように）、固定の桁数しかない郵便番号を持つ国もありますし、イギリスのように、特定の位置にアルファベットを入れることができる、より複雑な構造を持つ国もあります。

**メモ:** これは包括的な郵便番号検証ライブラリーではなく、主要概念のデモンストレーションです。

例として、この単純なフォームの制約検証をチェックするスクリプトを追加します。

```html
<form>
  <label for="ZIP">郵便番号 : </label>
  <input type="text" id="ZIP" />
  <label for="Country">国 : </label>
  <select id="Country">
    <option value="ch">スイス</option>
    <option value="fr">フランス</option>
    <option value="de">ドイツ</option>
    <option value="nl">オランダ</option>
  </select>
  <input type="submit" value="検証" />
</form>
```

これは以下のように表示されます。

まず、自分自身の制約をチェックする関数を書きます。

```js
function checkZIP() {
  // それぞれの国で、郵便番号が従うべきパターンを定義する
  var constraints = {
    ch: [
      "^(CH-)?\\d{4}$",
      "スイスの郵便番号は明確な 4 桁である必要があります。例: CH-1950 または 1950",
    ],
    fr: [
      "^(F-)?\\d{5}$",
      "フランスの郵便番号は明確な 5 桁です。例: F-75012 または 75012",
    ],
    de: [
      "^(D-)?\\d{5}$",
      "ドイツの郵便番号は明確な 5 桁です。例: D-12345 または 12345",
    ],
    nl: [
      "^(NL-)?\\d{4}\\s\*([A-RT-Z][A-Z]|S[BCE-RT-Z])$",
      "オランダの郵便番号は明確な 4 桁に、SA、SD、SS 以外の2文字が続きます。",
    ],
  };

  // 国 ID を読む
  var country = document.getElementById("Country").value;

  // NPA フィールドを取得
  var ZIPField = document.getElementById("ZIP");

  // 制約チェッカーを構築
  var constraint = new RegExp(constraints[country][0], "");
  console.log(constraint);

  // チェックする
  if (constraint.test(ZIPField.value)) {
    // 郵便番号は制約に従っていることを ConstraintAPI を使って伝える
    ZIPField.setCustomValidity("");
  } else {
    // 郵便番号が制約に従っていないことを伝えるために、 ConstraintAPI を使用して
    // この国で必要な書式についてのメッセージを伝える
    ZIPField.setCustomValidity(constraints[country][1]);
  }
}
```

それから、これを `<select>` の **onchange** イベントと `<input>` の **oninput** イベントにリンクします。

```js
window.onload = function () {
  document.getElementById("Country").onchange = checkZIP;
  document.getElementById("ZIP").oninput = checkZIP;
};
```

郵便番号の検証のライブサンプルもあります。

### アップロード前にファイルの大きさを制限

もう一つの一般的な制約は、アップロードされるファイルのサイズを制限することです。ファイルがサーバーに送信される前に、クライアント側でこれをチェックするには、制約検証 API、特に `field.setCustomValidity()` メソッドを、別の JavaScript API、ここでは File API と組み合わせる必要があります。

こちらが HTML 部分です。

```html
<label for="FS">75KB よりも小さいファイルを選択してください。 </label>
<input type="file" id="FS" />
```

次のように表示されます。

JavaScript は選択されたファイルを読み込み、 `File.size()` メソッドを使ってそのサイズを取得し、それを（ハードコードされた）制限値と比較し、違反があった場合は Constraint API を呼び出してブラウザーに通知します。

```js
function checkFileSize() {
  var FS = document.getElementById("FS");
  var files = FS.files;

  // If there is (at least) one file selected
  if (files.length > 0) {
    if (files[0].size > 75 \* 1024) {
      // 制約をチェック
      FS.setCustomValidity(
        "選択されたファイルは 75 kB より大きくてはいけません。",
      );
      return;
    }
  }
  // No custom constraint violation
  FS.setCustomValidity("");
}
```

最後に、このメソッドを正しいイベントにフックします。

```js
window.onload = function () {
  document.getElementById("FS").onchange = checkFileSize;
};
```

ファイルサイズの制約検証のライブサンプルを見ることができます。

制約検証の視覚的スタイル
------------

制約条件を設定するだけでなく、ウェブ開発者は、ユーザーにどのようなメッセージを表示するか、どのようなスタイルにするかを制御したいと考えています。

### 要素の外見の制御

CSS の擬似クラスで、要素の外見を制御することができます。

#### :required および :optional 擬似クラス

`:required` と `:optional` 擬似クラスで、`required` 属性がある、またはないフォーム要素に一致するセレクターを書くことができます。

#### :placeholder-shown 擬似クラス

`:placeholder-shown` を参照してください。

#### :valid :invalid 擬似クラス

`:valid` と `:invalid` 擬似クラスは、 <input> 要素の内容がその型の設定に応じて、それぞれ検証されたか、検証に失敗したかを表すために使用します。これらのクラスは、有効または無効なフォーム要素にスタイルを与えることで書式が正しい要素と正しくない要素の識別をしやすくします。

### 制約違反のテキストの制御

制約違反のテキストを制御するには、以下の項目が有用です。

* 以下の要素の element.setCustomValidity(message) メソッド
    + `<fieldset>` メモ: fieldset 要素にカスタム検証メッセージを設定しても、多くのブラウザーでは送信が抑止できません。
    + `<input>`
    + `<output>`
    + `<select>`
    + 送信ボタン（`<button>` 要素の `submit` 型、または `input` 要素の submit 型。それ以外のボタンは制約検証の対象にはなりません。
    + `<textarea>`
* `ValidityState` インターフェイスは、上記の要素型の validity プロパティによって返されるオブジェクトを説明します。入力された値が無効になる可能性がある様々な方法を表しています。これらを合わせると、要素の値が有効でない場合に、なぜ検証に失敗するのかを説明することができます。


マイクロフォーマット - HTML: ハイパーテキストマークアップ言語

マイクロフォーマット
==========

概要
--

*マイクロフォーマット* (Microformat) (**μF** と略記されることもあります) は、意味情報と構造化データを HTML に埋め込むために使用される規格で、検索エンジンやアグリゲーター、その他のツールが使用するための API を提供します。HTML のこれらの最小限のパターンは、人、組織、イベント、場所などの基本的な情報からドメイン固有の情報まで、さまざまなものをマークアップするために使用されます。マイクロフォーマットは、オブジェクトを記述するためにサポートする語彙を使用し、そのプロパティに値を割り当てるために名前と値のペアを使用します。プロパティはクラス属性で運ばれ、任意の HTML 要素に追加することができ、データ値は HTML 要素のコンテンツとセマンティック属性を再利用します。マイクロフォーマット 2 はマイクロフォーマットの更新版で、HTML の構造化された構文や語彙に注釈を付けるために新しい属性を学習する必要がある RDFa やマイクロデータを使用する以前のアプローチよりもシンプルな方法を提供します。

マイクロフォーマットは、すべての主要な検索エンジンが対応しています。検索エンジンは、この構造化データに直接アクセスすることで、ウェブページ上の情報を理解し、より関連性の高い結果をユーザーに提供することができるため、大きな利益を得ることができます。マイクロフォーマットは機械可読性があることにくわえ、人間も簡単に読めるように設計されています。

* マイクロフォーマットのオブジェクトを生成するには、class 属性に h-\* というクラス名を付けてください。
* オブジェクトへプロパティを追加するには、p-\*, u-\*, dt-\*, e-\* のクラス名がオブジェクトの子孫の一つに使用されます。

マイクロフォーマット 2 にはオープンソースの主要言語における解釈ライブラリがあります。

マイクロフォーマットはどのように動作するのか
----------------------

An author of a webpage can add microformats to their HTML. For example if they wanted to identify themselves they could use an h-card such as:

### HTML の例

```html
<a class="h-card" href="https://alice.example.com">Alice Blogger</a>
```

When a parser encounters this data, it will know that this page contains a "card" which describes a person or organization named `Alice Blogger` with a URL of `http://alice.example.com/`. The parser makes this data available via APIs that can be used for different applications.

As in this example, some markup patterns require only a single microformat root class name, which parsers use to find a few generic properties such as `name`, `url`, `photo`.

マイクロフォーマットの接頭辞
--------------

All microformats consist of a root, and a collection of properties. Properties are all optional and potentially multivalued - applications needing a singular value may use the first instance of a property. Hierarchical data is represented with nested microformats, typically as property values themselves.

All microformats class names use prefixes. Prefixes are **syntax independent from vocabularies**, which are developed separately.

* **"h-\*" for root class names**, e.g. "h-card", "h-entry", "h-feed", and many more. These top-level root classes usually indicate a type and corresponding expected vocabulary of properties. For example:
    + h-card describes a person or organization
    + h-entry describes episodic or date stamped online content like a blog post
    + h-feed describes a stream or feed of posts
    + You can find many more vocabularies on the microformats2 wiki.
* **"p-\*" for plain (text) properties**, e.g. "p-name", "p-summary"
    + Generic plain text parsing, element text in general. On certain HTML elements, use special attributes first, e.g. img/alt, abbr/title.
* **"u-\*" for URL properties**, e.g. "u-url", "u-photo", "u-logo"
    + Special parsing: element attributes a/href, img/src, object/data etc. attributes over element contents.
* **"dt-\*" for datetime properties**, e.g. "dt-start", "dt-end", "dt-bday"
    + Special parsing: time element datetime attribute, value-class-pattern and separate date time value parsing for readability.
* **"e-\*" for element tree properties** where the entire contained element hierarchy is the value, e.g. "e-content". The "e-" prefix can also be mnemonically remembered as "element tree", "embedded markup", or "encapsulated markup".
マイクロフォーマットの例
------------

### h-card

The h-card microformat represents a a person or organization.

The value of each property is defined in HTML using the class property any element can carry

#### h-card の例

```html
<p class="h-card">
  <img class="u-photo" src="https://example.org/photo.png" alt="" />
  <a class="p-name u-url" href="https://example.org">Joe Bloggs</a>
  <a class="u-email" href="mailto:joebloggs@example.com"
 >joebloggs@example.com</a
 >,
  <span class="p-street-address">17 Austerstræti</span>
  <span class="p-locality">Reykjavík</span>
  <span class="p-country-name">Iceland</span>
</p>
```

| プロパティ | 説明 |
| --- | --- |
| **`p-name`** | The full/formatted name of the person or organization. |
| **`u-email`** | email address |
| **`u-photo`** | a photo of the person or organization |
| **`u-url`** | home page or other URL representing the person or organization |
| **`u-uid`** | universally unique identifier, preferably canonical URL |
| **`p-street-address`** | street number + name |
| **`p-locality`** | city/town/village |
| **`p-country-name`** | country name |

#### 入れ子になった h-card の例

```html
<div class="h-card">
  <a class="p-name u-url" href="https://blog.lizardwrangler.com/"
 >Mitchell Baker</a
 >
  (<a class="p-org h-card" href="https://mozilla.org/">Mozilla Foundation</a>)
</div>
```

Parsed JSON:

```json
{
  "items": [
    {
      "type": ["h-card"],
      "properties": {
        "name": ["Mitchell Baker"],
        "url": ["https://blog.lizardwrangler.com/"],
        "org": [
          {
            "value": "Mozilla Foundation",
            "type": ["h-card"],
            "properties": {
              "name": ["Mozilla Foundation"],
              "url": ["https://mozilla.org/"]
            }
          }
        ]
      }
    }
  ]
}
```

Note: the nested h-card has implied 'name' and 'url' properties, just like any other root-class-name-only h-card on an `<a href>` would.

### h-entry

The h-entry microformat represents episodic or datestamped content on the web. h-entry is often used with content intended to be syndicated, e.g. blog posts.

Example h-entry as a blog post:

```html
<article class="h-entry">
  <h1 class="p-name">Microformats are amazing</h1>
  <p>
    Published by
    <a class="p-author h-card" href="https://example.com">W. Developer</a> on
    <time class="dt-published" datetime="2013-06-13 12:00:00"
 >13<sup>th</sup> June 2013</time
 >
  </p>

  <p class="p-summary">In which I extoll the virtues of using microformats.</p>

  <div class="e-content">
    <p>Blah blah blah</p>
  </div>
</article>
```

#### プロパティ

| プロパティ | 説明 |
| --- | --- |
| **`p-name`** | entry name/title |
| **`p-author`** | who wrote the entry, optionally embedded h-card |
| **`dt-published`** | when the entry was published |
| **`p-summary`** | short entry summary |
| **`e-content`** | full content of the entry |

#### Parsed reply h-entry example

```html
<div class="h-entry">
  <p>
    <span class="p-author h-card">
      <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106"
 ><img
 class="u-photo"
 src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg"
 /></a>
      <a
 class="p-name u-url"
 href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106"
 >Greg McVerry</a
 ></span
 >
    Replied to
    <a
 class="u-in-reply-to"
 href="https://developer.mozilla.org/ja/docs/Web/HTML/microformats"
 >a post on <strong>developer.mozilla.org</strong> </a
 >:
  </p>
  <p class="p-name e-content">
    Hey thanks for making this microformats resource
  </p>
  <p>
    <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106"
 >Greg McVerry</a
 >
    published this
    <a
 class="u-url url"
 href="https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource"
 ><time class="dt-published" datetime="2019-05-31T14:19:09+0000"
 >31 May 2019</time
 ></a
 >
  </p>
</div>
```

```json
{
  "items": [
    {
      "type": [ "h-entry" ],
      "properties": {
        "in-reply-to": [ "https://developer.mozilla.org/ja/docs/Web/HTML/microformats" ],
        "name": [ "Hey thanks for making this microformats resource" ],
        "url": [ "https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource" ],
        "published": [ "2019-05-31T14:19:09+0000" ],
        "content": [
          {
            "html": "Hey thanks for making this microformats resource",
            "value": "Hey thanks for making this microformats resource",
            "lang": "en"
          }
        ],
        "author": [
          {
            "type": [ "h-card" ],
            "properties": {
              "name": [ "Greg McVerry" ],
              "photo": [ "https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg" ],
              "url": [ "https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ]
            },
            "lang": "en",
            "value": "Greg McVerry"
          }
        ]
      },
      "lang": "en"
    }
```

### h-feed

The h-feed is a stream or feed of h-entry posts, like complete posts on a home page or archive pages, or summaries or other brief lists of posts

#### Example h-feed

```html
<div class="h-feed">
  <h1 class="p-name">Microformats Blogs</h1>
  <article class="h-entry">
    <h2 class="p-name">Microformats are amazing</h2>
    <p>
      Published by
      <a class="p-author h-card" href="https://example.com">W. Developer</a> on
      <time class="dt-published" datetime="2013-06-13 12:00:00"
 >13<sup>th</sup> June 2013</time
 >
    </p>
    <p class="p-summary">
      In which I extoll the virtues of using microformats.
    </p>
    <div class="e-content"><p>Blah blah blah</p></div>
  </article>
</div>
```

#### プロパティ

| プロパティ | 説明 |
| --- | --- |
| **`p-name`** | name of the feed |
| **`p-author`** | author of the feed, optionally embed an h-card |

#### Children

| **Nested h-entry** |  |
| --- | --- |
| objects representing the items of the feed |  |

### h-event

The `h-event` is for events on the web. h-event is often used with both event listings and individual event pages

```html
<div class="h-event">
  <h1 class="p-name">Microformats Meetup</h1>
  <p>
    From
    <time class="dt-start" datetime="2013-06-30 12:00"
 >30<sup>th</sup> June 2013, 12:00</time
 >
    to <time class="dt-end" datetime="2013-06-30 18:00">18:00</time> at
    <span class="p-location">Some bar in SF</span>
  </p>
  <p class="p-summary">
    Get together and discuss all things microformats-related.
  </p>
</div>
```

#### プロパティ

| プロパティ | 説明 |
| --- | --- |
| **`p-name`** | event name (or title) |
| **`p-summary`** | short summary of the event |
| **`dt-start`** | datetime the event starts |
| **`dt-end`** | datetime the event ends |
| **`p-location`** | where the event takes place, optionally embedded h-card |

#### Parsed h-event Example

```html
<div class="h-event">
  <h2 class="p-name">IndieWeb Summit</h2>
  <time class="dt-start" datetime="2019-06-29T09:00:00-07:00"
 >June 29, 2019 at 9:00am (-0700)</time
 ><br />through
  <time class="dt-end" datetime="2019-06-30T18:00:00-07:00"
 >June 30, 2019 at 6:00pm (-0700)</time
 ><br />
  <div class="p-location h-card">
    <div>
      <span class="p-name">Mozilla</span>
    </div>
    <div>
      <span class="p-street-address">1120 NW Couch St</span>,
      <span class="p-locality">Portland</span>,
      <span class="p-region">Oregon</span>,
      <span class="p-country">US</span>
    </div>
    <data class="p-latitude" value="45.52345"></data>
    <data class="p-longitude" value="-122.682677"></data>
  </div>
  <div class="e-content">Come join us</div>
  <div>
    <span class="p-author h-card"
 ><a class="u-url p-name" href="https://aaronparecki.com"
 >Aaron Parecki</a
 ></span
 >
    Published this
    <a href="https://aaronparecki.com/2019/06/29/1/" class="u-url">event </a>on
    <time class="dt published" datetime="2019-05-25T18:00:00-07:00"
 >May 5th, 2019</time
 >
  </div>
</div>
```

```json
{
  "items": [
    {
      "type": [ "h-event" ],
      "properties": {
        "name": [ "IndieWeb Summit" ],
        "url": [ "https://aaronparecki.com/2019/06/29/1/" ],
        "author": [
          {
            "type": [ "h-card" ],
            "properties": {
              "name": [ "Aaron Parecki" ],
              "url": [ "https://aaronparecki.com"]
            },
            "lang": "en",
            "value": "Aaron Parecki"
          }
        ],
        "start": [ "2019-06-29T09:00:00-07:00" ],
        "end": [ "2019-06-30T18:00:00-07:00" ],
        "published": [ "2019-05-25T18:00:00-07:00" ],
        "content": [
          {
            "html": "Come join us",
            "value": "Come join us",
            "lang": "en"
          }
        ],
        "location": [
          {
            "type": [ "h-card" ],
            "properties": {
              "name": [ "Mozilla" ],
              "p-street-address": [ "1120 NW Couch St" ]
              "locality": [ "Portland" ],
              "region": [ "Oregon" ],
              "country": [ "US" ],
              "latitude": [ "45.52345" ],
              "longitude": [ "-122.682677" ]
            },
            "lang": "en",
            "value": "Mozilla"
          }
        ]
      },
      "lang": "en"
    }
  ],
```

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

すべてのブラウザーが class 属性と DOM API に対応していることにより対応しています。

関連情報
----

* class 属性
* Wikipedia の Microformat
* Microformats 公式ウェブサイト
* Search engines support on Microformats official website
* Microformats on IndieWebCamp