<input type="week"> - HTML: ハイパーテキストマークアップ言語

<input type="week">
===================

`<input>` 要素の **`week`** 型は、年と、その年の ISO 8601 週番号 (つまり、第 1 週から第 52 または 53 週) を簡単に入力することができる入力欄を生成します。

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

コントロールのユーザーインターフェイスは、ブラウザーによって様々です。現時点ではブラウザー間の対応は限定的で、 Chrome/Opera と Microsoft Edge のみが対応しています。対応していないブラウザーでは、このコントロールは単純な `<input type="text">` に格下げされます。

![「2017年第01週」と書かれた入力欄。 2017 の背景は、フォーカスリングと同じ青色です。入力欄には、×やクリア、上下の小さな矢印がついたスピナー、大きな下矢印の 3 つのアイコンがあります。 2017 年 1 月に設定された入力の下には、カレンダーがポップアップで表示されている。カレンダーの最初の列は週番号が 1、2、3、4、5、6 と並んでいる。その右側に一か月分のカレンダーがある。第 1 週と 1 月 2 日～ 8 日がある行はハイライトされています。月と同じ行に、次の月と前の月を右と左に移動するボタンがあります。](/ja/docs/Web/HTML/Element/input/week/week-control-chrome.png)

値
-

文字列で、入力欄に入力された年と週を表します。この入力型で使われる日時値の形式は、週文字列で説明しています。

次のように `value` 属性に値を入れることで、既定値を設定することができます。

```html
<label for="week">どの週に始めたいですか。</label>
<input id="week" type="week" name="week" value="2017-W01" />
```

一点気を付けなければならないことは、実際の `value` は常に `yyyy-Www` の書式であり、表示される書式はこれとは異なる可能性があるということです。例えば、上記の値をサーバーに送信すると、ブラウザーは `Week 01, 2017` のように表示するかもしれませんが、送信される値は常に `week=2017-W01` のようになります。

次のように、 JavaScript から入力要素の `value` プロパティを使用して、値を取得したり設定したりすることもできます。

```js
const weekControl = document.querySelector('input[type="week"]');
weekControl.value = "2017-W45";
```

追加の属性
-----

すべての `<input>` 型で共通する属性に加え、 `week` 型の入力欄は次の属性にも対応しています。

### max

受け付ける（時間的に）最も遅い年と週番号で、上記の値の節で説明した文字列書式です。要素に入力された `value` がこれを超えた場合、要素は制約検証に失敗します。 `max` 属性の値が妥当な週の文字列ではない場合、要素は最大値を持ちません。

この値は `min` 属性で指定されたものより後か、同じ年と週を指定する必要があります。

### min

受け付ける最も早い年と週です。要素の `value` がこれより小さいと、要素は制約検証に失敗します。属性の値が妥当な週の文字列ではない場合、要素は最小値を持ちません。

この値は `max` 属性で指定されたものより前か、同じ年と週を指定する必要があります。

### readonly

論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 `value` は、 JavaScript コードから直接 `HTMLInputElement` の `value` プロパティを設定することで変更することができます。

**メモ:** 読み取り専用フィールドは値を持てないため、 `required` は `readonly` 属性も指定されている入力欄には効果がありません。

### step

`step` 属性は、値が遵守しなければならない粒度を指定する数値、または下記で記述する特別な値 `any` です。ステップの基準となる値（`min` を指定した場合は `value`、それ以外の場合は適切な既定値）と同じ値のみが有効となります。

文字列値の `any` は、刻みがなく、どの値でも許可されることを意味します（`min` や `max` など、他の制約には制限されます）。

**メモ:** ユーザーがデータを入力したときには刻みの設定には吸着せず、ユーザーエージェントは直近の妥当な値、同じ距離の値の選択肢が 2 つあった場合は、正の方向の推奨値に丸められます。

`week` 入力欄では、 `step` の値は週数で指定され、 604,800,000 が乗じられます（ミリ秒単位の数値であるため)。 `step` の既定値は 1 であり、 1 週を表します。既定の刻みの既定値は -259,200,000 で、これは 1970 年の最初の週 (`1970-W01`) です。

*現時点で、 `week` 入力欄で `step` に `any` の値が何を意味するかが不明確です。これは情報が決定次第、更新されるでしょう。*

week 入力欄の使用
-----------

week 入力欄は一見すると便利に見えます。簡単に週を選択するユーザーインターフェイスを提供し、ユーザーのロケールに関係なく、データ形式を正規化してサーバーに送信するからです。しかし、ブラウザーの互換性が限られているため、 `<input type="week">` には問題があります。

`<input type="week">` の基本的な使い方と少し複雑な使い方を見てみてから、その後でブラウザーの互換性の問題を緩和するアドバイスを提供しましょう (ブラウザーの対応の扱いを参照してください)。

### week の基本的な使用

もっとも単純な `<input type="week">` の使用方法は、次のように基本的な `<input>` と `<label>` 要素の組み合わせです。

```html
<form>
  <label for="week">どの週から始めますか。</label>
  <input id="week" type="week" name="week" />
</form>
```

### 入力欄の寸法の制御

`<input type="week">` は `size` のような寸法に関する属性には対応していません。寸法を変更する必要がある場合は、 CSS を使用する必要があります。

### step 属性の使用

`step` 属性を使用して、週の番号が増加または減少するときに飛ばす番号を変更することができるはずですが、対応しているブラウザーでも何も動作していないようです。

検証
--

既定で、 `<input type="week">` は入力された値の検証を行いません。ユーザーインターフェイスの実装は一般的に、妥当な年と週でないものの入力をさせず、これは便利ですが、それでも入力欄を空のままにすることができ、また選択できる週の範囲を制限したくなるかもしれません。

### 週の最大値と最小値の設定

`min` および `max` 属性を使用して、ユーザーが選択することができる有効な週を制限することができます。以下の例では、最小値を `2017 年第 1 週` に、最大値を `2017 年第 52 週` に設定しています。

```html
<form>
  <label for="week">どの週から始めますか。</label>
  <input id="week" type="week" name="week" min="2017-W01" max="2017-W52" />
  <span class="validity"></span>
</form>
```

上記の例の CSS です。 CSS の `:valid` および `:invalid` プロパティを使用して、現在の値が有効かどうかに基づいてスタイルを設定しています。アイコンは入力欄そのものではなく、入力欄の隣の `<span>` に置くようにしないと、 Chrome ではコントロールの内側にコンテンツを生成するので、正しく整形したり表示したりすることができません。

```css
div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}
```

この結果は、対応するブラウザーでは 2017 年の第 1 週から第 52 週の間が有効に見え、選択することができます。

### 週の値を必須にする

加えて、`required` 属性を使用して、週の入力を必須にすることができます。結果として、対応しているブラウザーでは週の入力欄が空欄の場合にエラーを表示します。

例を見てみましょう。週の最小値と最大値を設定し、かつフィールドを必須に設定しています。

```html
<form>
  <div>
    <label for="week">どの週から始めますか。</label>
    <input
 id="week"
 type="week"
 name="week"
 min="2017-W01"
 max="2017-W52"
 required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="フォームを送信" />
  </div>
</form>
```

フォームに値を設定せずに送信しようとすると、ブラウザーはエラーを表示します。例を実行してみてください。

対応していないブラウザーを使用している方のためのスクリーンショットです。

![週番号フォームコントロールには、週番号があるべき場所に2本のダッシュがあります。黄色の警告マークと「このフィールドに入力してください」というポップアップが、入力のフォーカスリングと同じ青色でハイライトされている 2 つのダッシュから発せられています。](/ja/docs/Web/HTML/Element/input/week/week-validation-chrome.png)

**警告:** HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用にはなりません。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ（または大きすぎるデータ、間違った種類のデータなど）が送信された場合に災害が発生するおそれがあります。

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

前述のように、現時点で week 入力欄を利用する上で一番の問題はブラウザーの互換性です。デスクトップでは Safari と Firefox は対応しておらず、 IE の古いバージョンも対応していません。

Android や iOS のようなモバイルプラットフォームは、このような入力型が完全になっており、タッチスクリーン環境で実に簡単に値を選択できる専用のユーザーインターフェイスコントロールを提供します。例えば、 Android 版 Chrome の `week` 選択は、次のようになっています。

![モーダルポップアップ。ヘッダーには「週の設定」と書かれている。 2 列あり、左は 2017 が不透明で表示されています。右側は真ん中の 36 が不透明で、その上の 35 と下の 37 が半透明であります。他にオプションはありません。下部には 3 つのテキストリンクまたはボタンがあり、左に「削除」、右に「キャンセル」「設定」と記載されています。](/ja/docs/Web/HTML/Element/input/week/week-chrome-android.png)

対応していないブラウザーでは安全にテキスト入力欄に格下げされますが、これはユーザーインターフェイスの一貫性（表示されるコントロールが異なること）とデータの扱いの 2 つの問題を生じます。

2 つ目の問題はより深刻です。すでに述べたように、 `week` 入力欄では、実際の値が常に `yyyy-Www` の書式で正規化されます。ブラウザーが一般的なテキスト入力欄にフォールバックした場合、ユーザーが正しい書式で入力するよう案内することができません (そして、おそらく認識できません)。人間が週の値を書くには、次のように色々な方法があります。

* `2017 年第 1 週`
* `Week 1 2017`
* `2017-W01`
* 等

ブラウザーに依存しない方法によってフォームで年と週を扱う最善の方法は、現時点では年と週を別々なコントロール（`<select>` 要素で入力するものが一般的です。以下の実装を見てください）にするか、 jQuery date picker のような JavaScript ライブラリーを使用することです。

例
-

この例では、週を選択するユーザーインターフェイスの要素を 2 組生成します。ネイティブの `<input type="week">` 入力欄と、 `week` 入力欄に対応しない古いブラウザーで年と週を選択するための、 2 つの `<select>` 要素です。

HTML は次のようになります。

```html
<form>
  <div class="nativeWeekPicker">
    <label for="week">どの週から始めますか。</label>
    <input
 id="week"
 type="week"
 name="week"
 min="2017-W01"
 max="2018-W52"
 required />
    <span class="validity"></span>
  </div>
  <p class="fallbackLabel">どの週から始めますか。</p>
  <div class="fallbackWeekPicker">
    <div>
      <span>
        <label for="week">Week:</label>
        <select id="fallbackWeek" name="week"></select>
      </span>
      <span>
        <label for="year">Year:</label>
        <select id="year" name="year">
          <option value="2017" selected>2017</option>
          <option value="2018">2018</option>
        </select>
      </span>
    </div>
  </div>
</form>
```

週の値は以下の JavaScript のコードで動的に生成されます。
```

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}
```

もう一つの面白い部分は、機能の検出コードです。ブラウザーが `<input type="week">` に対応しているかどうかを検出するために、新たな `<input>` 要素を生成し、その `type` を `week` に設定てみて、すぐに `type` に何が設定されたかをチェックします。対応していないブラウザーでは、 `week` 型が `text` 型へ代替されます。 `<input type="week">` に対応していない場合は、ネイティブの日時入力欄を非表示にして代替用の (`<select>`) による選択ユーザーインターフェイスを表示します。

```js
// 変数を定義
const nativePicker = document.querySelector(".nativeWeekPicker");
const fallbackPicker = document.querySelector(".fallbackWeekPicker");
const fallbackLabel = document.querySelector(".fallbackLabel");

const yearSelect = document.querySelector("#year");
const weekSelect = document.querySelector("#fallbackWeek");

// 最初はフォールバックを非表示にする
fallbackPicker.style.display = "none";
fallbackLabel.style.display = "none";

// 新しい日付入力が文字列入力にフォールバックされるかどうか
const test = document.createElement("input");

try {
  test.type = "week";
} catch (e) {
  console.log(e.description);
}

// もし文字列入力になるならば、 if () {} ブロックの中のコードを実行する
if (test.type === "text") {
  // ネイティブの日付選択を隠してフォールバック版を表示
  nativePicker.style.display = "none";
  fallbackPicker.style.display = "block";
  fallbackLabel.style.display = "block";

  // 週を動的に生成する
  populateWeeks();
}

function populateWeeks() {
  // 週の選択肢を 52 週で生成
  for (let i = 1; i <= 52; i++) {
    const option = document.createElement("option");
    option.textContent = i < 10 ? `0${i}` : i;
    weekSelect.appendChild(option);
  }
}
```

**メモ:** 53 週ある年もあることを忘れないでください（年あたりの週数を参照）。商品のアプリを開発するときはこれを念頭に置いておく必要があります。

技術的概要
-----

|  |  |
| --- | --- |
| **値** | 年と週を表す文字列、または空欄 |
| **イベント** | `change` および
 `input` |
| **対応している共通属性** | `autocomplete`,
 `list`,
 `readonly`,
 `step` |
| **IDL 属性** | `value`, `valueAsDate`,
 `valueAsNumber`, `list` |
| **DOM インターフェイス** | `HTMLInputElement` |
| **メソッド** | `select()`,
 `stepDown()`,
 `stepUp()` |
| **暗黙の ARIA ロール** | `対応するロールなし` |

仕様書
---

| Specification |
| --- |
| HTML Standard # week-state-(type=week) |

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

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

関連情報
----

* 全般的な `<input>` およびその操作に使用する `HTMLInputElement` インターフェイス
* HTML で使用される日付と時刻の書式
* `<input type="datetime-local">`, `<input type="date">`, `<input type="time">`, `<input type="month">`
* CSS プロパティの互換性


<input type="month"> - HTML: ハイパーテキストマークアップ言語

<input type="month">
====================

`<input>` 要素の **`month`** 型は、ユーザーが年と月を入力できるようにする入力フィールドを作成し、年と月を簡単に入力できるようにします。
 値は "`YYYY-MM`" の形式の文字列で、`YYYY` は 4 桁の年、 `MM` は月の番号です。

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

 コントロールのユーザーインターフェイスは、一般にブラウザーによって異なります。現時点では対応が不安定であり、デスクトップ版の Chrome/Opera と Edge — および最新のバージョンのモバイルブラウザー — のみに利用可能な実装があります。
 `month` 入力欄に対応していないブラウザーでは、コントロールは単純な `<input type="text">` に格下げされますが、入力されたテキストが期待されている形式であることを保証するための自動検証が行われることもあります。

`month` に対応していないブラウザーを使用している場合のために、このスクリーンショットで Chrome と Opera でどのように見えるかを示します。
 右端にある下向き矢印をクリックすると、年と月を選択できる日付選択が表示されます。

![Chrome ブラウザーでの month コントロール](/ja/docs/Web/HTML/Element/input/month/month-control-chrome.png)

Microsoft Edge では、 `month` コントロールはこのように表示されます。

![Edge ブラウザーの month コントロール](/ja/docs/Web/HTML/Element/input/month/month-control-edge.png)

値
-

 文字列で、入力欄に入力された年と月の値を YYYY-MM（4 桁以上の年に続いてハイフン ("`-`")、続いて 2 桁の月）の形式で表します。
 この入力型で使用される時刻の値の形式について詳しくは、月文字列をご覧ください。

### 既定値の設定

入力コントロールの既定値は、次のように `value` 属性に年と月を入れることで設定することができます。

```html
<label for="bday-month">生まれた月は？</label>
<input id="bday-month" type="month" name="bday-month" value="2001-06" />
```

一点気を付けなければならないことは、表示される日付の書式は実際の `value` とは異なるということです。多くのユーザーエージェントは、年と月をユーザーのオペレーティングシステムに設定されたロケールに適した形式で表示しますが、日付の `value` は常に `yyyy-MM` の書式です。

上記の値がサーバーへ送信された場合は、例えば、 `bday-month=1978-06` のようになります。

### JavaScript を使用した値の設定

次のように、 JavaScript で `HTMLInputElement.value` プロパティを使用して、日付の値を取得したり設定したりすることもできます。

```html
<label for="bday-month">生まれた月は？</label>
<input id="bday-month" type="month" name="bday-month" />
```

```js
const monthControl = document.querySelector('input[type="month"]');
monthControl.value = "2001-06";
```

追加の属性
-----

すべての `<input>` 型で共通する属性に加え、 `month` 型の入力欄は次の属性にも対応しています。

### list

 list 属性の値は、同じ文書内にある `<datalist>` 要素の `id` です。
 `<datalist>` は、この入力欄でユーザーに提案するための事前定義された値のリストを提供します。
 リストの中の値のうち、この `type` と互換性のないものは、提案されるオプションには含まれません。
 提供される値は提案であり、要件ではありません。ユーザーはこの定義済みリストから選択することも、異なる値を提供することもできます。

### max

 最新の年月で、上記の値で説明した文字列の書式です。
 要素に入力された `value` がこの日付よりも後の場合、要素は制約検証に失敗します。
 `max` 属性の値が "`yyyy-MM`" の書式に従う妥当な文字列でない場合、要素は最大値を持ちません。

この値は `min` 属性で指定されたものより後か、同じ年月を指定する必要があります。

### min

 受け付ける最古の年月で、前述と同じ `yyyy-MM` の書式です。
 要素の `value` がこれより前の場合、要素は制約検証に失敗します。
 `min` 属性の値が "`yyyy-MM-dd`" の書式に従う妥当な文字列でない場合、要素は最小値を持ちません。

この値は `max` 属性で指定されたものより前か、同じ年月を指定する必要があります。

### readonly

 論理属性で、存在すれば、ユーザーが編集することができないことを表します。
 しかし、 `value` は、 JavaScript コードから直接 `HTMLInputElement.value` プロパティを設定することで変更することができます。

**メモ:** 読み取り専用フィールドは値を持てないため、 `required` は `readonly` 属性も指定されている入力欄には効果がありません。

### step

`step` 属性は値が吸着する粒度を指定する数値、または後述する特殊な値 `any` です。
 刻みの基準値に等しい値（指定されていれば `min`、そうでなければ `value`、どちらも設定されていなければ適切な既定値）のみが妥当となります。

文字列値の `any` は、刻みがなく、どの値でも許可されることを意味します（`min` や `max` など、他の制約には制限されます）。

**メモ:** ユーザーがデータを入力したときには刻みの設定には吸着せず、ユーザーエージェントは直近の妥当な値、同じ距離の値の選択肢が 2 つあった場合は、正の方向の推奨値に丸められます。

`month` 入力欄では、 `step` の値は月数で指定され、倍率は 1 です (数値も月単位であるため)。
 `step` の既定値は 1 ヶ月です。

