ほんっとにはじめてのHTML5とCSS3：[39] 全要素に使える「HTML5グローバル属性」を見てみよう

[39] 全要素に使える「HTML5グローバル属性」を見てみよう

最終更新日：2019年03月10日　（初回投稿日：2012年02月29日）

グローバル属性 は、どの要素にも共通で使える属性です。
「href属性」のようにある特定の要素にしか使えない属性もありますが、「グローバル属性」は全要素共通で使えます。

HTML4でも class, id, lang, title, style, dir が全要素に共通の属性となっていましたが、
HTML5からさらに増え、グローバル属性 と呼ばれるようになりました。
これは覚えておいてソンはないので、一覧にまとめてみます。

「属性」とは、例えば下の赤字の部分です。HTML要素と一緒に使って機能をUPできます。

<html lang="ja">〜</html>
<p id="名前">〜</p>
<a href="ファイル名">〜</a>

属性は上記 ↑ のように「要素名（半角スペース）属性名 = "属性値"」というカタチで使います。
属性の値が1つで特別な記号が含まれて無ければ、ダブルクォーテーション（" "）を省略してもOK。
（詳しくは（ちょっとメモ）属性の「引用符」や「値」の省略についてをご覧ください）
異なる属性のセットを「半角スペース」区切りで複数指定することもできます。

本日のINDEX

HTML5のグローバル属性一覧
draggable属性を使ったサンプル
1. リスト要素をドラッグ＆ドロップ
2. img要素をドラッグ＆ドロップ
translate属性を使ったサンプル

このページは、HTML5.2で削除された属性、追加された属性の情報をもとに加筆修正しました（2019年3月）

参考：
・HTML 5.2 | W3C Recommendation 3.2.5. Global attributes
・グローバル属性 - HTML: HyperText Markup Language | MDN

HTML5のグローバル属性一覧

class="名前"

class名。同じHTML上で何度でも使える「分類上の名前」を付ける。CSSのセレクタ、スクリプトでの要素の呼び出しになる。
★半角スペースで区切って複数の値が書けます（複数のclass指定ができる）

id="名前"

id名。同じHTML上で1回のみ使える「固有の名前」を付ける。CSSのセレクタ、スクリプトでの要素の呼び出し、ハイパーリンクでのリンク先になる。
★値に半角スペースを含む事はできない。

lang="言語コード"

言語の種類。日本語は「lang="ja"」。
英語はen、スペイン語はes、ドイツ語はde、韓国語はko、中国語はzh、など。

title="表題や説明的フレーズ"

テキストで表題や説明的なフレーズを入れる。
例えば、「<a title=" ">」ならリンク先の表題や説明。「<img title=" ">」なら画像の著作権表示や説明など。「<p title=" ">」なら脚注や解説など。「<q title=" ">」なら引用元に関する追加情報など。

style="スタイルシート（CSS）"

値としてCSSが入る。CSSを要素にインラインで直接書き込む方法。
例えば <span style="color:red">テキスト</span> でテキストは赤に。

dir="文字表記の方向（値は、ltr または rtl または auto）"

文字表記の方向を指定。ltr (left to right)、 rtl (right to left)、autoの値のみ。
W3Cによると「テキストの方向が本当に分からず、サーバー側もそれが掴めない時のみ、最後の手段としてのみこの値を使うことを推奨」だそう。
たいていはブラウザの「双方向アルゴリズム」によって書字方向が決まるので、余り使う機会は無さそう。

（これ以降は、HTML5から追加されたグローバル属性です。）

tabindex="Tabキーによる移動順（整数値）"

Tabキーなどを押して選択される箇所の移動順を指定します。
HTML4 までは a や area のハイパーリンクやForm関連の要素に使えましたが、
HTML5 からすべての要素に使える属性になったんだそうです。Tabキーなどでフォーカスさせるのはアクセシビリティで重要だから、だそうです。
値は、
・正の整数：Tabキーなどを押すと値の小さい順から選択箇所が移動
・負の整数：移動しない（選択されない）
・0：移動はするけどtabindex属性のない要素と同じ扱いになり優先されない
（ユーザーの環境によってTabキーかどうかは異なります）

<!--使用例-->
<ul>
<li><a href="ex1.html" tabindex="3">ex1.html</a></li>
<li><a href="ex2.html" tabindex="2">ex2.html</a></li>
<li><a href="ex3.html" tabindex="1">ex3.html</a></li>
</ul>
<!--普通なら上から順にフォーカスされるが、
tabindex属性で下から順に選択されるように指定しています-->

Tabキーを押して選択してみてください。（Chromeが対応しています）

ex1.html
ex2.html
ex3.html

accesskey="ショートカットキー"

