前回に引き続きHTML5を学習していく！
今回の学習項目は「グローバル属性に関して」
- ①グローバル属性とは
- 列挙属性 Enumerated Attribute
- 論理属性 Boolean Attribute
- カスタム要素 Custom Element
- ②class属性
- ③id属性
- ④lang属性
- ⑤title属性
- ⑥dir属性
- ⑦tabindex属性
- ⑧カスタムデータ(data-*)属性
- 1－3グローバル属性の学習後の総括
①グローバル属性とは
定義：すべての要素に共通して指定できる属性
a, h1, h2, div, p, imgなどの要素に指定ができる
そのグローバル属性の種類はなんと26種類ある！
代表的なものが右記の3つ → class, id, lang
列挙属性 Enumerated Attribute
定義：あらかじめ決められたキーワードの中から値を選択する方式の属性
［ルール］
キーワードは大文字・小文字どちらで書いても文法的に問題なし
空文字を指定できるものもある「translate=""」→ 「translate="yes"」と同じ結果
例. hidden, inputmode, autocapitalize, enterkeyhint, spellcheck, translate, contenteditable, draggable, dir
論理属性 Boolean Attribute
定義：属性名だけで指定できる属性のこと
論理属性：autofocus, inert, itemscope
（注）論理属性には値を指定することもできる。その場合は「属性名=""」「属性名="属性名"」のように指定する必要がある
［使用例］
〇 「autofocus=""」又「autofocus="autofocus"」
✕ 「autofocus="true"」「autofocus="false"」
※列挙属性のように指定はできない
カスタム要素 Custom Element
定義：JavaScriptを使ってHTMLに追加可能な独自の要素
また、カスタム要素は2種類存在する
- カスタムビルトイン要素（Customized Built-in Element）
- 自律カスタム要素（Autonomous Custom Element）
前者CBEは、既存の要素をカスタマイズして作成する要素
後者ACEは、新規の要素を作成する要素
②class属性
定義：要素が属する種類・分類を示すための属性
㌽〉空白文字で区切り、複数指定できる。値全体の前後に空白文字を入れてOK
［実践］
<div class="box black size"></div> div要素にclass属性を採用し値をbox, black, sizeに複数指定。これが実際に稼働してくれるかBracketsを利用しHTMLとCSSに打ち込んでみた。するとclass属性の値として機能を果たした。CSSのセレクタに「.box { height: 200px; }」と最初に書いて続けて「.black { height: 300px; }」と書けば後者に更新される
［使用例］
<aside class="advertising large vertical"> → 値が3つ指定され、赤色の背景が空白文字となる
③id属性
定義：要素に固有の名前をつけるための属性
鉄則→同じページ内の他のid属性に同じ値を指定できない
≪どんなときに使うの？≫
- ページ内の特定の場所（要素）にリンクさせたい場合
- avaScriptやCSSの指定で、特定の一つの要素を対象とした場合
（注）
id属性の値には空白文字禁止
必ず1文字以上を入れること
［使用例］
<ul id="navlist">
...
</ul>
④lang属性
定義：要素の内容と属性値の言語の種類を示す属性
値：BCP47という仕様で定義される言語タグを使う → ja, en, en-US...
［使用例］
<!DOCTYPE html>
<html lang="ja">
~~~~
</html>
⑤title属性
定義：要素に関連する補助的な案内・助言的な情報を提供するための属性
⑥dir属性
定義：要素内容のテキストを表記する方向を示す属性
これは前出の列挙属性といい、値が ltr, rlt, auto...
⑦tabindex属性
定義：指定した要素のフォーカスを可能にして、タブキーによる移動の順序も設定できる属性
値には整数が指定できるが、0以上を指定するとクリックでもタブキーでもフォーカスできる
負の値を指定すると、クリックではフォーカスできるが、タブキーではそこに移動できなくなる
⑧カスタムデータ(data-*)属性
定義：使用するのに適当な属性や要素がない場合に任意の要素に独自の属性を追加できるように用意された
［詳細］
値は自由。1つの要素にいくつでも指定可。
ただし、属性名は必ず「data-」という文字列で開始し、そのあとに少なくとも1文字以上を続ける
［禁止事項］
属性名の中にアルファベットの大文字はダメ
1－3グローバル属性の学習後の総括
なかなか手ごわい相手と対峙している印象。ただ一つだけ抑えたことはグローバル属性とは「すべての要素に共通して指定できる属性である」という点。
HTMLのページ内で要素をマークアップしていく中で間違いなく使う属性であることに違いはないからclass, id, langから徐々に記憶していく。
何かポートフォリオを作成したいが構想が立てられない。
とりあえずは、①習得知識を増やして②実際に書いて を続けていくしかない！
HTML5学習者の諸君はともに頑張ろうではないか！