month 入力欄の使用
------------

 日付に関する入力欄は (`month` を含め) 一見すると便利に見えます。日付の選択に簡単なユーザーインターフェイスを提供し、サーバーに送信するデータの書式をユーザーのロケールに関係なく正規化してくれます。
 しかし、現時点ではブラウザーの対応が限定されているため、 `<input type="month">` には問題があります。

`<input type="month">` の基本的な使い方と少し複雑な使い方を見てみてから、その後でブラウザーの互換性の問題を緩和するアドバイスを提供しましょう (ブラウザーの互換性の扱い を参照してください)。

### 月入力の基本的な使用

もっとも単純な `<input type="month">` の使用方法は、次のように基本的な `<input>` と `<label>` 要素の組み合わせです。

```html
<form>
  <label for="bday-month">生まれた月を入力してください。</label>
  <input id="bday-month" type="month" name="bday-month" />
</form>
```

### 日付の最大値と最小値の設定

`min` および `max` 属性を使用して、ユーザーが選択できる日付の範囲を制限することができます。
 次の例では、日付の最小値を `1900-01` に、日付の最大値を `2013-12` に指定しています。

```html
<form>
  <label for="bday-month">生まれた月を入力してください。</label>
  <input
 id="bday-month"
 type="month"
 name="bday-month"
 min="1900-01"
 max="2013-12" />
</form>
```

次のような結果になります。

* 1900 年 1 月から 2013 年 12 月までの間の月のみが選択できます。この範囲から外れた月は、コントロール内でスクロールできません。
* 使用しているブラウザーによりますが、指定された範囲外の月が月選択で選択できないか (Edge など)、無効になるものの (検証 を参照) 選択できるか (Chrome など) だということが分かるでしょう。
### 入力欄の寸法の制御

`<input type="month">` は `size` のような寸法に関する属性には対応していません。
 寸法を変更する必要がある場合は、 CSS を使用する必要があります。

検証
--

 既定で、 `<input type="month">` は入力された値の検証を行いません。
 ユーザーインターフェイスの実装は一般的に、日付でないものの入力をさせないからです。これは便利です。しかし、それでも `month` 入力欄を空のまま、または無効な日付 (例えば 4 月 32 日など) を入力してフォームを送信することが可能です。

 これを防ぐために、 `min` と `max` を用いて利用可能な日を制限することができ (日付の最大値と最小値の設定 を参照)、加えて `required` 属性を用いて、日付を入力することを必須にすることができます。
 結果として、対応しているブラウザーは、範囲外の日付や空の日付フィールドを送信しようとするとエラーを表示します。

例を見てみましょう。ここで日付の最小値と最大値を設定し、入力欄を必須にしました。

```html
<form>
  <div>
    <label for="month">何月にいらっしゃいますか？ (6 ～ 9 月)</label>
    <input
 id="month"
 type="month"
 name="month"
 min="2022-06"
 max="2022-09"
 required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="フォームを送信" />
  </div>
</form>
```

 年と月を指定せずに（または設定した範囲を外れた日付を）送信しようとすると、ブラウザーはエラーを表示します。
 例を実行してみましょう。

対応しているブラウザーで入力しなかった場合のスクリーンショットです。

![Chrome ブラウザーでの月が必要とするプロンプト](/ja/docs/Web/HTML/Element/input/month/month-required.png)

 上記の例の CSS です。
 CSS の `:valid` および `:invalid` プロパティを使用して、現在の値が有効かどうかに基づいてスタイルを設定しています。
 アイコンは入力欄そのものではなく、入力欄の隣の `<span>` に置くようにしないと、 Chrome ではコントロールの内側にコンテンツを生成するので、正しく整形したり表示したりすることができません。

```css
div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}
```

**警告:** HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用にはなりません。
 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。
 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。
 サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、誤った種類のデータなど) が送信された場合に障害が発生するおそれがあります。

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

 前述のように、現時点で日付入力を書く上で一番の問題は、多くの主要なブラウザーがまだすべてを実装している訳ではないということです。デスクトップでは Chrome/Opera と Edge のみが対応しており、モバイルでは多くの最新のブラウザーが対応しています。
 例えば、 `month` の選択画面は Android 版 Chrome ではこのように表示されます。

![Chrome for Android での日付ピッカー](/ja/docs/Web/HTML/Element/input/month/month-android.png)

対応していないブラウザーでは、文字列入力欄に安全に格下げされますが、これはユーザーインターフェイスの一貫性 (表示されるコントロールが異なること) とデータの扱いの両方で問題を生みます。

 2 番目の問題はより深刻です。すでに述べたように、 `month` 入力欄では、実際の値が常に `yyyy-mm` の書式で正規化されます。
 一方、既定の設定では、 `text` 入力欄ではどの書式で入力されるかの認識がなく、以下のように人間が日付を書く様々な方法で入力される可能性があります。

* `mmyyyy` (072022)
* `mm/yyyy` (07/2022)
* `mm-yyyy` (07-2022)
* `yyyy-mm` (2022-07)
* `Month yyyy` (July 2022)
* ... などなど。

 これを回避する方法の一つは、 `month` 入力欄に `pattern` 属性を付けることです。
 `month` 入力欄はこれを使用しないので、 `text` 入力欄などとして扱うようフォールバックされたときに、このパターンを使用します。
 例えば、次の例を `month` 入力欄に未対応のブラウザーで見てみてください。

```html
<form>
  <div>
    <label for="month">何月にいらっしゃいますか？ (6 ～ 9 月)</label>
    <input
 id="month"
 type="month"
 name="month"
 min="2022-06"
 max="2022-09"
 required
 pattern="[0-9]{4}-[0-9]{2}" />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="フォームを送信" />
  </div>
</form>
```

`nnnn-nn` のパターン (`n` は数字の0から9) に一致しない文字列を入力して送信しようとすると、エラーメッセージが表示される (そして入力欄が無効として強調表示される) のが分かるでしょう。
 もちろん、これでユーザーが無効な日付を入力したり (`0000-42` など)、パターンに合わない誤った書式の日付が入力されたりすることを止めることはできません。

 また、ユーザーが数ある日付形式の中で期待されるものがどれであるかを知らない可能性もあります。
 後はその分の作業が残っています。
```

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}
```

