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

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

その前に「属性」とは、
例えば下のピンクの文字の部分です。HTML要素と一緒に使って機能をUPする指定です。

<html lang="ja">〜</html> <!--lang属性=言語コードを指定。jaは日本語-->
<p id="名前">〜</p> <!--d属性=1つのHTML上で1個だけ要素の名前をつける-->
<a href="ファイル名">〜</a> <!--href属性=リンク先のURLを指定する-->

属性は「要素名(半角スペース)属性名 = "属性値"」というカタチで使います。
属性は1つでなく複数つける事もできます。その場合は「属性名="属性値"」どうしの間に半角スペースを入れます。
「href属性」のようにある特定の要素にしか使えない属性もありますが、「グローバル属性」は全要素共通で使える属性です。

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の値のみ。
<bdo>以外でも使えるなんてビックリ。…と思ったらけっこう未開な感じ。
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キーを押して選択してみてください。(Google Chrome, OperaはTabキーに反応)
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+クリック)してください。
(Firefoxのみ反応しました。)
オリジナルのコンテキストメニューが上に出ます。 「英語で 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属性に未対応〜<br />
(firefox, GoogleChrome, Safari, Operaの最新版はOKでした。見てみて。)
</p>
</div>
これがプレビュー。
この下に↓<p hidden>があります。ちゃんと隠れているかな?
draggable="true, またはfalse," または値無し
HTML5の「ドラッグ&ドロップAPI」を使うときに「ドラッグ元」の要素に指定。
値は、
・true :ドラッグ可能、
・false:不可能、
・値無し:デフォルトのまま
デフォルトとは、「href属性のあるa要素」と「src属性があるimg要素」は元々ドラッグ可能、それ以外はドラッグ不可能ってことです。
※このサンプルはソースコードがめっちゃ長いので別ファイルにしました。
※Firefox, Safari で見てください(Google Chrome, Opera は反応しませんでした。)
→ドラッグ&ドロップのサンプル(honttoni39.html)を別ウィンドウで開く
なおこのサンプルは、下の「dropzone属性」は使わず、draggable属性+APIだけのサンプルです。
dropzone="copy, またはmove, またはlink"
全部の要素はデフォルトではドロップを受け付けないことになっているので、ドロップする先の要素にこの dropzone属性を指定するんだそうです。
値は、
・copy:ドラッグされるモノのコピーを受ける
・move:移動する(ドラッグ元から無くなる)
・link:ドラッグ元へのリンクを受ける
この属性も使った「ドラッグ&ドロップ」の使い方の資料を探したのですが、見つかりませんでした。2011年5月の時点で対応ブラウザは無い…そうです。(もう2012年3月だけど。そのうちこの部分を追加訂正するかもw!)

次回予告

新しい属性は、ブラウザの対応が一律じゃないので、まだ使いこなすの大変かも…。
でも、あっという間にブラウザは追いついちゃうでしょうね!

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

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/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.