キーボード・ショートカット用のキーを指定する。マウスを使えない環境でもキーボードで簡単に操作できるようにするもの。

<!--使用例-->
<ul>
<li><a href="ex1.html" accesskey="1">ex1.html</a></li>
<li><a href="ex2.html" accesskey="2">ex2.html</a></li>
<li><a href="ex3.html" accesskey="3">ex3.html</a></li>
</ul>

~~複数の値を半角スペースで区切って入れる事も可能。順番に使えるものが採用されて行くそうです。（accesskey="A 1" と書けば、Aがダメなら1が効く）~~
＊注意：HTML5.2では「値は単一の印刷可能な文字でなければならない（the value must be a single printable character）」と定義されています。 値をアルファベットにした場合、例えばAにすると、ただのAキーだけでは反応せず「Alt+A」「Alt+Shift+A」（←WIN）「Ctrl+Option（Alt）+A」（←MAC）を押して操作します（ブラウザによって異なります）

contenteditable="true か空欄、またはfalse"

contenteditableは「content + editable」で編集可能領域。これを有効 (true) か無効 (false) にする属性。値は、trueか空欄で有効、falseで無効になります。

<!--使用例-->
<div contenteditable="true">
ここがサンプルプレビュー。ここを編集してみて！
</div>

ここがサンプルプレビュー。ここを編集してみて！

spellcheck="true か空欄、またはfalse"

Formのtextarea要素の中や、上のcontenteditable属性で編集可能になった領域のテキストに対して、スペルチェックをするかどうか指定します。
値は、trueか空欄で有効、falseで無効になります。

<!--使用例-->
<div contenteditable="true" spellcheck="true">
I love you. Do you lov me?
</div>

I love you. Do you lov me?
この枠内をクリックするとスペルが変な「lov」に下線が付きます。（または、右クリック（MacはControl+クリック）→スペルチェック）　Firefox, Opera, Safariで動作しました。

hidden（値無し、属性名のみ）

hiddenが指定された要素は「まだ関連性がない、または、すでに関連性がない」ことを示し、ブラウザでは非表示になります。
ただ隠すためだけに使うのはNGで、隠さなきゃならない目的を持って使おう、と言う事です。下のソースはW3Cに掲載のサンプルです。ユーザがログインするまでゲーム画面を隠すためにhidden属性を使っています。

<h1>The Example Game</h1>
<section id="login">
	<h2>Login</h2>
	<form>
	...
	<!-- calls login() once the user's credentials have been checked -->
	</form>
	<script>
		function login() {
		// switch screens
		document.getElementById('login').hidden = true;
		document.getElementById('game').hidden = false;
		}
	</script>
</section>
<section id="game" hidden>
   ...
</section>

それはさておき、単純にhiddenを試してみます。ソースはこちら

<div>
この下に↓<p hidden>があります。ちゃんと隠れているかな？
<p hidden>
これが読めたらあなたのブラウザはhidden属性に未対応〜
</p>
</div>

これがプレビュー。

この下に↓<p hidden>があります。ちゃんと隠れているかな？

draggable="true, またはfalse," または値無し

HTML5の「ドラッグ＆ドロップAPI」を使うときに「ドラッグ元」の要素に指定。
値は、
・true ：ドラッグ可能、
・false：不可能、
・値無し：デフォルトのまま
デフォルトとは、「href属性のあるa要素」と「src属性があるimg要素」は元々ドラッグ可能、それ以外はドラッグ不可能。
＊Android は未実装
＊サンプルは記事の後半 → ドラッグ＆ドロップのサンプルへ

translate="yes か空欄, またはno"

「Google翻訳」などをユーザーが利用するときに、そのページの翻訳してもらう部分、翻訳してほしくない部分を区別したい時に使います。
translate="" または translate="yes" で翻訳可能、translate="no" で翻訳無し。 ルート要素（html要素）は、デフォルトで translate=yes です。
translate属性は yes no 以外に inherit状態もあって、親要素が yes で翻訳可能なら子要素も翻訳可能になります。（逆も。親が no なら子要素も no）
ですので、この translate属性は、翻訳してほしくない要素に「no」を指定し（ルート要素が yes なので）、no にした要素内の子要素が翻訳すべきなら改めて yes を指定して使います。下のソースはW3Cに掲載のサンプルで、ゲームの説明です。
ユーザーにタイプしてほしい言葉は英語のままにしたいので、翻訳されないように translate=no を指定しています。

