エンジニアカフェで、javaScript入門を履修したので、その時に出てきた話題をまとめてみる。
HTML、CSS、JavaScriptにおける class と id の違いについて
それぞれの言語の観点から整理して説明します。
1. HTML における違い
| 属性 |
用途 |
使用回数 |
id |
ページ内で一意の要素を識別 |
1ページ内で1回のみ |
class |
複数の要素に共通のスタイルや振る舞いを付与 |
何度でも使用可能 |
<!-- id: ページ内で1つだけ -->
<div id="header">ヘッダー</div>
<!-- class: 複数の要素に適用可能 -->
<div class="card">カード1</div>
<div class="card">カード2</div>
<div class="card highlight">カード3（複数クラスも可能）</div>
2. CSS における違い
| セレクタ |
書き方 |
詳細度（Specificity） |
id |
#id名 |
高い（100点） |
class |
.class名 |
中程度（10点） |
/* idセレクタ - 詳細度が高い */
#header {
background-color: blue;
}
/* classセレクタ - 詳細度が低い */
.card {
border: 1px solid #ccc;
}
/* 複数クラスの組み合わせも可能 */
.card.highlight {
background-color: yellow;
}
⚠️ 重要: 詳細度の違い
#header { color: red; } /* 詳細度: 100 */
.header { color: blue; } /* 詳細度: 10 */
/* 結果: 赤色になる（idの方が優先される） */
3. JavaScript における違い
| メソッド |
取得方法 |
返り値 |
id |
document.getElementById('id名') |
単一要素（HTMLElement/null） |
class |
document.getElementsByClassName('class名') |
HTMLCollection（複数要素の配列風オブジェクト） |
class（モダン） |
document.querySelectorAll('.class名') |
NodeList（静的なリスト） |
// idで取得 - 1つだけ
const header = document.getElementById('header');
header.style.color = 'red';
// classで取得 - 複数要素
const cards = document.getElementsByClassName('card');
// または
const cards = document.querySelectorAll('.card');
// 複数要素に対して処理
cards.forEach(card => {
card.addEventListener('click', () => {
console.log('カードがクリックされました');
});
});
4. 使い分けのガイドライン
| シナリオ |
推奨 |
理由 |
| ページ内の固有パーツ（ヘッダー、フッター） |
id |
一意性が必要 |
| 繰り返し使用するスタイル（ボタン、カード） |
class |
再利用性 |
| JavaScriptで特定の要素を操作 |
id |
確実に1つ取得できる |
| JavaScriptで複数要素に一括処理 |
class |
グループ処理が容易 |
| アンカーリンクの目的地 |
id |
URLの#で直接指定可能 |
5. まとめ図
┌─────────────────────────────────────────┐
│ id class │
├─────────────────────────────────────────┤
│ • 一意（1ページ1つ） • 複数使用可能 │
│ • # でCSS指定 • . でCSS指定 │
│ • 詳細度が高い • 詳細度が低い │
│ • JS: getElementById • JS: querySelectorAll
│ • アンカーリンクに使用 • スタイル共有用 │
└─────────────────────────────────────────┘
実践的なコード例
<!DOCTYPE html>
<html>
<head>
<style>
#main-title { color: navy; } /* id: 固有スタイル */
.btn { padding: 10px; border: none; } /* class: 共通スタイル */
.btn-primary { background: blue; } /* class: バリエーション */
</style>
</head>
<body>
<h1 id="main-title">タイトル</h1>
<button class="btn btn-primary">保存</button>
<button class="btn">キャンセル</button>
<script>
// idで特定要素を取得
const title = document.getElementById('main-title');
// classで複数ボタンにイベント設定
document.querySelectorAll('.btn').forEach(btn => {
btn.addEventListener('click', () => alert('clicked!'));
});
</script>
</body>
</html>
基本的には class を優先的に使用し、id は本当に必要な場面（ページ内リンク、JavaScriptの特定要素操作など）に留める のがモダンなベストプラクティスです。
