- グローバル属性とは
- 属性の一覧
- イベントハンドラ属性
- onabort
- onautocomplete
- onautocompleteerror
- onblur
- oncancel
- oncanplay
- oncanplaythrough
- onchange
- onclick
- onclose
- oncontextmenu
- oncuechange
- ondblclick
- ondrag
- ondragend
- ondragenter
- ondragexit
- ondragleave
- ondragover
- ondragstart
- ondrop
- ondurationchange
- onemptied
- onended
- onerror
- onfocus
- oninput
- oninvalid
- onkeydown
- onkeypress
- onkeyup
- onload
- onloadeddata
- onloadedmetadata
- onloadstart
- onmousedown
- onmouseenter
- onmouseleave
- onmousemove
- onmouseout
- onmouseover
- onmouseup
- onmousewheel
- onpause
- onplay
- onplaying
- onprogress
- onratechange
- onreset
- onresize
- onscroll
- onseeked
- onseeking
- onselect
- onshow
- onsort
- onstalled
- onsubmit
- onsuspend
- ontimeupdate
- ontoggle
- onvolumechange
- onwaiting
グローバル属性とは
グローバル属性とは、すべての HTML 要素に指定できる属性のことです。ただし、要素によっては効かない場合もあります。
属性の一覧
accesskey
現在の要素のショートカットキーを定義するために使われる属性。ただし、実際に指定するには、ブラウザやシステムのショートカットキーとの競合など、考慮しないといけない点があります。
なお、グローバル属性ではあるが、用途を考えると、リンクやフォーム要素向けの属性と言っても差し支えないでしょう。
autocapitalize
ユーザーが入力や編集を行ったときに、入力文字列の大文字化を行うかどうかを指定します。なお、物理キーボードからの入力には影響を与えず、モバイル端末の仮想キーボードや音声入力の際に影響します。
- off または none: 自動的な大文字化は行ないません。
- on または sentences: 各文の最初の文字を自動的に大文字にします。
- words: 各単語の最初の文字を自動的に大文字にします。
- characters: すべての文字を自動的に大文字にします。
これは「入力文字列」に対する扱いを指定する属性なので、テキスト入力が可能なフォーム要素向けの属性になります。また、日本語のように大文字/小文字の区別がない言語向けのサイトでは、余り使うことは無いでしょう。
また、<input> 要素であっても、typeがurl、email、password の場合はこの属性は無効になります。
class
HTML 要素に「クラス名」を指定するために使う属性です。CSS のクラスセレクターや、JavaScript の Document.getElementsByClassName() メソッドで特定の要素にアクセスする際に使います。
クラス名は複数指定でき、半角スペースで区切って指定します。クラス名には半角英数字と一部の記号が使用できます。(使用できる記号は、ハイフンとアンダースコア)
厳密にはもっと細かい決まりはあるが、一般的な単語+数字・ハイフン・アンダースコアの組み合わせで命名しておけば、概ね問題はない。
contenteditable
ユーザーがその要素を編集できるかどうかを示します。
- true または 空文字列: 要素を編集可能。
- false: 要素の編集は不可能。
contextmenu
その要素のコンテキストメニューとして使う、<menu> 要素のidを指定する。
data-*
カスタムデータ属性。HTML と DOM の間で固有の情報をやり取りするために指定する属性です。JavaScript 側からは、その HTML 要素の dataset プロパティを使って、この属性の値にアクセスすることが出来ます。
dir
要素のテキストの記述方向を指定します。
- ltr: left to right で左から右に記述する言語向け。英語や横書きの日本語向けの設定。
- rtl: right to left で右から左に記述する言語向け。アラビア語などに使うが、日本語の場合も、縦書きにする場合はこの設定にする場合もある。
- auto: コンテンツの内容に基づいて、ユーザーエージェントに決定させる。
draggable
Drag and Drop API を使って、要素をドラッグできるかどうかを示す。
- true: ドラッグ可。
- false: ドラッグ不可。
hidden
この属性が指定されている場合、ブラウザはその要素を表示しません。ただし、CSS で display プロパティを指定している場合はそちらが優先されます。
id
その文書(ページ)内で、要素を一意に識別するためのキーワードを設定します。リンクやスクリプト、スタイルシートで要素を指定する際に使います。
inputmode
この要素やその内容を編集するときに使う、仮想キーボード構成のタイプについて、ブラウザに対してヒントを与えるのに使います。(半角英数のみにするなど)
主に<input>要素で使いますが、contenteditable 属性で編集可能になった要素でも使用できます。
is
この属性を使うことで、標準の HTML 要素が定義されたカスタム内蔵要素のように振舞うよう指定することができます。
この属性は、指定されたカスタム要素名が現在の文書で正常に定義され、適用されている要素型が拡張されている場合にのみ使用します。
itemid
Microdata 関連。項目の一意でグローバルな識別子です。
itemprop
Microdata 関連。項目にプロパティを追加するために使います。全 HTML 要素は itemprop 属性を指定することができて、itemprop は名前と値のペアで構成されます。
itemref
Microdata 関連。itemscope 属性を持つ要素の子孫以外のプロパティは、 itemref を使って項目に関連付けることができます。文書中の他の場所で追加のプロパティがある要素の id ( itemid ではないので注意)の一覧を提供します。
itemscope
Microdata 関連。itemscope は itemtype とともに、ブロックに含まれている HTML が特定の項目に関するものであることを指定します。 itemscope は項目を作成し、それに関連付けられる itemtype のスコープを定義します。 itemtype は、項目やそのプロパティの文脈を説明するボキャブラリー (schema.org など) の有効な URL です。
itemtype
Microdata 関連。データ構造内の itemprop (項目のプロパティ)を定義するために使う、ボキャブラリーの URL を指定します。 itemscope は、 itemtype で設定したボキャブラリーがデータ構造内でアクティブになるスコープを設定するために使用します。
lang
要素の言語を定義します。編集不可能な要素を記述している言語、または編集可能な要素に記述されるべき言語を定義します。
なお、xml:lang の指定がある場合は、そちらが優先されます。
style
要素に適用する、CSS スタイル宣言を記述します。メンテナンス性などを考えると、CSS は別ファイルに記述するほうが望ましいが、テスト目的で手っ取り早くスタイル宣言を試して見る場合などに使います。
tabindex
要素が入力フォーカスを受け付ける場合に、順番的なキーボードナビゲーションに含めるかどうかを、整数で指定します。(この値の昇順で、順番にフォーカスが移動していく)
なお、負の値も指定できますが、その場合は、キーボードによるナビゲーション( TAB や SHIFT + TAB )ではフォーカスしません。
title
要素に関するアドバイザリー情報を表すテキストを設定します。この情報は通常、ツールチップとしてユーザーに表示されますが、必ず表示されるとは限りません。
イベントハンドラ属性
onabort
onautocomplete
onautocompleteerror
onblur
oncancel
oncanplay
oncanplaythrough
onchange
onclick
onclose
oncontextmenu
oncuechange
ondblclick
ondrag
ondragend
ondragenter
ondragexit
ondragleave
ondragover
ondragstart
ondrop
ondurationchange
onemptied
onended
onerror
onfocus
oninput
oninvalid
onkeydown
onkeypress
onkeyup
onload
onloadeddata
onloadedmetadata
onloadstart
onmousedown
onmouseenter
onmouseleave
onmousemove
onmouseout
onmouseover
onmouseup
onmousewheel
onpause
onplay
onplaying
onprogress
onratechange
onreset
onresize
onscroll
onseeked
onseeking
onselect
onshow
onsort
onstalled
onsubmit
onsuspend
ontimeupdate
ontoggle
onvolumechange
onwaiting
MDN Web Docs: https://developer.mozilla.org/ja/
W3C仕様の正確な定義、最新情報は上記サイトをご覧ください。

コメント