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

最終更新日:2017年11月11日  (初回投稿日:2012年02月29日)

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

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

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

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

属性は上記 ↑ のように「要素名(半角スペース)属性名 = "属性値"というカタチで使います。
属性は「属性名 = "属性値"」のセットを「半角スペース」区切りで複数指定できます。

本日のINDEX
  1. HTML5のグローバル属性 一覧
    1. class
    2. id
    3. lang
    4. title
    5. style
    6. dir
    7. tabindex
    8. accesskey
    9. contenteditable
    10. spellcheck
    11. contextmenu
    12. hidden
    13. draggable
    14. dropzone
  2. draggable属性を使ったサンプル
    1. リスト要素をドラッグ&ドロップ
    2. img要素をドラッグ&ドロップ

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が対応しています)
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が効く。)
値をアルファベットにした場合、例えばAにすると、ブラウザによってただのAキーだけでは反応せず「Ctrl+Alt+A」「Shift+A」などを押して操作する場合もあります。
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で動作しました。
contextmenu="コンテキストメニューのid"
コンテキストメニューとは、画面上を右クリック(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!」「日本語でハロー」のどちらかを選ぶと メッセージが出ます。
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 は未実装
*サンプルは記事の後半 → ドラッグ&ドロップのサンプルへ
dropzone="copy, またはmove, またはlink"
全部の要素はデフォルトではドロップを受け付けないことになっているので、ドロップする先の要素にこの dropzone属性を指定するんだそうです。
値は、
・copy:ドラッグされるモノのコピーを受ける
・move:移動する(ドラッグ元から無くなる)
・link:ドラッグ元へのリンクを受ける
*HTML5.1 から正式にグローバル属性になりました。
*2017年11月時点で、実装しているブラウザは無いようです。

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();
}

次回予告

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

関連記事
この記事をはてなブックマークに追加

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

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

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2018/06 | 07
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.