グローバル属性-HTML-

グローバル属性

全要素に指定できるグローバル属性について紹介します。

HTML5では、HTML4.01で全要素に指定可能なclass、id、lang、style、dir以外にaccesskey、contenteditable、contextmenu、draggable、hidden、spellcheck、tabindexなども全要素に指定可能になりました。

グローバル属性の記述方法

属性を指定する場合は、開始タグ中の要素名のあとに半角スペースを空け「属性名=”属性値”」と記述します。

グローバル属性一覧

HTML4.01、HTML5で指定可能な属性

HTML5ではグローバル属性として指定できる属性が追加されましたが、HTML4.01、HTML5両方で指定できる属性は下記となります。

class=”クラス名”
属性値としてクラス名を指定し要素を分類します。クラス名を指定した要素にCSSのスタイルが適用されます。
クラス名は半角スペースで区切ることにより複数指定が可能です。
id=”id名”
属性値としてid名(識別子)を指定し要素を他と区別します。id名を指定した要素にCSSのスタイルを適用したり、リンク、スクリプト化の対象として利用できます。
id属性はドキュメント内で1度のみ指定(重複指定はできません)、半角スペースを含めることはできません。
lang=”言語コード”
要素のコンテンツや属性に含まれるテキストの言語を指定します。lang属性を省略した場合は、親要素のlang属性の値が継承されます。
style=”スタイルシート”
要素のスタイルをCSSで指定します。
dir=”文字表記の方向”
要素内のテキストの表記方向を指定します。「ltr」:左から右へ、「rtl」:右から左へ、「auto」:自動のいずれかを指定でき、デフォルトでは「ltr」です。dir属性を省略した場合は、親要素のdir属性の値が継承されます。

HTML5で追加された属性

HTML5では「HTML4.01、HTML5で指定可能な属性」以外に下記属性も指定することができます。

accesskey=”アクセスキー”
本属性を指定した要素にショートカットキーとして割り当てる文字(アクセスキー)を指定します。アクセスキーが割り当てられた要素は「ALTキー」と「アクセスキー」を同時に押すことにより選択・実行することが可能になります。
アクセスキーは文字1つで、半角スペースで区切って複数の文字を指定することが可能です。複数指定した場合は前に指定されている文字から適用可能な文字を使用します。
contenteditable=”編集可否を指定するキー”
本属性を指定した要素が編集可能かどうかを指定します。
要素を編集可能にする場合は「true」または空文字(“”)、編集不可にする場合は「false」を指定します。属性を省略した場合は、親要素の値が継承されます。
contextmenu=”対象menu要素のid属性値”
本属性を指定した要素を右クリックまたはキーの組み合わせによってフォーカスした場合に表示される「コンテキストメニュー(対象menu要素)」を関連づけます。属性値にはmenu要素のid名を指定します。
data-〇〇=”データ”
要素に独自の属性を適用し、属性名、データを格納します。data-〇〇の〇〇の部分に1文字以上の任意の文字列を記述し属性名になります。
格納したデータはJavaScriptなどで動的に使用します。
draggable=”ドラック可否を指定するキー”
本属性を指定した要素がドラッグ可能かどうかを指定します。
要素をドラッグ可能にする場合は「true」、ドラッグ不可にする場合は「false」を指定します。
属性を省略した場合は、自動(auto)となり、ブラウザの設定が適用されます。多くの場合、img要素、href属性を持ったa要素の属性値は「true」、それ以外は「false」がデフォルトです。
dropzone=”キーワードに続けてデータタイプ”
本属性を指定した要素にユーザーが項目をドラック&ドロップできるようにします。
キーワードには「copy」:項目をコピー、「move」:項目を移動、「link」:リンクを作成のいずれかを指定でき、省略時は「copy」が適用されます。
データタイプはキーワードの後に対象が「s」:文字列、「f」:ファイルのいずれかを指定し、タイプの後に:を記述して文字列、ファイル名を指定します。データタイプは複数指定可能です。
hidden
要素内容が他の部分とは無関係であることを示し、ある状況では隠しておきたい要素に対して指定します。指定した要素はブラウザのデフォルトでは非表示になります。
spellcheck=”スペルチェック可否を指定するキー”
本属性を指定した要素に対してスペルチェックを行うかどうかを指定します。
要素のスペルチェックを行う場合は「true」または空文字(“”)、チェック不可にする場合は「false」を指定します。本属性の対象は、入力フィールドまたはcontenteditable属性によって編集可能となっている要素だけです。
tabindex=”整数”
「tab」キーを使ったときに、要素への移動順序(フォーカス順序)を正の整数で指定します。タブキーを押すと値の小さい順から移動します。
フォーカスできる要素はa要素、input要素などで、p要素などはフォーカスされません。
title=”文字列”
本属性を指定した要素にカーソルを合したときに補足情報をツールチップで表示します。属性値の文字列が補足情報として表示されます。
属性を省略した場合は、親要素の値が継承されます。