HTML: HTML属性
最終更新：2026-09-08
属性はHTMLタグに追加の設定情報を提供し、要素の動作や見た目をより豊かにします。
1. 属性とは
HTML属性は開始タグ内に記述する特別なキーワードで、タグをより詳細に設定するために使います。属性は開始タグの中に name="value" の形式で記述します。1つのタグに複数の属性を持たせることもでき、その場合はスペースで区切ります。
▶ サンプル
▶ 試してみよう上の例では、href、src、alt、width、height、title がすべて属性名で、クォーテーションで囲まれた中身が具体的な属性値です。属性名は常に小文字で記述し、属性値はダブルクォーテーションで囲むことが推奨されます。
2. よく使われるグローバル属性
グローバル属性とは、すべてのHTMLタグで使用できる属性のことです。以下は最もよく使われるグローバル属性です。
(1) id ― 一意の識別子
id 属性は要素に一意の識別子を割り当てます。同じページ内で同じ id は1回しか使えません。アンカーリンクやCSSセレクタ、JavaScriptでの操作によく使われます。
▶ サンプル
▶ 試してみよう(2) class ― クラス名
class 属性は1つまたは複数のクラス名を要素に割り当てます。id と違い、同じクラス名を複数の要素で再利用でき、CSSスタイルやJavaScriptでの選択に使われる主要な方法です。
▶ サンプル
▶ 試してみよう(3) style ― インラインスタイル
style 属性を使うと、タグ内に直接CSSスタイルを記述できます。多用は推奨されませんが（スタイルは別のCSSファイルに分離するのがベター）、簡易テストや動的にスタイルを上書きする場合にとても便利です。
▶ サンプル
▶ 試してみよう(4) title ― ツールチップテキスト
title 属性は要素に追加情報を提供します。ユーザーが要素にマウスを乗せると、ブラウザがツールチップを表示します。
▶ サンプル
▶ 試してみよう(5) グローバル属性まとめ
| 属性 | 目的 | 一意性 | 使用頻度 |
|---|---|---|---|
id |
要素の一意の識別子。アンカー、CSS、JSに使用 | ページ内で一意 | ⭐⭐⭐⭐ |
class |
要素にクラス名を割り当て。CSS/JSに使用 | 再利用可能 | ⭐⭐⭐⭐ |
style |
タグ内に直接CSSスタイルを記述 | ― | ⭐⭐ |
title |
マウスホバー時にツールチップを表示 | ― | ⭐⭐ |
lang |
要素のコンテンツの言語を宣言 | ― | ⭐⭐ |
dir |
テキストの方向を指定（ltr / rtl） | ― | ⭐ |
3. ブール属性
ブール属性は特別な種類の属性で、値を必要とせず、記述されているだけで「オン／真」を意味します。よく使われるブール属性には disabled、checked、readonly、required があります。
▶ サンプル
▶ 試してみようブール属性は name="name" の形式でも書けます（例：disabled="disabled"）。どちらの形式でもまったく同じ効果があります。簡潔な形式（属性名のみ）が推奨されます。
name="name" 形式を使用してください。
4. カスタムデータ属性 data-*
HTML5で導入された非常に柔軟な機能がカスタムデータ属性です。任意のHTMLタグに独自の属性を作成でき、属性名が data- で始まっていれば問題ありません。その目的は、HTMLタグ内に追加データを保存し、JavaScriptやCSSから利用することです。
例えば、商品リストがあり、各商品の価格と在庫数を保存したいとします。このデータはページ上に表示する必要はありませんが、JavaScriptがインタラクティブな処理のために読み取る必要があります。
▶ サンプル
▶ 試してみようこの例では、data-product-id、data-price、data-stock はすべて自分で定義した属性です。ページの表示には影響しませんが、JavaScriptから簡単に読み取ることができます。「試してみる」をクリックして実行後、ブラウザの開発者ツール（F12）のConsoleパネルを開くと、読み取ったデータが表示されます。
命名ルール： HTMLでは data-user-name（ハイフン区切り）を使います。JavaScriptでは対応するアクセスは dataset.userName（キャメルケース）になります。各ハイフンの後の最初の文字が自動的に大文字に変換されます。
▶ サンプル
▶ 試してみようdata-* 属性はフロントエンド開発で非常によく使われます。例えば、ユーザーIDの保存、ソート状態、ボタンの種類、チャートの設定などに利用します。JavaScriptで別途データオブジェクトを管理するよりも直感的で、データが対応するHTML構造と一緒に存在するからです。後のJavaScriptの章でこの機能を多用することになります。
data-* 属性はページ表示に関連するデータの保存にのみ使用し、データベースやバックエンドストレージの代わりとして使ってはいけません。パスワードやAPIキーなどの機密情報は決して data-* に配置してはいけません ― 誰でもページのソースコードを見れば確認できるからです。
❓ よくある質問
"value"）が業界標準です。シングルクォーテーション（'value'）もHTML5では有効ですが、ダブルクォーテーションの方が可読性と一貫性の面で推奨されます。属性値自体にダブルクォーテーションが含まれる場合（title='彼は「こんにちは」と言った'など）のみシングルクォーテーションを使用します。クォーテーションを省略すると、場合によっては解析エラーが発生する可能性があるため、絶対に推奨されません。idとclassの違いは何ですか？いつ使うのですか？idは身分証明書のようなもので、1つのページで同じid値を持つ要素は1つだけしかできず、一意性があります。classはクラス名のようなもので、複数の要素が同じclassを共有でき、再利用可能です。実際の開発では、スタイルの再利用が通常であるため、90%の場合はclassを使用します。idはCSSの詳細度がclassより高いですが、優先度を上げるために乱用してはいけません。覚えておくべきこと：idはJavaScriptのターゲット指定に、classはCSSのスタイリングに使用します。disabledやcheckedなどの属性になぜ値が必要ないのですか？falseを設定することはできず、無効にするには属性を削除します。例：<input disabled>は入力を無効にし、disabledを削除すると有効になります。disabled="true"（冗長）やdisabled="false"（入力が無効にならない、よくある間違い）と書かないでください。📖 まとめ
- 属性は開始タグ内に
name="value"の形式で記述し、複数の属性はスペースで区切ります。 - グローバル属性はすべてのタグで使用可能：
id（一意の識別子）、class（再利用可能なクラス名）、style（インラインスタイル）、title（ツールチップテキスト）。 - ブール属性は値を必要とせず、記述されているだけで「オン」を意味します：
disabled、checked、readonly、required。 - カスタムデータ属性
data-*はタグ内に追加データを保存し、JavaScriptがdatasetAPI 経由で読み取ります。
📝 練習問題
-
属性の組み合わせ練習： 以下の要素を含むページを作成してください。
-
id、class、style属性を持つ段落 -
title属性を持つリンク（ホバーでツールチップを表示） -
disabled属性を持つ入力フィールド（グレー表示でクリック不可）
-
-
data- 練習：* 商品カードのリストを作成し、各カードが
data-*属性を使って商品名、価格、在庫数を保存するようにしてください。その後、JavaScriptを使ってブラウザコンソールでdocument.querySelectorAllとdataset経由でこのデータを読み取ってみてください。
