1. HTML における違い

属性	用途	使用回数
`id`	ページ内で一意の要素を識別	1ページ内で1回のみ
`class`	複数の要素に共通のスタイルや振る舞いを付与	何度でも使用可能

細かい仕様はありますが、最初は
「id は強い」「class は重ねても id には勝てない」

<!-- 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 は100点、class は10点」と書きましたが、
これはあくまで 強さのイメージ です。

CSSでは
「id / class / 要素」
という 種類ごとの優先順位 で比較されるため、
class を10個書いても id が負けることはありません。

細かい仕様はありますが、最初は
「id は強い」「class は重ねても id には勝てない」
と覚えてもらえればOKです。

/* 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の特定要素操作など）に留める のがモダンなベストプラクティスです。