HTML グローバル属性

```html

 

 

HTML グローバル属性

HTMLの全局属性とは、ほとんどのHTML要素に適用できる属性を指します。これらの属性は、要素の外観や動作を制御するために使用されます。以下に代表的なHTML全局属性について説明します。

New : HTML5 の新しい属性

HTML5において、新たに追加された有用な全局属性がいくつかあります。これにより、ウェブページのインタラクションやアクセシビリティが向上しました。

属性とその説明

属性 説明
accesskey 設定したキーを押すことで、要素に直接アクセスできるようにする。
class 要素のクラス名(classname)を指定する。
contenteditable New 要素の内容を編集可能にする。
contextmenu New 要素を右クリックしたときに表示されるコンテキストメニューを指定する。
data-* New ページにカスタムデータを保存するために使用される属性。
dir 要素のテキスト方向を指定する。
draggable New 要素をドラッグ可能にするかどうかを指定する。
dropzone New データをコピー、移動、またはリンクするかどうかを指定する。
hidden New 要素を非表示にする。
id 要素の一意のIDを指定する。
lang 要素内の内容の言語コードを設定する。
spellcheck New 要素内の内容のスペルチェックをするかどうかを指定する。
style 要素のインラインスタイル(inline style)を指定する。
tabindex タブキーによる要素間の移動順序を指定する。
title 要素の追加情報を指定し、ツールチップに表示される。
translate New ページ読み込み時に要素の値を翻訳するかどうかを指定する。

実例

以下はいくつかのHTML全局属性の使用例です。

accesskey属性の例

 <button accesskey="s">保存</button>

class属性の例

        <div class="my-class">
            これはクラス属性の例です。
        </div>
    

data-* 属性の例

        <div data-user-id="12345">
            ユーザーIDを保持するカスタムデータ属性の例です。
        </div>
    

Q&A

Q1: 全局属性とは何ですか?

A1: 全局属性は、ほとんどのHTML要素に適用できる属性で、要素の外観や動作を制御するために使用されます。

Q2: HTML5で新たに追加された全局属性はどれですか?

A2: HTML5で新たに追加された全局属性には、contenteditable、contextmenu、data-*、draggable、dropzone、hidden、spellcheck、translateなどがあります。

Q3: accesskey属性はどのように機能しますか?

A3: accesskey属性を使用すると、設定されたキーを押すことで、特定の要素にキーボードショートカットで直接アクセスできるようになります。