本ページには広告が含まれています。

【HTML】グローバル属性_Webの基礎知識

HTML要素のグローバル属性_Webの基礎知識
画像はCanva「Text to Image」で生成しました

Webページの基礎、HTMLのグローバル属性についてです。

スポンサーリンク

グローバル属性とは

グローバル属性は、その名前のとおり、すべての要素で利用することができる属性のことです。

グローバル属性は、HTMLに標準で規定されている要素だけでなく、ユーザーが定義した独自の要素でも機能します。

例えば、<kurumico style="background-color: #0f0">独自要素テスト</kurumico>のように記述した場合でも、style属性が反映されて文字の背景色が緑で表示されます。

独自要素「kurumico」のテスト

グローバル属性一覧

以下が、グローバル属性の一覧です。属性名に設定しているリンクは、MDN Web Docsの該当ページが開くように設定しています。

属性名簡単な説明
accesskeyキーボード・ショートカット用のキーを指定します。
autocapitalizeユーザが入力した文字を大文字に変換したりできます。
autofocusページが開かれた時に要素をフォーカスします。
class特定の要素を選択したりアクセスしたりすることができます。
contenteditable要素のコンテンツが編集可能かを定義します。
data-**部分に1文字以上の任意の文字列を使ってデータを定義します。
dir要素のテキストの書字方向を示す列挙型属性を指定します。
draggable要素のドラッグ可否を指定します。
enterkeyhint仮想キーボードのEnterキーに表示する内容を指定します。
hiddenページに関係ない要素を非表示にするために使います。
idページの一意の場所を示す識別子(ID)を定義します。
inertその要素に対するユーザー入力イベントを無視する論理値です。
inputmode仮想キーボードを使う時の情報をブラウザに提供します。
is標準のHTML要素を継承するカスタム要素の名前を指定します。
itemid構造化データで、一意となる識別子を記述します。
itemprop構造化データで、プロパティ(name:※※※など)を定義します。
itemref構造化データで、小孫でない要素のidを使って関連付けます。
itemscope構造化データの範囲(スコープ)となる要素で使います。
itemtypeデータ構造内の何を定義しているのかを示します。
lang言語を指定します。
nonce暗号化ノンスで、取得を許可するかどうかを決定します。
part要素のパート名の空白区切りによるリストです。
roleオブジェクトを表示し、対話を支援することを可能にします。
slotシャドウツリー内のスロットを、要素に割り当てます。
spellcheck要素でスペルチェックを行うかどうかを定義します。
style要素に適用するCSSのスタイル宣言を設定します。
tabindexタブでフォーカスされる順番を定義します。
title要素の追加情報を表示します。
translate要素を翻訳対象とするか、しないかを指定します。
virtualkeyboardpolicy仮想キーボード動作を制御するために使用されます。

おわりに

HTMLの要素で共通の属性、グローバル属性の一覧を掲載しました、

グローバル属性は、全てのHTML要素に対して指定できる共通の属性です。HTMLで使用するタグには、固有の属性が実装されている場合もありますが、汎用的な機能としてグローバル属性が設定されています。

グローバル属性を全て暗記しておく必要は今のところはありませんので、この一覧から必要な属性の情報にリンクを辿っていけるようにした次第です。

今後、詳しく解説する必要が出てきた場合、解説記事へのリンクに置き換えていくようにしたいと思います。

このページは自分用に作成したものですが、万一少しでも誰かのお役に立てたなら幸いです。

スポンサーリンク

当サイトの記事で使用したVBAなどのサンプルをDLできます

この記事のサンプルはありません!

ダウンロードページへは下のカードをクリックすればジャンプできます。
よろしければご利用ください!