グローバル属性 | HTML5プロフェッショナル認定試験レベル1(ver.2.0)試験対策

  • 2021年1月3日
  • 2021年4月29日
  • 資格

HTML5プロフェッショナル認定試験レベル1(ver.2.0)」の試験対策の備忘録。

今回は、試験範囲でもある「HTML5.1のグローバル属性」のまとめ。

ちなみに、2014年10月28日にW3Cによって「HTML5」が勧告され、2016年11月1日には「HTML5.1」へ、そして2017年12月14日には「HTML5.2」が勧告されました。2019年5月になって、W3CとWHATWGは“HTML Living standard”をHTML技術仕様の唯一の標準規格とすると合意しました。これにより現在は、WHATWGによって策定された「HTML Living standard」が「HTML5/5.1/5.2」に代わるHTML技術仕様の標準規格となっているが、2021年04月現在「HTML5プロフェッショナル認定試験レベル1(ver.2.0)」の試験範囲のHTMLのバージョンは「HTML5.1(※5.0については、5.1で非奨励になったものも一部出題される可能性がある)」だそうなので、「HTML5.1」をもとに書いています。

グローバル属性とは

グローバル属性とは、すべての要素に共通して指定できる属性のことを言い、HTML5.1では次の15種類が定義されている。

属性名 値の示すもの 指定可能な値
class 要素が属する種類や分類を示す名前 テキスト(空白文字で区切って複数の名前を指定可能)
id 要素のid(他の要素と重複しない固有の名前) テキスト(空白文字を含むことはできず、必ず1文字以上必要)
lang 言語の種類 BCP47言語タグ(ja, enなど)
style スタイルシート CSSの宣言(セレクタと{}を除く「プロパティ: 値;」の部分
dir 文字表記の方向 列挙属性*
dir=”ltr”
dir=”rtl”
dir=”auto”
tabindex タブキーによる移動の順序(フォーカスの可/不可も制御) 整数
accesskey キーボード・ショートカット 印刷可能な文字を1つ
hidden 要素を表示しない 論理属性*
※属性名だけで指定可
translate ローカライズの際に翻訳すべきかどうか 列挙属性*
translate=””
translate=” yes”
translate=” no”
spellcheck スペルおよび文法チェックの有効/無効 列挙属性*
spellcheck=””
spellcheck=” true”
spellcheck=” false”
contenteditable 要素を編集可能にするかどうか 列挙属性*
contenteditable=””
contenteditable=” true”
contenteditable=” false”
contextmenu この要素が使用するコンテキストメニュー menu要素のid属性の値
draggable ドラッグが可能かどうか 列挙属性*
draggable=” true”
draggable=” false”
dropzone ドロップされるとどうなるか copy, move, linkのいずれか1つ
空白文字で区切って、
string:〇〇〇
file:〇〇〇
を複数指定可

列挙属性/列挙型属性(Enumerated Attribute)

あらかじめ決められたキーワードの中から値を選択する方式の属性のことを「列挙属性」または「列挙型属性」と言う。キーワードは大文字で書いても小文字で書いても文法的には問題ない。列挙属性の中には値として空文字を指定できるものもある

論理属性/論理型属性(Boolean Attribute)

通常、HTMLの属性は「属性名=”値”」の書式で指定しますが、「属性名」だけで指定できる属性があり、そのような属性のことを「論理属性」または「論理型属性」という。

論理属性には値を指定することもできる。
 hidden
 hidden=””
 hidden=”hidden”
× hidden=”true”
× hidden=”false”

class属性

class属性は、それを指定した要素が属する種類・分類を示すための属性。名前は空白文字で区切って複数指定可能。空白文字は、連続して複数個を入れてもOK。また値全体の前後に空白文字が入っていても問題ない。

id属性

id属性は、それを指定した要素に固有の名前をつけるための属性。固有の名前なので、同じページ内の他のid属性に同じ値を指定することはできない。(class属性にはこのような制限はなく、複数の要素に対して同じ値を指定できる。)

※id属性の値には空白文字を含むことができない。

※id属性の値には必ず1文字以上入れる必要がある。

※使用できる文字に特に制限はなく、アンダースコア(_)や数字を値の先頭に使用してもよいし、値全体が数字や記号でもOK。

lang属性

lang属性は、要素内容と属性値の言語の種類を示す属性。値には、BCP47という仕様で定義されている言語タグを使用。

言語コード 言語名
ja 日本語
en 英語
en-US 米国英語
en-GB イギリス英語
fr フランス語
de ドイツ語
it イタリア語
es スペイン語

title属性

title属性は、その要素に関連する補助的な案内や助言的な情報を提供するための属性。一般的なパソコン環境のブラウザでは、ツールチップで表示される。

dir属性

dir属性は、要素内容のテキストを表記する方向を示す属性。

tabindex属性

tabindex属性は、フォーカスの可・不可を制御し、フォーカスを可能にした場合にはタブキーによる移動の順序も設定可能な属性。値には整数が指定でき、0以上を指定するとフォーカスされるようになり、負の値を設定するとフォーカスされなくなる。

タブキーによる移動の順序を設定するには、1以上の整数を指定すると、ソース順に関係なく値の小さいものから大きいものへと移動する。

値に0を指定するとソースの並び順に移動するようになる。

※どの要素であっても、この属性が指定されるとインタラクティブコンテンツになる。

accesskey属性

accesskey属性は、要素にアクセスキーを指定することで、マウスの使えない環境でもキーボードを使って簡単に同様の操作を行うことができるようにするもの。

accesskey属性は次のような用途に使用することができる。
・キーボード操作でリンク先を開けるようにする。
・キーボード操作で入力欄を選択できるようにする。
・キーボード操作でコマンドを実行できるようにする。

accesskey属性の値には、その要素に割り当てるアクセスキーを指定する。大文字と小文字は区別されることになっている。

※HTML5では、複数のアクセスキーを指定することができたが、HTML5.1では、設定できるアクセスキーは1つだけとなった。

accesskey属性を指定した場合、アクセスキーの呼び出し方法はブラウザによって異なる。

OS ブラウザ 説明
Windows IE Alt + [アクセスキー]
Chrome Alt + [アクセスキー]
Firefox Alt + Shift + [アクセスキー]
Safari Alt + [アクセスキー]
Opera Alt + [アクセスキー] ※古いバージョンでは、Shift + Esc + [アクセスキー]
Mac OS



Chrome Ctrl + Alt + [アクセスキー]
Firefox Ctrl + Alt + [アクセスキー] ※古いバージョンでは、Ctrl + [アクセスキー]
Safari Ctrl + Alt + [アクセスキー]
Opera Ctrl + Alt + [アクセスキー] ※古いバージョンでは、Shift + Esc + [アクセスキー]

通常、フォームのラベルをもつinput要素では、label要素にaccesskeyを指定する。その際、アクセスキーを使用するとlabel要素ではなくinput要素にフォーカスが移る。ただし、ラジオボタンをフォーカスで移動させたい場合はinput要素をlabel要素で囲う必要あり。

dropzone属性

dropzone属性は、この要素にドロップされたデータがどうなるかを示す属性。値には「copy(コピーされる)」「move(移動する)」「link(リンクが作成される)」のいずれか1つが指定できる。

さらに空白文字で区切って、受け入れ可能な文字列またはファイルの種類を指定することもできる。その場合、文字列なら「string:MIMEタイプ(例:string:text/plain)」、ファイルなら「file:MIMEタイプ(image/jpeg)」の書式で指定する。

※dropzone属性を持つ要素は、非視覚的なやりとりのために「title属性」で名前を付けるように推奨されている。

カスタムデータ(data-*)属性

カスタムデータ属性とは、使用するのに適当な属性や要素がない場合に、任意の要素に独自の属性を追加できるように用意されたもの。(※値は自由に設定でき、1つの要素にいくつでも指定できる)ただし、属性名は必ず「data-」という文字列で開始し、そのあとに少なくとも1文字以上を続けなければならない。また、属性名の中にアルファベットの大文字を含むことはできない

カスタムデータ属性はサイト内部で利用するために用意された属性であり、サイトとは無関係の外部のソフトウェアから利用するためのものではない点に注意が必要。

WAI-ARIA関連の属性

HTML5では、WAI-ARIA(Web Accessibility Initiative – Accessible Rich Internet Applications 1.0)という別の仕様で定義されているrol属性およびaria-*属性を任意の要素に対して指定することができる。

rol属性

role属性は、要素の役割が何であるのかを示すために使用する属性で、高齢者や障害を持った人がWebサイトやWebアプリケーションを利用しやすくするための方法を定義している。

ランドマークロール

名前 意味
banner ヘッダー。1回だけ使用ができる。
complementary 補足のコンテンツ。HTMLの要素だと<aside>と対応してる。1回のみの使用が望ましい。
contentinfo コンテンツ情報。ページやWebサイトについての情報(著作権や連絡先など)1回だけ使用できる。
form フォーム。<form>に関する属性。
main メインコンテンツ。1回だけ使用できる。
navigation ナビゲーション。<nav>のようにサイト内の別のページへのリンクを含む要素。あんまり複数回使うのは望ましくない。
search 検索。サイトコンテンツの検索などで利用する。複数回使ってもOK。

文書構造ロール

名前 意味
application アプリケーションとしてのコンテンツ(bodyにつけることが多い)
article 文書、ページ
cell テーブルのセル
columnheader テーブルやグリッドの列のヘッダー情報をもつセル。テーブルの列の見出しとして使用もできる。
definition 用語などの定義
directory 目次のようなグループのリスト
document コンテンツを含むもの(bodyにつけることが多い。application以外は大体これ)
feed スクロール可能な記事リスト
figure 参照の図や画像など
group UI要素やオブジェクトをグループ化したもの
heading 見出し
img 画像
list listitemを含むリスト
listitem リストの項目
math 数式を表すコンテンツ
none 意味を持たないことを示す要素
note 補足
presentation 意味を持たないことを示す要素。類義語はnone
region
row テーブルにおけるセルの行
rowgroup 1つ以上の行を含む構造
rowheader 行のセルを含むヘッダー
separator セクションまたはメニューのグループを区切る仕切り
table テーブル
term 対応する定義をもつ単語
toolbar 機能を持つボタンやセレクタを含む。ツールバー。
tooltip 要素の説明をするポップアップ。ツールチップ。

抽象的ロール

command input landmark
range roletype section
sectionhead select structure
widget window

文書

ウィジェットロール

スタンドアロンユーザーインターフェースウィジェット(単独)
名前 意味
alert
alertdialog
button ボタン。クリックやタップした時にユーザー誘発のアクションを可能にする入力
checkbox チェックボックス。 true、false、またはmixedを選択できるチェックボックス
dialog
gridcell gridまたはtreegrid内のセル。
link リンク。
log
marquee
menuitem menuまたはmenubarの中の選択肢。メニューの中のリストとか。
menuitemcheckbox チェックボックスをもつmenuitem。
menuitemradio ラジオボタンをもつmenuitem。
option selectで選択可能な項目。
progressbar 時間がかかるタスクの進捗状況を表示する要素。
radio ラジオボタン。
scrollbar 表示コンテンツ内のスクロールを制御する要素。
searchbox 検索テキストボックス。
separator(フォーカス可能な場合) コンテンツを区切る仕切り
slider <input type=‘range’>のようなつまみをスライドさせて数値を選択する要素
spinbutton <input type=‘number’>のようなinput内で数値を選択するフォーム
status
switch スイッチ。checkedとは別のon/offを表すチェックボックス
tab タブ
tabpanel tabに関連付けられたコンテナ
textbox 自由形式のテキストを入力する型
timer
tooltip
treeitem treeのオプション項目
複合ユーザーインターフェースウィジェット
名前 意味
combobox 入力するtextboxと他の要素を含む複合ウィジェット
grid 1つ以上のセルや行を持つ複合ウィジェット
listbox 選択肢のリストから1つ以上の項目を選択できるようにするウィジェット
menu 選択肢のリストを提供するウィジェット
menubar 水平に表示されるメニュー
radiogroup radioボタンのグループ
tablist tabのリスト
tree 折りたたみや展開されるようなネストしているリストを持つ
treegrid 行がtreeと同じように折りたたみや展開されるgrid

aria-*属性

aria-*属性は、要素のその時点での状態や特性などを示すために使用できる属性で、「aria-〇〇〇」といった形式の属性名を持つ。

例としては、チェックボックスなどがチェックされている状態かどうかを示すaria-checked属性(※値は true, false, mixed)や、入力が必須であることを示すaria-required属性(※値は true, false)などがある。

「ARIA」は、2014年3月20日にW3C勧告として公開された、動的コンテンツや複雑なユーザーインターフェイスを持つサイト(Webアプリケーション)をアクセシブルにするための仕様の略称。「WAI」は、Webアクセシビリティの向上を目的としてガイドラインや仕様を策定するW3C内の組織を示す。
W3C(World Wide Web Consortium)は、Web関連技術の標準化と推進を目的とした国際的な非営利団体で、HTMLやXHTML、XML、CSS、DOM、WAI-ARIAなどの仕様を策定している。
「心身に機能的な制限があってもWeb上の情報にアクセスでき、理解可能な状態で欠落のない情報が得られ、捜査も可能であること」をWebアクセシビリティという。また、Webアクセシビリティが確保された状態のことを「アクセシブル」と表現する。
>おとママのお買得商品×美容×好きなもの

おとママのお買得商品×美容×好きなもの

現在子育て中で忙しくしていますが、 自分が好きでいいなと思った物や 私が実際に使っていいと思った物、またセールなどでお得な商品などを紹介しています。よかったらたちよってみてください✨

CTR IMG