グローバル属性 #

グローバル属性とは全ての要素で指定できる属性のことを言う。

主に以下のものが挙げられる。

class属性 #

class属性は、要素に種類・分類(クラス)名を指定するための属性である。

複数の別の要素に同じ名前を指定することができ、そのクラス名を指定するとそれがclass属性に指定されている要素全てが該当されることになる。

スペースで区切れば複数のクラス名を指定することもできる。

CSSなどを使うときに、指定した要素全てにcssを適用させたい時などによく利用される。

`

`

id属性 #

id属性は、それを指定した要素に一意の名前をつける属性である。

一意の名前なので、同じページ内の他の要素のid属性に同じ名前をつけることはできない。class属性とはここが異なる。

id属性は、ページ内の特定の要素にリンクさせたい場合、また先程のCSS等で特定の要素にのみCSSを適用したい場合に用いられる。

`

`

lang属性 #

lang属性は要素、属性の言語が何であるかを示す属性である。具体的には、RFC5646（BCP47）で定められた言語コードを入力する。

例えば日本語だと「“ja”」、英語であれば「“en”」、アメリカ英語なら「“en-US”」と指定する。（日本語には、日本での日本語という意味で「“ja-JP”」という値も用意されている。）

lang属性はHTML文書全体に適用されるように、htmlタグに描かれることが多い。

`

title属性 #

title属性は、その要素の補足的な内容を提供するための属性である。

一般的には、ブラウザでカーソルを要素の上に乗せた時にツールチップで表示されるものである。

(入力例)

`

テスト

(出力例、“テスト"の上にカーソルを置いてみると・・)

テスト

dir属性 #

dir属性は、要素のテキストを表示する方向を定義する属性である。設定する値は “ltr”(左から右)、“rtl”(右から左)、“auto”(自動)のいずれかである。

要素をドラッグして範囲選択すると、選択した時の方向が異なる。

(入力例)

<h3 dir="ltr">日本語</h3>

<h3 dir="rtl">アラビア語</h3>

(出力例)

日本語

アラビア語

tabindex属性 #

tabindex属性は、Tabキーを押した時のフォーカスの移動順序を示す属性である。tabindex属性を指定した要素はフォーカスによる移動が可能になる。

1以上の値を指定した場合はその値の順番通りに移動し、０を指定した場合は要素が出現する順番通りに移動する。

(入力例)

３：<input type="text" tabindex="3">
<br>
１：<input type="text" tabindex="1">
<br>
２：<input type="text" tabindex="2">
<br>
４：<input type="text" tabindex="4">

(出力例、Tabを押すと数字の順番通りに移動する)

dropzone属性 #

dropzone属性は、その要素にファイルなどをドロップすることが可能な領域であることを示す。

指定する値には"copy”(コピーされる)、“move”(移動する)、“link”(リンクが作成される)がある。ドロップされたデータの処理方法に応じ使い分ける。

カスタムデータ属性 #

カスタムデータ属性とは、自分独自に設定できるオリジナルの属性である。使用するのに良い属性などがない場合に利用する、

ただし制約があり、属性名は必ず「data-」という文字列から始まるようにしないといけない。

主にCSSやJavaScriptで値を取得するときなどに使われる。

<p data-id="1">その１</p>
<p data-id="2">その２</p>

その他のグローバル属性 #

他、紹介し切れてないグローバル属性は以下の通り（この他にもあります）