グローバル属性は、どの要素でも使える属性です。
HTML5より前にも、class、id、lang、title、style、dirがどの要素でも使える属性でしたが、HTML5ではさらに増えて、グローバル属性 と呼ばれるようになりました。
今回は、グローバル属性についてまとめます。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
目次
accesskey 属性は、キーボードのショートカットキーを指定する際に使用します。
指定できる値はユニコード 1文字のショートカットキーで、これを半角スペースで区切って列挙することができます。値の大文字、小文字は区別されます。
HTML5より前は、ショートカットキーを1つしか指定できませんでしたが、HTML5では、半角スペースで区切ることで複数の値が指定できるようになりました。これによって、デバイスによって最初に指定したショートカットキーが利用できない場合に、2番目以降に指定したキーが順番に割り当てられて、利用可能なものが適用されます。
●ショートカットキーを1つ指定する場合
<a accesskey="T" href="/top.html">トップページ</a>
●ショートカットキーを複数指定する場合
<a accesskey="T 1" href="/top.html">トップページ</a>
class 属性は、要素にクラス名を付ける際に使用します。
複数のクラス名を、半角スペースで区切って書くことができます。その場合、重複するクラス名は無視されます。
<img class="photo travel spa" src="photo1.jpg"/>
contenteditable 属性は、要素内の編集可否を指定する際に使用します。
HTML5 では、この属性を編集可に指定することによって、ほぼすべての要素が閲覧者によって編集可能になります。編集後に文書をローカル環境に保存したり、そのまま印刷したりすることができます。
contenteditable 属性の値は下の表の通りです。
| 属性値 | 概要 |
|---|---|
| true | 編集可能 |
| false | 編集不可 |
| 空文字列 | 上位要素の指定を継承 |
<div contenteditable="true">
編集可能エリア
</div>
contextmenu 属性は、要素のコンテキストメニューを指定する際に使用します。
HTML5では、任意のコンテキストメニューを menu 要素と type=”context” 属性値の組み合わせで作成できますが、この作成したコンテキストメニューを、contextmenu 属性を指定することで要素に適用することができます。contextmenu 属性の値には、適用したい menu 要素のid 属性値を指定します。
<menu type="context" id="shortcut">
<command label="商品情報"/>
<command label="会社概要"/>
<command label="お問い合わせ"/>
</menu>
<p>
詳細は<a href="http://xxx.com/" contextmenu="shortcut">こちら</a>まで
</p>
dir 属性は、要素内のテキストの書字方向を指定する際に使用します。
dir 属性の値は下の表の通りです。
| 属性値 | 概要 |
|---|---|
| ltr | 書字方向：左から右 |
| rtl | 書字方向：右から左 |
| auto | 双方向文字の種別が AL、R：rtl 双方向文字の種別が L：ltr |
draggable 属性は、要素がドラッグ可能かどうかを指定する際に使用します。
draggable 属性の値は下の表の通りです。
| 属性値 | 概要 |
|---|---|
| true | ドラッグ可能 |
| false | ドラッグ不可 |
| 空文字列 | href属性のあるa要素とsrc属性があるimg要素：ドラッグ可能 上記以外：ドラッグ不可能 |
dropzone 属性は、ドロップ操作の受け入れ指定をする際に使用します。
dropzone 属性の値は下の表の通りです。
| 属性値 | 概要 |
|---|---|
| copy | ドロップされたアイテムは要素内にコピーされます |
| move | ドロップされたアイテムは要素内に移動されます |
| link | ドロップされたアイテムの元データにリンクされます |
上記の値は1つしか指定できません。値が空の場合は、copy として扱われます。
また、受け入れ可能なコンテンツのタイプを合わせて指定することができます。
受け入れ可能なコンテンツタイプの値は下の表の通りです。
| 属性値 | 概要 |
|---|---|
| s:に続けて MIME タイプなどを指定 | 指定されたタイプのアイテムを文字列として受け取る |
| f:に続けて MIME タイプなどを指定 | 指定されたタイプのアイテムをファイルとして受け取る |
<div dropzone="copy f:image/png f:image/gif f:image/jpeg" ondrop="receive(event, this)">
<p>ここに画像ファイルをドロップして下さい</p>
</div>
hidden 属性は、関連性がないことを表す際に使用します。
hidden 属性は 「隠す」や「非表示」 といった意味ではありません（レンダリング上は隠されるかもしれませんが）。ですので、タブ型のユーザインタフェースにおいて初期状態で非表示になっている要素を隠すために hidden 属性を使用するような使い方は妥当ではありません。また、hidden を付与された要素にリンクをしたり、参照したりするような使い方も妥当ではありません。
なお、hidden 属性を付与されたセクション中にある要素はアクティブなままです。
下記の何れもOKです。
<div id="content" hidden="">
<div id="content" hidden="hidden">
id 属性は、要素に固有の識別名を指定する際に使用します。
id 属性の値は、文書内で一意でなければいけません。また、値には最低でも 1文字が必要で、空白文字を含むことはできません。
付与した id 属性値は、セレクタとして使用できるほか、リンクのフラグメント識別子としても利用できます。
id 属性値に使用できる文字列は、空白を含んではいけない以外に特に制約はありませんが、XML として扱ったり、セレクタとして使用する場合に問題が起こる可能性があるため、英字から始まる半角英数字の値を指定するのが無難です。
itemprop 属性は、Microdata（マイクロデータ）のマークアップを行う際、プロパティを指定する属性です。
属性値には、schema.org などで策定されている Microdata プロパティを指定し、itemscope 属性や itemtype 属性と組み合わせて指定することで、セマンティックのための様々なメタデータを与えることができます。
なお、itemprop 属性が付与された link 要素、meta 要素はフロー・コンテンツ、またはフレージング・コンテンツが期待される場所で使用することができますが、meta 要素に対して itemprop 属性が指定されている場合は、name、http-equiv、charset 属性を同時に指定することはできません。また、link 要素が itemprop 属性を持つ場合、rel 属性は省略することができます。
lang 属性は、要素がどのような言語で記述されているかを表す際に使用します。
html 要素に対して指定し、文書全体の言語を指定することも、文書内の一部の要素に対して言語を指定することも可能です。
lang 属性には、例えば下の表のような値が指定できます。
| 属性値 | 言語 |
|---|---|
| ja | 日本語 |
| ja-jp | 日本における日本語 |
| en | 英語 |
| en-au | オーストラリアにおける英語 |
| de | ドイツ語 |
spellcheck 属性は、スペルチェックの有無を指定する際に使用します。
spellcheck 属性の値は下の表の通りです。
| 属性値 | 概要 |
|---|---|
| true | スペルチェックを行います |
| false | スペルチェックを行いません |
| 空文字列 | 初期設定を反映します |
style 属性は、要素のスタイルを指定する際に使用します。
属性値にはスタイルシートの指定を記述することができます。
style 属性を指定する場合、要素からこの属性が削除されても問題ないように使用する必要があります。例えば style 属性を削除することで要素の表示領域のサイズが変更され、内容の閲覧ができなくなってしまうといった不具合は避けなければいけません。
<span style="color: red;">赤色の文字</span>
tabindex 属性は、TAB キーなど、キーボード操作によるフォーカス移動の優先順位を指定する際に使用します。
tabindex 属性は、整数を値として指定できます。
●挙動
tabindex 属性がない、または値が不正な場合
ユーザエージェントは、該当する要素がフォーカス可能か、また Tab キーによるフォーカス移動が可能かを調べ、どちらも可能であれば優先順位を自身で判断する
値が負の整数の場合
フォーカスは可能にする必要があるが、Tab キーによる移動はできないようにする
値が 0 、または正の整数の場合
フォーカスを可能にし、Tab キーによる移動も可能にする
●フォーカス優先順位
１ 値に最小の正の整数を持つもの
２ 値に2番目に大きい正の整数を持つもの～以降は小さい順に
３ 値に最大の正の整数を持つもの
４ 値に 0 を持つもの
５ 値が不正、または tabindex 属性持たないが、TAB キーによるフォーカス移動が可能な要素
（同列のものがある場合は、文書内での DOM ツリー上、上位に位置するものから順番になります。）
title 属性は、ツールチップとして適切となるような補足情報を付与する際に使用します。
下の表に列挙された要素は、title 属性が特別な意味を持ちます。
| 要素 | title 属性の意味 |
|---|---|
| link 要素 | リンク先となるリソースのタイトルを示します 外部スタイルシートの場合は、閲覧者が選択可能なスタイルシートのタイトルになります |
| style | 閲覧者が選択可能なスタイルシートのタイトルとなります |
| dfn | 定義の対象となる語句となります |
| abbr | 略語の正式名称となります |
| command | コマンドのヒントになります |
translate 属性は、要素内の翻訳可否を指定する際に使用します。
HTML 文書を機械翻訳する場合、文書内に翻訳されてしまうとおかしくなってしまう文章（プログラムのソースコードなど）が入っていると、そのままでは翻訳後の文章がおかしくなってしまうことがありますが、translate 属性を指定することで、その部分の翻訳可否を個別に指定することができます。
属性の値は下の表の通りです。値が空文字列の場合は、初期値として扱われます。
| 属性値 | 挙動 |
|---|---|
| yes | 機械翻訳の対象になります （初期値） |
| no | 機械翻訳の対象外になります |
カスタムデータ属性は、制作者が自由に指定できる属性です。
JavaScript による処理に利用したりするための独自のデータを入れることができます。
カスタムデータ属性の属性名は、data- ではじまり、ハイフンの後に少なくとも 1文字が続きますが、U+0041 から U+005A の範囲にある文字 （半角大文字の A ～ Z） を含んではいけません。
<!-- Google+1 ボタン -->
<div data-annotation="inline" data-width="300"></div>
<!-- Facebook Like ボタン -->
<div data-send="true" data-width="450" data-show-faces="true"></div>
INTERNOUS,inc. All rights reserved.
