HTML5 【 グローバル属性 】 ~ 全ての要素で使える属性

colmun_main1956

グローバル属性は、どの要素でも使える属性です。
HTML5より前にも、class、id、lang、title、style、dirがどの要素でも使える属性でしたが、HTML5ではさらに増えて、グローバル属性 と呼ばれるようになりました。
今回は、グローバル属性についてまとめます。

accesskey 属性
class 属性
contenteditable 属性
contextmenu 属性
dir 属性
draggable 属性
dropzone 属性
hidden 属性
id 属性
itemprop 属性
lang 属性
spellcheck 属性
style 属性
tabindex 属性
title 属性
translate 属性
カスタムデータ属性

accesskey 属性

accesskey 属性は、キーボードのショートカットキーを指定する際に使用します。

指定できる値はユニコード 1文字のショートカットキーで、これを半角スペースで区切って列挙することができます。値の大文字、小文字は区別されます。

HTML5より前は、ショートカットキーを1つしか指定できませんでしたが、HTML5では、半角スペースで区切ることで複数の値が指定できるようになりました。これによって、デバイスによって最初に指定したショートカットキーが利用できない場合に、2番目以降に指定したキーが順番に割り当てられて、利用可能なものが適用されます。

ショートカットキーを1つ指定する場合
<a  accesskey=”T”  href=”/top.html”>トップページ</a>

ショートカットキーを複数指定する場合
<a  accesskey=”T  1″  href=”/top.html”>トップページ</a>

▲一覧へ戻る

class 属性

class 属性は、要素にクラス名を付ける際に使用します。

複数のクラス名を、半角スペースで区切って書くことができます。その場合、重複するクラス名は無視されます。

<img  class=”photo  travel  spa”  src=”photo1.jpg”/>

▲一覧へ戻る

contenteditable 属性

contenteditable 属性は、要素内の編集可否を指定する際に使用します。

HTML5 では、この属性を編集可に指定することによって、ほぼすべての要素が閲覧者によって編集可能になります。編集後に文書をローカル環境に保存したり、そのまま印刷したりすることができます。

contenteditable 属性の値は下の表の通りです。

属性値 概要
true 編集可能
false 編集不可
空文字列 上位要素の指定を継承

<div  contenteditable=”true”>
編集可能エリア
</div>

▲一覧へ戻る

contextmenu 属性

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 属性は、要素内のテキストの書字方向を指定する際に使用します。

dir 属性の値は下の表の通りです。

属性値 概要
ltr 書字方向:左から右
rtl 書字方向:右から左
auto 双方向文字の種別が AL、R:rtl
双方向文字の種別が L:ltr

▲一覧へ戻る

draggable 属性

draggable 属性は、要素がドラッグ可能かどうかを指定する際に使用します。

draggable 属性の値は下の表の通りです。

属性値 概要
true ドラッグ可能
false ドラッグ不可
空文字列 href属性のあるa要素とsrc属性があるimg要素:ドラッグ可能
上記以外:ドラッグ不可能

▲一覧へ戻る

dropzone 属性

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 を付与された要素にリンクをしたり、参照したりするような使い方も妥当ではありません。

なお、hidden 属性を付与されたセクション中にある要素はアクティブなままです。

下記の何れもOKです。

<div  id=”content”  hidden=””>
<div  id=”content”  hidden=”hidden”>

▲一覧へ戻る

id 属性

id 属性は、要素に固有の識別名を指定する際に使用します。

id 属性の値は、文書内で一意でなければいけません。また、値には最低でも 1文字が必要で、空白文字を含むことはできません。

付与した id 属性値は、セレクタとして使用できるほか、リンクのフラグメント識別子としても利用できます。

id 属性値に使用できる文字列は、空白を含んではいけない以外に特に制約はありませんが、XML として扱ったり、セレクタとして使用する場合に問題が起こる可能性があるため、英字から始まる半角英数字の値を指定するのが無難です。

▲一覧へ戻る

itemprop 属性

itemprop 属性は、Microdata(マイクロデータ)のマークアップを行う際、プロパティを指定する属性です。

属性値には、schema.org などで策定されている Microdata プロパティを指定し、itemscope 属性や itemtype 属性と組み合わせて指定することで、セマンティックのための様々なメタデータを与えることができます。

なお、itemprop 属性が付与された link 要素、meta 要素はフロー・コンテンツ、またはフレージング・コンテンツが期待される場所で使用することができますが、meta 要素に対して itemprop 属性が指定されている場合は、name、http-equiv、charset 属性を同時に指定することはできません。また、link 要素が itemprop 属性を持つ場合、rel 属性は省略することができます。

▲一覧へ戻る

lang 属性

lang 属性は、要素がどのような言語で記述されているかを表す際に使用します。

html 要素に対して指定し、文書全体の言語を指定することも、文書内の一部の要素に対して言語を指定することも可能です。

lang 属性には、例えば下の表のような値が指定できます。

属性値 言語
ja 日本語
ja-jp 日本における日本語
en 英語
en-au オーストラリアにおける英語
de ドイツ語

▲一覧へ戻る

spellcheck 属性

spellcheck 属性は、スペルチェックの有無を指定する際に使用します。

spellcheck 属性の値は下の表の通りです。

属性値 概要
true スペルチェックを行います
false スペルチェックを行いません
空文字列 初期設定を反映します

▲一覧へ戻る

style 属性

style 属性は、要素のスタイルを指定する際に使用します。

属性値にはスタイルシートの指定を記述することができます。

style 属性を指定する場合、要素からこの属性が削除されても問題ないように使用する必要があります。例えば style 属性を削除することで要素の表示領域のサイズが変更され、内容の閲覧ができなくなってしまうといった不具合は避けなければいけません。

<span  style=”color: red;”>赤色の文字</span>

▲一覧へ戻る

tabindex 属性

tabindex 属性は、TAB キーなど、キーボード操作によるフォーカス移動の優先順位を指定する際に使用します。

tabindex 属性は、整数を値として指定できます。

●挙動
tabindex 属性がない、または値が不正な場合
ユーザエージェントは、該当する要素がフォーカス可能か、また Tab キーによるフォーカス移動が可能かを調べ、どちらも可能であれば優先順位を自身で判断する

値が負の整数の場合
フォーカスは可能にする必要があるが、Tab キーによる移動はできないようにする

値が 0 、または正の整数の場合
フォーカスを可能にし、Tab キーによる移動も可能にする

●フォーカス優先順位
1 値に最小の正の整数を持つもの
2 値に2番目に大きい正の整数を持つもの~以降は小さい順に
3 値に最大の正の整数を持つもの
4 値に 0 を持つもの
5 値が不正、または tabindex 属性持たないが、TAB キーによるフォーカス移動が可能な要素
(同列のものがある場合は、文書内での DOM ツリー上、上位に位置するものから順番になります。)

▲一覧へ戻る

title 属性

title 属性は、ツールチップとして適切となるような補足情報を付与する際に使用します。

下の表に列挙された要素は、title 属性が特別な意味を持ちます。

要素 title 属性の意味
link 要素 リンク先となるリソースのタイトルを示します
外部スタイルシートの場合は、閲覧者が選択可能なスタイルシートのタイトルになります
style 閲覧者が選択可能なスタイルシートのタイトルとなります
dfn 定義の対象となる語句となります
abbr 略語の正式名称となります
command コマンドのヒントになります

▲一覧へ戻る

translate 属性

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>

▲一覧へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です