*グローバル属性とはすべてのHTML要素で指定できる属性になります。
属性名 | 説明 |
---|---|
exportparts | ・親のシャドーツリーにパーツをエクスポートする exportparts属性は、Shadow tree(シャドウツリー)内にあるすべての要素で使用できる属性です。 exportparts属性は、ネストしたシャドーツリーにおいて、親となるシャドーツリーに対し、要素がもつパーツ要素(part属性を持つ要素)をエクスポートします。 |
part | ・シャドーツリー内の要素に名前を付ける part属性は、Shadow tree(シャドウツリー)内にあるすべての要素で使用できる属性です。 part属性には、空白で区切って複数の名前を指定することができます。用途としては、class属性に近いと考えるとわかりやすいでしょう。 part属性によって付与した名前は、::part 擬似要素を用いて指定することで、該当する要素にスタイルを適用することができます。 part属性は、CSS Shadow Parts 仕様で定義されています。 |
accesskey | ・accesskey属性はキーボード操作によるショートカットキーを指定します。 accesskey属性はグローバル属性に分類され、すべての HTML要素において使用することができます。指定できる値はユニコード 1文字によるショートカットキーで、これを半角スペースで区切って列挙することができます。なお、値の大文字、小文字は区別されます。 HTML 4.01 時点における accesskey 属性の値は、ショートカットキー、1つしか入れることができませんでしたが、HTML Living Standard 仕様においては、上記のように半角スペースで区切ることで複数の候補を指定可能です。 これにより、デバイスによって最初に指定したショートカットキーが利用できなくても、2番目以降に書いたキーが候補として順番に割り当てられ、利用可能なものが適用されます。ただし、ブラウザがそれを正しく処理するとは限らない点に注意しましょう。 なお、同じ値の accesskey属性を同一文書内に複数記述してはいけません。 |
autocapitalize | ・入力文字列の先頭大文字化を制御する autocapitalize属性は、テキストがユーザーによって入力、編集されたときに、入力文字列の先頭大文字化を自動的に行うか、またはどのように行うかを指定します。 通常のキーボード入力、あるいは日本語環境においてはあまり関係ないですが、英語圏などで、かつモバイル端末のソフトウェアキーボードによる入力時や音声入力を利用している場合など、文の最初の文字を自動的に大文字化することが、ユーザーにとって親切な場合があります。 *autocapitalizeに指定できる値(キーワード)については、下記の表を参照してください。 |
autofocus | ・オートフォーカスを指定する autofocus属性は、文書が読み込まれた時やダイアログが表示された時に、指定した要素が自動的にフォーカスを持つべきであることを表します。 autofocus属性は論理属性です。 なお、ある要素の「直近の祖先オートフォーカス範囲のルート要素」は、その要素が dialog 要素の場合はその要素自体、そうでない場合は直近の先祖に当たる dialog 要素、もしくはhtml要素になりますが、同じ「直近の祖先オートフォーカス範囲のルート要素」は、autofocus属性が指定された要素を 2 つ以上持ってはならないと仕様上は定義されています。つまり、autofocus属性を持つ要素は、dialog 要素内に含めない限り、html要素内には 1 つだけ、同じ dialog要素内にも 1 つだけ存在できることになります。 |
contenteditable | ・編集可否を指定するcontenteditable 属性は該当する要素内の編集可否を指定します。contenteditable 属性はグローバル属性に分類され、すべての HTML 要素において使用することができます。編集後に文書をローカル環境に保存したり、そのまま印刷したりすることができます。ただし、編集した内容をブラウザウィンドウを閉じた後なども継続して利用するには、サーバサイド、もしくは Cookie や localStorage などクライアントサイドの仕組みによりデータを保持する必要があります。 *contenteditableに指定できる値(キーワード)については、下記の表を参照してください。 |
dir | ・文字方向を指定するdir 属性は要素内のテキストの書字方向を指定します。*dir属性に指定できる値(キーワード)については、下記の表を参照してください。 |
draggable | ・ドラック可能かどうかを指定するdraggable 属性は、要素がドラッグ可能かどうかを指定します。*draggable属性に指定できる値(キーワード)については、下記の表を参照してください。 |
enterkeyhint | ・Enterキーに表示するアクションラベル enterkeyhint属性は、ソフトウェアキーボードの Enterキーに表示するアクションラベル(またはアイコン)を指定します。Enterキーの表示をカスタマイズすることで利用者にわかりやすいインターフェースを提供可能です。 ユーザエージェントはそれぞれの意味に応じたラベルやアイコンを表示することが求められます。 *enterkeyhint属性に指定できる値(キーワード)については、下記の表を参照してください。 |
hidden | ・属性がないことを表す hidden属性もともと論理属性でしたが、until-found属性値が新たに定義されたことで列挙属性となっています。 *hidden属性に指定できる属性値については、下記の表を参照してください。 |
inert | ・要素やその子孫要素を不活性化する inert属性は、この属性が指定された要素、および要素の子孫要素をユーザエージェントが不活性化することを指定ための論理属性です。 不活性化とは、ボタンでいえばクリックなどの操作ができない、入力コントロールであれば、入力などの操作ができないということですが、inert 属性に関して、ユーザエージェントには特に視覚的にその要素が不活性であることを明示することが求められていないため、場合によってはユーザーから不活性な要素がわかりにくくなってしまうでしょう。このような場合は disabled属性を使用した方が適切な場合があります。 |
inputmode | ・ソフトウェアキーボードの挙動を制御 inputmode属性は、ソフトウェアキーボードの挙動を制御します。 *inputmode属性に指定できる値(キーワード)については、下記の表を参照してください。 |
is | ・カスタマイズされた組み込み要素の名前 is属性は、カスタマイズされた組み込み要素(カスタム機能によって拡張された既存のHTML要素)の名前を指定するために用いられます。 カスタマイズされた組み込み要素を定義した上で、そのカスタム要素名を is属性に指定することで、当該要素とカスタマイズされた組み込み要素とを関連付けて利用することが可能になります。 |
itemid | ・グローバルな識別子を付与 itemid属性は、itemscope属性、および itemtype属性を持つ要素に対してグローバルな識別子を付与します。 HTMLの仕様上、itemid属性の値は、URL であることが求められていますが、仕様内のサンプルソースコードでは URN (Uniform Resource Name) の使用も示唆されています。 |
itemprop | ・Microdataのプロパティを指定する itemprop属性はMicrodata (マイクロデータ) のマークアップを行う際、プロパティを指定する属性です。 属性値には、schema.org などで策定されている Microdataプロパティを指定し、itemscope属性や itemtype属性、itemref属性などと組み合わせて指定することで、セマンティックのための様々なメタデータを与えることができます。 なお、itemprop属性が付与された link要素、meta要素はフロー・コンテンツ、またはフレージング・コンテンツが期待される場所で使用することができますが、meta要素に対して itemprop属性が指定されている場合は、name、http-equiv、charset属性を同時に指定することはできません。また、link要素が itemprop属性を持つ場合、rel属性は省略することができます。 |
itemref | itemref属性は、itemscope属性が付与された要素に対して使用します。 通常、マイクロデータは、itemscope属性を持つ要素の子孫に対して指定されます。しかし、何らかの理由で子孫要素にマイクロデータの付与ができない場合、文書内の別の場所にあるマイクロデータを含む要素を、itemref 属性を使用して関連付けることができます。その場合、マイクロデータを含む要素に付与された id属性値を itemref属性に指定することで関連付けが行われます。 |
itemscope | itemscope属性はMicrodata (マイクロデータ) のマークアップを行う際、関連付けられたメタデータのスコープを定義します。itemscope属性は論理属性です。 itemscope属性を付与された要素が itemtype属性を持たない場合は、マイクロデータを含む要素と関連付けられた itemref属性を持つ必要があります。 |
itemtype | itemtype属性は、itemscope属性と組み合わせて使用される属性で、要素に付与されるマイクロデータのタイプを表します。 |
lang | lang属性は、要素の内容がどのような言語で記述されているかを表します。 lang属性はグローバル属性に分類され、すべての HTML 要素において使用することができます。html要素に対して指定し、文書全体の言語を指定したり、文書内の一部の要素に対して、言語を指定したりといったことが可能です。 XMLにおいては、xml:lang 属性が定義されていますが、HTML文書内で、xml:lang 属性は基本的には使用できません。ただし、XHTMLへの移行や、既存の XHTML文書から、HTMLへの移行を容易にするため、lang属性と同時に指定された場合のみ、HTML文書内での xml:lang 属性の使用が認められます。ただし、その値は、大文字、小文字の違い以外は一致させなければなりません。 *lang属性に指定できる値については、下記の表を参照してください。 |
nonce | ・CSP の ワンタイムトークンを指定する nonce属性は、CSP(Content Security Policy)によって、文書内に読み込まれた script要素や、style要素の内容を実行するかを決定するために利用される nonce(number used once / ワンタイムトークン) を指定します。 CSPとは、あらかじめその文書で読み込まれることが想定されている JavaScriptなどのコンテンツを、ホワイトリストとして指定することによって、攻撃者によって挿入される悪意のあるスクリプトの読み込みを遮断し、クロスサイトスクリプティング (XSS) など、インジェクション攻撃からWebサイトやWeb アプリケーションを保護するための仕組みです。 Content-Security-Policy HTTP レスポンスヘッダによって送信した値と同じものを、script 要素やstyle要素に付与した nonce属性に指定することで、その値が一致した場合のみscript要素やstyle要素の内容が実行されます。 nonceの値は、リクエストごとにランダムな文字列が生成される必要があります。それによって外部からは値が推測できず、インジェクション攻撃を防止することができます。 |
popover | ・ポップオーバー要素に指定する popover属性は、要素をポップオーバー要素であると指定するために使用します。 ポップオーバー要素とは、特定の条件で呼び出されるまで画面上には表示されず(display: none; 状態)、例えばHTMLElement: showPopover() メソッドなどで呼び出され、表示された際には、最上位レイヤー(top layer)、内の他のすべての要素の上に表示され、かつ親要素のpositionや overflowプロパティの影響を受けない要素のことです。 dialog要素でも同様の実装が可能ですが、dialog要素がモーダル(その要素が表示されている間、他の要素は反応しない)表示のコンテンツを生成するのに対して、popover属性が付与された要素は、非モーダル(その要素が表示されている間も他の要素は反応する)であることが異なります。 dialog要素は、ダイアログボックス(ユーザーに情報を提示し、必要に応じて応答してもらうための特殊ウィンドウの一種)を表示するためのものです。ポップアップするからといって、コンテキストメニューやツールチップを dialog要素で実装することは望ましくありません。その場合は、popover属性を使用するのが望ましい。 なお、アクセシビリティ・セマンティクスのない要素(たとえば div要素のような)でポップオーバーを使用する場合、適切なWAI-ARIA 属性を使用して、ポップオーバーが支援技術からアクセス可能であることを確認する必要があります。 *popover属性に指定できる値については、下記の表を参照してください。 |
spellcheck | ・スペルチェックの有無を指定する spellcheck属性はスペルチェックの有無を指定します。 *spellcheck属性に指定できる値については、下記の表を参照してください。 |
style | ・スタイルを指定する style属性は要素に対してスタイルを指定します。 属性値にはスタイルシートの指定を記述することができます。 style属性を指定する場合、該当する要素からこの属性が削除されても問題ないように使用しなければなりません。例えばstyle属性を削除することで要素の表示領域のサイズが変更され、内容の閲覧ができなくなってしまうといった場合。 |
tabindex | ・フォーカス移動の順番を指定する tabindex属性は、TABキーなど、キーボード操作によるフォーカス移動 (Sequential focus navigation) の優先順位を指定します。 tabindex属性は、整数を値として持つことができる。 *tabindex属性の挙動については、下記のtabindex属性の挙動を参照してください。 |
title | ・補足情報を付与する title属性は、ツールチップとして適切となるような補足情報を付与します。 title属性の値には、テキストを指定します。例えば、リンクに付与された title属性であれば、リンク先のリソースに関するタイトルや説明などになるかもしれない。画像に付与した title属性であれば、その画像の説明や著作権情報などになるかもしれない。 |
translate | ・翻訳可否を指定する translate属性は、要素内の翻訳可否を指定します。 *translate属性に指摘できる値については、下記の表を参照してください。 |
custom data(カスタムデータ) | ・独自のデータを入力する カスタムデータ属性は、 data-***** のような形式で、制作者が自由に指定できる属性になる。JavaScriptによる処理に利用したりするための独自のデータを入れることができる。 カスタムデータ属性の属性名は、 data- ではじまり、ハイフンの後に少なくとも 1文字が続きますが、U+0041 から U+005A の範囲にある文字 (半角大文字の A ~ Z) を含んではいけない。 |
class | ・クラス名を付与する 複数の値を半角スペースで区切って列挙することができる。なお、重複は無視される。 その要素の見た目を表すものではなく、意味を表す値を選択する。例えば、注意書きを赤い文字にするからといって、 class="red" のような指定にするのではなく、「注意書き」 という意味を表すように、class="attention" などと指定するようにする。 |
id | ・固有の識別名を指定する id 属性の値は、文書内で一意でなければならない。 つまり、同じ id 属性値を複数の要素に指定することはできません。また、値には最低でも 1文字が必要で、空白文字を含むことはできない。 付与したid属性値は、セレクタとして使用できるほか、リンクのフラグメント識別子としても利用できる。 id属性値に使用できる文字列は、空白を含んではいけない以外に特に制約はないが、XMLとして扱ったり、セレクタとして使用する場合に問題が起こる可能性があるので、半角英数字による指定、さらに英字 (先頭がxml を除く) からはじまる値を選択するようにする。 |
slot | slot属性は、shadowツリー内のスロットを、この属性が付与された要素に割りあてる。slot属性を持つ要素は、slot属性の値と一致する name属性値を持つslot要素が生成したスロットに埋め込まれます。 |
autocapitalize属性で指定できる値(キーワード)
キーワード | 説明 |
---|---|
off / none | 自動的な大文字化は行われません。 |
on / sentences | 各「文」の最初の文字を自動的に大文字化します。それ以外の文字は小文字のままです。 |
words | 各「語」の最初の文字を自動的に大文字化します。それ以外の文字は小文字のままです。 |
characters | すべて大文字にします。 |
contenteditableに指定できる値(キーワード)
キーワード | 説明 |
---|---|
true | 編集可能 |
false | 編集不可 |
空文字列 | 親要素の指定を継承 |
dir属性に指定できる値(キーワード)
キーワード | 説明 |
---|---|
ltr | 書字方向を 「左から右」 と明示 |
rtl | 書字方向を 「右から左」 と明示 |
auto | 双方向文字の種別によってプログラム的に判断 |
draggable属性に指定できる値(キーワード)
キーワード | 説明 |
---|---|
true | ドラック可能 |
false | ドラック不可 |
空白文字 | auto として扱われます。ユーザエージェントの初期設定を反映 |
enterkeyhint属性に指定できる値(キーワード)
キーワード | 説明 |
---|---|
enter | 改行 |
done | 入力完了 |
go | 進む |
next | 入力していた入力フィールドの次の入力フィールドに移動 |
previous | 入力していた入力フィールドの前の入力フィールドに移動 |
search | 検索結果を表示 |
send | 入力内容を送信 |
hidden属性に指定できる値
属性値 | 説明 |
---|---|
hidden | 要素が文書(ページ)に対して無関係であることを示します。属性値が空の場合も hidden として扱われます。 |
until-found | hidden until found state 、つまり「発見されるまでは無関係」という状態を示します。 |
inputmode属性に指定できる値(キーワード)
キーワード | 説明 |
---|---|
none | ソフトウェアキーボードを非表示 |
text | ソフトウェアキーボードを非表示 |
tel | 電話番号入力が可能なソフトウェアキーボードを表示 |
url | ユーザーの国や地域にあわせたテキスト入力が可能、かつURLの入力を補助するソフトウェアキーボードを表示 |
ユーザーの国や地域にあわせたテキスト入力が可能、かつ電子メールアドレスの入力を補助するソフトウェアキーボードを表示 | |
numeric | 数字入力が可能なソフトウェアキーボードを表示 |
decimal | ーザーの国や地域にあわせた数値や区切り文字と共に小数入力が可能なソフトウェアキーボードを表示 |
search | ーザーの国や地域にあわせた数値や区切り文字と共に小数入力が可能なソフトウェアキーボードを表示 |
lang属性に指定できる値
属性値 | 言語 |
---|---|
ja | 日本語 |
ja-jp | の本における日本語 |
en | 英語 |
en-au | オーストラリアにおける英語 |
de | ドイツ語 |
popover属性に指定できる値
属性値 | 説明 |
---|---|
auto | 初期値。 このポップオーバー要素を開くと、他のポップオーバー要素を閉じます。また、他のポップオーバー要素からの閉じるリクエストに応答します。つまり、複数のポップオーバー要素にこの値のみが与えられている場合、排他的処理が実現できます。 |
manual | このポップオーバー要素を開いたとき、他のポップオーバー要素を閉じず、他のポップオーバー要素からの閉じるリクエストにも応答しません。 |
spellcheck属性に指定できる値
属性値 | 説明 |
---|---|
true | スペルチックを行う |
false | スペルチックを行わない |
空文字列 | ユーザエージェントの初期設定を反映します |
tabindex属性の挙動
属性値 | 挙動 |
---|---|
tabindex 属性がない、または値が不正(空文字列を含む)な場合 | ユーザエージェントは、該当する要素がフォーカス可能か、また Tab キーによるフォーカス移動が可能かを調べ、どちらも可能であれば優先順位を自身で判断する |
値が負の整数の場合 | フォーカスは可能にする必要があるが、Tab キーによる移動はできないようにする |
値が 0 、または正の整数の場合 | フォーカスを可能にし、Tab キーによる移動も可能にする |
属性値ごとのフォーカス優先順位
- 値に最小の正の整数を持つもの
- 値に2番目に大きい正の整数を持つもの~以降は小さい順に
- 値に最大の正の整数を持つもの
- 値に0を持つもの
- 値が不正、または tabindex属性持たないが、TAB キーによるフォーカス移動が可能な要素
同列のものがある場合は、文書内での DOM ツリー上、上位に位置するものから順番になる。
translate属性に指定できる値
属性値 | 説明 |
---|---|
yes | 初期値 機械翻訳の対象 |
no | 機械翻訳の対象外 |