全てのHTML要素に指定できる共通の属性
グローバル属性は、全てのHTML要素に対して指定できる共通の属性です。HTMLのタグには、それぞれの役割りに応じて固有の属性が実装されている場合があります。それ以外の汎用的な機能が、グローバル属性としてまとめられています。HTMLのタグを覚える時点で、グローバル属性を全て暗記する必要はありません。実際にウェブページを制作する過程で、必要な物だけを個別に覚えていきましょう。
グローバル属性の一覧
accesskey
- その要素にアクセスするキーボードショートカットの文字を指定します。この値は、空白区切りの文字のリストで指定します。ブラウザは、この文字リストの中からコンピューターのキーボードに存在する最初の文字を採用します。
autocapitalize
- ユーザーの文字入力に対して、自動的に大文字化を行うか、どこを大文字化するかを制御します。
off
またはnone
:大文字化を行いません。全ての文字は小文字のままです。on
またはsentences
:先頭の文字を大文字にします。それ以外の文字は小文字のままです。words
:単語ごとに最初の文字を大文字にします。それ以外の文字は小文字のままです。characters
:全ての文字を大文字にします。
autofocus
(en-US)- ページの読み込み時、または
<dialog>
が表示された時点で、その要素が自動的にフォーカスされるように設定します。初期値はfalse
です。この属性は論理値です。 class
- 要素にクラス名を指定します。この値は空白区切りのリスト形式で、任意の文字列を与えられます。CSSやJavaScriptで参照する識別子として扱えます。
contenteditable
- ユーザーによる編集を可能にするかどうかを指定します。編集可能な場合、ブラウザはその要素を編集可能なものにします。この属性の値は以下のものが有効です。
true
: 要素が編集可能であることを示します。空文字列の場合も同様です。false
:要素が編集不可であることを示します。
data-*
- カスタムデータを定義します。HTMLとDOMの間で、特定の情報を交換できるようにします。全てのカスタムデータは、その属性を設定した要素のHTMLElementインターフェイスを通して使用できます。そして、
HTMLElement.dataset
プロパティでカスタムデータにアクセスできます。 dir
- テキストの記述方向を指定します。この属性では以下の値が使用できます。
ltr
:「left to right」を表します。左から右へ書かれる言語に対応します。rtl
:「right to left」を表します。右から左へ書かれる言語に対応します。auto
:ユーザーエージェントの判別を優先します。要素に書かれた文字を解析し、記述方向を決定する要因を基準にアルゴリズムを定めます。
draggable
- Drag and Drop API を使用して要素をドラッグできるかどうかを指定します。この属性には以下の値が用意されています。
true
:要素がドラッグ可能であることを示します。false
:要素がドラッグ不可であることを示します。
enterkeyhint
(en-US)- 仮想キーボードのEnterキーに、どのようなラベルまたはアイコンを表示するかを指定します。
exportparts
- エクスポートする祭にシャドウ部品を入れ子になったシャドウツリーから軽いツリーへと変換します。
hidden
- 要素を隠します。この属性が指定されている間、その要素は閲覧中のページとは関係がないものとみなされます。本来、表示されても問題のない正当な要素を隠す目的で使用してはいけません。
id
- ドキュメントの中で一意となる識別子を指定します。リンクのジャンプ先として指定するURLフラグメント、CSSやJavaScriptで参照する識別子として扱えます。
inputmode
- 要素が編集されようとする時にブラウザが立ち上げる仮想キーボードの種類や構成に関するヒントを与えます。この属性は、
contenteditable
モードにあるすべての要素で使用できます。 is
- 標準のHTML要素が、登録済みのカスタム要素であるかのように振る舞うことを指定します。
itemid
- 特定の要素に対して固有の識別子となるマイクロデータを提供します。この属性は、
itemscope
属性とitemtype
属性の両方が指定されている場合にのみ使用できます。 itemprop
- 特定の要素に対してプロパティを追加する場合に指定します。この属性の値がプロパティの名前となり、その要素に含まれる文字列やURLがプロパティの値になります。
itemref
itemscope
属性を持つ要素が、子孫でない要素をアイテムとして関連付ける場合に使用します。itemref
属性の値は、対象となる要素のid
属性を空白区切りのリストで参照します。itemscope
- 要素に関連付けられたメタデータのスコープを定義します。この属性を与えられた要素は、関連付けられたプロパティによって構成される新しいアイテムを作成します。アイテムの文脈は
itemtype
属性にスキーマのURLを指定するなどして決定します。この属性は論理値です。 itemtype
itemprop
属性で作成したプロパティの文脈を決定するURLを指定します。この属性で設定した語彙がデータ構造内でアクティブになるスコープをitemscope
属性で設定します。lang
- 要素で使われる言語を指定します。この属性の値は、「Tags for Identifying Languages」で定義された「言語タグ」の形式に基づいて与えます。
nonce
(en-US)- コンテンツ・セキュリティ・ポリシーに従い、文書に含まれる内容を実行するかどうかを決定するために使用するワンタイム・トークン(number user once)を埋め込みます。ウェブサイトの安全性を保護するために、この値が一致した場合にのみ、スクリプトの実行を許可するなどの処理で使用します。
part
::part
擬似要素に関連するパート名を指定します。パート名は、シャドウツリーに含まれる要素の選択やスタイルシートの適用などに用いられます。slot
- shadow DOMに置かれたスロット要素を、別の要素に割り当てる祭に使用します。
slot
属性を持つ要素は、その値と一致するname
属性の値を持つ<slot>
が生成したスロットに割り当てられます。 spellcheck
- 要素の中でスペルチェックを行うかどうかを指定します。この属性では以下の値が使用できます。
true
:スペルチェックを行うことを示します。false
:スペルチェックを行わないことを示します。
style
- 要素に対して直接スタイルシートを記述したい場合に使います。特定のページで共通のファイルから呼び出したスタイルではなく、固有のスタイルを与えたい時に有効な属性です。
tabindex
- 要素がフォーカス状態を受け入れる場合、キーボードナビゲーションに参加するかどうかを指定します。整数値を値に入れて、順番的なキーボードナビゲーションの参加の方法を定義します。
負の数
:フォーカスを受け入れつつ、順次キーボードナビゲーションでは到達できないようにします。0
:フォーカスを受け入れ、順次キーボードナビゲーションで到達可能にします。正の数
:フォーカスを受け入れ、順次キーボードナビゲーションは他の要素に与えられたtabindex
属性の値の昇順で移動可能にします。
title
- 要素に関する補足情報を指定します。対応している環境ではツールチップに情報が表示されます。
translate
- ページを翻訳する祭に、要素の内容を翻訳対象に含めるか、除外するかを指定します。
yes
:翻訳可能とみなします。空文字列の場合も同様です。no
:翻訳不可とみなします。
HTMLリファレンス一覧
-
HTMLって何?初心者が最初に学ぶべき基礎知識
HTMLに初めて触れる方はこちらから読み進めて下さい。タグを覚える前段階の超基礎知識を解説します。
入門編 -
HTMLの書き方をわかりやすく解説
タグの書き方が分からない人は、まずこちらの内容を覚えましょう。基本的なルールは、たった一度見るだけで理解できます。
初級編 -
HTMLファイルの作り方
HTMLファイルは誰でも簡単に作成できます。特別な技術やソフトウェアは必要ありません。
初級編 -
最初に覚えるべきHTMLタグ
HTMLはタグが多すぎて、どこから覚えていけばいいのか分からない。そんな時は、必要最低限のものから押さえていきましょう。
学習編 -
ヘッダー情報について
ヘッダーの役割と機能を解説します。なぜ全てのページにヘッダーを書かなければいけないのか、その疑問をここで払拭しましょう。
学習編 -
ハイパーリンクについて理解する
HTMLで作られたドキュメントをつなぐハイパーリンクについて解説します。
学習編 -
改行や半角スペースを連続で表示させる方法
HTMLではソースコード上に何度も改行や半角スペースを打っても、そのまま表示されるわけではありません。
学習編 -
グローバル属性の一覧
全ての要素で使えるグローバル属性の一覧です。
学習編 -
コンテンツ・モデルとコンテンツ・カテゴリ
HTML5から導入されたコンテンツ・モデルについて解説します。CSSを使い始める段階で、この概念も取り入れておきましょう。
中級編 -
文書のアウトライン
正しい文書構造はアウトラインを理解することで作成できます。マークアップの精度を高めたい方は、ぜひマスターしましょう。
中級編 -
ディレクトリの意味と使い方を詳しく解説
ウェブ制作に関わる人は、フォルダのことをディレクトリと呼びます。
中級編 -
HTMLとXHTMLの違い
興味のある方はXHTMLの存在も頭に入れておくと、いつか活かせる時が来るかも。
番外編