HTML: HTML属性
属性はHTMLタグに追加の設定情報を提供し、要素の動作や見た目をより豊かにします。
1. 属性とは
HTML属性は開始タグ内に記述する特別なキーワードで、タグをより詳細に設定するために使います。属性は開始タグの中に name="value" の形式で記述します。1つのタグに複数の属性を持たせることもでき、その場合はスペースで区切ります。
▶ サンプル
<!-- 単一の属性 -->
<a href="https://example.com">これはリンクです</a>
<!-- 複数の属性（スペースで区切る） -->
<img src="/assets/images/tutorials/html-example-photo.webp" alt="サンプル写真" width="800" height="600">
<!-- 属性値はダブルクォーテーションで囲むのが推奨ですが、シングルクォーテーションでも動作します -->
<p title='ツールチップのテキスト'>ツールチップ付きの段落</p>
上の例では、href、src、alt、width、height、title がすべて属性名で、クォーテーションで囲まれた中身が具体的な属性値です。属性名は常に小文字で記述し、属性値はダブルクォーテーションで囲むことが推奨されます。
2. よく使われるグローバル属性
グローバル属性とは、すべてのHTMLタグで使用できる属性のことです。以下は最もよく使われるグローバル属性です。
(1) id ― 一意の識別子
id 属性は要素に一意の識別子を割り当てます。同じページ内で同じ id は1回しか使えません。アンカーリンクやCSSセレクタ、JavaScriptでの操作によく使われます。
▶ サンプル
<h1 id="page-title">私のウェブサイトへようこそ</h1>
<!-- #page-title を使ってこの見出しの位置にジャンプできます -->
<a href="#page-title">タイトルにジャンプ</a>
(2) class ― クラス名
class 属性は1つまたは複数のクラス名を要素に割り当てます。id と違い、同じクラス名を複数の要素で再利用でき、CSSスタイルやJavaScriptでの選択に使われる主要な方法です。
▶ サンプル
<!-- 複数の要素で同じクラスを使用 -->
<p class="highlight">このテキストはハイライト表示されます</p>
<p class="highlight">このテキストもハイライト表示されます</p>
<!-- 1つの要素に複数のクラスを持たせる（スペース区切り） -->
<div class="box bordered rounded">これは角丸のボーダー付きボックスです</div>
(3) style ― インラインスタイル
style 属性を使うと、タグ内に直接CSSスタイルを記述できます。多用は推奨されませんが（スタイルは別のCSSファイルに分離するのがベター）、簡易テストや動的にスタイルを上書きする場合にとても便利です。
▶ サンプル
<p style="color: red; font-size: 18px;">これは大きな赤いテキストです</p>
<div style="background: #f0f0f0; padding: 10px; border-radius: 5px;">
これは背景色付きの角丸ボックスです
</div>
(4) title ― ツールチップテキスト
title 属性は要素に追加情報を提供します。ユーザーが要素にマウスを乗せると、ブラウザがツールチップを表示します。
▶ サンプル
<p title="これはツールチップテキストです">このテキストにマウスを乗せてみてください</p>
<abbr title="HyperText Markup Language">HTML</abbr>
(5) グローバル属性まとめ
| 属性 | 目的 | 一意性 | 使用頻度 |
|---|---|---|---|
id |
要素の一意の識別子。アンカー、CSS、JSに使用 | ページ内で一意 | ⭐⭐⭐⭐ |
class |
要素にクラス名を割り当て。CSS/JSに使用 | 再利用可能 | ⭐⭐⭐⭐ |
style |
タグ内に直接CSSスタイルを記述 | ― | ⭐⭐ |
title |
マウスホバー時にツールチップを表示 | ― | ⭐⭐ |
lang |
要素のコンテンツの言語を宣言 | ― | ⭐⭐ |
dir |
テキストの方向を指定（ltr / rtl） | ― | ⭐ |
3. ブール属性
ブール属性は特別な種類の属性で、値を必要とせず、記述されているだけで「オン／真」を意味します。よく使われるブール属性には disabled、checked、readonly、required があります。
▶ サンプル
<!-- 無効化された入力フィールド -->
<input type="text" disabled>
<!-- 初期状態でチェック済みのチェックボックス -->
<input type="checkbox" checked> 利用規約に同意します
<!-- 読み取り専用の入力フィールド -->
<input type="text" value="読み取り専用の内容" readonly>
<!-- 必須入力フィールド -->
<input type="email" required>
ブール属性は name="name" の形式でも書けます（例：disabled="disabled"）。どちらの形式でもまったく同じ効果があります。簡潔な形式（属性名のみ）が推奨されます。
name="name" 形式を使用してください。
4. カスタムデータ属性 data-*
HTML5で導入された非常に柔軟な機能がカスタムデータ属性です。任意のHTMLタグに独自の属性を作成でき、属性名が data- で始まっていれば問題ありません。その目的は、HTMLタグ内に追加データを保存し、JavaScriptやCSSから利用することです。
例えば、商品リストがあり、各商品の価格と在庫数を保存したいとします。このデータはページ上に表示する必要はありませんが、JavaScriptがインタラクティブな処理のために読み取る必要があります。
▶ サンプル
<ul>
<li data-product-id="101" data-price="29.9" data-stock="50">Tシャツ - $29.9</li>
<li data-product-id="102" data-price="99.9" data-stock="20">バックパック - $99.9</li>
<li data-product-id="103" data-price="199" data-stock="0">ヘッドホン - $199（売り切れ）</li>
</ul>
<script>
// dataset API を使って data-* にアクセス
const items = document.querySelectorAll('li');
for (let item of items) {
console.log(item.dataset.productId); // "101", "102", "103"
console.log(item.dataset.price); // "29.9", "99.9", "199"
}
</script>
この例では、data-product-id、data-price、data-stock はすべて自分で定義した属性です。ページの表示には影響しませんが、JavaScriptから簡単に読み取ることができます。「試してみる」をクリックして実行後、ブラウザの開発者ツール（F12）のConsoleパネルを開くと、読み取ったデータが表示されます。
命名ルール： HTMLでは data-user-name（ハイフン区切り）を使います。JavaScriptでは対応するアクセスは dataset.userName（キャメルケース）になります。各ハイフンの後の最初の文字が自動的に大文字に変換されます。
▶ サンプル
<div data-user-name="田中太郎" data-user-age="20">ユーザー情報</div>
<script>
// data-user-name → dataset.userName（キャメルケース）
const div = document.querySelector('div');
console.log(div.dataset.userName); // "田中太郎"
console.log(div.dataset.userAge); // "20"
</script>
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経由でこのデータを読み取ってみてください。
