グローバル属性｜HTML－havin' a coffee break

＃

“グローバル属性”について

“グローバル属性(Global attributes)”はHTML5で新たに導入された定義で、すべてのHTMLの要素で指定することができる共通の属性です。



要素に固有の識別子を指定

<section id="section1">





要素に直接スタイルシートを指定

<span style=" font-style: italic;">このテキストは斜体</span>





要素に補足情報を付ける

<img src="sample.jpg" alt="バナナの木に実ったまだ青いバナナの果実" title="&copy; 2018 frouts wo taberu">

HTML4でもほとんどの要素で指定することができる共通属性が定義されていましたが、新たに追加された属性とともに定義しなおされています。

すべての要素で指定することができますが、要素によっては何の効果もない場合があります。

＃

グローバル属性の一覧

属性		値
属性	説明	値	説明
accesskey=""	要素にアクセスキーを割り当てる	文字	ユニコード1文字によるアクセスキー
autocapitalize=""	要素に入力されたテキストの先頭の文字を大文字化するかを指定する	none	自動的な大文字化は行わない
		off	自動的な大文字化は行わない
		on	文章の最初の文字を大文字化する
		sentences	文章の最初の文字を大文字化する
		words	単語の最初の文字を大文字化する
		charactors	すべての文字を大文字化する
autofocus=""	要素に自動的にフォーカスする	autofocus	要素に自動的にフォーカスする
class=""	要素にクラス名を指定する	文字列	要素で指定するクラス名
contenteditable=""	要素の内容が編集可能かどうかを指定する	true	要素は編集可能
		plaintext-only	要素内の生テキストコンテンツのみ編集可能で、リッチテキストの整形は無効
		false	要素は編集不可
dir=""	要素の内容の書字方向を示す	auto	自動
		ltr	左から右へ文字を書く
		rtl	右から左へ文字を書く
draggable=""	要素がドラッグが可能かどうかを指定する	true	ドラッグ可能
draggable=""	要素がドラッグが可能かどうかを指定する	false	ドラッグ不可
enterkeyhint=""	ソフトウェアキーボードの[Enter]キーのアイコンを指定する	enter	“改行”
		done	“完了”
		go	“実行”
		next	“次へ”
		previous	“戻る”
		search	“検索”
		send	“送信”
hidden=""	要素の内容が関連性がないことを表す	until-found	検索されるまで要素を隠す
hidden=""	要素の内容が関連性がないことを表す	hidden	要素の内容が関連性がないことを表す
id=""	要素に固有の識別子を指定する	文字列	要素で指定するID名
inert=""	要素を不活性化する	inert	要素を不活性化する
inputmode=""	要素に入力する時のソフトウェアキーボードの種類を指定する	none	ソフトウェアキーボードを表示しない
		text	ユーザーの地域に適切なテキストの入力
		tel	電話番号の入力
		url	URLの入力
		email	メールアドレスの入力
		numeric	数値の入力
		decimal	実数の入力
		search	検索用の入力
is=""	要素をカスタム要素と関連付ける	カスタム要素の名前	カスタム要素の名前
itemid=""	要素の内容のマイクロデータのグローバルな識別子を示す	URI	要素の内容のマイクロデータのグローバルな識別子
itemprop=""	要素の内容のマイクロデータのプロパティ名を指定する	プロパティ名	“itemtype”属性で指定された定義に基づくプロパティ名
itemref=""	要素の外にあるマイクロデータと関連付ける	ID名	関連付けるマイクロデータを含む要素の“id”属性の値
itemscope=""	要素の内容にマイクロデータが含まれることを示す	itemscope	要素の内容にマイクロデータが含まれることを示す
itemtype=""	要素の内容のマイクロデータのプロパティ名の定義を示す	URL	要素の内容のマイクロデータのプロパティ名の定義
lang=""	要素の内容の記述言語を示す	言語コード	要素の内容が記述されている言語
popover=""	ポップオーバー要素を表す	auto	開いたときに他のポップオーバーを閉じ、ライト・ディスミスできます
popover=""	ポップオーバー要素を表す	manual	他のポップオーバーを閉じず、ライト・ディスミスできません
nonce=""	コンテンツセキュリティポリシーのためのワンタイムトークン	ワンタイムトークン	自動生成したBASE64でエンコードされた暗号
slot=""	要素にスロットを割り当てる	スロット名	要素を割り当てる“slot”要素の“name”属性の値
spellcheck=""	要素の内容のスペルチェックを行うかどうかを指定する	true	スペルチェックを行う
spellcheck=""	要素の内容のスペルチェックを行うかどうかを指定する	false	スペルチェックを行わない
style=""	要素に直接スタイルシートを指定する	スタイルシート	要素で指定するスタイルシートのプロパティ
tabindex=""	フォーカスの可否とフォーカスの移動順序を指定する	正の整数	順次ナビゲーションに加わり、フォーカスの順番を指定(“tabindex”属性の値が小さい順番にフォーカスする)
		0	順次ナビゲーションに加わるがフォーカスの順番は指定しない(文書内に記述された順番でフォーカスする)
		負の整数	フォーカス可能だが順次ナビゲーションには加わらない
