グローバル属性とは？

グローバル属性は、すべてのHTML要素で使用することができる共通の属性です。すべてを覚える必要はありませんが、よく使うグローバル属性・構造化マークアップに必要な属性は覚えておきましょう。

この記事の目次

よく使うグローバル属性

id 概要 HTML文章に識別コードを定義することができます。HTML文章全体でひとつまでしか使用することができません。ID属性を付与することによりスタイルやスクリプトを操作する際に、要素を特定しやすくなりになります。
属性の値 英字から始まる英数字
class 概要 class要素はid要素と違い、HTML文章全体にいくつでも設置することができます。document.getElementsByClassName()とfor関数などを使い特定の要素を選択したり動的な操作をさせることが可能になります。
属性の値 英字から始まる英数字
style 概要 要素に対して、CSSのスタイルを指定します。
属性の値 スタイルシートの値

スポンサードサーチ

ユーザビリティ

title 概要 要素に対してタイトルをつけることができます。
属性の値 任意のテキスト（日本語可）
accesskey 概要 input要素 や textarea要素に対して入力を行う際、自動的に大文字になるケースがありますが、autocaptitalize要素はそのような昨日を制御する際に使用することができます。
属性の値 任意のキー（1文字）
tabindex 概要 tabキーによるフォーカスの移動順序などを指定できます。
属性の値 整数の指定（ 1 → 2 → 3 ~）

言語関連

lang 概要 サイトに対して国の言語コードを指定します。日本語ドキュメントの際は（ja）となります。
属性の値 言語コード（en , ja など）
dir 概要 HTML要素にdir属性を指定すると、要素内のテキストの書字方向を示すことができます。
属性の値
  • ="ltr" 左から右へを指定
  • ="rtl" 右から左へを指定（アラビア語やヘブライ語などで使用）
  • ="auto" 自動的に書字方向を判断しますが、誤った解釈をする可能性がある為、非推奨です。

スポンサードサーチ

編集・スペルチェック・翻訳

contentEditable 概要 要素に対してタイトルをつけることができます。
属性の値
  • ="true"編集をオフにする
  • ="false"編集を機能をオフにする
spellcheck 概要 要素内容のスペルチェック、文法チェックの有無を指定することができます。（日本語には非対応です。）
属性の値
  • ="true"スペル・文法をチェックする
  • ="false"スペル・文法をチェックしない
translate 概要 要素内の翻訳可否を指定します。
属性の値
  • ="yes"翻訳対象にする
  • ="no"翻訳対象にしない

ドラッグ・ドロップ

draggable 概要 指定した要素がドラッグできるか否かを指定することができます。
属性の値
  • ="true"ドラッグ可能な要素を指定
  • ="false"ドラッグ不可の要素を指定
dropzone 概要 ドロップしたアイテムをどのように処理するかを指定できます。dropzoneに対してはtitle属性が推奨されています。
属性の値
  • ="copy" ドラッグしたアイテムのコピーを作成できます。
  • ="move" アイテムをその場所に移動できます。
  • ="link" アイテムのリンクを作成できます。
  • ="string" 文字列（MIMEタイプなどを記述します。）
  • ="string" ファイル名（MIMEタイプなどを記述します。）

スポンサードサーチ

構造化マークアップ（Microdata）

itemscope 概要 構造化データをマークアップする際、要素に対してプロパティを指定する属性です。
属性の値 なし
itemtype 概要 必ずitemscope属性値と併記される属性で、当該要素に埋込まれるマイクロデータのタイプ(人物や商品など)です。
属性の値 http://schema.org/Blog（ブログの場合）など
詳しい一覧はこちらschema.org
itemprop 概要 クローラーにより分かりやすく伝えるため、プロパティを指定する属性です。
属性の値 articleBody,author,imgなど任意の英字
itemref 概要 構造化データをマークアップするうえで、何らかの事情で離れた場所にある要素と要素を関連付けるための属性です。
属性の値 離れた要素で、itemscope属性が付与された要素のid属性値
itemrid 概要 そのデータの情報を参照できるURLを指定します。
属性の値 任意のURL / URN

その他属性

data-* 概要 data-*で始まる属性はカスタムデータ属性と呼ばれ、記述のケースはさまざまありますが、不特定多数の要素に対して固有の情報を付与することができます。
属性の値 ="data-id" ,="data-list" など任意の英数字（大文字は使用できません。）
hidden 概要 付与することで要素を非表示にすることができます。CSSでdisplay:blockをあてることにより無効となりますのでご注意ください。
属性の値 なし
slot 概要 Shadow DOMのslot要素を書き換えるための属性です。Shadow DOMのホストとなる要素の子要素に付与する必要があります。
is 概要 カスタム要素で利用する属性です。
inputmode 概要 inputmode属性はHTML 5.2で廃止されており、type属性で同様のことができるためそちらを使用しましょう。
contextmenu 概要 contextmenu属性は廃止されており、すべてのブラウザから削除される予定です。