HTML id属性を使いこなして、Webページをもっと便利に
2024-04-04
HTMLのid属性について：詳細解説と実用的な例
有効なid属性値
id属性値は、以下の規則に従う必要があります。
- **英数字、ハイフン (
-)、下線 (_)、ピリオド (.)、コロン (:)**のみを使用できます。 - 数字から始まることはできません。
- 空白文字を含めることはできません。
- 予約語は使用できません。予約語とは、HTMLやCSSで使用されている特殊な単語です。
例
以下の例は、有効なid属性値と無効なid属性値を示しています。
有効な例
<div id="main-content"></div>
<h1 id="my-heading"></h1>
<a id="button-1"></a>
<div id="1st-element"></div> <h1 id="my heading"></h1> <a id="this is an id"></a> ```
**`id`属性のベストプラクティス**
* **意味のある名前**を使用しましょう。要素の内容や役割を反映した名前が望ましいです。
* **一意性**を確保しましょう。同じページ内に同じ`id`属性値を複数使用することはできません。
* **短く簡潔に**記述しましょう。
**`id`属性の使い方**
`id`属性は、さまざまな場面で使用されます。以下は、その代表的な例です。
* **JavaScriptで要素を選択**
```javascript
const element = document.getElementById("main-content");
element.style.color = "red";
- CSSで要素を選択
#main-content {
color: red;
}
- スクロールアンカー
<a href="#my-heading">見出しへスキップ</a>
補足情報
- HTML5では、
id属性は必須ではありません。ただし、アクセシビリティやスクリプティングの観点から、使用することを強く推奨します。 - 複数の要素に同じ
id属性値を誤って設定してしまうと、予期せぬ動作を引き起こす可能性があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML id属性 サンプル</title>
</head>
<body>
<header id="header">
<h1>ホームページ</h1>
</header>
<main id="main-content">
<p>これはメインコンテンツです。</p>
<a href="#footer">ページ下部へスキップ</a>
</main>
<section id="section-1">
<h2>セクション 1</h2>
<p>セクション 1 の内容</p>
</section>
<section id="section-2">
<h2>セクション 2</h2>
<p>セクション 2 の内容</p>
</section>
<footer id="footer">
<p>© 2024 example.com</p>
</footer>
</body>
</html>
このコードでは、以下のid属性が使われています。
header- ヘッダー要素main-content- メインコンテンツ要素section-1- セクション 1 要素footer- フッター要素
JavaScriptの例
const mainContentElement = document.getElementById("main-content");
mainContentElement.style.backgroundColor = "lightgray";
const section1Element = document.getElementById("section-1");
section1Element.classList.add("active");
このコードは、id属性を使って要素を選択し、スタイルやクラスを変更する例です。
CSSの例
#header {
background-color: #333;
color: white;
}
#main-content {
padding: 20px;
}
#section-1 h2 {
text-align: center;
}
<a href="#section-2">セクション 2 へ移動</a>
このサンプルコードを参考に、id属性をさまざまな場面で活用してみてください。
HTML要素を識別する他の方法
class属性は、複数の要素に同じスタイルを適用したり、JavaScriptで要素を選択したりするために使用されます。
<div class="button"></div>
<button class="button"></button>
name属性は、主にフォーム要素で使用されます。
<input type="text" name="username">
<input type="password" name="password">
data属性は、カスタムデータ属性を要素に追加するために使用されます。
<div data-role="navigation"></div>
<img data-src="image.jpg">
aria属性は、アクセシビリティのために使用されます。
<button aria-label="検索">検索</button>
<img aria-hidden="true">
- 要素を一意に識別する必要がある場合は、
id属性を使用するのが最善です。 - 複数の要素に同じスタイルを適用する場合は、
class属性を使用するのが最善です。 - フォーム要素で使用する場合、
name属性を使用する必要があります。 - カスタムデータ属性を追加する場合は、
data属性を使用するのが最善です。 - アクセシビリティのために、
aria属性を使用する必要があります。
注意点
id属性とclass属性は、パフォーマンスに影響を与える可能性があります。data属性は、検索エンジンによって認識されない場合があります。aria属性は、アクセシビリティツールによって認識されるようにする必要があります。
html
