トップページ >  HTML5 >  HTML5の新グローバル属性
初版2011/05/13： 最終更新日2011/05/13
HTML5の新グローバル属性
目次
・既存のグローバル属性
・追加されたグローバル属性
既存のグローバル属性
HTMLには、全ての要素で使えるグローバル属性が存在します。
下記は、HTML5以前からのグローバル属性です。
style
要素に直接スタイルシートを適用する際に使用します。
HTMLドキュメント内で部分的にスタイルを適用することができます。
最後に適用されるスタイル定義です。
class
要素にクラス名を付ける際に使用します。
HTMLドキュメント内で、要素のグルーピングに用います。
共通したスタイルを適用したい場合に便利です。
スペース区切りで複数のクラス名を指定できます。
id
要素に固有の名前（識別子）を付ける際に使用します。
id名は一意(重複して同じ名前の指定ができない)ものでなければなりません。
特定の要素にスタイルやスクリプトを適用する際に用います。
HTML4までは、リンク到達点には、a要素のname属性も使っていました。
HTML5からは、id属性がリンク到達点になります。
title
要素の補足情報(説明等)を指定する際に使用します。
ブラウザによりますが、ツールチップとして表示されるものです。
lang
要素内容の言語を指定する際に使用します。
日本語ならja、英語ならenを属性値として指定します。
言語が混在する場合、音声ブラウザなどへの影響を考慮してlang属性を指定します。
dir
要素内容の表示方向や読み上げ方向を指定する際に使用します。
英語や日本語(横書き)など、左から右への表示は「ltr」を指定します。
アラビア語など、右から左への表示は「rtl」を指定します。
追加されたグローバル属性
HTML5からは、上記のグローバル属性だけでなく、以下もグローバル属性として全要素で使用可能となりました。
accesskey
キーボード・ショートカットを作るためのもので、携帯等、マウスが使えない媒体で主に利用されている。
その値は、大文字・小文字を区別して順序付けスペース区切り固有トークンセットでなければいけません。
HTML4では、A, AREA, BUTTON, INPUT, LABEL,LEGEND,TEXTAREA 要素に対して定義されていました。
HTML5からは全ての要素にaccesskey属性を使用できます。
また、複数のキーをスペース区切りで指定できるようになりました。
例えば、「accesskey="s 0"」と指定した場合、「Ctrl+Alt+s」と「0」(テンキーデバイスだけの場合など)に対応します。
contenteditable
コンテンツをブラウザ上で編集することができる場合に使用します。
その値は、空文字列、true、false, inherit のいずれかです。
Internet Explore 5.5(win)以降で追加されていた属性です。
true 編集可能にします。
false 編集不可にします。
inherit 親の要素の属性を継承します。既定値。
HTML5からは全ての要素にcontenteditable属性を使用できます。

リスト1. contenteditable属性の記述例

<div contenteditable=true>
この文章はブラウザ上で編集できます。
</div>
この文章はブラウザ上で編集できます。
読み取り専用属性として「isContentEditable」もHTML5で追加されました。
この属性は、該当要素が取得時に「編集が可能であるか」を返します。
contextmenu
menu要素で定義されたコンテキスト・メニューを表示する時に使用します。
値には、表示させたいmenu要素のidを指定します。
※現在(2011.5月)、対応するブラウザはありません。

リスト2. contextmenu属性の記述例

<ul>
    <li contextmenu="context_win">
        例えば、ここでWindowsだとマウス右ボタンをクリックすると
        コンテキストメニューが表示されます。
    </li>
    <li contextmenu="context_mac">
        例えば、ここでMacだとCtrlキーとマウスボタンをクリックすると
        コンテキストメニューが表示されます。
    </li>
</ul>
<menu id="context_win">
    <command type="radio" radiogroup="ms-win" checked="checked"
        label="Windows XP" icon="images/win_xp.png"
        onclick="setMS('xp')">
    <command type="radio" radiogroup="ms-win" checked="checked"
        label="Windows Vista" icon="images/win_vista.png"
        onclick="setMS('vista')">
    <command type="radio" radiogroup="ms-win" checked="checked"
        label="Windows 7" icon="images/win_7.png"
        onclick="setMS('win7')">
</menu>
<menu id="context_mac">
    <command type="radio" radiogroup="macs" checked="checked"
        label="MacOS 9" icon="images/mac9.png"
        onclick="setMS('mac9')">
    <command type="radio" radiogroup="macs" checked="checked"
        label="MacOS X" icon="images/macX.png"
        onclick="setMS('macX')">
</menu>
draggable
該当要素をブラウザ上でドラッグ可能にする場合に使用します。
その値は、空文字列、true、false のいずれかです。
Drag and Drop APIに対応します。
true ドラッグ可能にします。
false ドラッグ不可にします。
指定なし(auto) ユーザーエージェントのデフォルトの挙動が採用されます。既定値
※大概ドラッグ不可となります。
使用方法などの詳細はDrag and Drop APIを参照。
dropzone
該当要素をドロップゾーンとしてする場合に使用します。
その値は、copy,move,link のいずれかとスペース区切りのトークンです。
Drag and Drop APIに対応します。
copy 該当の要素に受け入れ可能なアイテムをドロップすると、それはドラッグ・データのコピーになることを表します。
move 該当の要素に受け入れ可能なアイテムをドロップすると、それは新たな場所に移動されるドラッグ・データになることを表します。
link 該当の要素に受け入れ可能なアイテムをドロップすると、それはオリジナルのデータへのリンクになることを表します。
使用方法などの詳細はDrag and Drop APIを参照。
hidden
該当要素を隠したい場合に使用します。
要素にこの属性が指定されると、その要素が、まだ関連性がない、もしくは、すでに関連性がないことを示すことになります。
その値は、true か false です。
この属性は、タブ付きパネルなど 非表示のために使用すべきではありません。
spellcheck
入力フォーム等にユーザーが文字を入力した時に、スペルと文法をチェックする場合に使用します。
その値は、空文字列、true、false のいずれかです。
true または 空文字 スペルチェック、文法チェックを可能にします。
false スペルチェック、文法チェックを不可にします。
tabindex
Tabキーによるフォーカス（選択状態）を移動する順番を指定する場合に使用します。
HTML4では、A, AREA, BUTTON, INPUT, OBJECT, SELECT, TEXTAREA 要素に対して定義されていました。
正の値 値の小さい順にフォーカスが移動していきます。
負の値 Tabキーでのフォーカス移動はしません。
「0」(ゼロ) Tabキーでのフォーカス移動はします。
しかし、tabindex属性が指定されていない要素と同じ扱いになり、順番は優先されません。
HTML5からは全ての要素にtabindex属性を使用できます。
HOME