HTML: HTMLグローバル属性リファレンス

Q: id と class の違いは何ですか？いつ使うのですか？

id は身分証明書のようなもので、1つのページで同じ id 値を持つ要素は1つだけしかできず、一意性があります。 class はクラス名のようなもので、複数の要素が同じ class を共有でき、再利用可能です。実際の開発では、スタイルの再利用が通常であるため、90%の場合は class を使用します。 id はCSSの詳細度が class より高いですが、優先度を上げるために乱用してはいけません。覚えておくべきこと： id はJavaScriptのターゲット指定に、 class はCSSのスタイリングに使用します。

Q: data-* は何に使うのですか？どうやって読み取るのですか？

data-* はHTML要素にカスタムデータを保存するために使用します。例： <div data-user-id="123" data-role="admin"> 。読み取り：JavaScriptは element.dataset.userId を介してアクセスします（ハイフンが自動的にキャメルケースに変換されます）。一般的な使用例：ユーザーID、商品情報、設定パラメータの保存。注意： data-* は表示に関連するデータのみに適しており、機密情報はここに保存してはいけません（ソースコードで確認できるため）。

Q: contenteditable とは何ですか？

contenteditable="true" は要素のコンテンツをユーザーが直接編集できるようにします。クリックして入力すると、リッチテキストエディターのように動作します。一般的な使用例：オンラインメモ、編集可能なテーブル、即時コメント。 document.execCommand() と組み合わせることで、太字、斜体などの編集機能を追加できます。注意：これはフロントエンドのみの効果で、編集されたコンテンツはサーバーに自動保存されません。送信するにはJavaScriptが必要です。

Q: hidden 属性と display:none の違いは何ですか？

どちらも要素を非表示にしますが、違いがあります：1） hidden はHTML5の標準属性で、明確なセマンティクスを持ち、「この要素は現在表示されるべきではない」を意味します；2） display:none はCSSスタイルで、 purely visualに非表示にするだけ；3） hidden は display:none より優先度が高く、 display:block が設定されていても、 hidden 要素は invisibleのままです。推奨事項：要素の表示状態には hidden を使用し、スタイルのニーズには display:none を使用します。

グローバル属性はすべてのHTMLタグで使用できるプロパティです。要素の識別子、スタイル、動作、言語、操作方法を定義します。

1. グローバル属性とは

グローバル属性はHTML仕様で定義された普遍的な属性で、任意のHTML要素（<html>、<head>、<body> などのルート要素も含む）に適用できます。すべてのタグにわたって一貫した意味論的・動作的制御を提供します。グローバル属性を理解し使いこなすことは、意味論的でアクセシブルかつ保守しやすいHTMLを書く鍵です。

2. 最もよく使われるグローバル属性

以下の4つのグローバル属性は日常の開発で最も頻繁に使われます。

id ― 要素の一意の識別子。同じページ内で重複してはいけません。CSSセレクタ、JavaScriptの getElementById()、アンカーリンクに使用。
class ― スペース区切りのクラス名リスト。CSSやJavaScriptのセレクタに使用。1つの要素に複数のクラスを持たせられます。
style ― タグに直接記述するインラインCSSスタイル。外部スタイルシートより優先度が高い。
title ― ホバー時に表示されるツールチップテキスト。<abbr>、<iframe> などの要素で特に有用。

▶ サンプル

HTML

<!-- id ― 一意の識別子 -->
<div id="header">ウェブサイトヘッダー</div>

<!-- class ― クラス名 -->
<p class="highlight important">このテキストはハイライトと重要の両方のスタイルが適用されています</p>

<!-- style ― インラインスタイル -->
<span style="color: red; font-weight: bold;">太字の赤いテキスト</span>

<!-- title ― ホバーツールチップ -->
<abbr title="HyperText Markup Language">HTML</abbr> はウェブのマークアップ言語です。

▶ 試してみよう

3. 言語と方向

これらの2つの属性はページコンテンツの言語と読み方向を宣言するために重要で、SEOやアクセシビリティにとって非常に重要です。

lang ― 要素のコンテンツの言語を宣言。例：lang="en"（英語）、lang="ja"（日本語）
dir ― テキストの方向：ltr（左から右、デフォルト）、rtl（右から左、アラビア語/ヘブライ語用）

▶ サンプル

HTML

<!-- ページの主要言語を日本語として宣言 -->
<html lang="ja">

<!-- 日本語の本文テキスト -->
<p lang="ja">私たちのウェブサイトへようこそ！</p>

<!-- 右から左のアラビア語テキスト -->
<p dir="rtl" lang="ar">مرحبا بالعالم</p>

▶ 試してみよう

ℹ️ 注意：lang 属性はSEO（検索エンジンがコンテンツの言語を正確に識別できる）とスクリーンリーダー（適切な音声合成エンジンを選択する）にとって重要です。<html> タグに lang を設定する習慣をつけましょう。

4. データ属性（data-*）

data-* 属性を使うと、HTML要素にカスタムデータを保存でき、JavaScriptが dataset API 経由で読み取れます。* は小文字で始める必要があり、大文字を含めることはできません。

HTML

<!-- data-* を使って商品情報を保存 -->
<div class="product" data-id="1001" data-name="ワイヤレスマウス" data-price="99.00" data-stock="true">
<h3>ワイヤレスマウス</h3>
<p>価格：$99.00</p>
<button onclick="addToCart(this)">カートに入れる</button>
</div>