（すべての主要なブラウザーが対応するまでの間）ブラウザーに依存しない方法によってフォームで日付を扱う最善の方法は、ユーザーが年と月を別々なコントロール（(`<select>` 要素であることが多いです。以下の実装を見てください）に入力するようにするか、 jQuery date picker のような JavaScript ライブラリーを使用することです。

例
-

 この例では、ユーザーが年と月を選択できるよう設計されたユーザーインターフェイスの要素を 2 組作成します。
 1 つ目はネイティブの `month` 入力欄であり、もう 1 つは年と月を個別に選択することができる一対の `<select>` 要素で、まだ `<input type="month">` に対応していないブラウザーのためのものです。

### 結果

### HTML

年と月を入力するフォームはこのようになります。

```html
<form>
  <div class="nativeDatePicker">
    <label for="month-visit">何月にいらっしゃいますか？</label>
    <input type="month" id="month-visit" name="month-visit" />
    <span class="validity"></span>
  </div>
  <p class="fallbackLabel">何月にいらっしゃいますか？</p>
  <div class="fallbackDatePicker">
    <div>
      <span>
        <select id="year" name="year"></select>
        <label for="year">年</label>
      </span>
      <span>
        <select id="month" name="month">
          <option selected>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
          <option>6</option>
          <option>7</option>
          <option>8</option>
          <option>9</option>
          <option>10</option>
          <option>11</option>
          <option>12</option>
        </select>
        <label for="month">月</label>
      </span>
    </div>
  </div>
</form>
```

`nativeDatePicker` の ID がついた `<div>` は、年と月をリクエストするために `month` 入力欄を用いるのに対し、 `fallbackDatePicker` の ID がついた `<div>` は代わりに一対の `<select>` 要素を使用します。
 1 つ目は年を、2 つ目は月を入力します。

 月を選択する `<select>` は、変化しないので月をハードコーディングしています（ローカライズの問題が残っていますが）。
 年に利用できる値は、現在の年に応じて動的に生成されます（どのように動作するかについての詳細な説明は、以下のコードのコメントを参照してください）。
```

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}
```

### JavaScript

どちらの方法を使用するかを選択し、非ネイティブの年の `<select>` に年の一覧を設定する JavaScript コードは以下の通りです。

 この例の面白いもう一つの部分は、機能の検出コードです。
 ブラウザーが `<input type="month">` に対応しているかどうかを検出するために、新たな `<input>` 要素を生成し、その `type` を `month` に設定して、すぐに type に何が設定されたかをチェックします。
 対応していないブラウザーでは、`month` が フォールバックされて `text` が返されます。
 `<input type="month">` に対応していない場合は、ネイティブの日付選択を非表示にしてフォールバック用の選択ユーザーインターフェイスを表示します。

```js
// UI 要素の取得
const nativePicker = document.querySelector(".nativeDatePicker");
const fallbackPicker = document.querySelector(".fallbackDatePicker");
const fallbackLabel = document.querySelector(".fallbackLabel");

const yearSelect = document.querySelector("#year");
const monthSelect = document.querySelector("#month");

// Hide fallback initially
fallbackPicker.style.display = "none";
fallbackLabel.style.display = "none";

// Test whether a new date input falls back to a text input or not
const test = document.createElement("input");

try {
  test.type = "month";
} catch (e) {
  console.log(e.description);
}

// If it does, run the code inside the if () {} block
if (test.type === "text") {
  // Hide the native picker and show the fallback
  nativePicker.style.display = "none";
  fallbackPicker.style.display = "block";
  fallbackLabel.style.display = "block";

  // Populate the years dynamically
  // (the months are always the same, therefore hardcoded)
  populateYears();
}

function populateYears() {
  // Get the current year as a number
  const date = new Date();
  const year = date.getFullYear();

  // Make this year, and the 100 years before it available in the year <select>
  for (let i = 0; i <= 100; i++) {
    const option = document.createElement("option");
    option.textContent = year - i;
    yearSelect.appendChild(option);
  }
}
```

**メモ:** 53 週ある年もあることを忘れないでください（年あたりの週数を参照）。商品のアプリを開発するときはこれを念頭に置いておく必要があります。

技術的概要
-----

|  |  |
| --- | --- |
| **値** | 年と月を表す文字列、または空欄 |
| **イベント** | `change` および
 `input` |
| **対応している共通属性** | `autocomplete`,
 `list`,
 `readonly`,
 `step` |
| **IDL 属性** | `value` |
| **DOM インターフェイス** | `HTMLInputElement` |
| **メソッド** | `select()`,
 `stepDown()`,
 `stepUp()` |
| **暗黙の ARIA ロール** | `対応するロールなし` |

仕様書
---

| Specification |
| --- |
| HTML Standard # month-state-(type=month) |

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

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

関連情報
----

* 全般的な `<input>` およびその操作に使用する`HTMLInputElement` インターフェイス
* HTML で使用される日付と時刻の書式
* 日付と時刻の選択のチュートリアル
* `<input type="datetime-local">`, `<input type="date">`, `<input type="time">`, `<input type="week">`
* CSS プロパティの互換性


<input type="submit"> - HTML: ハイパーテキストマークアップ言語

<input type="submit">
=====================

`<input>` 要素の **`submit`** 型は、ボタンとして描画されます。 `click` イベントが発生したとき（ふつうはユーザーがボタンをクリックしたとき）、ユーザーエージェントはサーバーへフォームを送信しようとします。

値
-

`<input type="submit">` 要素の `value` 属性は、ボタンのラベルとして表示される文字列を示します。ボタンはその他の真の値を持ちません。

### value 属性の設定

```html
<input type="submit" value="リクエストを送信" />
```

### value 属性の省略

`value` を指定しなかった場合、ボタンにはユーザーエージェントによって選ばれた既定のラベルが表示されます。このラベルは「送信」または「クエリを送信」などのものです。次のものはこのブラウザーにおける送信ボタンの既定のラベルです。

```html
<input type="submit" />
```

追加の属性
-----

すべての `<input>` 型で共通する属性に加え、 `submit` 型の入力欄は次の属性にも対応しています。

### formaction

文字列で、データの送信先の URL を示します。これはこの `<input>` が属する `<form>` 要素の `action` 属性より優先します。

この属性は `<input type="image">` および `<button>` 要素でも使用できます。

### formenctype

文字列で、フォームのデータをサーバーに送信する際に使われるエンコーディング方法を識別します。許されている値は 3 つです。

`application/x-www-form-urlencoded`

これは既定値で、フォームのデータを `encodeURI()` などのアルゴリズムを使って URL エンコーディングした後で送信します。

`multipart/form-data`

データを管理するために `FormData` API を使用し、複数のファイルをサーバーに送信することができます。フォームに `<input>` 要素の `type` が `file` (`<input type="file">`) が含まれている場合は、このエンコーディング型を*使わなければなりません*。

`text/plain`

プレーンテキストです。ほとんどデバッグでしか役に立ちませんが、送信されたデータを簡単に見ることができます。

`formenctype` 属性が指定された場合、所属するフォームの `action` 属性を上書きします。

この属性は `<input type="image">` および `<button>` 要素でも使用できます。

### formmethod

文字列で、フォームのデータを送信するときに使用する HTTP メソッドを示します。この値は所有者であるフォームの `method` を上書きします。許可されている値は次の通りです。

`get`

URL は `formaction` または `action` 属性で指定された URL に疑問符 ("?") を追加し、 `formenctype` または `enctype` 属性で指定された方法でエンコードされたフォームのデータが続くものになります。この URL は HTTP の `get` リクエストを用いてサーバーに送信されます。このメソッドは ASCII 文字のみを含む単純なフォームでうまく動作し、副作用はありません。これが既定値です。

`post`

フォームのデータは、 `formaction` または `action` で指定された URL に HTTP の `post` メソッドを用いて送信されるリクエストの本文に含められます。このメソッドは複雑なデータやファイルの添付に対応しています。

`dialog`

このメソッドは、入力欄が関連付けられたダイアログを閉じるだけで、フォームのデータをまったく送信しない場合ことを表すために使用します。

この属性は `<input type="image">` および `<button>` 要素でも使用できます。

### formnovalidate

論理属性で、存在する場合は、サーバーに送信する前にフォームの検証を行わないことを指定します。これは、自分自身で形成するフォームの `novalidate` 属性の値より優先されます。

この属性は `<input type="image">` および `<button>` 要素でも使用できます。

### formtarget

フォームを送信した後に受け取ったレスポンスを表示する場所を示す名前またはキーワードを指定する文字列です。この文字列は、**閲覧コンテキスト**（つまり、タブ、ウィンドウ、または `<iframe>`）の名前である必要があります。ここで指定された値は、この入力を所有している `<form>` の `target` 属性で指定された対象を上書きします。

タブ、ウィンドウ、インラインフレームなどの実際の名前の他に、使用できる特別なキーワードがいくつかあります。

`_self`

レスポンスを、形式を形成しているのと同じ閲覧コンテキストに読み込みます。これにより、現在の文書が受信したデータで置き換わります。これは、何も指定されなかった場合に使用される既定値です。

`_blank`

レスポンスを新しい、名前のない、閲覧コンテキストに読み込みます。これは通常、現在の文書内の同じウィンドウの新しいタブですが、ユーザーエージェントの設定によって異なる形となる場合があります。

`_parent`

現在の閲覧コンテキストの親コンテキストにレスポンスを読み込みます。親コンテキストがない場合は、 `_self` と同じ動作をします。

`_top`

レスポンスを最上位の閲覧コンテキストに読み込みます。これは、現在のコンテキストの最上位の祖先である閲覧コンテキストです。現在のコンテキストが最上位のコンテキストである場合、これは `_self` と同じように動作します。

この属性は `<input type="image">` および `<button>` 要素でも使用できます。

submit ボタンの使用
-------------

`<input type="submit">` ボタンはフォームを送信するために使用されます。もしカスタムボタンを作成し、JavaScript で動作をカスタマイズしたい場合は、`<input type="button">` か、より好ましくは `<button>` 要素を使用しなければいけません。

もしフォームのボタンを作成するのに `<button>` 要素を使用するのであれば、次のことに注意してください。`<button>` が `<form>` の中にある場合、そのボタンは "submit" ボタンとして扱われます。ですから、どのボタンが送信ボタンであるかを明示的に指定する習慣をつけるとよいでしょう。

### 単純な送信ボタン

まず、単純な送信ボタンを持つフォームを作成することから始めます。

```html
<form>
  <div>
    <label for="example">テキストを送信してみましょう</label>
    <input id="example" type="text" name="text" />
  </div>
  <div>
    <input type="submit" value="送信" />
  </div>
</form>
```

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

テキストフィールドにいくらかテキストを入力してから、送信ボタンを押してみてください。

送信すると、データの名前と値のペアがサーバーに送信されます。この例では、文字列は `text=usertext` となります。"usertext" はユーザーが入力したテキストで、特殊文字を保持するためにエンコードされています。どこでどのようにデータを送信するかは `<form>` の設定によります。詳しくはフォームデータの送信を参照してください。

### 送信ボタンへのキーボードショートカットの追加

キーボードショートカットは、アクセスキーやキーボード相当物とも呼ばれ、ユーザーがキーボードのキーまたはキーの組み合わせを使ってボタンを発生させることができます。送信ボタンにキーボードショートカットを追加するには、それが意味をなす他の `<input>` と同じように、`accesskey` グローバル属性を使用してください。

この例では、 `s` がアクセスキーとして指定されています（`s` と、あなたのブラウザー/OS の組み合わせに応じた特定の修飾キーを押す必要があります）。ユーザーエージェント自身のキーボードショートカットとの競合を避けるために、ホストコンピュータ上の他のショートカットとは異なる修飾キーがアクセスキーに使用されます。詳しくは `accesskey` を参照してください。

以下は、前回の例に `s` アクセスキーを追加した例です。

```html
<form>
  <div>
    <label for="example">テキストを送信してみましょう</label>
    <input id="example" type="text" name="text" />
  </div>
  <div>
    <input type="submit" value="送信" accesskey="s" />
  </div>
</form>
```

例えば、 Mac 版 Firefox では `Control`-`Option`-`S` を押すと送信ボタンを起動しますが、Windows 版 Chrome では `Alt`+`S` を使用します。

上の例の問題点は、ユーザーがアクセスキーが何であるかを知らないということです。 特に、競合を避けるために変更する修飾子は通常標準的でないため、このようなことが起こります。サイトを構築する際には、サイトのデザインを邪魔しないような方法でこの情報を提供するようにしてください（例えば、サイトのアクセスキーが何であるかについての情報を指し示す、簡単にアクセスできるリンクを提供する）。ボタンにツールチップを追加する（`title` 属性を使用する）こともできますが、アクセシビリティの観点からは完全な解決策とは言えません。

### 送信ボタンの無効化と有効化

送信ボタンを無効にするには、 `disabled` 属性を、次のように指定してください。

```html
<input type="submit" value="送信" disabled />
```

実行時に `disabled` を `true` または `false` に設定することで、ボタンを有効にしたり無効にしたりすることができます。JavaScript では、 `btn.disabled = true` または `btn.disabled = false` のようになります。

**メモ:** ボタンの有効化や無効化についてのさらなる考えは、 `<input type="button">` ページを参照してください。

検証
--

送信ボタンは制約の検証には参加しません。制約を受ける実際の値を持っていません。

例
-

上に簡単な例を記載しています。送信ボタンについては、実のところこれ以上言うべきことはありません。この種のコントロールが「単純なボタン」と呼ばれることがあるのはそのためです。

|  |  |
| --- | --- |
| **値** | ボタンのラベルとして使用する文字列 |
| **イベント** | `click` |
| **対応している共通属性** | `type` および
 `value` |
| **IDL 属性** | `value` |
| **DOM インターフェイス** | `HTMLInputElement` |
| **メソッド** | なし |
| **暗黙の ARIA ロール** | `button` |

仕様書
---

| Specification |
| --- |
| HTML Standard # submit-button-state-(type=submit) |

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

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

関連情報
----

* `<input>` およびそれが実装している `HTMLInputElement` インターフェイス
* フォームとボタン
* HTML フォーム
* `<button>` 要素
* CSS プロパティの互換性


<input type="tel"> - HTML: ハイパーテキストマークアップ言語

<input type="tel">
==================

`<input>` 要素の **`tel`** 型は、ユーザーに電話番号を入力または編集させるために使用します。 `<input type="email">` や `<input type="url">` とは異なり、送信前に値が特定の書式であると自動的には検証されません。電話番号の書式は世界中で様々だからです。

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

`tel` の入力欄は機能的に標準の `text` 入力欄と同じであるという事実にもかかわらず、便利な用途を提供します。もっとも手っ取り早く表れるのは、モバイルブラウザー — 特に携帯電話のもの — では、電話番号の入力に最適化された専用のキーパッドを表示することがあります。電話番号の専用の入力型を使用すると、カスタム検証を追加して電話番号の扱いをもっと便利にすることができます。

**メモ:** `tel` 型に対応していないブラウザーでは、通常の text 入力欄で代用されます。

値
-

`<input>` 要素の `value` 属性には、電話番号を表す文字列、または空文字列 (`""`) の文字列が入ります。

追加の属性
-----

型に関係なくすべての `<input>` 要素を操作する属性に加え、電話番号型の入力欄は次の属性にも対応しています。

### list

list 属性の値は、同じ文書内にある `<datalist>` 要素の `id` です。 `<datalist>` は、この入力欄でユーザーに提案するための事前定義された値のリストを提供します。リストの中の値のうち `type` と互換性のないものは、提案されるオプションには含まれません。提供される値は提案であり、要件ではありません。ユーザーはこの定義済みリストから選択することも、異なる値を提供することもできます。

### maxlength

ユーザーが電話番号欄に入力することができる（UTF-16 コード単位での）最大文字数です。 0 以上の整数値である必要があります。 `maxlength` が指定されていないか、無効な値が指定されていると、電話番号欄には最大文字数が設定されません。この値は `minlength` の値以上である必要もあります。

フィールドに入力された長さが UTF-16 コード単位で `maxlength` の長さを超えていると、その入力欄は制約検証に失敗します。

### minlength

ユーザーが電話番号欄に入力することができる（UTF-16 コード単位での）最小文字数です。これは非負の整数値で、 `maxlength` で指定された値以下である必要があります。 `minlength` が指定されていないか、無効な値が指定されていると、電話番号欄には最小文字数が設定されません。

入力欄のテキストの長さが UTF-16 コード単位で `minlength` の長さよりも短いと、電話番号欄は制約検証に失敗します。

### pattern

`pattern` 属性は、指定する場合は正規表現であり、入力欄の `value` が制約検証に合格するためにはこれと一致しなければなりません。これは `RegExp` 型で使用される JavaScript の妥当な正規表現である必要があり、これは正規表現のガイドで記述されています。正規表現がコンパイルされるときに `'u'` フラグが指定されるので、パターンは ASCII ではなく Unicode コードポイントの並びとして扱われます。パターンのテキストをスラッシュで囲んではいけません。

指定されたパターンがないかか無効である場合は、正規表現は適用されず、この属性は完全に無視されます。

**メモ:** `title` 属性を使用してテキストを指定すると、多くのブラウザーでパターンに一致する要件が何であるかを説明するツールチップを表示することができます。近くに他の説明テキストを配置する必要があります。

詳細と例については後述のパターン検証を参照してください。

### placeholder

`placeholder` 属性は文字列で、その欄にどのような種類の情報が求められるかについてのユーザーに対する短いヒントを提供します。これは求められるデータの種類を紹介する一語または短い句であり、説明的なメッセージではありません。テキストには改行を含めることは*できません*。

コントロールの内容がある書字方向 (LTR または RTL) であるものの、プレイスホルダーを逆の方向に表示する必要がある場合、 Unicode 双方向アルゴリズム書式文字を使用してプレイスホルダーの中で書字方向を上書きすることができます。詳しくは、双方向テキストでの Unicode コードの使い方（英語）を参照してください。

**メモ:** 可能であれば `placeholder` を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、`<input>` のラベルを参照してください。

### readonly

論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 `value` は、 JavaScript コードから直接 `HTMLInputElement` の `value` プロパティを設定することで変更することができます。

**メモ:** 読み取り専用フィールドは値を持てないため、 `required` は `readonly` 属性も指定されている入力欄には効果がありません。

### size

`size` 属性は数値であり、入力欄の幅を何文字分とするかを示します。値はゼロより大きな数値である必要があり、既定値は 20 です。文字の幅は様々であるため、これは正確ではない可能性もあり、依存することはできません。結果の入力欄は文字数やフォント（使用中の `font` 設定）によって、指定された文字数より狭くなったり広くなったりすることがあります。

これはユーザーがフィールドに入力することができる文字数の制限を設定するものではありません。これは一度に見える文字数をおよそ指定するだけです。入力データの長さの上限を設定するには、 `maxlength` 属性を使用してください。

標準外の属性
------

ブラウザーによっては、以下の標準外の属性が利用できます。一般的な規則として、できれば使用することを避けてください。

### autocorrect

Safari 拡張である `autocorrect` 属性は文字列で、ユーザーがこの欄を編集している間に自動修正を有効にするかどうかを示します。次の値が許されています。

`on`

構成されていれば、打ち間違いの自動修正や、テキストの置き換え処理を有効にします。

`off`

自動修正やテキストの置き換えを無効にします。

### mozactionhint

Mozilla 拡張で、ユーザーがフィールドを編集中に `Enter` キーや `Return` キーを押した場合に行われるアクションの種類のヒントを提供します。

この属性は非推奨です。代わりに `enterkeyhint` グローバル属性を使用してください。

tel 入力欄の使用
----------

ウェブにおいて、電話番号はとてもよく収集されるデータの種類です。例えば、何らかの会員登録や通信販売サイトで、商取引や緊急時連絡の目的でユーザーに電話番号を尋ねることが良くあります。一般的にどのように電話番号が入力されるかを考えれば、残念ながら「1 つのサイズですべてに合う」ような解決策は現実的ではありません。

幸い、自分でサイトの要件を検討し、自分で適切なレベルの検証を実装することができます。詳しくは、以下の検証をご覧ください。

### カスタムキーボード

`<input type="tel">` の主な利点の一つは、携帯電話のブラウザーに電話番号を入力するための特別なキーボードを表示させることです。例えば、いくつかの端末でキーパッドがどのように表示されるかを示します。

| Android 版 Firefox | WebKit iOS (Safari/Chrome/Firefox) |
| --- | --- |
| Android 版 Firefox のスクリーンショット | iOS 版 Firefox のスクリーンショット |

### 単純な tel 入力欄

最も基本的なフォームにおいて、 tel 入力欄は次のように実装することができます。

```html
<label for="telNo">電話番号:</label>
<input id="telNo" name="telNo" type="tel" />
```

ここでは何も不思議なことは起こりません。サーバーに送信されると、上記の入力のデータは、例えば `telNo=+12125553151` のように表現されます。

### プレイスホルダー

入力データがどのような形式を取るべきか、文脈上のヒントを提供することが役立つ場合があります。これは、ページのデザインがそれぞれの `<input>` に説明的なラベルを提供していない場合に特に重要になることがあります。ここが**プレイスホルダー**の登場する場面です。プレイスホルダーは `value` が取るべきフォームを示す値で、有効な値の例を提示します。この値は要素の `value` が `""` の時にエディットボックス内に表示されます。ボックスにデータが入力されると、プレイスホルダーが消え、ボックスが空になると、プレイスホルダーが再び表示されます。

ここでは、 `123-4567-8901` というプレイスホルダーを持つ `tel` 入力欄があります。編集フィールドの内容を操作すると、プレイスホルダーが消えたり現れたりすることに注意してください。

```html
<input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901" />
```

### 入力欄の寸法の制御

入力ボックスの物理的な長さだけでなく、入力テキスト自体に許される最小・最大の長さも制御することができます。

#### 物理的な入力欄の寸法

入力ボックスの物理的な大きさは、 `size` 属性で制御することが可能です。この属性により、入力ボックスが一度に表示できる文字数を指定することができます。この例では、例えば `tel` のエディットボックスの幅は 20 文字です。

```html
<input id="telNo" name="telNo" type="tel" size="20" />
```

#### 要素の値の長さ

`size` は、入力される電話番号の長さの制限とは別のものです。入力される電話番号の長さの最小値は `minlength` 属性で指定でき、同様に、入力される電話番号の長さの最大値は `maxlength` 属性で設定することができます。

以下の例では、幅 20 文字の電話番号入力ボックスを生成し、入力内容は 9 文字以上、 14 文字以下であることを要求しています。

```html
<input
 id="telNo"
 name="telNo"
 type="tel"
 size="20"
 minlength="9"
 maxlength="14" />
```

**メモ:** 上記の属性は検証に影響します。 - 上記の例では、値の長さが 9 文字未満、または 14 文字以上の場合、入力は無効とみなされます。ほとんどのブラウザーでは、最大長を超える値を入力することさえできません。

### 既定のオプションの提供

#### value 属性を言使用した単一の既定値の提供

他と同様に、 `tel` 入力欄に `value` 属性を設定することで既定値を指定することができます。

```html
<input id="telNo" name="telNo" type="tel" value="333-4444-4444" />
```

#### 提案値の提供

さらに一歩進んで、電話番号の既定値のリストを用意し、そこからユーザーが選択できるようにすることも可能です。これには `list` 属性を使用します。これはユーザーをこれらの選択肢に限定しませんが、よく使われる電話番号をより迅速に選択できるようにします。これは `autocomplete` へのヒントも提供します。 `list` 属性は `<datalist>` 要素の ID を指定し、この要素は 1 つの提案値につき 1 つの `<option>` 要素を含んでおり、それぞれの `option` の `value` は電話番号入力ボックスの対応する提案値となっています。

```html
<label for="telNo">電話番号: </label>
<input id="telNo" name="telNo" type="tel" list="defaultTels" />

<datalist id="defaultTels">
  <option value="111-1111-1111"></option>
  <option value="122-2222-2222"></option>
  <option value="333-3333-3333"></option>
  <option value="344-4444-4444"></option>
</datalist>
```

`<datalist>` 要素とその `<option>` が配置されると、ブラウザーは電話番号の候補として指定された値を提供します。これは通常、候補を含むポップアップまたはドロップダウンメニューとして表示されます。具体的な使い勝手はブラウザーによって異なるかもしれませんが、通常、編集ボックスをクリックすると、提案された電話番号がドロップダウンで表示されます。その後、ユーザーが文字を入力すると、リストが調整され、フィルタリングされた一致する値のみが表示されます。ユーザーが選択するか、独自の値を入力するまで、入力された文字ごとにリストが絞り込まれます。

以下は、その様子のスクリーンショットです。

![入力ボックスにはフォーカスがあり、青いフォーカスリングがあります。入力欄には、ユーザーが選択できる 4 つの電話番号を示すドロップダウンメニューがあります。](/ja/docs/Web/HTML/Element/input/tel/phone-number-with-options.png)

検証
--

以前にも触れましたが、電話番号で万能のクライアント側検証方法を提供することは非常に困難です。では、どうすればいいのでしょうか。いくつかの選択肢を考えてみましょう。

**警告:** HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用には*なりません*>。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ（または大きすぎるデータ、間違った種類のデータなど）が送信された場合に災害が発生するおそれがあります。

### 電話番号を必須にする

空の入力を無効として、サーバーに送信されないようにするには、 `required` 属性を使用します。例えば、このような HTML を使ってみましょう。

```html
<form>
  <div>
    <label for="telNo">電話番号を入力してください (必須): </label>
    <input id="telNo" name="telNo" type="tel" required />
    <span class="validity"></span>
  </div>
  <div>
    <button>送信</button>
  </div>
</form>
```

そして、有効な入力をチェックマークで、無効な入力をバッテンで強調するために、以下の CSS を記述してみましょう。

```css
div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
  color: #8b0000;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
  color: #009000;
}
```

出力結果は次のようになります。

### パターンによる値検証

入力された数値をさらに制限し、特定のパターンに適合させたい場合は、`pattern`属性を使用してください。この属性は、入力された値が一致すべき正規表現を値として取ります。

この例では、前と同じ CSS を使用しますが、 HTML は次のように変更します。

```html
<form>
  <div>
    <label for="telNo">
      電話番号を入力してください (xxx-xxx-xxxx 形式で):
    </label>
    <input
 id="telNo"
 name="telNo"
 type="tel"
 required
 pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
    <span class="validity"></span>
  </div>
  <div>
    <button>送信</button>
  </div>
</form>
```

```
div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
  color: #8b0000;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
  color: #009000;
}
```

入力された値は、 xxx-xxx-xxxx というパターンに一致しない限り、無効であると報告されることに注意してください。例えば、 41-323-421 は受け入れられません。 800-MDN-ROCKS も同様です。しかし、 865-555-6502 は受理されます。実際のアプリケーションでは、ユーザーのロケールに応じて使用するパターンを変更する必要があるでしょう。

例
-

この例では、ユーザーにどの国にいるかを選択させる `<select>` 要素と、電話番号の各部分を入力させる一連の `<input type="tel">` 要素でシンプルなインターフェイスを表します。複数の `tel` 入力欄を使ってはいけないという理由はありません。

それぞれの入力欄には `placeholder` 属性があり、目の見えるユーザーが何を入力すればよいかのヒントを表示します。また `pattern` で、求められる部分で指定された文字数を強制します。さらに `aria-label` (en-US) 属性があり、スクリーンリーダーのユーザーに何を入力すればよいかのヒントを読み上げることができるようになっています。

```html
<form>
  <div>
    <label for="country">国を選択してください:</label>
    <select id="country" name="country">
      <option>UK</option>
      <option selected>US</option>
      <option>Germany</option>
    </select>
  </div>
  <div>
    <p>電話番号を入力してください:</p>
    <span class="areaDiv">
      <input
 id="areaNo"
 name="areaNo"
 type="tel"
 required
 placeholder="Area code"
 pattern="[0-9]{3}"
 aria-label="Area code" />
      <span class="validity"></span>
    </span>
    <span class="number1Div">
      <input
 id="number1"
 name="number1"
 type="tel"
 required
 placeholder="First part"
 pattern="[0-9]{3}"
 aria-label="First part of number" />
      <span class="validity"></span>
    </span>
    <span class="number2Div">
      <input
 id="number2"
 name="number2"
 type="tel"
 required
 placeholder="Second part"
 pattern="[0-9]{4}"
 aria-label="Second part of number" />
      <span class="validity"></span>
    </span>
  </div>
  <div>
    <button>送信</button>
  </div>
</form>
```

この JavaScript は比較的単純で、 `onchange` イベントハンドラーを含んでおり、 `<select>` の値が変更されると `<input>` 要素の `pattern`, `placeholder`, `aria-label` をその国/地域の電話番号の形式に合わせて更新するようになっています。

```js
const selectElem = document.querySelector("select");
const inputElems = document.querySelectorAll("input");

selectElem.onchange = () => {
  for (let i = 0; i < inputElems.length; i++) {
    inputElems[i].value = "";
  }

  if (selectElem.value === "US") {
    inputElems[2].parentNode.style.display = "inline";

    inputElems[0].placeholder = "Area code";
    inputElems[0].pattern = "[0-9]{3}";

    inputElems[1].placeholder = "First part";
    inputElems[1].pattern = "[0-9]{3}";
    inputElems[1].setAttribute("aria-label", "First part of number");

    inputElems[2].placeholder = "Second part";
    inputElems[2].pattern = "[0-9]{4}";
    inputElems[2].setAttribute("aria-label", "Second part of number");
  } else if (selectElem.value === "UK") {
    inputElems[2].parentNode.style.display = "none";

    inputElems[0].placeholder = "Area code";
    inputElems[0].pattern = "[0-9]{3,6}";

    inputElems[1].placeholder = "Local number";
    inputElems[1].pattern = "[0-9]{4,8}";
    inputElems[1].setAttribute("aria-label", "Local number");
  } else if (selectElem.value === "Germany") {
    inputElems[2].parentNode.style.display = "inline";

    inputElems[0].placeholder = "Area code";
    inputElems[0].pattern = "[0-9]{3,5}";

    inputElems[1].placeholder = "First part";
    inputElems[1].pattern = "[0-9]{2,4}";
    inputElems[1].setAttribute("aria-label", "First part of number");

    inputElems[2].placeholder = "Second part";
    inputElems[2].pattern = "[0-9]{4}";
    inputElems[2].setAttribute("aria-label", "Second part of number");
  }
};
```

この例は次のように見えます。

これは面白いアイデアで、国際電話番号の取り扱いの問題を解決する可能性を示しています。この例を拡張して、潜在的にすべての国に対して正しいパターンを提供しなければなりませんが、これは大変な作業ですし、ユーザーが自分の番号を正しく入力するというフールプルーフの保証もありません。

クライアント側でこれだけ大変なことをするべきなのか、クライアント側ではユーザーが好きな書式で任意の数字を入力し、サーバー側でサニタイズすればよいのではないかとも思うでしょう。しかし、この選択はあなたがすることです。
```

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
  color: #8b0000;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
  color: #009000;
}
```

技術的概要
-----

|  |  |
| --- | --- |
| **値** | 電話番号を表す文字列、または空欄 |
| **イベント** | `change` および
 `input` |
| **対応している共通属性** | `autocomplete`,
 `list`,
 `maxlength`,
 `minlength`,
 `pattern`,
 `placeholder`,
 `readonly`,
 `size` |
| **IDL 属性** | `list`, `selectionStart`,
 `selectionEnd`, `selectionDirection`,
 `value` |
| **DOM インターフェイス** | `HTMLInputElement` |
| **メソッド** | `select()`,
 `setRangeText()`,
 `setSelectionRange()` |
| **暗黙の ARIA ロール** | `list` 属性がある場合:
 `textbox` | `list` 属性がない場合: `combobox (en-US)` |

仕様書
---

| Specification |
| --- |
| HTML Standard # telephone-state-(type=tel) |

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

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

関連情報
----

* HTML フォームガイド
* `<input>`
    + `<input type="text">`
    + `<input type="email">`
* CSS プロパティの互換性


<input type="email"> - HTML: ハイパーテキストマークアップ言語

<input type="email">
====================

`<input>` 要素の **`email`** 型は、ユーザーに一つのメールアドレス、または、 `multiple` 属性が設定されていた場合は、メールアドレスのリストを入力および編集させるために使用します。

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

入力値はフォームの送信前に自動的に検証され、空欄または正しい形式のメールアドレス (またはメールアドレスのリスト) のどちらかであることが確認されます。 CSS の `:valid` および `:invalid` 擬似クラスが自動的に適用され、フィールド上の現在の値が妥当なメールアドレスであるかどうかを視覚的に示します。

値
-

`<input>` 要素の `value` 属性には文字列が入り、メールアドレスの構文に合うかどうかが自動的に検証されます。具体的には、検証に通ることができる値の書式には 3 種類があります。

1. 空文字列 ("")。ユーザーが値を入力しないか、または値が削除されたことを表します。
2. 単一の正しい形式のメールアドレス。メールアドレスが実在する必要はありませんが、少なくとも正しい書式です。簡単に言えば、 `username@domain` または `username@domain.tld` の形です。もちろんそれ以上のものもあります。検証の節で、メールアドレスの検証アルゴリズムで一致する正規表現について参照してください。
3. `multiple` 属性が指定されたとき（のみ）、値はカンマ区切りで複数の正しい形式のメールアドレスを入れることができます。それぞれのメールアドレスの前後にある空白は除去されます。

検証の節で、どのようなメールアドレスが正しい形式であると検証されるかの詳細を参照してください。

追加の属性
-----

型に関係なくすべての `<input>` 要素を操作する属性に加え、 `email` 型の入力欄は次の属性にも対応しています。

### list

list 属性の値は、同じ文書内にある `<datalist>` 要素の `id` です。 `<datalist>` は、この入力欄でユーザーに提案するための事前定義された値のリストを提供します。リストの中の値のうち `type` と互換性のないものは、提案されるオプションには含まれません。提供される値は提案であり、要件ではありません。ユーザーはこの定義済みリストから選択することも、異なる値を提供することもできます。

### maxlength

ユーザーが `email` 入力欄に入力することができる (UTF-16 コード単位での) 最大文字数です。 0 以上の整数値である必要があります。 `maxlength` が指定されていないか、無効な値が指定されていると、 `email` 入力欄には最大文字数が設定されません。この値は `minlength` の値以上である必要もあります。

フィールドのメールアドレスの長さが UTF-16 コード単位で `maxlength` の長さを超えていると、その入力欄は制約検証に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。

### minlength

ユーザーが `email` 入力欄に入力することができる (UTF-16 コード単位での) 最小文字数です。これは非負の整数値で、 `maxlength` で指定された値以下である必要があります。 `minlength` が指定されていないか、無効な値が指定されていると、 `email` 入力欄には最小文字数が設定されません。

入力欄のメールアドレスの長さが UTF-16 コード単位で `minlength` の長さよりも短いと、その入力欄は制約検証に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。

### multiple

論理属性で、存在する場合、ユーザーが複数のメールアドレスを、カンマと任意のホワイトスペースで区切ったリストを入力できることを示します。詳しくは複数のメールアドレスの許可または HTML 属性: multiple を参照してください。

**メモ:** 通常、 `required` 属性を指定すると、ユーザーは入力欄に妥当なメールアドレスを入力しなければなりません。しかし、 `multiple` 属性を追加すると、ゼロ個のメールアドレス（空文字列、またはホワイトスペースのみの文字列）が妥当な値になります。言い換えれば、 `multiple` が指定されていると、 `required` の値に関係なく、ユーザーはメールアドレスを一つも入力する必要がありません。

### pattern

`pattern` 属性は、指定する場合は正規表現であり、入力欄の `value` が制約検証に合格するためにはこれと一致しなければなりません。これは `RegExp` 型で使用される JavaScript の妥当な正規表現である必要があり、これは正規表現のガイドで記述されています。正規表現がコンパイルされるときに `'u'` フラグが指定されるので、パターンは ASCII ではなく Unicode コードポイントの並びとして扱われます。パターンのテキストをスラッシュで囲んではいけません。

指定されたパターンがないかか無効である場合は、正規表現は適用されず、この属性は完全に無視されます。

**メモ:** `title` 属性を使用してテキストを指定すると、多くのブラウザーでパターンに一致する要件が何であるかを説明するツールチップを表示することができます。近くに他の説明テキストを配置する必要があります。

詳細と例についてはパターン検証の節を参照してください。

### `placeholder`

`placeholder` 属性は文字列で、その欄にどのような種類の情報が求められるかについてのユーザーに対する短いヒントを提供します。これは求められるデータの種類を紹介する一語または短い句であり、説明的なメッセージではありません。テキストには改行を含めることは*できません*。

コントロールの内容がある書字方向 (LTR または RTL) であるものの、プレイスホルダーを逆の方向に表示する必要がある場合、 Unicode 双方向アルゴリズム書式文字を使用してプレイスホルダーの中で書字方向を上書きすることができます。詳しくは、双方向テキストでの Unicode コードの使い方（英語）を参照してください。

**メモ:** 可能であれば `placeholder` を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、`<input>` のラベルを参照してください。

### readonly

論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 `value` は、 JavaScript コードから直接 `HTMLInputElement` の `value` プロパティを設定することで変更することができます。

**メモ:** 読み取り専用フィールドは値を持てないため、 `required` は `readonly` 属性も指定されている入力欄には効果がありません。

### size

`size` 属性は数値であり、入力欄の幅を何文字分とするかを示します。値はゼロより大きな数値である必要があり、既定値は 20 です。文字の幅は様々であるため、これは正確ではない可能性もあり、依存することはできません。結果の入力欄は文字数やフォント（使用中の `font` 設定）によって、指定された文字数より狭くなったり広くなったりすることがあります。

これはユーザーがフィールドに入力することができる文字数の制限を設定するものではありません。これは一度に見える文字数をおよそ指定するだけです。入力データの長さの上限を設定するには、 `maxlength` 属性を使用してください。

email 入力欄の使用
------------

メールアドレスはウェブで最も頻繁に入力される文字列データです。ウェブサイトにログインするときに使われたり、情報をリクエストしたり、注文の確認をできるようにしたり、ウェブメールでつかったりなどです。そのような場合、 `email` 入力型は、ユーザーインターフェイスやメールアドレスの処理の構築作業を簡略化することができるので、ウェブ開発者の仕事をはるかに楽にすることができます。メールアドレスの入力欄を、 `type` の値を正しく `email` にして作成すれば、入力された文字列が少なくとも合法のメールアドレスである可能性がある但し書式であることを自動的に検証してくれます。これにより、ユーザーがアドレスを打ち間違えたり、無効なアドレスを入力したりすることを防ぐのに役立ちます。

しかし、指定された文字列が、実際に存在するメールアドレスであるかどうか、サイトのユーザーに一致するか、他の方法で利用できるかを保証するには不十分です。単に入力欄の値がメールアドレスの形式に沿っているかを保証するだけです。

**メモ:** ユーザーが HTML をその場面の裏でいじることができることを意識しておくことは極めて重要です。ですから、安全を目的として、サイトでクライアント側の値検証機能のみを使用しては*いけません*。何らかのセキュリティ上の問題を含む可能性がある値が提供されるトランザクションの場合は、いずれもサーバー側で値検証を行う*必要があります*。

### 単純な email 型の入力欄

現在、この要素を実装しているすべてのブラウザーが、これを基本的な検証機能がついた標準のテキスト入力欄として実装しています。しかし、仕様書ではブラウザーに自由度を許容しています。例えば、この要素はユーザーの端末に内蔵されたアドレス帳と統合され、メールアドレスをリストから選ぶことができるようにすることも可能です。多くの基本的なフォームでは、 `email` 入力欄は次のように実装されています。

```html
<input id="emailAddress" type="email" />
```

なお、妥当と判断されるのは空欄の場合と、単一の妥当な書式のメールアドレスが入力されている場合で、それ以外は妥当であるとは判断されません。 `required` 属性を追加することで、妥当な書式のメールアドレスのみが許容されるようになり、空欄の場合は妥当であるとは判断されなくなります。

### 複数のメールアドレスの許可

`multiple` 論理属性を追加することで、入力欄に複数のメールアドレスを受け付けるよう構成することができます。

```html
<input id="emailAddress" type="email" multiple />
```

入力欄は単一のメールアドレスが入力された時や、任意の数のメールアドレスをカンマ区切りで入力した場合、その中にホワイトスペース文字がある場合も有効として扱われるようになります。

**メモ:** `multiple` が使用されると、値を空欄にすることが許可されます。

`multiple` が指定された場合に有効な文字列の例をいくつか示します。

* `""`
* `"me@example"`
* `"me@example.org"`
* `"me@example.org,you@example.org"`
* `"me@example.org, you@example.org"`
* `"me@example.org,you@example.org, us@example.org"`

無効な文字列の例をいくつか示します。

* `","`
* `"me"`
* `"me@example.org you@example.org"`
### プレイスホルダー

フォームがどのような入力データを取るのかについての行内のヒントを提供すると、有益なことがあります。これはページのデザインでそれぞれの `<input>` に説明のラベルを付けることができない場合に特に重要になります。ここで**プレイスホルダー**が登場します。プレイスホルダーは、入力される `value` が取るべき値の形式を、有効な値の例を示すことで表現する値であり、 `value` が "" の時に入力欄の中に表示されます。入力欄にデータが入力されると、プレイスホルダーは非表示になり、入力欄が空欄になると、プレイスホルダーは再度表示されます。

ここで、 `email` 入力欄に `sophie@example.com` というプレイスホルダーを設定します。なお、入力欄の中身を操作すると、プレイスホルダーが非表示になったり再表示されたりします。

```html
<input type="email" placeholder="sophie@example.com" />
```

### 入力欄の寸法の制御

入力ボックスの物理的な長さだけでなく、入力された文字列自身の許容される最小長および最大長も制御することができます。

#### 物理的な入力欄の寸法

入力ボックスの物理的な寸法は、入力ボックスの `size` 属性を使用して制御することができます。これにより、入力ボックスが同時に表示することができる文字数を指定することができます。この例では `email` 入力ボックスは 15 文字分の幅になります。

```html
<input type="email" size="15" />
```

#### 要素の値の長さ

`size` は入力されたメールアドレスの長さ制限からは独立しており、フィールドを小さい空間に収めることができますが、より長いメールアドレス文字列が入力できます。入力されたメールアドレスの最小文字数は `minlength` 属性を使用して、同様に入力されたメールアドレスの最大文字数は `maxlength` を使用して設定することができます。

以下の例は 32 文字の幅で、内容は 3 文字より短くなったり、64 文字より長くなったりしないようにする必要があるメールアドレス入力ボックスを生成します。

```html
<input type="email" size="32" minlength="3" maxlength="64" />
```

### 既定のオプションの提供

#### 単一の既定値を value 属性を使用して提供

これまでどおり、 `value` 属性を設定することで `email` 入力欄に既定値を指定することができます。

```html
<input type="email" value="default@example.com" />
```

#### 提案値の提供

さらに、`list` 属性を指定することにより、既定の選択肢のリストを提供し、そこからユーザーが選択できるようにすることができます。これは、ユーザーがこれらの選択肢しか選べないようにするものではありませんが、よく使われるメールアドレスをより迅速に選択できるようになります。これは `autocomplete` へのヒントも提供します。 `list` 属性は `<datalist>` の ID を指定しており、これが 1 つの提案値あたり 1 つの `<option>` 要素を含んでいます。それぞれの `option` の `value` は、 email 入力ボックスに対する対応する提案値です。

```html
<input type="email" size="40" list="defaultEmails" />

<datalist id="defaultEmails">
  <option value="jbond007@mi6.defence.gov.uk"></option>
  <option value="jbourne@unknown.net"></option>
  <option value="nfury@shield.org"></option>
  <option value="tony@starkindustries.com"></option>
  <option value="hulk@grrrrrrrr.arg"></option>
</datalist>
```

`<datalist>` 要素とその `<option>` が配置されると、ブラウザーはメールアドレスの候補として指定された値を提供します。これは通常、候補を含むポップアップまたはドロップダウン・メニューとして表示されます。具体的な使い勝手はブラウザーによって異なるかもしれませんが、通常、編集ボックスをクリックすると、メールアドレスの候補がドロップダウンで表示されます。その後、ユーザーが文字を入力すると、リストがフィルタリングされ、一致する値のみが表示されます。ユーザーが選択するか、独自の値を入力するまで、文字が入力されるごとにリストが絞り込まれます。

検証
--

`email` 入力欄で利用できる内容の検証には 2 つのレベルがあります。まず、すべての `<input>` で提供される標準的なレベルの検証があります。これは、入力内容が有効なメールアドレスであるための要件を満たしているかどうかを自動的に確認するものです。しかし、もし特別なニーズがあるなら、それを満たすために追加のフィルタリングを追加するオプションもあります。

**警告:** HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用には*なりません*。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ（または大きすぎるデータ、間違った種類のデータなど）がデータベースに入力された場合に災害が発生するおそれがあります。

### 基本的な検証

ブラウザーは自動的に検証を行い、インターネットのメールアドレスの標準の書式に一致するテキストのみが入力ボックスに入力されることを保証します。ブラウザーは、以下の正規表現に相当するアルゴリズムを使用します。

```js
/^[a-zA-Z0-9.!#$%&'\*+/=?^\_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)\*$/;
```

フォーム検証の仕組みと、 `:valid` や `:invalid` 擬似クラスを使用して、現在の値が有効かどうかに基づいて入力欄のスタイルを設定する方法については、フォームデータの検証を参照してください。

**メモ:** 国際ドメイン名と HTML でのメールアドレスの検証については、仕様上の問題があることが知られています。詳しくは W3C bug 15489 を参照してください。

### パターンによる検証

入力されたメールアドレスを「メールアドレスのように見える任意の文字列」以上に制限する必要がある場合、 `pattern` 属性を使って、値が一致しなければ有効としない正規表現を指定することが可能です。 `multiple` 属性が指定されていた場合、カンマで区切られた値のリストの個々の項目がその正規表現に一致しなければなりません。

例えば、 Best Startup Ever 社の従業員が IT 部門に問い合わせるためのページを作るとします。簡単なフォームで、ユーザーが自分のメールアドレスと、助けを必要とする問題を説明するメッセージを入力する必要があります。ユーザーの入力したメールアドレスが有効なものであるばかりでなく、セキュリティ上の理由から、そのアドレスが会社の内部メールアドレスであることを確認する必要があります。

`email` の入力欄は、標準的なメールアドレスの検証に*加え*、指定された `pattern` も検証しますので、これは簡単に実装できます。以下の例を参照してください。
```

body {
  font: 16px sans-serif;
}

.emailBox {
  padding-bottom: 20px;
}

.messageBox {
  padding-bottom: 20px;
}

label {
  line-height: 22px;
}

label::after {
  content: ":";
}
```

```html
<form>
  <div class="emailBox">
    <label for="emailAddress">あなたのメールアドレス</label><br />
    <input
 id="emailAddress"
 type="email"
 size="64"
 maxlength="64"
 required
 placeholder="username@beststartupever.com"
 pattern=".+@beststartupever\.com"
 title="Best Startup Ever 社のメールアドレスのみを入力してください" />
  </div>

  <div class="messageBox">
    <label for="message">要望</label><br />
    <textarea
 id="message"
 cols="80"
 rows="8"
 required
 placeholder="靴がきつすぎるので、振り付けを忘れました。"></textarea>
  </div>
  <input type="submit" value="要望を送信" />
</form>
```

このフォーム (`<form>`) には、ユーザーのメールアドレスを入力する `email` 型の `<input>` が 1 つあり、 IT 部門へのメッセージを入力する `<textarea>`、そしてフォームの送信ボタンを生成する `"submit"` 型の `<input>` があります。それぞれのテキスト入力ボックスには、ユーザーに入力すべきことを伝える `<label>` があります。

メールアドレスの入力欄について詳しく見ていきましょう。 `size` および `maxlength` 属性は共に 64 に設定されており、64 文字分の電子メールアドレスのスペースを表示して、かつ実際に入力する文字数を最大 64 文字に制限しています。また、`required` 属性を指定して、有効なメールアドレスの入力を必須としています。

適切な `placeholder` が `username@beststartupever.com` と設定されており、どのような入力が有効であるかを示しています。この文字列は、メールアドレスが入力されるべきであり、それが会社の beststartupever.com のアカウントであるべきであることを示唆しています。これは、 `email` 型を使用すると、テキストがメールアドレスのような書式にすることに対する付加事項です。入力ボックスのテキストがメールアドレスでない場合、次のようなエラーメッセージが表示されます。

![メールアドレスが無効で、入力から「メールアドレスを入力してください」というポップアップが表示されるエラー状態になっているところ。](/ja/docs/Web/HTML/Element/input/email/enter-valid-email-address.png)

このままでは、少なくとも正当な電子メールアドレスを検証していることになります。しかし、もう一歩踏み込んで、メールアドレスが実際に "\_username\_@beststartupever.com" という形式であることを確認したいのです。そこで `pattern` を使用することにします。ここでは、 `pattern` を `.+@beststartupever.com` に設定しました。この正規表現は単純ですが、少なくとも 1 つの任意の文字、そして "@" の後にドメイン名 "beststartupever.com" が続く文字列を要求します。

これは、有効な電子メールアドレスの適切なフィルタリングにはほど遠いことに注意してください。" @beststartupever.com"（先頭のスペースに注意）や "@@beststartupever.com" のような有効ではない表現も許可してしまいます。しかし、ブラウザーは指定されたテキストに対して、標準のメールアドレスフィルターとカスタムパターンの両方を実行します。その結果、「これが有効な電子メールアドレスに似ていることを確認し、もしそうなら、それが beststartupever.com のアドレスであることも確認する」という検証を行うことになります。

`title` 属性を `pattern` と併用することをお勧めします。その場合、 `title` でパターンを説明する必要があります。つまり、他の情報ではなく、データがどのような形式を取るべきかを説明してください。これは、 `title` が検証エラーメッセージの一部として表示されたり、読み上げられたりする可能性があるからです。例えば、ブラウザーが「入力された値がフィールドに指定された書式と異なります。」というメッセージの後に、あなたが指定した `title` を表示するかもしれません。もし `title` が "メールアドレス" のようなものであれば、結果は「入力された値がフィールドに指定された書式と異なります。メールアドレス」というメッセージになり、あまり良いものではなくなります。

そのため、「Best Startup Ever 社のメールアドレスのみを入力してください」という文字列を指定しています。こうすることで、エラーメッセージ全体が「入力された値がフィールドに指定された書式と異なります。Best Startup Ever 社のメールアドレスのみを入力してください。」のようになります。

![有効なメールアドレスですが、入力がエラー状態になっており、入力からポップアウトで「入力された値がフィールドに指定された書式と異なります: Best Startup Ever 社のメールアドレスのみを入力してください」と表示されている様子。](/ja/docs/Web/HTML/Element/input/email/email-pattern-match-bad.png)

**メモ:** もし、検証用の正規表現を書いていて、うまく動作しない場合は、ブラウザーのコンソールを確認してください。問題を解決するための有用なエラーメッセージが表示されているかもしれません。

例
-

ここでは、 ID が `emailAddress` のメール入力があり、最大 256 文字までの長さが許可されています。入力ボックス自体は物理的に 64 文字の幅があり、フィールドが空のときは常にプレースホルダーとして `user@example.gov` というテキストが表示されます。さらに、 `multiple` 属性を使用すると、複数のメールアドレスの許可で説明したように、ユーザーがカンマで区切ってゼロ個以上の電子メールアドレスを入力できるようにボックスを構成しています。最後の仕上げとして、 `list` 属性は、 `<datalist>` その `<option>` が、ユーザーが選択できる値の候補を指定する `<datalist>` の ID を含んでいます。

それに加えて、 `<label>` 要素を使用してメールアドレスの入力ボックスのラベルを作成し、 `for` 属性で `emailAddress` という `<input>` 要素の ID を参照するようになっています。このように 2 つの要素を関連付けることで、ラベルをクリックすると input 要素にフォーカスが当たります。

```html
<label for="emailAddress">メールアドレス</label><br />
<input
 id="emailAddress"
 type="email"
 placeholder="user@example.gov"
 list="defaultEmails"
 size="64"
 maxlength="256"
 multiple />

<datalist id="defaultEmails">
  <option value="jbond007@mi6.defence.gov.uk"></option>
  <option value="jbourne@unknown.net"></option>
  <option value="nfury@shield.org"></option>
  <option value="tony@starkindustries.com"></option>
  <option value="hulk@grrrrrrrr.arg"></option>
</datalist>
```

技術的概要
-----

|  |  |
| --- | --- |
| **値** | メールアドレスを表す文字列、または空欄 |
| **イベント** | `change` および
 `input` |
| **対応している共通属性** | `autocomplete`,
 `list`,
 `maxlength`,
 `minlength`,
 `multiple`,
 `name`,
 `pattern`,
 `placeholder`,
 `readonly`,
 `required`,
 `size`,
 `type` |
| **IDL 属性** | `list` および `value` |
| **DOM インターフェイス** | `HTMLInputElement` |
| **メソッド** | `select()` |
| **暗黙の ARIA ロール** | `list` 属性がない場合:
 `textbox``list` 属性がある場合:
 `combobox (en-US)` |

仕様書
---

| Specification |
| --- |
| HTML Standard # email-state-(type=email) |

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

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

関連情報
----

* HTML フォームガイド
* `<input>`
* `<input type="tel">`
* `<input type="url">`
* 属性:
    + `list`
    + `minlength`
    + `maxlength`
    + `multiple`
    + `pattern`
    + `placeholder`
    + `readonly`
    + `size`
* CSS プロパティの互換性


標準メタデータ名 - HTML: ハイパーテキストマークアップ言語

標準メタデータ名
========

`<meta>` 要素を使用すると、文書のメタデータを名前と値の組み合わせで提供することができます。 `name` 属性でメタデータ名を指定し、 `content` 属性で値を指定します。

### HTML 仕様書で定義されている標準メタデータ名

HTML 仕様書は、以下の一連の標準メタデータ名を定義しています。

* `application-name`: ウェブページで動作しているアプリケーションの名前です。

**メモ:** ブラウザーはアプリケーションを識別するためにこれを使用することがあります。これはふつうアプリケーション名が含まれるものの、文書名や状態などの情報も含まれる `<title>` 要素とは異なります。

    + 単なるウェブサイトにはアプリケーション名を定義するべきではありません。
* `author`: この文書の著者です。
* `description`: ページの内容を短く正確に要約したものです。 Firefox や Opera など一部のブラウザーは、これをブックマークされたページの既定の説明として使用します。
* `generator`: このページを生成したソフトウェアの識別子です。
* `keywords`: ページのコンテンツに関連する語句で、カンマ区切りです。
* `referrer`: この文書からリクエストを送信するための HTTP の `Referer` ヘッダーの内容です。

| `no-referrer` | HTTP の `Referer` ヘッダーを送信しません。 |
| --- | --- |
| `origin` | 文書のオリジンを送信します。 |
| `no-referrer-when-downgrade` | 現在のページと同等の安全性の URL (HTTP(S)→HTTPS) にはリファラーとして URL 全体を送信しますが、安全性が低い URL (HTTPS→HTTP) には送信しません。これは既定の動作です。 |
| `origin-when-cross-origin` | 同一オリジンへのリクエストでは URL 全体 (引数を除く) を送信しますが、他の場合はオリジンのみ送信します。 |
| `same-origin` | 同一オリジンにはリファラーを送信しますが、オリジン間リクエストにはリファラーを含めません。 |
| `strict-origin` | 安全性が同等とみられる宛先 (HTTP(S)→HTTPS) に対しては、リファラーとして文書のオリジンのみを送信しますが、安全性が劣る宛先 (HTTPS→HTTP) には送信しません。 |
| `strict-origin-when-cross-origin` | 同一オリジンへのリクエストでは、 URL 全体 (引数を除く) を送信します。現在のページと安全性が同等であると見られる宛先 (HTTP(S)→HTTPS) にはオリジンを送信します。それ以外は、リファラーを送信しません。 |
| `unsafe-URL` | 同一オリジンまたはオリジン間リクエストで、 URL 全体 (引数を除く) を送信します。 |

**メモ:** `<meta name="referrer">` を (`document.write()` または `appendChild()` で) 動的に挿入すると、リファラーの動作が予測不能になります。

    + 相反する複数のポリシーが定義されている場合は、 `no-referrer` ポリシーが適用されます。
* `theme-color`: ユーザーエージェントがページの表示や周辺のユーザーインターフェースをカスタマイズするために使用すべき推奨色を示します。 `content` 属性には、有効な CSS の `<color>` が含まれます。
* `color-scheme`: 文書と互換性のある 1 つ以上の複数のカラースキームを指定します。
 ブラウザーは、この情報をユーザーのブラウザーや端末の設定と合わせて使用し、背景や前景、フォームコントロールやスクロールバーなど、あらゆるものに使用する色を決定します。 `<meta name="color-scheme">` の主な用途は、ライトモードとダークモードの互換性と優先順位を示すことです。
 `color-scheme` の `content`nt/meta#content) プロパティは次のうちの一つになります。

`normal`

この文書は配色を意識していないので、既定のカラーパレットを使って描画する必要があります。

[`light` | `dark`]+

この文書で対応している 1 つ以上の配色。同じ配色を 2 回以上指定しても、 1 回だけ指定した場合と同じ効果が得られる。複数の配色を指定すると、この文書では最初の配色が優先されるが、ユーザーが好む場合は 2 番目に指定された配色でもよいことを示す。

`only light`

この文書がライトモード*のみ*に対応していることを示します。背景色が明るく、前景色が暗い色です。仕様書によれば、 `only dark` は有効ではありません。ダークモードに対応していない文書を強制的にダークモードで描画すると、コンテンツが読めなくなる可能性があるからです。主要なブラウザーは、特に設定されていなければ既定でライトモードになります。

例えば、この文書はダークモードを推奨するが、ライトモードでも機能的にはレンダリングできることを示すためには、次のようにします。

```html
<meta name="color-scheme" content="dark light" />
```

これは、CSS の `color-scheme` プロパティで個々の要素が好みの配色と受け入れられる配色を指定できるのと同じように、文書レベルで機能します。スタイルは、 `prefers-color-scheme` という CSS メディア機能を使って、現在の配色に合わせることができます。
### 他の仕様書で定義されている標準メタデータ

CSS Device Adaptation 仕様書は、以下のメタデータ名を定義しています。

* `viewport`: このビューポートの初期の寸法の大きさについてのヒントを指定します。モバイル端末でのみ使用されます。

| 値 | 使用可能なサブ値 | 解説 |
| --- | --- | --- |
| `width` | 正の整数値、または `device-width` のテキスト | ウェブサイトを表示させるビューポートのピクセル単位の幅を定義します。 |
| `height` | 正の整数値、または `device-height` のテキスト | ビューポートの高さを定義します。どのブラウザーでも使用されていません。 |
| `initial-scale` | `0.0` と `10.0` の間の正の実数 | 端末の幅 (縦長画面で `device-width`、横長画面で `device-height`) とビューポートの寸法の比率を定義します。 |
| `maximum-scale` | `0.0` と `10.0` の間の正の実数 | 拡大縮小インする最大値を定義します。 `minimum-scale` 以上でなければ、動作は未定義です。ブラウザーの設定でこの規則を無視することができ、iOS 10 以降では既定で無視されます。 |
| `minimum-scale` | `0.0` と `10.0` の間の正の実数 | 拡大縮小レベルの最小値を定義します。 `maximum-scale` 以下でなければ、動作は未定義です。ブラウザーの設定でこの規則を無視することができ、iOS 10 以降では既定で無視されます。 |
| `user-scalable` | `yes` または `no` | `no` に設定された場合は、ユーザーがウェブページを拡大縮小することができなくなります。既定値は `yes` です。ブラウザーの設定でこの規則を無視することができ、iOS 10 以降では既定で無視されます。 |
| `viewport-fit` | `auto`, `contain`, `cover` | `auto` の値は、初期レイアウトのビューポートに影響を与えず、ウェブページ全体が表示されます。`contain` の値は、ディスプレイに内接する最大の長方形に合わせてビューポートが拡大されることを意味します。`cover` の値は、ビューポートが端末のディスプレイいっぱいになるように縮小されることを意味します。重要なコンテンツがディスプレイの外に出てしまわないように、 safe-area-inset-\* 変数を使用することを強くお勧めします。 |

**メモ:** この宣言は標準化されていませんが、事実上の優位性から、ほとんどのモバイルブラウザーで尊重されています。

    + 既定値は、端末やブラウザーによって異なる場合があります。
    + Firefox for Mobile でのこの宣言については、こちらの記事を参照してください。

##### ビューポートの拡大縮小についてのアクセシビリティの考慮

`user-scalable` を `no` に設定して拡大縮小機能を無効にすると、弱視の人がページの内容を読んだり理解したりすることができなくなります。

* MDN WCAG を理解する、ガイドライン 1.4 の説明
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
### その他のメタデータ名

WHATWG Wiki の MetaExtensions のページには、まだ正式に受け入れられていない標準外のメタデータの名前が多数掲載されています。しかし、ここに掲載されている名前の中には、以下のように、すでに実際によく使われているものもあります。

* `creator`: この文書の作成者の名前で、組織や機関などです。複数ある場合は、複数の `<meta>` 要素を使用する必要があります。
* `googlebot`: `robots` と同様ですが、Googlebot (Google のインデックス作成用クローラー) のみが従います。
* `publisher`: この文書の発行者の名前です。
* `robots`: 協力的なクローラー、つまり「ロボット」がページに対して使用すべき動作です。以下の値をカンマで区切ったリストです。

| 値 | 解説 | 使用者 |
| --- | --- | --- |
| `index` | ロボットがこのページをインデックスすることを許可します (既定値)。 | すべて |
| `noindex` | ロボットにこのページをインデックスしないよう要求します。 | すべて |
| `follow` | ロボットがこのページ上のリンクをたどることを許可します (既定値)。 | すべて |
| `nofollow` | ロボットにこのページ上のリンクをたどらないよう要求します。 | すべて |
| `all` | `index, follow` と同等です。 | Google |
| `none` | `noindex, nofollow` と同等です。 | Google |
| `noarchive` | 検索エンジンにこのページの内容をキャッシュしないよう要求します。 | Google, Yahoo, Bing |
| `nosnippet` | 検索エンジンの結果でこのページの説明の表示を抑制します。 | Google, Bing |
| `noimageindex` | このページをインデックスされた画像の参照ページとして表示しないよう要求します。 | Google |
| `nocache` | `noarchive` と同等です。 | Bing |

**メモ:** 協力的なロボットだけがこのルールに従っています。メールアドレスの自動収集プログラムを抑制できるとは期待しないでください。

    + ロボットがこれらのルールを読むためには、ページにアクセスする必要があります。帯域幅の消費を防ぐには、 *robots.txt* ファイルを使用してください。
    + ページを削除したい場合、 `noindex` で行うことができますが、ロボットがそのページに再びアクセスした後のことになります。 `robots.txt` ファイルが再訪問を妨害していないことを確認してください。
    + 値によっては互いに排他的なものがあります。例えば `index` と `noindex`、 `follow` と `nofollow` などです。このような場合、ロボットの動作は未定義であり、ロボット間で異なる可能性があります。
    + Google、Yahoo、Bing など一部のクローラーロボットでは、 HTTP ヘッダーの X-Robots-Tag で提供された同じ値に対応しているものがあります。これにより、画像などの HTML 以外の文書でもこれらの規則を使用することができます。
仕様書
---

| Specification |
| --- |
| HTML Standard # standard-metadata-names |
| Referrer Policy # referrer-policy-delivery-meta |

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

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


theme-color - HTML: ハイパーテキストマークアップ言語

theme-color
===========

**`theme-color`** の値は `<meta>` 要素の `name` 属性において、ユーザーエージェントがページやその周辺のユーザーインターフェイスの表示をカスタマイズするために使用すべき推奨色を示します。指定された場合、 `content` 属性には有効な CSS の `<color>` が含まれていなければなりません。

例
-

```html
<meta name="theme-color" content="#4285f4" />
```

次の画像は、上記の `<meta>` 要素が、 Android モバイル端末上で動作する Chrome で表示された文書に与える影響を示しています。

![theme-color を使用した影響を表す図](/ja/docs/Web/HTML/Element/meta/name/theme-color/theme-color.png)
*画像の出典: Icons & Browser Colors より、Google が作成・共有し Creative Commons 4.0 Attribution License に記載された条件に従って使用されています。*

`media` 属性で、メディア種別やクエリーを指定することができ、メディアの条件が真である場合にのみ、色が設定されます。例えば、以下のようになります。

```html
<meta
 name="theme-color"
 media="(prefers-color-scheme: light)"
 content="white" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
```

仕様書
---

| Specification |
| --- |
| HTML Standard # meta-theme-color |

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

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


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

manifest
========

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`manifest`** は `<html>` 要素の属性で、ページ読み込みの初期段階でダウンロードされる、アプリケーションキャッシュマニフェストの URL を指定します。

**メモ:** マニフェストベースのキャッシュ機構は非推奨です。代わりにサービスワーカークリプトを使用してください。

マニフェスト属性はページ読み込みの初期段階でのみ効果を発揮するため、通常の DOM インターフェイスで変更しても効果はなく、代わりに `Window.applicationCache` インターフェイスを使用してください。

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

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

関連情報
----

* `Window.applicationCache`
* サービスワーカー API


<script>: type 属性 - HTML: ハイパーテキストマークアップ言語

<script>: type 属性
=================

**`type`** は `<script>` 要素の属性で、その要素で表されるスクリプトの種類（クラシックスクリプト、JavaScript モジュール、インポートマップ、データブロック）を示します。

値
-

この属性の値は、スクリプトが表現するデータの種類を示し、以下のいずれかの値を取ります。

**属性が未設定（既定値）、空文字列、JavaScript の MIME タイプ**

 スクリプトが「クラシックスクリプト」であること、JavaScript コードを保持していることを示します。
 このスクリプトが JavaScript コードを参照している場合、MIME タイプを指定するのではなく、この属性を省略することを推奨します。
 JavaScript の MIME タイプは IANA media types specification に掲載されています。

`module`

 コードを JavaScript モジュールとして扱います。
 スクリプトコンテンツの処理は延期されます。
 `charset` および `defer` 属性の影響を受けません。
 `module` の利用についての情報は、 JavaScript モジュールをご覧ください。クラシックスクリプトとは異なり、モジュールスクリプトはオリジンをまたいで読み取る場合、CORS プロトコルを使用する必要があります。

`importmap`

 この値は、要素の本体にインポートマップが格納されていることを示します。
 インポートマップ JSON オブジェクトで、開発者が JavaScript モジュールをインポートする際に、ブラウザーがモジュール指定子を解決する方法を制御するために使用できます。

**その他の値**

 このタグで埋め込んだコンテンツを、ブラウザーによって処理されないデータブロックとして扱います。
 開発者はデータブロックを記述するために、 JavaScript の MIME タイプではない有効な MIME タイプを使用しなければなりません。
 他の属性は、`src` 属性も含めてすべて無視されます。

**メモ:** 以前のブラウザーでは、この種類は埋め込んだり（`src` 属性によって）インポートしたりするコードのスクリプト言語を識別していました。

仕様書
---

#### No specification found

No specification data found for `html.elements.script.type`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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


<script type="importmap"> - HTML: ハイパーテキストマークアップ言語

<script type="importmap">
=========================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`importmap`** の値を `<script>` 要素の `type` 属性に設定すると、要素の本体がインポートマップであることを示します。

 インポートマップは、JavaScript モジュールをインポートする際に、ブラウザがモジュール指定子を解決する方法を開発者が制御できるようにするための JSON オブジェクトです。これは、`import` 文や `import()` 演算子でモジュール指定子として使用されたテキストと、指定子を解決するときにテキストを置き換える対応する値との間の対応表を提供します。
 JSON オブジェクトは、JSON のインポートマップ表現に適合している必要があります。

 インポートマップは、静的インポートや動的インポートのモジュール指定子を解決するために使用されるため、マップ内で宣言された指定子を使用してモジュールをインポートする `<script>` 要素の前に宣言し、処理する必要があります。
 インポートマップは `import` 文や `import()` 演算子にあるモジュール指定子のみに適用され、 `<script>` 要素の `src` 属性のパスには適用されないことに注意をしてください。

詳しい情報は、JavaScript モジュールガイドのインポートマップを使用したモジュールのインポートの節を参照してください。

構文
--

```html
<script type="importmap">
 // JSON オブジェクト定義インポート
</script>
```

`src`、`async`、`nomodule`、`defer`、`crossorigin`、`integrity`、`referrerpolicy` の各属性は指定することはできません。

文書内のインライン定義された最初のインポートマップのみが処理され、それ以降のインポートマップや外部インポートマップは無視されます。

### 例外

`TypeError`

インポートマップの定義が JSON オブジェクトでない、`importmap` のキーは定義されているがその値が JSON オブジェクトでない、`scopes` のキーは定義されているが、その値が JSON オブジェクトでない。

ブラウザーは、インポートマップの JSON がインポートマップスキーマに適合していない他の場合、コンソール警告を生成します。

 処理されない `type="importmap"` を持つスクリプト要素では `error` イベントが発行されます。
 これは例えば、インポートマップが処理されるときにモジュールの読み込みが既に始まっている場合や、複数のインポートマップがページ内で定義されている場合に発生することがあります。

解説
--

JavaScript モジュールをインポートする場合は、 `import` 文と `import()` 演算子のどちらであっても、インポートするモジュールを示す「モジュール指定子」があります。
 ブラウザーは、モジュールをインポートするために、この指定子を絶対的な URL に解決できなければなりません。

例えば、以下の記述では、文書のベース URL からの相対パスであるモジュール指定子 `"./modules/shapes/square.js"` と絶対 URL であるモジュール指定子 `"https://example.com/shapes/circle.js"` から要素をインポートします。

```js
import { name as squareName, draw } from "./modules/shapes/square.js";
import { name as circleName } from "https://example.com/shapes/circle.js";
```

インポートマップにより、開発者はモジュール指定子に（ほとんど）好きなテキストを指定することができます。対応表は、モジュール指定子が解決されたときにテキストを置き換える、対応する値を提供します。

### ベアモジュール

下記のインポートマップは `imports` キーを定義しており、`square` と `circle` というプロパティを持つ「モジュール指定マップ」を持ちます。

```html
<script type="importmap">
 {
 "imports": {
 "square": "./module/shapes/square.js",
 "circle": "https://example.com/shapes/circle.js"
 }
 }
</script>
```

このインポートマップを使えば、上記と同じモジュールをインポートすることができますが、モジュール指定子には「ベアモジュール」を使用します。

```js
import { name as squareName, draw } from "square";
import { name as circleName } from "circle";
```

### パス接頭辞のマッピング

 モジュール指定子のマップキーは、モジュール指定子のパスの接頭辞を割り当て直すために使用することもできます。
 この場合、プロパティと割り当てられたパスは、どちらも末尾にフォワードスラッシュ (`/`) を保有する必要があることに注意してください。

```html
<script type="importmap">
 {
 "imports": {
 "shapes/": "./module/shapes/",
 "othershapes/": "https://example.com/modules/shapes/"
 }
 }
</script>
```

そして、次のように circle モジュールをインポートすることができました。

```js
import { name as circleName } from "shapes/circle.js";
```

### モジュール指定された対応表のキーに含まれるパス

 モジュール指定子のキーは単一の単語名（「素の名前」）である必要はありません。
 また、パス区切り文字を含めたり、パス区切り文字で終わったり、絶対 URL であったり、`/`、`./`、`../` で始まる相対 URL パスであったりすることも可能です。

```json
{
  "imports": {
    "modules/shapes/": "./module/src/shapes/",
    "modules/square": "./module/src/other/shapes/square.js",
    "https://example.com/modules/square.js": "./module/src/other/shapes/square.js",
    "../modules/shapes/": "/modules/shapes/"
  }
}
```

モジュール指定子マップに一致する可能性のある複数のモジュール指定子キーがある場合、最も詳細なキー（つまり、より長いパス/値を持つもの）が選択されます。

 モジュール指定子 `./foo/../js/app.js` は照合される前に `./js/app.js` に解決されるでしょう。
 これは、モジュール指定子のキーが `./js/app.js` であれば、それらがまったく同じでないとしても、モジュール指定子と一致することを意味しています。

### スコープ化されたモジュール指定子の対応表

 scopes` キーを使って、モジュールをインポートするスクリプトが特定の URL パスを格納した場合にのみ使用される対応付けを提供することができます。
 読み込むスクリプトの URL が指定されたパスに一致する場合、そのスコープに関連付けられたマッピングが使用されます。
 これにより、インポートを行うコードによって異なるバージョンのモジュールを使用することができます。

例えば、下記の地図は、ローディングモジュールの URL にパスが記載されている場合にのみ、スコープ付きのマップを使用します。"/modules/customshapes/" というパスが含まれるローディングモジュールの場合のみ、スコープ付きマップが使用されます。

```html
<script type="importmap">
 {
 "imports": {
 "square": "./module/shapes/square.js"
 },
 "scopes": {
 "/modules/customshapes/": {
 "square": "https://example.com/modules/shapes/square.js"
 }
 }
 }
</script>
```

 複数のスコープがリファラー URL に一致した場合、最も詳細なスコープパスが使用されます（スコープキー名の中で最も長い名前のものが使用されます）。
 ブラウザーは、一致する指定子がない場合は次に最も詳細なスコープパスに代替され、最終的には `imports` キーのモジュール指定子マップに代替されます。

JSON のインポートマップ表現
----------------

以下は、インポートマップの JSON 表現に関する「公式な」定義です。

インポートマップは有効な JSON オブジェクトでなければならず、最大で 2 つのオプションキーを定義することができます。`import` と `scope` です。それぞれのキーの値はオブジェクトでなければならず、空でも構いません。

`imports` 省略可

値はモジュール指定子マップで、 `import` 文や `import()` 演算子に現れるかもしれないモジュール指定子テキストと、指定子が解決されたときにそれを置き換えるテキストとの間のマッピングを提供するものです。

これは `scopes` パスの URL が一致しない場合や、一致する `scopes` パスのモジュール指定子マップにモジュール指定子と一致するキーが格納されていない場合に、一致するモジュール指定子を探すために検索される予備的な対応表になります。

`<モジュール指定子マップ>`

「モジュール指定子マップ」は有効な JSON オブジェクトで、*キー* はモジュールをインポートする際にモジュール指定子内に存在する可能性のあるテキスト、対応する *値* はモジュール指定子をアドレスに解決する際にこのテキストを置き換える URL やパスです。

モジュール指定子マップの JSON オブジェクトは、以下の条件を保有します。

* どのキーも空であってはなりません。
* 値はすべて文字列で、有効な絶対 URL か、`/`, `./`, `../` で始まる有効な URL 文字列を定義する必要があります。
* キーが `/` で終わっている場合、対応する値も `/` で終わらなければなりません。
 末尾に `/` を持つキーは、モジュールのアドレスを割り当てられた（または再割り当てされた）ときの接頭辞として使用することができます。
* オブジェクトプロパティの順序は関係ありません。複数のキーがモジュール指定子に一致する場合、最も詳細なキーが使用されます（言い換えれば、指定子 "olive/branch/" は "olive/" の前に一致することになります）。

`scopes` 省略可

スコープはパス固有のモジュール指定子マップを定義し、モジュールをインポートするコードのパスに依存したマップの選択を可能にします。

scopes オブジェクトは有効な JSON オブジェクトで、各プロパティは `<scope key>` で、これは URL パスであり、対応する値は `<モジュール指定子マップ>` です。

 モジュールをインポートしているスクリプトの URL が `<scope key>` のパスに一致する場合、そのキーに関連付けられた `<モジュール指定子マップ>` の値が最初に指定子を一致するかどうか調べます。
 一致するスコープキーが複数ある場合は、最も詳細な/深いスコープパスに関連付けられた値が、最初に一致するモジュール指定子であるかどうかを調べます。
 一致するスコープ付きモジュール指定子マップのいずれにも一致するモジュール指定子キーがない場合には、`imports` にあるフォールバックモジュール指定子マップが使用されます。

なお、スコープによってアドレスの解決方法が変わることはありません。相対アドレスは常にインポートマップのベース URL に解決されます。

仕様書
---

| Specification |
| --- |
| HTML Standard # import-map |

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

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

関連情報
----

* JavaScript モジュール > インポートマップを使用したモジュールのインポート
* HTML の `<script>` 要素の `type` 属性
* `import` 文
* `import()` 演算子


<script type="speculationrules"> - HTML: ハイパーテキストマークアップ言語

<script type="speculationrules">
================================

**`speculationrules`** の値を `<script>` 要素の `type` 属性に設定すると、要素の本体に投機ルールが入っていることを示します。

投機ルールは JSON 構造の形式をとり、どのリソースがブラウザーによって先読みまたは先行描画されるべきかを決定します。これは投機ルール API (en-US) の一部です。

構文
--

```html
<script type="speculationrules">
 // ルールを定義する JSON オブジェクト
</script>
```

**メモ:** `src`, `async`, `nomodule`, `defer`, `crossorigin`, `integrity`, `referrerpolicy` の各属性は指定することができません。

### 例外

`TypeError`

投機ルール定義が有効な JSON オブジェクトではない場合。

解説
--

`<script type="speculationrules">` 要素には、投機ルールを定義する有効な JSON 構造が格納されていなければなりません。次の例では、prefetch と prerender の別個のルールを表示させています。

```html
<script type="speculationrules">
 {
 "prefetch": [
 {
 "source": "list",
 "urls": ["next.html", "next2.html"],
 "requires": ["anonymous-client-ip-when-cross-origin"],
 "referrer\_policy": "no-referrer"
 }
 ]
 }
</script>
```

```html
<script type="speculationrules">
 {
 "prerender": [
 {
 "source": "list",
 "urls": ["next3.html", "next4.html"]
 }
 ]
 }
</script>
```

### 投機ルールの JSON 表現

JSON 構造は最上位のレベルに 1 つ以上のフィールドを格納し、それぞれが投機ルールを定義するアクションを表します。対応しているアクションは以下の通りです。

`"prefetch"` 省略可

関連する文書レスポンス本体がダウンロードされ、それらの文書に移動したときのパフォーマンスが大幅に改善されるようにする、将来的なナビゲーションの可能性のあるルール。ページが参照するサブリソースはどれもダウンロードされないことに注意してください。

`"prerender"` 省略可

関連文書が完全にダウンロードされ、レンダリングされ、不可視のタブに読み込まれるべき、将来起こりうるナビゲーションのルール。これには、すべてのサブリソースを読み込むこと、すべての JavaScript を実行すること、さらにはサブリソースを読み込んで JavaScript によって開始されるデータ フェッチを実行することが含まれます。これらの文書に移動すると、移動は即座に行われ、大幅なパフォーマンスの向上につながります。

**メモ:** 先読みと先読みを効果的に使用する方法の詳細については投機ルール API (en-US) のメインページを参照してください。

各アクションフィールドは配列を格納し、配列は 1 つ以上のオブジェクトを格納します。各オブジェクトには、URL と関連の引数の集合を定義する単一のルールが格納されます。

具体的には、各オブジェクトは以下のプロパティを格納することができます。

`"source"`

ルールが適用される URL のソースを表す文字列。取りうる値は以下のとおりです。

`"list"`

URL は特定のリストから決まります。

`"urls"`

ルールを適用する URL の一覧を表す文字列の配列。これらは絶対 URL にも相対 URL にもなります。相対 URL は、文書のベース URL からの相対 URL （文書内のインライン URL の場合）あるいは外部リソース URL からの相対 URL （外部から取得した URL の場合）で解釈されます。

`"requires"` 省略可

ルールを解釈するブラウザーが持つ機能を表す文字列の配列で、 指定した URL にルールを適用する場合に利用できます。

**警告:** 指定した条件を満たせないブラウザーでは、投機ルール API (en-US) に対応していても、先読みは自動的に失敗します。

取りうる値は次の通りです。

`"anonymous-client-ip-when-cross-origin"`

`"prefetch"` のみ オリジン間先読みリクエストが発行された場合に、ユーザーエージェントがクライアントの IP アドレスをオリジンのサーバーから見えないようにできる場合にのみ、ルールが一致するように指定します。これがどのように動作するのかは、ブラウザー実装に依存します。例えば、次のようになります。

* Chrome の実装では、 Google 自身が所有するプロキシーを使って IP アドレスを隠蔽しているため、既定値では Google が制御するリファラーに対してのみ動作します（この場合、出力先の URL を Google に送信することはさらなるプライバシー漏洩にはならないため）。 Google が所有していないサイトで使用する場合、これを含むルールは `chrome://settings/preloading` で "Enhanced preloading" をオンにしているユーザーにのみ一致します。
* 他の Chromium ベースのブラウザーは、自分自身で解決策を提供する必要があります。対象とするすべてのブラウザーで十分にテストすることをお勧めします。
* 将来の Safari 実装では、 iCloud Private Relay のようなものを使用する可能性があります。
* 将来の Firefox 実装では、Mozilla VPN 製品をベースにしたものを使用するかもしれません。

`"referrer_policy"` 省略可

ルールで指定された URL をリクエストするときに使用する特定のリファラーポリシー文字列を表します - 使用可能な値については `Referrer-Policy` を参照してください。この目的は、参照するページが（既定で、または `Referrer-Policy` を使用して）既に保有しているポリシーよりも、投機的リクエストに特定の厳しいポリシーを設定することを許可することです。投機ルールで設定された緩いポリシーは、参照するページで設定された厳しいポリシーを上書きすることはありません。

**メモ:** 投機ルールは `<script>` 要素を使用するので、サイトに `Content-Security-Policy` の `script-src` ディレクティブが指定されている場合は、明示的に許可する必要があります。これは `"inline-speculation-rules"` 値を hash- または nonce-source で追加することで行われます。

### さらなる例

先の例では、先読みと先行描画に定義された別個の投機ルールを表示させました。一連のルールで両方を定義することも可能です。

```html
<script type="speculationrules">
 {
 "prefetch": [
 {
 "source": "list",
 "urls": ["next.html", "next2.html"],
 "requires": ["anonymous-client-ip-when-cross-origin"],
 "referrer\_policy": "no-referrer"
 }
 ],
 "prerender": [
 {
 "source": "list",
 "urls": ["next3.html", "next4.html"]
 }
 ]
 }
</script>
```

また、単一の HTML ファイルに複数の一連のルールを含めることも可能です。

```html
<script type="speculationrules">
 {
 "prefetch": [
 {
 "source": "list",
 "urls": ["next.html", "next2.html"],
 "requires": ["anonymous-client-ip-when-cross-origin"],
 "referrer\_policy": "no-referrer"
 }
 ]
 }
</script>
<script type="speculationrules">
 {
 "prerender": [
 {
 "source": "list",
 "urls": ["next3.html", "next4.html"]
 }
 ]
 }
</script>
```

そして、単一の結果集合に複数のルールを設定することも可能です。

```js
<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["one.html"]
    },
    {
      "source": "list",
      "urls": ["two.html"]
    }
  ]
}
</script>
```

### 動的なルール挿入

下記は、投機ルールを検出し、対応している場合は、 JavaScript を介して動的に先行描画の投機ルールを追加する機能の例です。

```js
if (
  HTMLScriptElement.supports &&
  HTMLScriptElement.supports("speculationrules")
) {
  const specScript = document.createElement("script");
  specScript.type = "speculationrules";
  const specRules = {
    prerender: [
      {
        source: "list",
        urls: ["/next.html"],
      },
    ],
  };
  specScript.textContent = JSON.stringify(specRules);
  console.log("added speculation rules to: next.html");
  document.body.append(specScript);
}
```

この先行描画のでものページでは、その様子を見ることができます。

仕様書
---

| Specification |
| --- |
| Speculation Rules # speculation-rules-script |

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

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

関連情報
----

* Prerender pages in Chrome for instant page navigations on developer.chrome.com (2023)
* 投機的な読み込み (en-US)
* 投機ルール API (en-US)


ブロック整形コンテキスト - 開発者ガイド

ブロック整形コンテキスト
============

**ブロック整形コンテキスト** (block formatting context, BFC) は、ウェブページにおける CSS の視覚的なレンダリングの一部です。ブロックボックスのレイアウトが行われ、浮動が他の要素と相互作用する領域です。

ブロック整形コンテキストは、以下のうちの少なくとも一つから生成されます。

* 文書のルート要素 (`<html>`)
* 浮動要素 (`float` が `none` 以外である要素)
* 絶対位置指定の要素 (`position` が `absolute` または `fixed` である要素)
* インラインブロック (`display``: inline-block` である要素)
* 表のセル (`display``: table-cell` を持つ要素。これは HTML の表のセルの既定値です)
* 表のキャプション (`display``: table-caption` を持つ要素。HTMLの、表のキャプションの既定値です)
* `display``: table`, `table-row`, `table-row-group`, `table-header-group`, `table-footer-group` (つまりそれぞれ HTML の表、表の行、表の本体、表のヘッダー、表のフッターの既定値), `inline-table` のついた要素によって暗黙的に生成された無名の表のセル。
* `overflow` の値が `visible` 以外であるブロック要素
* `display``: flow-root`
* `contain``: layout`, `content`, `paint` の付いた要素
* フレックスアイテム (`display``: flex` または `inline-flex` である要素の直接の子要素)、フレックスでもグリッドでも表でもない場合
* グリッドアイテム (`display``: grid` または `inline-grid` である要素の直接の子要素)、フレックスでもグリッドでも表でもない場合
* 段組みコンテナー (`column-count` または `column-width` が `auto` ではない要素、 `column-count: 1` の要素も含む)
* `column-span``: all` は、 `column-span: all` の要素が段組みコンテナーに含まれていなくても、常に新たな整形コンテキストを生成します (仕様変更, Chrome bug)。

整形コンテキストはレイアウトに影響を与えますが、通常はレイアウトを変更するのではなく、位置決めと浮動要素の解消のために新しいブロック整形コンテキストを作成します。これは、新しいブロック整形コンテキストを確立する要素が次のようになるからです。

* 内部の浮動要素を収めます。
* 外部の浮動要素を追いやります。
* マージンの相殺を抑止します。

**メモ:** フレックス／グリッドコンテナー (`display`: flex/grid/inline-flex/inline-grid) は新しいフレックス／グリッド整形コンテキストを確立します。これは、レイアウト以外はブロック整形コンテキストに類似しています。フレックス／グリッドコンテナーの中に利用できる浮動子要素はありませんが、外部の浮動要素を除外したり、マージンの折りたたみを抑制したりすることはできます。

例
-

### 内部の浮動要素を収める

浮動小数点コンテンツと横に並んだコンテンツの高さを同じにします。

新しいBFC を作成する効果を見るために、これらのいくつかを見てみましょう。

以下の例では、`border`が適用された `<div>` の中に浮動要素があります。その `<div>` のコンテンツは浮動要素の横に並んだ状態になっています。浮動要素のコンテンツは横に並んだコンテンツよりも高さがあるため、`<div>` の境界線が浮動要素を貫通してしまいます。フロー内とフローの外のガイドで説明しているように、浮動要素がフローから外れたので、 `<div>` の `background` と `border` には浮動要素はなく、コンテンツだけが保持されています。

**`overflow: auto` の使用**

`overflow: auto` を設定したり、初期値である `overflow: visible` 以外の値を設定すると、浮動要素を含む新しい BFC を作成することができます。これで、`<div>` がレイアウトの中のミニレイアウトになります。子要素はすべてこの中に含まれます。

新しい BFC を作成するために `overflow` を使用することの問題点は、`overflow` プロパティが、はみ出したコンテンツをどのように処理したいかをブラウザーに指示するためのものであることです。このプロパティを純粋に BFC を作成するために使用すると、不要なスクロールバーやクリップドシャドウが返されることがあるようです。さらに、将来的に開発者が読解できない可能性もあります。なぜそのために `overflow` を使用したのかがわからないかもしれないからです。もし `overflow` を使用するのであれば、コードにコメントをつけて説明するとよいでしょう。

**`display: flow-root` の使用**

より新しい値の `display` を使用すると、他の問題となりうる副作用なしに、新しいBFCを作成することができます。コンテナブロックに `display: flow-root` を使用すると、新しい BFC が作成されます。

`display: flow-root;` を `<div>` に指定すると、コンテナーの中にあるすべてのものが、そのコンテナーのブロック整形コンテキストに参加し、浮動要素が要素の下部からはみ出ることはありません。

`flow-root` という値は、`root` 要素（ブラウザーでは `<html>` 要素）のように、その中にフローレイアウトのための新しいコンテキストを作成することを理解すれば、理にかなったものです。

#### HTML

```html
<section>
  <div class="box">
    <div class="float">浮動ボックスです。</div>
    <p>コンテナー内のコンテンツです。</p>
  </div>
</section>
<section>
  <div class="box" style="overflow:auto">
    <div class="float">浮動ボックスです。</div>
    <p><code>overflow:auto</code> のコンテナー内のコンテンツです。</p>
  </div>
</section>
<section>
  <div class="box" style="display:flow-root">
    <div class="float">浮動ボックスです。</div>
    <p><code>display:flow-root</code> のコンテナー内のコンテンツです。</p>
  </div>
</section>
```

#### CSS

```css
section {
  height: 150px;
}
.box {
  background-color: rgb(224, 206, 247);
  border: 5px solid rebeccapurple;
}
.box[style] {
  background-color: aliceblue;
  border: 5px solid steelblue;
}
.float {
  float: left;
  width: 200px;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid black;
  padding: 10px;
}
```

#### 結果

### 外部の浮動要素を除外する

以下の例では、 `display:flow-root` と浮動要素を使用して 2 列のレイアウトを実装しています。これは、新しい BFC を確立する通常のフロー内の要素が、その要素自身と同じブロック整形コンテキストにあるどの浮動要素のマージンボックスにも重ならないためです。

#### HTML

```html
<section>
  <div class="float">外部の浮動要素の大きさを変えてみてください</div>
  <div class="box"><p>通常</p></div>
</section>
<section>
  <div class="float">外部の浮動要素の大きさを変えてみてください</div>
  <div class="box" style="display:flow-root">
    <p><code>display:flow-root</code></p>
    <p></p>
  </div>
</section>
```

#### CSS

```css
section {
  height: 150px;
}
.box {
  background-color: rgb(224, 206, 247);
  border: 5px solid rebeccapurple;
}
.box[style] {
  background-color: aliceblue;
  border: 5px solid steelblue;
}
.float {
  float: left;
  overflow: hidden; /\* required by resize:both \*/
  resize: both;
  margin-right: 25px;
  width: 200px;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.75);
  border: 1px solid black;
  padding: 10px;
}
```

#### 結果

inline-block で width:<percentage> を使用するよりも、この場合は右側の div の幅を指定する必要がありません。

なお、最近の CSS では、フレックスボックスの方が効率的に複数列のレイアウトを搭載することができます。

### マージンの相殺

新しい BFC を作成すると、隣接する 2 つの div 間のマージンの相殺を避けることができます。

#### HTML

```html
<div class="blue"></div>
<div class="red-outer">
  <div class="red-inner">red inner</div>
</div>
```

#### CSS

```css
.blue,
.red-inner {
  height: 50px;
  margin: 10px 0;
}

.blue {
  background: blue;
}

.red-outer {
  overflow: hidden;
  background: red;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Display Module Level 3 # block-formatting-context |

関連情報
----

* `float`, `clear`
* CSS の主要概念:
    + CSS の構文
    + アットルール
    + コメント
    + 詳細度
    + 継承
    + ボックスモデル
    + レイアウトモード
    + 視覚整形モデル
    + マージンの相殺
    + 値
        - 初期値
        - 計算値
        - 使用値
        - 実効値
    + 値の定義構文
    + 一括指定プロパティ
    + 置換要素


Challenge solutions - 開発者ガイド

Challenge solutions
===================

このページは、 CSS Getting Started チュートリアルにあるチャレンジの解答例です。これ以外の解答も考えられます。以下の章名はチュートリアルページのタイトルと一致します。

CSS をなぜ用いるか
-----------

### Colors

Challenge

Without looking up a reference, find five more color names that work in your stylesheet.

Solution

CSS supports common color names like `orange`, `yellow`, `blue`, `green`, or `black`. It also supports some more exotic color names like `chartreuse`, `fuschia`, or `burlywood`. See CSS Color value for a complete list as well as other ways of specifying colors.

どのように CSS は動作するのか
-----------------

### DOM inspector

Challenge

In DOMi, click on a STRONG node. Use DOMi's right-hand pane to find out where the node's color is set to red, and where its appearance is made bolder than normal text.

Solution

In the menu above the right-hand pane, choose **CSS Rules**. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the **font-weight** property as `bolder`; your stylesheet defines the **color** property as `red`.

接続と継承
-----

### Inherited styles

Challenge

Change your stylesheet so that only the red letters are underlined.

Solution

Move the declaration for underlining from the rule for `<p>` to the one for `<strong>`. The resulting file looks like this:

```css
p {
  color: blue;
}
strong {
  color: orange;
  text-decoration: underline;
}
```

Later sections of this tutorial describe style rules and declarations in greater detail.

セレクター
-----

### Second paragraph blue

Challenge

Without changing your HTML file, add a single rule to your CSS file that keeps all the initial letters the same color as they are now, but makes all the other text in the second paragraph blue.

Solution

Add a rule with an ID selector of `#second` and a declaration `color: blue;`, as shown below:

```css
#second {
  color: blue;
}
```

A more specific selector, `p#second` also works.

### Both paragraphs blue

Challenge

Now change the rule you have just added (without changing anything else), to make the first paragraph blue too.

Solution

Change the selector of the new rule to be a tag selector using `p`:

```css
p {
  color: blue;
}
```

The rules for the other colors all have more specific selectors, so they override the blue of the paragraph.

読みやすい CSS
---------

### Commenting out a rule

Challenge

Comment out part of your stylesheet, without changing anything else, to make the very first letter of your document red.

Solution

One way to do this is to put comment delimiters around the rule for `.carrot`:

```css
/\*
.carrot {
 color: orange;
}
\*/
```

文章のスタイル
-------

### Big initial letters

Challenge

Without changing anything else, make all six initial letters twice the size in the browser's default serif font.

Solution

Add the following style declaration to the `strong` rule:

```css
font: 200% serif;
```

If you use separate declarations for `font-size` and `font-family`, then the `font-style` setting on the first paragraph is *not* overridden.

色
-

### Three-digit color codes

Challenge

In your CSS file, change all the color names to 3-digit color codes without affecting the result.

Solution

The following values are reasonable approximations of the named colors:

```css
strong {
  color: #f00; /\* red \*/
  background-color: #ddf; /\* pale blue \*/
  font: 200% serif;
}

.carrot {
  color: #fa0; /\* orange \*/
}

.spinach {
  color: #080; /\* dark green \*/
}

p {
  color: #00f; /\* blue \*/
}
```

コンテンツ
-----

### 画像の追加

チャレンジ

各行の初めに画像を表示するように、スタイルシートに一つルールを追加してください。

解答

次のルールをスタイルシートに追加します:

```css
p:before {
  content: url("yellow-pin.png");
}
```

リスト
---

### 小文字のローマ数字

チャレンジ

スタイルシートに一つルールを追加して、リスト項目に i から v のローマ数字で番号をつけてください。

解答

`lower-roman` のリストスタイルを使って、リスト項目に一つルールを定義します:

```css
li {
  list-style: lower-roman;
}
```

### 大文字

チャレンジ

見出しを括弧内の大文字のアルファベットで識別するように、スタイルシートを変更してください。

解答

body 要素（見出しの親要素）にはカウンターをリセットするルールを、見出しにはカウンターを表示し増加させるルールを追加します:

```css
/\* numbered headings \*/
body {
  counter-reset: headnum;
}
h3:before {
  content: "(" counter(headnum, upper-latin) ") ";
  counter-increment: headnum;
}
```

ボックス
----

### 海の境界線

チャレンジ

スタイルシートに一つルールを追加して、リスト項目全体を囲むような広い枠を作り、海を連想するような色にしてください。

解答

次のルールでこの効果を出せます:

```css
ul {
  border: 10px solid lightblue;
}
```

レイアウト
-----

### デフォルトの画像位置

チャレンジ

サンプル文書 `doc2.html` を編集し、次のタグを文書の末尾近く、`</BODY>` のすぐ前に追加します: `<IMG id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">` 画像がどこに現れるか、推測してみてください。それからブラウザを更新して、正しかったかどうかを確認してください。

解答

 画像は 2 番めのリストの右側に現れます。

 ![pin_placement.png](/ja/docs/Web/Guide/CSS/Getting_started/Challenge_solutions/pin_placement.png)

### 画像位置の固定化

チャレンジ

スタイルシートにルールを追加して、文書の右上に画像を置くようにしてください。

解答

次のルールでできます:
```

#fixed-pin  {
  position:fixed;
  top: 3px;
  right: 3px;
}
```

表
-

### Borders on data cells only

Challenge

Change the stylesheet to make the table have a green border around only the data cells.

Solution

The following rule puts borders around only `<td>` elements that are inside the `<tbody>` element of the table with `id=demo-table`:
```

#demo-table tbody td {
  border:1px solid #7a7;
}
```

メディア
----

### Separate print style file

Challenge

Move the print-specific style rules to a separate CSS file and import them into your `style4.css` stylesheet.

Solution

Cut and paste the lines between `/* print only */` and `/* end print only */` into a file named `style4_print.css`. In style4.css, add the following line at the beginning of the file:
```

@import url("style4_print.css") print;
```

### Heading hover color

Challenge

Make the headings turn blue when the mouse pointer is over them.

Solution

The following rule achieves the desired result:
```

h1:hover {
  color: blue;
}
```

JavaScript
----------

### Move box to the right

Challenge

Change the script so that the square jumps to the right by 20 em when its color changes, and jumps back afterwards.

Solution

Add lines to modify the `margin-left` property. Be sure to specify it as `marginLeft` in JavaScript. The following script achieves the desired result:

```css
// JavaScript demonstration
function doDemo (button) {
  var square = document.getElementById("square");
  square.style.backgroundColor = "#fa4";
  square.style.marginLeft = "20em";
  button.setAttribute("disabled", "true");
  setTimeout(clearDemo, 2000, button);
}

function clearDemo (button) {
  var square = document.getElementById("square");
  square.style.backgroundColor = "transparent";
  square.style.marginLeft = "0em";
  button.removeAttribute("disabled");
}
```


ページの生成: ブラウザーの動作の仕組み - ウェブパフォーマンス

ページの生成: ブラウザーの動作の仕組み
====================

ユーザーは、読み込みが速く、スムーズに操作できるコンテンツを、ウェブで体験することを求めています。したがって、開発者はこれらふたつの目標を達成するために努力しなければいけません。

どうやってパフォーマンスそして体感パフォーマンスを改善するか理解するためには、ブラウザーがどのように動作するかを理解することが役に立ちます。

概要
--

速いサイトはより良いユーザー体験をもたらします。ユーザーは読み込みが速く、スムーズに操作できるコンテンツを体験することを求め、期待しています。

ウェブのパフォーマンスにおける主要な 2 つの課題は、レイテンシーに関わる問題と、ほとんどのブラウザーが単一のスレッドであるという事実に関わる問題です。

レイテンシーは、高速に読み込むページを確実に提供するための最大の脅威です。ユーザーがリクエストされた情報をすばやく取得できるように、サイトの読み込みを可能な限り速くすること、少なくとも超高速で読み込んでいるように見せることが、開発者の目標です。ネットワークレイテンシーは、コンピューターにバイト列を転送するのにかかる時間のことです。ウェブパフォーマンスとは、ページをできるだけすばやく読み込ませるために私たちがしなければならないことです。

多くの場合、ブラウザーはシングルスレッドだと考えられます。つまり、一つの仕事を最初から最後までやり遂げた後に、次の仕事に取り掛かるのです。スムーズな操作を実現しようとする開発者のゴールは、滑らかなスクロール、タッチ操作への反応など、期待通りのサイトの操作を実現することです。メインスレッドが全ての処理を時間内に完了し、その上でユーザーの操作を常にハンドリングできるよう保証するために、描画時間が鍵となります。ブラウザーがシングルスレッドであることによる特性を理解し、メインスレッドの責務を最小限に抑え、可能かつ適切な場合に、描画のスムーズさと操作への即時の反応を実現することで、ウェブのパフォーマンスが改善されます。

ナビゲーション
-------

*ナビゲーション*はウェブページを読み込むための最初の一歩です。ユーザーが URL をアドレスバーに入力したり、リンクをクリックしたり、またはフォームを送信したり、ページをリクエストするたびにナビゲーションが発生します。

ウェブのパフォーマンスにおける目標の 1 つは、ナビゲーションが完了するまでの時間を最小限にすることです。理想的な条件下において、一般的にこの時間が長すぎることはありませんが、レイテンシーと帯域幅が遅延を引き起こす邪魔者になる場合があります。

### DNS ルックアップ

ウェブページへのナビゲーションの最初の一歩は、ページのアセットがどこにあるか見つけることです。`https://example.com` へアクセスする場合、その HTML のページは IP アドレスが `93.184.216.34` のサーバーに存在します。これまでに一度もそのサイトを訪れたことがなかった場合、DNS ルックアップが必要になります。

ブラウザーが DNS ルックアップをリクエストし、そのリクエストは最終的にネームサーバーによって処理され、ネームサーバーが IP アドレスを返します。この最初のリクエストの後、多くの場合その IP アドレスはしばらくの間キャッシュされ、ネームサーバーへ再接続する代わりにキャッシュから IP アドレスを取得することによって、後続するリクエストの速度を向上します。

DNS ルックアップは、一般的に、1 回のページ読み込みの中でホスト名ごとに 1 回だけ必要になります。しかし、DNS ルックアップは要求されたページが参照するユニークなホストネームそれぞれに対して実行が必要です。必要なフォントや画像、スクリプト、広告、メトリクスのそれぞれが異なるホスト名を持っている場合は、それぞれに対して DNS ルックアップが必要です。

![携帯電話のリクエストは、まずセルタワーに送られ、次に電話会社の中央コンピューターに送られた後、インターネットに送信される](/ja/docs/Web/Performance/How_browsers_work/latency.jpg)

これはとくにモバイルネットワークにおいてパフォーマンス上の問題になる可能性があります。ユーザーがモバイルネットワークを利用している場合、DNS ルックアップは、権威 DNS サーバーへ到達するために、電話機から基地局へ送信される必要があります。電話機と基地局、そしてネームサーバー間の距離によって重大な遅延が発生する場合があります。

### TCP ハンドシェイク

IP アドレスが判明すると、ブラウザーは TCP 3 ウェイハンドシェイクを通じてサーバーとのコネクションを設定します。この仕組みは、通信を意図する 2 つの主体が—この場合はブラウザーとウェブサーバーが—、データを送信する前に、多くの場合 HTTPS を用いて、ネットワーク TCP ソケットコネクションのパラメーターを交換できるよう設計されています。

TCP の 3 ウェイハンドシェイクは、しばしば、"SYN-SYN-ACK"、より正確には SYN、SYN-ACK、ACK と呼ばれます。これは 2 つのコンピューターの間で TCP のセッションを開始するために、TCP によって 3 つのメッセージが送受信されることを表します。つまり、これはそれぞれのサーバーの間で 3 回以上のメッセージのやりとりが必要であり、そのためのリクエストが生成されなければいけないことを意味しています。

### TLS ネゴシエーション

HTTPS によって確立される安全なコネクションでは、もう 1 つのハンドシェイクが必要です。このハンドシェイク、より正確に言うと TLS ネゴシエーションは、通信の暗号化に使用する暗号の種類を決定し、サーバーを認証し、実際のデータ送信が始まる前に安全な通信の準備を整えます。この処理は、コンテンツのリクエストを実際に送信する前に、さらに 3 回のラウンドトリップを必要とします。

![DNS ルックアップ、TCP ハンドシェイク、そして TLS ハンドシェイクの 5 つのステップ (clienthello、serverhello、証明書、clientkey、サーバーとクライアントの両方の完了)。](/ja/docs/Web/Performance/How_browsers_work/ssl.jpg)

通信を安全にするためにページ読み込みの時間が追加されますが、ブラウザーとサーバーの間で送信されるデータが第三者に解読されないという安全な通信は、レイテンシーに見合う価値があるものです。

8 回のラウンドトリップを経て、ブラウザーはようやくリクエストを送ることができます。

レスポンス
-----

ウェブサーバーへのコネクションが確立されると、ブラウザーはユーザーに代わって最初の HTTP `GET` リクエストを送信します。ウェブサイトであれば、多くの場合その対象は HTML ファイルです。リクエストを受け取ったサーバーは、適当なレスポンスヘッダーと HTML のコンテンツを返します。

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>My simple page</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="myscript.js"></script>
  </head>
  <body>
    <h1 class="heading">My Page</h1>
    <p>A paragraph with a <a href="https://example.com/about">link</a></p>
    <div>
      <img src="myimage.jpg" alt="image description" />
    </div>
    <script src="anotherscript.js"></script>
  </body>
</html>
```

この最初のリクエストへのレスポンスは、受信データの最初のバイト (First Byte) を含んでいます。Time to First Byte (TTFB) は、ユーザーがリクエストを実行した時点から—たとえば、リンクをクリックした時点から— HTML の最初のパケットを受信するまでの時間を表します。コンテンツの最初のかたまり (Chunk) は一般的に 14KB のデータです。

上記のサンプルコードでは、リクエストされたコンテンツは明らかに 14KB より小さいですが、後述するように、リンクされたリソースは、ブラウザーの解釈処理がそのリンクにたどり着くまでリクエストされることはありません。

### TCP スロースタート / 14KB ルール

最初の応答パケットは 14KB になります。これは、TCP スロースタート (en-US)の一部で、ネットワークコネクションの速度を制御するアルゴリズムの影響です。スロースタートは、ネットワークの最大の帯域幅が確定するまで徐々に送信するデータ量が増やします。

TCP スロースタート (en-US)において、サーバーは最初のパケットを受信した後、次のパケットのサイズを 28KB に倍増させます。さらに後続のパケットについて事前に決めた上限に達するか、ネットワークの輻輳を検知するまでサイズを増やします。

![TCP スロースタート](/ja/docs/Web/Performance/How_browsers_work/congestioncontrol.jpg)

最初のページ読み込みに関する 14KB ルールを聞いたことがあった場合、それは TCP スロースタートが理由です。そしてこれはウェブのパフォーマンスの最適化が最初の 14KB にフォーカスする理由でもあります。TCP スロースタートは、ネットワークの輻輳を防ぎ、ネットワークパフォーマンスに対して適正なデータ転送速度を徐々に探り出します。

### 輻輳制御

サーバーが TCP パケットとしてデータを送信する一方で、ユーザー側のクライアントは確認応答、ACK を返してデータが配送されたことを確認します。コネクションには、ハードウェアやネットワークの条件によって許容量上の制限があります。サーバーが大きすぎるパケットを速すぎる速度で送信した場合、破棄されるでしょう。つまり、確認応答がない場合があるということです。サーバーはこれを missing ACK として処理します。輻輳制御アルゴリズムは、パケットを送信して確認応答を受け取るこのフローを使って送信レート (send rate) を決定します。

解釈処理
----

データの最初のかたまりを受け取ると、ブラウザーは受信した情報の解釈処理を始めることができます。解釈処理は、ネットワークから受信したデータを DOM と CSSOM に変換するステップです。DOM と CSSOM は、レンダラーがページを画面へ描画するために利用されます。

DOM はブラウザー向けのマークアップの内部的な表現です。DOM は外部に公開されており、JavaScript の様々な API を通じて操作できます。

ブラウザーは、リクエストしたページの HTML が最初の 14KB のパケットより大きかった場合でも、手元にあるデータに基づいて解釈処理を開始し、サイトを描画しようとします。これは、ウェブのパフォーマンスを最適化する時に、ブラウザーがページの描画を始めるために必要なすべてのデータ、あるいは少なくともページのテンプレート (最初の描画に必要となる CSS と HTML) を最初の 14KB に含めることが重要となる理由です。何か 1 つでも画面に描画を行うには、その前に HTML と CSS、JavaScript が解釈されなければいけません。

### DOM ツリーの構築

クリティカルレンダリングパス (en-US)の 5 つのステップを説明します。

最初のステップは HTML のマークアップを処理し、DOM ツリーを構築することです。HTML の解釈処理は、トークン化とツリーの構築に分かれます。HTML のトークンは開始タグと終了タグ、属性の名前と値を含みます。ドキュメントが正しく構成されていれば解釈処理は単純で、速度も速くなります。パーサーはトークン化された入力情報をドキュメントツリーを構成するドキュメントに変換します。

DOM ツリーはドキュメントのコンテンツを表します。`<html>` 要素は最初のタグであり、ドキュメントツリーのルートノードとなります。ツリーには、異なるタグ同士の関係と階層構造が反映されます。他のタグの中にネストされたタグは子要素となります。DOM ノードの数が増えるほど、DOM ツリーの構築にかかる時間は長くなります。

![サンプルコードの DOM ツリーで、テキストノードを含むすべてのノードが表示されています。](/ja/docs/Web/Performance/How_browsers_work/dom.gif)

パーサーが画像のようなノンブロッキングリソースを発見した場合、ブラウザーはそのリソースをリクエストし、そのまま解釈処理を継続します。CSS ファイルに遭遇した場合も解釈処理を継続できます、しかし `async` または `defer` 属性がない `<script>` タグはレンダリングをブロックし、HTML の解釈処理を停止します。ブラウザーの先読みスキャナーがブロックの時間を減らしますが、それでも過度のスクリプトの使用は重大なボトルネックになり得ます。

### 先読みスキャナー

ブラウザーが DOM ツリーを構築する間はそのプロセスがメインスレッドを占有します。その間に*先読みスキャナー*が処理可能なコンテンツを解釈し、CSS や JavaScript、ウェブフォントのような優先度の高いリソースのリクエストを行います。先読みスキャナーのおかげで、リクエストするべき外部リソースへの参照をパーサーが見つけるのを待たなくて良くなります。バックグラウンドでリソースを取得するため、メインの HTML パーサーが該当のアセットにたどり着いた時には、すでにそれらのリソースが転送中あるいはダウンロード済みになっています。先読みスキャナーによる最適化によりブロッキングを減らすることができます。

```html
<link rel="stylesheet" href="styles.css" />
<script src="myscript.js" async></script>
<img src="myimage.jpg" alt="image description" />
<script src="anotherscript.js" async></script>
```

この例では、メインスレッドが HTML と CSS を解釈している間に、先読みスキャナーがスクリプトと画像を探索し、それらのダウンロードを開始します。これらの過程をスクリプトがブロックしないようにするには、 `async` 属性を付加するか、あるいはスクリプトの解釈と実行順が重要である場合には `defer` 属性を付加してください。

CSS の取得は HTML の解釈処理あるいはダウンロードをブロックしません。しかし JavaScript の実行をブロックします。その理由は、しばしば JavaScript が CSS プロパティの要素への影響を問い合わせるために使われるからです。

### CSSOM の構築

クリティカルレンダリングパスの 2 つめのステップは CSS を処理して CSSOM ツリーを構築することです。CSS のオブジェクトモデルは DOM によく似ています。DOM と CSSOM はどちらもツリー構造です。この 2 つは独立したデータ構造を持ちます。ブラウザーは、CSS のルールをブラウザーが理解できるスタイルのマップに変換します。ブラウザーは CSS のルールセットを読み取り、CSS セレクターにもとづいて、親、子、兄弟の関係から構成されるノードのツリーを生成します。

HTML の場合と同様に、ブラウザーは受信した CSS のルールをブラウザーが実行可能な形式に変換しなければいけません。そのために、ブラウザーは HTML をオブジェクトに変換する場合と同じプロセスを CSS に対しても実行します。

CSSOM ツリーはユーザーエージェントのスタイルシートから取得したスタイルを含みます。ブラウザーは、ノードに対して適用される最も一般的なルールからスタートして、より特定されたルールを再帰的に適用し、最終的なスタイルを計算します。つまり、プロパティの値をカスケードします。

CSSOM の構築はとても高速であるため、現在の開発者ツールはそれ自体をユニークな色で表示しません。その代わりに、開発者ツールの「スタイルの再計算」は、CSS を解釈して CSSOM ツリーを構築し、再帰的にスタイルを計算するトータルの時間を表示します。ウェブのパフォーマンスの最適化の観点から言うと、CSSOM を生成するトータルの時間は一般的に１回の DNS ルックアップにかかる時間よりも少ないため、それほどの苦労はないと言えます。

### その他の処理

#### JavaScript のコンパイル

CSS が解釈され、CSSOM が生成される間、JavaScript ファイルを含む他のアセットが（先読みスキャナーによって）ダウンロードされます。JavaScript は、インタープリターに処理され、コンパイル、解釈処理を経て実行されます。スクリプトは解釈処理によって抽象構文木に変換されます。いくつかのブラウザーエンジンは、抽象構文木をインタープリターへ引き渡し、メインスレッドで実行されるバイトコードを出力します。これが JavaScript のコンパイル処理に当たります。

#### アクセシビリティツリーの構築

ブラウザーはコンテンツを理解し翻訳する補助機器で使用されるアクセシビリティツリーも構築します。アクセシビリティオブジェクトモデル (AOM) は補助機器向けの DOM のようなものです。ブラウザーは、DOM が更新されるとアクセシビリティツリーも更新します。アクセシビリティツリーは補助機能それ自体からは変更できません。

AOM が構築されるまで、スクリーンリーダー (en-US)でコンテンツにアクセスできません。

レンダリング
------

レンダリングのステップは、スタイル、レイアウト、描画、そして合成で構成されます。解釈のステップで作成された CSSOM と DOM のツリーはレンダーツリーの形式へと組み合わされ、すべてのビジュアル要素のレイアウトを計算するために使用されて画面に描画されます。いくつかのケースでは、CPU の代わりに GPU を使用して画面の一部を描画し、メインスレッドを解放してパフォーマンスを改善するために、コンテンツ自身をレイヤーに昇格し、合成を行います。

### スタイル

クリティカルレンダリングパスの 3 番目のステップは DOM と CSSOM をレンダーツリーの形式へと組み合わせることです。計算されたスタイルのツリー、あるいはレンダーツリー、の構築は DOM ツリーのルートからスタートし、目に見える (Visible) ノードをトラバースします。

ユーザーエージェントのスタイルシートにある `<head>` のような表示されることないタグとその子要素、`script { display: none; }` のように `display: none` を指定されたすべてのノード、はレンダリングの結果に影響しないためレンダーツリーには含まれません。`visibility: hidden` が適用されたノードは、スペースを確保するためレンダーツリーに含まれます。上記のサンプルコード内の `script` ノードは、ユーザーエージェントのデフォルトを上書きするディレクティブが指定されていないためレンダーツリーに含まれません。

それぞれの目に見えるノードには、CSSOM のルールが適用されます。レンダーツリーはすべての目に見えるノードをコンテンツと計算されたスタイルを合わせて保持します。すべての関連するスタイルと DOM 上の目に見えるノードをマッチングし、CSS カスケードに基づいて、それぞれのノードに対応する計算されたスタイルを決定します。

### レイアウト

クリティカルレンダリングパスの 4 番目のステップは各ノードの平面状の位置を計算するためにレイアウト処理を実行することです。*レイアウト*はレンダーツリーに含まれるすべてのノードの幅と高さ、位置を決める処理です。さらにページ上のそれぞれオブジェクトのサイズと位置を決定します。*再フロー*は、続いて発生するドキュメント全体、あるいはページの一部分のサイズと位置を決める処理です。

レンダーツリーが構築されるとすぐにレイアウトが始まります。レンダーツリーは計算されたスタイルを踏まえてどのノードが表示されるか (非表示であっても) 特定しますが、寸法や位置は特定しません。各オブジェクトの正確なサイズと位置を決めるために、ブラウザーがレンダーツリーのルートからトラバースを行います。

ウェブページ上では、ほとんどすべての要素はボックスです。異なるデバイス、異なるデスクトップの設定は、ビューポートのサイズの数が無制限に存在することを示しています。この段階において、ビューポートのサイズを考慮して、ブラウザーはすべての異なるボックスの画面上の寸法を決定します。ビューポートのサイズを基本として、レイアウトは一般的にボディからスタートし、すべてのボディの子孫をそれぞれの要素のボックスモデルプロパティに合わせてレイアウトし、画像のように寸法がわからない代替要素のためのプレースホルダースペースを作成します。

ノードのサイズとポジションが決められる最初の瞬間を*レイアウト*と呼びます。続いて発生するノードのサイズと位置の再計算を*再フロー*と呼びます。私たちの例では、画像が返される前に最初のレイアウトが発生すると考えられます。そこでは画像のサイズを宣言していなかったため、画像のサイズがわかるとすぐに再フローが発生するのです。

### 描画

クリティカルレンダリングパスの最後のステップは、個別のノードを画面に描画することです。最初に発生する描画を first meaningful paint と呼びます。描画またはラスタライズの段階において、ブラウザーはレイアウト段階で計算されたそれぞれのボックスを画面上の実際のピクセルに変換します。描画は、テキスト、色、境界、シャドウ、ボタンや画像のような置換要素を含む、要素のすべての視覚的な部分を画面に描くことを含みます。ブラウザーはこれを超高速で実行する必要があります。

スムーズなスクロールとアニメーションを実現するために、スタイルの計算や再フロー、描画などメインスレッドを占有するすべての処理は、16.67ms 未満で完了する必要があります。2048 x 1536 の解像度を持つ iPad には 3,145,000 を超えるピクセルがあります。これだけの大量のピクセルを高速に描画しなければいけません。2 回目以降の描画を最初の描画より高速にするため、一般的には画面への描画を複数のレイヤーに分解します。この場合には合成が必要になります。

描画は描画ツリー内の要素をレイヤーに分解します。コンテンツを GPU (CPU 上のメインスレッドの代わりになる) 上のレイヤーに昇格させることで、描画と再描画のパフォーマンスを向上します。`<video>` や`<canvas>`など、レイヤーを生成する特定のプロパティと要素があります。`opacity`、3D `transform`、`will-change`、その他いくつかの CSS プロパティを持つ要素も同様です。これらのノードは、その子孫が上記の理由でそれ自身のレイヤーを必要とするのでなければ、子孫と一緒に自身のレイヤー上に描画されます。

レイヤーはパフォーマンスを改善しますが、メモリー管理の面ではコストのかかる処理です。そのため、ウェブのパフォーマンス最適化戦略の中で濫用するべきものではありません。

### 合成

ドキュメントのセクションが異なるレイヤーに描画されていて、それらが重なり合っているとき、コンテンツを画面上に正しい順番で描画するために合成が必要になります。

ページがアセットの読み込みを続ける間も再フローは発生し得ます (上で挙げた、画像が後から取得された例を思い出してください)。再フローは再描画と再合成を引き起こします。もし我々が画像のサイズを指定していた場合、再フローは必要なく、再描画が必要なレイヤーのみが再描画され、必要であれば合成が行われたはずです。しかし、例では画像のサイズを指定していませんでした。つまり画像がサーバーから取得されると、レンダリングプロセスはレイアウトステップまで遡り、そこから再開するのです。

操作可能性
-----

メインスレッドがページの描画を完了したら「これで終わり」と思うかもしれません。しかし、必ずしもそうとは言えません。読み込み処理が、遅延された `onload` イベントの発行により実行される JavaScript を含む場合、メインスレッドがビジー状態となりスクロールやタッチ、その他の操作ができない場合があります。

Time to Interactive (TTI) は、DNS ルックアップと SSL コネクション を始める最初のリクエストからページが操作可能になるまでどのくらい時間がかかったかを示す測定値です。操作可能であるとは、ページがユーザーの操作に 50ms 以内に応答する First Contentful Paint の後の時点を言います。メインスレッドが解釈処理、コンパイル、JavaScript の実行に占有されている場合、ユーザーの操作にタイムリーに (50ms より早く) 応答することができません。

以下の例では、画像の読み込みは高速かもしれませんが、`anotherscript.js` ファイルが 2MB あり、しかもユーザーのネットワークは低速です。このケースでは、ユーザーはページのコンテンツをすぐに見ることができるかもしれませんが、スクリプトがダウンロードされるまでスクロールを実行できない可能性があります。これは良いユーザー体験とは言えません。この WebPageTest の例からわかるように、メインスレッドを占有することは避けなければいけません。

![メインスレッドは JavaScript ファイルのダウンロード、解釈、実行で占められています (高速接続時)。](/ja/docs/Web/Performance/How_browsers_work/visa_network.png)

この例では、DOM コンテンツの読み込みプロセスは 1.5 秒以上かかっており、メインスレッドがすべての時間を完全に占有され、クリックイベントや画面のタップに応答できなくなっています。

関連情報
----

* ウェブパフォーマンス