<!DOCTYPE HTML>
<html>  <!-- ルート要素は translate=yes -->
  <head> <!-- 以下の子孫要素は translate=yes が継承されています -->
    <title>The Bee Game</title>
  </head>
  <body>
    <p>The Bee Game is a text adventure game in English.</p>
    <p>When the game launches, the first thing you should do is type
      <kbd translate="no">eat honey</kbd>. The game will respond with:</p>
  <pre><samp translate="no"Yum yum! That was some good honey!</samp></pre>
  </body>
</html>

translate属性を指定している <kbd>要素は、キーボードでタイプする「ユーザーの入力のテキスト」であることを示します。
<samp>要素は「コンピュータからの出力のテキスト」であることを示す要素です。
詳しくはこちら→ [32] その他のプログラム関連を示す samp、kbd、var、data要素記事の最後に translate属性を使ったサンプルを載せておきましたのでご確認ください。

contextmenu="コンテキストメニューのid"

この属性は HTML5.2で削除されました。Firefoxなど、まだプレビューできるブラウザもありますが、そのうちどのブラウザでも非実装になりますのでご注意ください。コンテキストメニューとは、画面上を右クリック（Macは Control + クリック）すると出てくるアレ（現在利用可能な操作の一覧）。そのメニューにオリジナルのメニューを追加できます。

<div contextmenu="originmenu">
このボックス内で右クリック（MacはControl+クリック）してください。
</div>
<menu type="context" id="originmenu">
  <menu label="ほんっとにメニュー">
    <menuitem label="英語で Hello!" onclick="alert('Hello!');"></menuitem>
    <menuitem label="日本語でハロー" onclick="alert('ハロー!');"></menuitem>
  </menu>
</menu>

このボックス内で右クリック（MacはControl+クリック）してください。
オリジナルのコンテキストメニューが上に出ます（「ほんっとにメニュー」って）
「英語で Hello!」「日本語でハロー」のどちらかを選ぶとメッセージが出ます。

dropzone="copy, またはmove, またはlink"

この属性は HTML5.1 でグローバル属性に加わりましたが HTML5.2で削除されました。全部の要素はデフォルトではドロップを受け付けないことになっているので、ドロップする先の要素にこの dropzone属性を指定するんだそうです。
値は下記の3つ。
・copy：ドロップした要素のコピーを生成
・move：移動する（ドラッグ元から無くなる）
・link：ドラッグしたデータへのリンクを生成

draggable属性を使ったサンプル

サンプルは「dropzone属性」は使わず「draggable属性」+ API だけで作っています。

リスト要素をドラッグ＆ドロップ

リストアイテムを2つのリスト間で移動できます。

如月（きさらぎ）
弥生（やよい）
卯月（うづき）
皐月（さつき）

February
March
April
May

HTML はこちら

<ul class="draggableList"
 ondragstart="onDragStart(event)"
 ondragenter="onDragEnter(event)"
 ondragover="onDragOver(event)"
 ondrop="onDrop(event)">
  <li id="february1" draggable="true">如月（きさらぎ）</li>
  <li id="march1" draggable="true">弥生（やよい）</li>
  <li id="april1" draggable="true">卯月（うづき）</li>
  <li id="may1" draggable="true">皐月（さつき）</li>
</ul>
<ul class="draggableList"
 ondragstart="onDragStart(event)"
 ondragenter="onDragEnter(event)"
 ondragover="onDragOver(event)"
 ondrop="onDrop(event)">
  <li id="february2" draggable="true">February</li>
  <li id="march2" draggable="true">March</li>
  <li id="april2" draggable="true">April</li>
  <li id="may2" draggable="true">May</li>
</ul>

JavaScript はこちら

//ドラッグ開始処理
function onDragStart(event) {
    //要素の対象指定
    if (event.target.tagName.toLowerCase() == "li") {
        //DataTransferにデータを格納
        event.dataTransfer.setData("listItemID", event.target.id);
    } else {
        event.preventDefault();
    }
    return true;
}
//Dropイベント
function onDrop(event) {
    //ドラッグされたデータ取得
    var id = event.dataTransfer.getData("listItemID");
    var li = document.getElementById(id);
    //もう一方のul要素からli要素を削除、ドロップ先に追加
    if (li && li.parentNode != event.currentTaget) {
        li.parentNode.removeChild(li);
        event.currentTarget.appendChild(li);
    }
    //イベントストップ
    event.stopPropagation();
}
//dragover処理
function onDragOver(event) {
    //ドラッグを受け付けのためのキャンセル処理
    event.preventDefault();
}
//dragenter処理
function onDragEnter(event) {
    //DragTransferの格納データが"listItemID"を含む場合受け付け
    var types = event.dataTransfer.types;
    for (var i = 0; i < types.length; i++) {
        if (types[i] == "listItemID") {
            return true;
        }
    }
}

img要素をドラッグ＆ドロップ

画像を上下のボックスにドラッグ＆ドロップで移動できます。