<script>
function addToCart(btn) {
const product = btn.closest('.product');
const id = product.dataset.id;
const name = product.dataset.name;
const price = product.dataset.price;
console.log('カートに追加されました：', id, name, price);
alert(`「${name}」をカートに追加しました。価格：$${price}`);
}
</script>

5. インタラクティブ属性

これらの属性は要素の表示、フォーカス順序、編集動作を制御します。

hidden ― 要素を非表示にする（display: none と同等）。要素はスペースを占有しない
tabindex ― Tabキーナビゲーションの順序：tabindex="0" はドキュメント順にフォーカス、-1 はフォーカス不可
contenteditable ― 要素のコンテンツを編集可能にする。true に設定すると有効
spellcheck ― スペルチェックを有効/無効にする：true / false

▶ サンプル

HTML

<!-- hidden ― 表示しない情報を隠す -->
<div hidden>このメッセージはユーザーには表示されません</div>

<!-- tabindex でフォーカス順序を制御 -->
<input type="text" tabindex="2" placeholder="2番目にフォーカス">
<input type="text" tabindex="1" placeholder="1番目にフォーカス">

<!-- contenteditable でページ内編集を有効に -->
<div contenteditable="true" style="border:1px solid #ccc; padding:10px; border-radius:4px;">
このテキストはブラウザ上で直接編集できます！
</div>

<!-- spellcheck ― スペルチェック -->
<textarea spellcheck="true" placeholder="英語のテキストのスペルがチェックされます"></textarea>

▶ 試してみよう

6. その他のグローバル属性

以下はさらに便利なグローバル属性です。

属性	説明	例
`accesskey`	要素をアクティブ化またはフォーカスするキーボードショートカット	`accesskey="s"`（Alt+Sでフォーカス）
`draggable`	要素がドラッグ可能かどうか。Drag & Drop API と連携	`draggable="true"`
`autofocus`	ページ読み込み時に自動フォーカス（`<input>`、`<textarea>`、`<button>` などのフォーム要素用）	`autofocus`
`translate`	要素コンテンツを翻訳可能かどうか制御（`yes` / `no`）	`translate="no"`
`slot`	Web Componentの `<slot>` 要素と連携	`slot="header"`
`is`	カスタマイズされた組み込み要素を指定	`is="x-foo"`
`itemscope` / `itemprop` / `itemtype`	構造化データのマイクロデータマークアップ	`itemscope itemtype="https://schema.org/Product"`

❓ よくある質問

Q idとclassの違いは何ですか？いつ使うのですか？

A idは身分証明書のようなもので、1つのページで同じid値を持つ要素は1つだけしかできず、一意性があります。classはクラス名のようなもので、複数の要素が同じclassを共有でき、再利用可能です。実際の開発では、スタイルの再利用が通常であるため、90%の場合はclassを使用します。idはCSSの詳細度がclassより高いですが、優先度を上げるために乱用してはいけません。覚えておくべきこと：idはJavaScriptのターゲット指定に、classはCSSのスタイリングに使用します。

Q data-*は何に使うのですか？どうやって読み取るのですか？

A data-*はHTML要素にカスタムデータを保存するために使用します。例：<div data-user-id="123" data-role="admin">。読み取り：JavaScriptはelement.dataset.userIdを介してアクセスします（ハイフンが自動的にキャメルケースに変換されます）。一般的な使用例：ユーザーID、商品情報、設定パラメータの保存。注意：data-*は表示に関連するデータのみに適しており、機密情報はここに保存してはいけません（ソースコードで確認できるため）。

Q contenteditableとは何ですか？

A contenteditable="true"は要素のコンテンツをユーザーが直接編集できるようにします。クリックして入力すると、リッチテキストエディターのように動作します。一般的な使用例：オンラインメモ、編集可能なテーブル、即時コメント。document.execCommand()と組み合わせることで、太字、斜体などの編集機能を追加できます。注意：これはフロントエンドのみの効果で、編集されたコンテンツはサーバーに自動保存されません。送信するにはJavaScriptが必要です。

Q hidden属性とdisplay:noneの違いは何ですか？

A どちらも要素を非表示にしますが、違いがあります：1）hiddenはHTML5の標準属性で、明確なセマンティクスを持ち、「この要素は現在表示されるべきではない」を意味します；2）display:noneはCSSスタイルで、 purely visualに非表示にするだけ；3）hiddenはdisplay:noneより優先度が高く、display:blockが設定されていても、hidden要素は invisibleのままです。推奨事項：要素の表示状態にはhiddenを使用し、スタイルのニーズにはdisplay:noneを使用します。

📖 まとめ

グローバル属性はすべてのHTML要素で使用可能
id は一意の識別、class はスタイルグループ化、style はインラインスタイル、title はホバーツールチップ
lang は言語を宣言、dir はテキスト方向を制御
data-* はカスタムデータを保存し、dataset API 経由で読み取り
hidden は要素の非表示、tabindex はTab順序の設定、contenteditable はコンテンツ編集を有効化
accesskey はキーボードショートカット、draggable はドラッグ＆ドロップ、autofocus は自動フォーカス

📝 練習問題

商品ショーケース： data-* を使って各商品のid、名前、価格、在庫状況を保存する商品カードを作成してください。ボタンをクリックするとポップアップに商品情報を表示します。最低3つの商品カードを含めてください。
Todoエディター： contenteditable="true" を使って簡単なタスク編集領域を作成し、hidden 属性を使って「エディターパネルの表示/非表示」機能を切り替えてください。tabindex を使って論理的なTabフォーカス順序を設定してください。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

私たちについて