グローバル属性（1/3）

グローバル属性とは、あらゆるHTML要素で利用できるコンテンツ属性のことを表します。HTML5では、次のグローバル属性が規定されています。

accesskey、class、contenteditable、contextmenu、dir、draggable、hidden、id、lang、spellcheck、style、tabindex、title、data-*

accesskeyコンテンツ属性（アクセスキー）

accesskeyコンテンツ属性は、キーボード・ショートカット用のキーを指定するために使います。この属性に指定されたキーをキーボードで打つと、該当の要素にフォーカスを当てることができます。
このコンテンツ属性は、モバイル・デバイス向けのサイトに良く使われています。

■利用例

  <nav>
  	<ul>
  	    <li><a href="page1.html" accesskey="1" title="ページ1(1)">ページ1</a></li>
  	    <li><a href="page2.html" accesskey="2" title="ページ2(2)">ページ2</a></li>
  	    <li><a href="page3.html" accesskey="3" title="ページ3(3)">ページ3</a></li>
  	</ul>
  </nav>
    

実際、accesskeyの呼び出し方と挙動は、ブラウザやOSによって異なります。HTML5仕様では、a要素のaccesskeyが押されたらリンク先に移動することになっていますが、ブラウザによってはaccesskeyコンテンツ属性に指定されたキーを押しただけでは、何も起こらないこともあります。

■Windows用ブラウザでのaccesskey="1"の使い方と挙動

挙動の表のように、accesskeyに指定したキーは、いくつかのキーを同時に押す必要があります。これらの同時に押さなければならないキーのことを修飾キーと言いますが、HTML5仕様では修飾キーについては規定はありません。
accesskeyコンテンツ属性に複数のキーを指定したい場合は、半角スペースで区切ってマークアップします。

  <a href="about.html" accesskey="a 5">概要について</a>
    

デバイスが対応していないキーについては無視され、対応しているキーが見つかったら、その最初のキーを割り当てキーとして採用します。一般に、携帯はテンキーの数字が、パソコンであればアルファベットが採用される場合が多い。

classコンテンツ属性（クラス）

classコンテンツ属性は、スタイルシートのフックとしてよく利用され、どのような文字でも入れることが可能です。また、半角スペースで区切って複数のワードを入れることもできます。このワードのことをトークンといい、複数のトークンを指定した場合は、このトークンが重複しないように注意します。

HTML5では、DOMにgetElementsByClassName()メソッドが規定され、このメソッドを使って要素を取り出すときには、classコンテンツ属性が使われます。

指定するトークンに制約はありませんが、コンテンツの見栄え（デザイン、スタイル）を表すようなワードではなく、コンテンツの性質や意味などを表すワードを使うことが推奨されます。
例えば、次のような2つのマークアップを考えてみます。

• ① <p class="red">メモ書きの内容です。</p>
• ② <p class="memo">メモ書きの内容です。</p>

①のマークアップは、赤い文字のスタイリングを想定したものですが、後から青色にすることも考えられ、その場合はclassコンテンツ属性のワードも変更しなければならないということから、ワードには向いていません。②は、コンテンツの性質をあらわすmemoを指定することで、コンテンツ自身の意味が分かりやすくなります。

contenteditableコンテンツ属性（編集有効化）

contenteditableコンテンツ属性は、該当の要素を編集可能にするかどうかを表します。この属性は列挙属性で、"true"を指定すると編集が可能で、"false"を指定すると編集ができません。

■利用例

  <p contenteditable="true">この箇所は編集ができます。</p>
    

■ブラウザでのレンダリング結果（Chromeの場合）

利用例は、編集可能にしていますので、フォーカスを当てるとカーソルが点滅して文字が入力できる状態になります。文字を編集後、フォーカスが離れると通所のコンテンツのように編集内容がレンダリングされます。

contextmenu要素（コンテキスト・メニュー）

contextmenuコンテンツ属性には、menu要素のid属性値を指定することで、menu要素でマークアップされたコンテキスト・メニューが、このコンテンツ属性がセットされた要素に結び付けられます。
コンテキスト・メニューとは、マウスで右クリックしたときに表示されるメニューのことを指します。

■利用例

  <form name="adfrm">
  	<label>入力欄：
  		<input id="addr" name="addr" type="text" 
  			contentmenu="addmenu" required="required" />
  	</label>
  	<menu type="context" id="addrmenu">
  		<command label="検索" onclick="showSearchBox()" />
  		<command label="消去" 
  			onclick="document.getElementsById('addr').value=''" />
  		<command label="すべて選択" 
  			onclick="selectAllText(document.getElementsById('addr'))" />
  	</menu>
  </form>
    

利用例のように、JavaScriptと組み合わせて、独自のコンテキスト・メニューを作成することができますが、現時点（2011/08）ではこのコンテンツ属性に対応したブラウザはありません。