title=""	要素に補足情報を付ける	テキスト	補足情報
translate=""	要素の内容を翻訳するかどうかを指定する	yes	機械翻訳の対象とする
translate=""	要素の内容を翻訳するかどうかを指定する	no	機械翻訳の対象としない

過去に定義されていた属性

属性		値
属性	説明	値	説明
contextmenu=""	要素をコンテキストメニューに関連付ける	ID名	関連付ける“menu”要素の“id”属性の値
dropzone=""	要素にドロップしたアイテムの受け入れ方法を指定する	copy	ドロップしたアイテムは要素内にコピーされる
		move	ドロップされたアイテムは要素内に移動される
		link	ドロップされたアイテムへのリンクを生成する
		string:MIMEタイプ	指定されたMIMEタイプのアイテムを文字列として受け取る
		file:MIMEタイプ	指定されたMIMEタイプのアイテムをファイルとして受け取る

＃

すべての要素で指定できるイベントハンドラ属性

イベントハンドラ属性はその属性値に記述されたスクリプトをユーザーの操作に合わせて実行させるための属性です。一部のイベントハンドラ属性はすべての要素で指定することができ、グローバル属性に含まれます。

属性		値
属性	説明	値	説明
onabort=""	データの読み込みを中断した時に実行されるスクリプト	スクリプト	データの読み込みを中断した時に実行されるスクリプト
onauxclick=""	要素をマウスのメインのボタン以外でクリックした時に実行されるスクリプト	スクリプト	要素をマウスのメインのボタン以外でクリックした時に実行されるスクリプト
onbeforematch=""	“hidden="until-found"”が指定された要素が表示される前に実行されるスクリプト	スクリプト	“hidden="until-found"”が指定された要素が表示される前に実行されるスクリプト
onblur=""	要素がフォーカスを失った時に実行されるスクリプト	スクリプト	要素がフォーカスを失った時に実行されるスクリプト
oncancel=""	ダイアログをキャンセルした時に実行されるスクリプト	スクリプト	ダイアログをキャンセルした時に実行されるスクリプト
oncanplay=""	メディアが再生可能になった時に実行されるスクリプト	スクリプト	メディアが再生可能になった時に実行されるスクリプト
oncanplaythrough=""	バッファリングのために中断しないで最後までメディアを再生することができるようになった時に実行されるスクリプト	スクリプト	バッファリングのために中断しないで最後までメディアを再生することができるようになった時に実行されるスクリプト
onchange=""	要素の入力内容に変化があった時に実行されるスクリプト	スクリプト	要素の入力内容に変化があった時に実行されるスクリプト
onclick=""	マウスのメインのボタンでクリックした時に実行されるスクリプト	スクリプト	マウスのメインのボタンでクリックした時に実行されるスクリプト
onclose=""	ダイアログを閉じた時に実行されるスクリプト	スクリプト	ダイアログを閉じた時に実行されるスクリプト
oncontextmenu=""	コンテキストメニューを表示した時に実行されるスクリプト	スクリプト	コンテキストメニューを表示した時に実行されるスクリプト
oncopy=""	要素上でコピーした時に実行されるスクリプト	スクリプト	要素上でコピーした時に実行されるスクリプト
oncuechange=""	メディアの字幕や副音声トラックが読み込まれた時に実行するコード	スクリプト	メディアの字幕や副音声トラックが読み込まれた時に実行するコード
oncut=""	要素上で切り取りをした時に実行されるスクリプト	スクリプト	要素上で切り取りをした時に実行されるスクリプト
ondblclick=""	要素がダブルクリックされた時に実行されるスクリプト	スクリプト	要素がダブルクリックされた時に実行されるスクリプト
ondrag=""	要素のドラッグされた時に実行されるスクリプト	スクリプト	要素のドラッグされた時に実行されるスクリプト
ondragend=""	要素のドラッグが終わった時に実行されるスクリプト	スクリプト	要素のドラッグが終わった時に実行されるスクリプト
ondragenter=""	ドラッグしたアイテムが要素に入った時に実行されるスクリプト	スクリプト	ドラッグしたアイテムが要素に入った時に実行されるスクリプト
ondragleave=""	ドラッグしたアイテムが要素から離れた時に実行されるスクリプト	スクリプト	ドラッグしたアイテムが要素から離れた時に実行されるスクリプト
ondragover=""	ドラッグしたアイテムが要素の上に重なった時に実行されるスクリプト	スクリプト	ドラッグしたアイテムが要素の上に重なった時に実行されるスクリプト
ondragstart=""	要素のドラッグが始まった時に実行されるスクリプト	スクリプト	要素のドラッグが始まった時に実行されるスクリプト
ondrop=""	要素にアイテムをドロップされた時に実行されるスクリプト	スクリプト	要素にアイテムをドロップされた時に実行されるスクリプト
ondurationchange=""	メディアの長さが変わった時に実行されるスクリプト	スクリプト	メディアの長さが変わった時に実行されるスクリプト
onemptied=""	メディアの一時データが空になった時に実行されるスクリプト	スクリプト	メディアの一時データが空になった時に実行されるスクリプト
onended=""	メディアの再生が終了したときに実行するスクリプト	スクリプト	メディアの再生が終了したときに実行するスクリプト
onerror=""	要素の処理中にエラーが発生した時に実行されるスクリプト	スクリプト	要素の処理中にエラーが発生した時に実行されるスクリプト
onfocus=""	要素がフォーカスされた時に実行されるスクリプト	スクリプト	要素がフォーカスされた時に実行されるスクリプト
onformdata=""	フォームのエントリリストを生成した時に実行されるスクリプト	スクリプト	フォームのエントリリストを生成した時に実行されるスクリプト
oninput=""	要素に入力された時に実行するスクリプト	スクリプト	要素に入力された時に実行するスクリプト
oninvalid=""	要素の入力内容が無効な時に実行されるスクリプト	スクリプト	要素の入力内容が無効な時に実行されるスクリプト
onkeydown=""	要素上でキーが押された時に実行されるスクリプト	スクリプト	要素上でキーが押された時に実行されるスクリプト
onkeypress=""	要素上でキーを押して放した時に実行されるスクリプト	スクリプト	要素上でキーを押して放した時に実行されるスクリプト
onkeyup=""	要素上でキーを放した時に実行されるスクリプト	スクリプト	要素上でキーを放した時に実行されるスクリプト
onloadeddata=""	メディアのデータが読み込まれた時に実行されるスクリプト	スクリプト	メディアのデータが読み込まれた時に実行されるスクリプト
onloadedmetadata=""	メディアのメタデータが読み込まれた時に実行されるスクリプト	スクリプト	メディアのメタデータが読み込まれた時に実行されるスクリプト
onloadstart=""	メディアのデータの読み込みが始まる時に実行されるスクリプト	スクリプト	メディアのデータの読み込みが始まる時に実行されるスクリプト
onmousedown=""	要素上でマウスのボタンを押した時に実行されるスクリプト	スクリプト	要素上でマウスのボタンを押した時に実行されるスクリプト
onmouseenter=""	マウスのカーソルを要素の上に移動した時に実行されるスクリプト	スクリプト	マウスのカーソルを要素の上に移動した時に実行されるスクリプト
onmouseleave=""	マウスのカーソルを要素の外に移動した時に実行されるスクリプト	スクリプト	マウスのカーソルを要素の外に移動した時に実行されるスクリプト
onmousemove=""	要素上でマウスのカーソルを移動した時に実行されるスクリプト	スクリプト	要素上でマウスのカーソルを移動した時に実行されるスクリプト
onmouseout=""	マウスのカーソルを要素の外へ移動した時に実行されるスクリプト	スクリプト	マウスのカーソルを要素の外へ移動した時に実行されるスクリプト
onmouseover=""	マウスのカーソルを要素と重なった時に実行されるスクリプト	スクリプト	マウスのカーソルを要素と重なった時に実行されるスクリプト
onmouseup=""	要素上でマウスのボタンを放した時に実行されるスクリプト	スクリプト	要素上でマウスのボタンを放した時に実行されるスクリプト
onpaste=""	要素上で貼り付けをした時に実行されるスクリプト	スクリプト	要素上で貼り付けをした時に実行されるスクリプト
onplay=""	メディアを再生した時に実行されるスクリプト	スクリプト	メディアを再生した時に実行されるスクリプト
onplaying=""	メディアが再生中になった時に実行されるスクリプト	スクリプト	メディアが再生中になった時に実行されるスクリプト
onprogress=""	メディアのデータの読み込み中に時に実行されるスクリプト	スクリプト	メディアのデータの読み込み中に時に実行されるスクリプト
onratechange=""	メディアの再生速度を変更した時に実行されるスクリプト	スクリプト	メディアの再生速度を変更した時に実行されるスクリプト
onreset=""	フォームをリセットした時に実行されるスクリプト	スクリプト	フォームをリセットした時に実行されるスクリプト
onresize=""	ウィンドウサイズを変更した時に実行されるスクリプト	スクリプト	ウィンドウサイズを変更した時に実行されるスクリプト
onscroll=""	要素上でスクロールした時に実行されるスクリプト	スクリプト	要素上でスクロールした時に実行されるスクリプト
onsecuritypolicyviolation=""	コンテンツセキュリティポリシーに違反した時に実行されるスクリプト	スクリプト	コンテンツセキュリティポリシーに違反した時に実行されるスクリプト
onseeked=""	メディアの再生位置の変更が終わった時に実行されるスクリプト	スクリプト	メディアの再生位置の変更が終わった時に実行されるスクリプト
onseeking=""	メディアの再生位置の変更を始めた時に実行されるスクリプト	スクリプト	メディアの再生位置の変更を始めた時に実行されるスクリプト
onselect=""	要素の入力内容が選択された時に実行されるスクリプト	スクリプト	要素の入力内容が選択された時に実行されるスクリプト
onslotchange=""	スロットが含まれるノードが変更された時に実行されるスクリプト	スクリプト	スロットが含まれるノードが変更された時に実行されるスクリプト
onstalled=""	メディアのデータが読み込めなかった時に実行されるスクリプト	スクリプト	メディアのデータが読み込めなかった時に実行されるスクリプト
onsubmit=""	フォームを送信した時に実行されるスクリプト	スクリプト	フォームを送信した時に実行されるスクリプト
onsuspend=""	メディアのデータが読み込みをしていない状態になった時に実行されるスクリプト	スクリプト	メディアのデータが読み込みをしていない状態になった時に実行されるスクリプト
ontimeupdate=""	メディアの再生時刻が更新された時に実行されるスクリプト	スクリプト	メディアの再生時刻が更新された時に実行されるスクリプト
ontoggle=""	開閉式のウィジェットを開閉した時に実行されるスクリプト	スクリプト	開閉式のウィジェットを開閉した時に実行されるスクリプト
onvolumechange=""	メディアの音量が変更された時に実行されるスクリプト	スクリプト	メディアの音量が変更された時に実行されるスクリプト
onwaiting=""	メディアの再生がバッファリングのために途中で止まった時に実行されるスクリプト	スクリプト	メディアの再生がバッファリングのために途中で止まった時に実行されるスクリプト
onwheel=""	要素上でマウスのホイールを回した時に実行されるスクリプト	スクリプト	要素上でマウスのホイールを回した時に実行されるスクリプト

過去に定義されていた属性

属性		値
属性	説明	値	説明
ondragexit=""	ドラッグしたアイテムが要素から出た時に実行されるスクリプト	スクリプト	ドラッグしたアイテムが要素から出た時に実行されるスクリプト
onloadend=""	メディアのデータの読み込みが終わる時に実行されるスクリプト	スクリプト	メディアのデータの読み込みが終わる時に実行されるスクリプト
onmousewheel=""	要素上でマウスホイールを動かした時に実行されるスクリプト	スクリプト	要素上でマウスホイールを動かした時に実行されるスクリプト
onshow=""	操作メニューを表示した時に実行されるスクリプト	スクリプト	操作メニューを表示した時に実行されるスクリプト