8.1 id 属性
グローバル領域の属性は、どのHTML要素にも使用できる属性だよ。Webページの要素を識別、分類、管理するのに重要な役割を果たしてるんだ。
id 属性は、ページ上の要素をユニークに識別するために使われるよ。id 属性の値はHTMLドキュメント全体でユニークでなきゃいけないんだ。この属性は、CSSやJavaScriptとの連携によく使われるよ。
構文:
<element id="unique-id">...</element>
使用例:
CSS
#header {
background-color: #f4f4f4;
padding: 10px;
}
HTML
<div id="header">
<h1>ヘッダー</h1>
</div>
JavaScript
document.getElementById('header').style.color = 'blue';
メリット:
- ユニークな識別: ページ上の要素を一意に識別できる
- スタイリング: CSSスタイルを適用しやすい
- DOM操作: JavaScriptで要素に簡単にアクセスできる
8.2 class 属性
class 属性は、要素に一つまたは複数のクラスを指定するために使われるよ。これらのクラスは、CSSスタイルを適用したり、JavaScriptで要素を操作したりするのに使われるんだ。idとは異なり、classの値はユニークである必要はないよ。
構文:
<element class="class-1 class-2">...</element>
使用例:
CSS
.highlight {
background-color: yellow;
}
.bold {
font-weight: bold;
}
HTML
<p class="highlight">このテキストは黄色で強調されています。</p>
<p class="bold">このテキストは太字です。</p>
<p class="highlight bold">このテキストは太字で黄色で強調されています。</p>
メリット:
- 複数のクラス: 一つの要素に複数のクラスを指定できる
- 要素のグループ化: 要素のグループにスタイルを適用しやすい
- DOM操作: JavaScriptで要素のグループを簡単に操作できる
8.3 data-* 属性
data-* 属性は、HTML要素にカスタムデータを格納するためのものだよ。これらの属性はdata-で始まり、任意の値を持てるんだ。JavaScriptで役立つ情報を格納するのによく使われてるよ。
構文:
<element data-key="value">...</element>
使用例:
HTML
<div data-user-id="12345" data-role="admin">
ユーザーID 12345、役割 - 管理者。
</div>
JavaScript
// ページ上で最初の data-user-id 属性を持つ要素を見つける
const userElement = document.querySelector('[data-user-id]');
// data-user-id 属性の値を取得してコンソールに表示する
console.log(userElement.dataset.userId); // 出力: 12345
// data-role 属性の値を取得してコンソールに表示する
console.log(userElement.dataset.role); // 出力: admin
メリット:
- データの保存: 要素に関連するデータの保存と伝達に便利
- JavaScriptによるアクセス: dataset APIを使ってデータを簡単にアクセスし、変更できる
- 柔軟性: HTML標準を壊さずに任意のデータを追加できる
GO TO FULL VERSION