HTML はこちら

<div id="upper" ondragover="f_dragover(event)" ondrop="f_drop(event)">
  <img src="image/image-1.gif" id="maru" alt="まる" draggable="true" ondragstart="f_dragstart(event)">
  <img src="image/image-2.gif" id="hoshi" alt="ほし" draggable="true" ondragstart="f_dragstart(event)">
  <img src="image/image-3.gif" id="sikaku" alt="しかく" draggable="true" ondragstart="f_dragstart(event)">
</div>
<div id="bottom" ondragover="f_dragover(event)" ondrop="f_drop(event)"></div>

JavaScript はこちら

//ドラッグ開始処理
function f_dragstart(event) {
    //ドラッグするデータのid名をDataTransferオブジェクトにセット
    event.dataTransfer.setData("text", event.target.id);
}
//ドラッグ要素がドロップ要素に重なっている間の処理
function f_dragover(event) {
    //dragoverイベントをキャンセルして、ドロップ先の要素がドロップを受け付けるようにする
    event.preventDefault();
}
//ドロップ時の処理
function f_drop(event) {
    //ドラッグされたデータのid名をDataTransferオブジェクトから取得
    var id_name = event.dataTransfer.getData("text");
    //id名からドラッグされた要素を取得
    var drag_elm = document.getElementById(id_name);
    //ドロップ先にドラッグされた要素を追加
    event.currentTarget.appendChild(drag_elm);
    //エラー回避のため、ドロップ処理の最後にdropイベントをキャンセルしておく
    event.preventDefault();
}

translate属性を使ったサンプル

W3Cに掲載のサンプルを別ページで作っておきました。
画像クリックで別ウィンドウで開きます。
translate属性を使ったサンプルのプレビュー画像
このページのURL（http://yhk.minibird.jp/honttoni/samples/sample39set/）を「Google翻訳」にコピペして、ページをまるごと日本語に翻訳します。
「The Bee Game」が「蜂ゲーム」などと、タイトルや本文は日本語に翻訳されますが、「translate=no」と指定した箇所は翻訳されず原文のままになります。

このサンプルでは「translate="no"」ではなく「translate=no」と、ダブルクォーテーション（" "）を省略して書いていますね。
HTML5ではある条件を満たせば引用符（" " や ' '）を省略できるようになったので。
詳しくは（ちょっとメモ）属性の「引用符」や「値」の省略についてをご覧ください。

次回予告

さて、次回からはHTML要素に戻ります。
次回から「メタデータ・コンテンツ」を使ってみましょう。
HTMLの「文書情報」を整える要素群で、
<title> <base> <link> <style> <script> <meta> などがあります。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2019-03-10（Sun）│
投稿日：2012-02-29（Wed）│
カテゴリ：はじめてのHTML

Pagetop ↑

« next ホーム prev »

コメントの投稿

グローバル属性について

グローバル属性について疑問がありコメントいたします。

HTML5.2におけるグローバル属性は　15個　でなく　13個ではないか？ということです。

contextmenu　と　dropzone　は該当するのでしょうか？

W3Cサイトでは13個のようです
https://www.w3.org/TR/2017/REC-html52-20171214/dom.html#global-attributes

英文なので私の解釈違いかもしれません。

そもそもmenu要素が5.2で削除になっているのでcontextmenuは使えないよなーという疑問から、検索で最新情報を探していて貴サイトに辿り着きました。

ページの更新も新しいので、
管理人様の方でこの点でお分かりの事があるのでは！と思い、
ご教授いただけましたら幸いです。
よろしくお願いいたします。

2019-03-05 16:05 :
ロビン

Re: グローバル属性について

ロビンさん　コメントありがとうございました。
確かに！　HTML5.2からは contextmenu属性と dropzone属性が削除されましたね。
そして translate属性が追加になりました。
先月の更新は accesskey属性の仕様変更を加筆しただけで、その他の確認を怠っておりました。すみません！

「13個」と個数にこだわっているのは、なにか試験を受けるのかな？
W3Cでは13個になっていますが、WHATWGを見ると、実験的な仕様も含めてけっこう数があります。
https://html.spec.whatwg.org/multipage/dom.html#global-attributes

現在HTMLの仕様は、W3C と WHATWG のダブルスタンダードになっており、ブラウザによって採用が違ったりします。
そのへんの現実に見合ったかんじの仕様のまとめは「MDN（Mozilla Developer Network）」が参考になります。
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes

とにかく、今回 contextmenu属性と dropzone属性の削除と、新しい translate属性について加筆しました。
translate属性を使ったサンプルも作ってみましたのでご確認ください。

2019-03-10 14:01 :
yuki★hata