プログラミング

グローバル属性はHTMLの全ての要素に使うことができる

HTMLの要素には、それぞれの要素ごとで指定できる属性と、どの要素でも指定できる属性の2種類があります。

後者のどの要素でも指定できる属性のことを「グローバル属性」といいます。

classやidなどがわかりやすいかと思います。<div class=”” id=””>のように、HTMLを書くなかで、何回も色んな要素に対して指定しますよね。

HTML5のグローバル属性

classやidも含め、HTML5で定義されているグローバル属性にはどのようなものがあるかみていきましょう。

title

要素の補足情報をつけるときにtitle属性を使います。

ツールチップでの表示内容を記述しておいたり、値に任意のテキストを入れることができます。

また、音声ブラウザの環境では、title属性の値が読み上げられます。

以下の”KUBOGEN”というリンクにカーソルを合わせると、少し遅れて、「トップページに戻る」というツールチップが表示されます。

<a href=”https://kubogen.com/” title=”トップページに戻る”>KUBOGEN</a>
KUBOGEN

accesskey

ショートカットキーを割り当てることができる属性です。

アクセスキーとはそもそも、マウスが使えない環境などでキーボードのショートカットキーを使って、リンクで移動したり、ボタンを押したり、入力フォームに入力できるようにしたりすることができるもの。

そのショートカットキーをaccesskeyを使って決めることができます。

値には半角英数字(大文字・小文字は区別)を1文字だけ指定します。

<タグ名 accesskey=”a b”></タグ名>

※半角スペースで区切り、複数の値を指定することも可能。

tabindex

[Tab]キーを押したときに、フォーカスの優先順位を決めることができる属性です。

値には数字を入れるのですが、正の値を指定すると昇順(小さい数字から大きい数字の順番)に、-1など負の値を指定すると要素はフォーカスされません。

0を指定した場合は、最後にフォーカスされます。

正の値 昇順でフォーカス
負の値 フォーカスされない
0 最後にフォーカス

contenteditable

contenteditableは、Webページを見ているユーザー(閲覧者)によるブラウザ上でのコンテンツの編集を許可するか許可しないかを指定する属性。

値にはtrueもしくはfalseを記述します。

<タグ名 contenteditable=”true”></タグ名>

true 閲覧者にコンテンツ編集を許可
false 閲覧者にコンテンツ編集を許可しない

下記の枠にはcontenteditable=”true”を指定しているので、クリックしてみると自由に編集することができます。

ここはあなたが自由に編集できます。ただしリロード(ページを更新)すると元に戻ります。

spellcheck

スペルチェックを行える属性で、値にはtrueかfalseを指定します。

true スペルチェックをする
false スペルチェックをしない

スペルチェックを有効にしていると、スペルミスの単語には赤い下線が表示されます。

translate

要素の内容を翻訳するか翻訳しないかを指定する属性です。

yes 翻訳する
no 翻訳しない

デフォルトではhtml要素にtranslate=”yes”が指定されているので、ページ全体が翻訳対象となっています。

lang

どの言語で記述しているのかを表す属性。

langはよく、<html lang=”ja”>というような感じで、html要素に指定することが多い属性ですが、これもグローバル属性のため、他の要素に対しても指定することができます。

ちなみに<html lang=”ja”>は、htmlの文書全体に日本語で記述することを指定しているという意味です。

dir

テキストの書字方向を指定する属性。

左から右(left to right)、右から左(right to left)で指定することができます。

ltr 左から右
rtl 右から左

hidden

要素が現時点において、ページに関連性がない場合にhiddenをつけることで、非表示にできる属性です。

hiddenは論理属性といって、値を指定する必要がない属性です。その属性が存在しているかいないかに意味があります。

<タグ名 hidden></タグ名>

hiddenは単に要素を隠すために使うものではなく、一定の条件を満たしたときに表示させたりするときに、最初は非表示にするために使います。

カスタムデータ

情報を格納したり、JavaScriptやjQueryでその情報にアクセスしたりするときに使います。

カスタムデータ属性は任意で決めることができ、data-◯◯=”△△”といった形で独自のデータを入れます。

style

style属性を使うと、css同様のスタイルを指定することができます。

値にはcssのプロパティと値を記述します。

<p style=”color:#ff0000;”>style属性を使って文字の色を赤くしています。</p>

style属性を使って文字の色を赤くしています。

class

最初に少し紹介した、よく使うグローバル属性ですね。

class=””という形で要素にクラス名をつけ、cssでスタイル情報を割り当てるために使います。

半角スペースを入れて、1つの要素に複数のクラス名をつけることが可能です。

id

classと似たようなグローバル属性です。

要素に固有の識別名をしていするもので、classと違うのは、1つの要素に複数の値を指定することができないという点。

id=””という形で記述します。

1 Comment

Leave a Comment