グローバル属性
グローバル属性は HTML エレメントの属性の一部で、全ての HTML エレメントに共通とされる属性です。 ただし、タグエレメントによっては機能しない属性があります。
例えば以下の id や draggable がグローバル属性にあたり、ほとんどのタグで共通して使用することができます。
<div id="example" draggable onclick="console.log(event);"> ... </div>
仕様に関してはHTML Living Standard / 3.2.6 Global attributes
を参照してください。
グローバル属性にはon~
といったイベントハンドラーも含まれます。
JavaScript においては HTMLElement インターフェイスのプロパティとイベントが該当します。
ページ内 Index
グローバル属性の一覧
グローバル属性は HTML エレメントの属性の一部で、全てのHTMLエレメントに共通とされる属性です。
以下は、主なグローバル属性です。
| プロパティ | 概要 | 分類 |
|---|---|---|
| class | 複数のタグエレメントを一括してグループ化（クラス化）できます。CSSのクラスセレクター、JavaScriptのDocument.getElementsByClassName()メソッドで抽出できます。 | スタイルシート |
| data-* | カスタムデータ属性 | セレクター |
| id | エレメントを一意に設定する | セレクター |
| name | 主にフォームのデータ名に使用 | フォーム |
以下は、HTML Living Standard / 3.2.6 Global attributes
における上記以外のグローバル属性です。
| プロパティ | 概要 | 分類 |
|---|---|---|
| accesskey | キー操作でフォーカスの移動を可能にするアクセスキー（ショートカットキー）のキーを指定。[Alt] + [key] といった形を取ることが多い | フォーカス・移動 |
| autocapitalize | 入力されたテキストの先頭を自動で大文字に変換するかの設定 | 入力 |
| autofocus | web ページを開いたら最初にフォーカスする | フォーカス・移動、フォーム |
| contenteditable | エレメントの内容を編集可能にする | 編集機能 |
| dir | エレメントの書字方向。値は、"ltr" 、"rtl"、"auto" | テキストの体裁 |
| draggable | エレメントをドラッグ可能にする。Boolean 型 | 編集機能 |
| enterkeyhint | スマートフォンなどのソフトウェアキーボートの[ Enter ]キーに表示されるアイコンの指定 | スマートフォン |
| hidden | 非表示であるか／否か。Boolean 型。データとしては使用できる | フォーム |
| inert | フォーカス、音声による読み上げ、選択、編集、ドラッグが不可になる。Boolean 型 | フォーカス・移動、フォーム |
| inputmode | 入力、編集可能な状態での入力データのタイプ指定 | フォーム、編集機能 |
| is | 任意に作成したエレメントを関連付ける | エレメント |
| itemid | マイクロデータにおけるアイテムのグローバル識別子に使用。itemscope と itemtype に関連付ける | マイクロデータ |
| itemprop | アイテムのプロパティを作成。プロパティ名を示す。この属性が指定されたエレメントに囲まれた内容がデータになる | マイクロデータ |
| itemref | 外部にあるプロパティと関連付ける | マイクロデータ |
| itemscope | マイクロデータを宣言する | マイクロデータ |
| itemtype | マイクロデータにおけるアイテムのタイプを指定 | マイクロデータ |
| lang | エレメントごとに言語指定ができる | 言語 |
| nonce | nonce 属性の値と一致する場合のみにスクリプトやスタイルの実行ができる | セキュリティー |
| popover | ポップオーバーとして使用できるようになる | ポップオーバー表示 |
| spellcheck | スペルの間違いを指摘してくれる。Boolean 型 | フォーム |
| style | スタイルシートの定義 | スタイルシート |
| tabindex | タブキーによる移動順を設定 | フォーカス、フォーム |
| title | ポインターがエレメント上にあると表示されるポップアップのテキスト。画像に使用される | 画像 |
| translate | 自動翻訳において、この属性がnoに指定されると翻訳の対象外になる | 翻訳 |
Boolean 型の属性はその属性名だけも true とみなされます。
以下の例では、draggable と設定しただけで draggable = "true" とみなされます。
<div draggable>
...
</div>
Example
グローバル属性の例です。
以下の例では、<p> エレメントのグローバル属性を JavaScript を使用して取得しています。JavaScript のプロパティ名と HTML の属性名ではスペルに違いがあります。
undefined と表示されるものはデフォルトで定義がないものです。is, item* はデフォルトでグローバル属性としての用意がないようです。