id / class

対応:		HTML 4（1997）

『id』と『class』はほぼすべてのHTML要素に指定できるグローバル属性です。『id』は要素を一意に識別するための名前で、『class』は複数の要素をグループ化するための名前です。CSSでスタイルを当てたり、JavaScriptで要素を操作したりする際に使います。

構文

<!-- idの指定 -->
<div id="header">...</div>

<!-- classの指定 -->
<p class="text-red">...</p>

<!-- 複数のclassを指定（スペース区切り） -->
<p class="text-large text-bold">...</p>

<!-- idとclassを同時に指定 -->
<section id="about" class="section-wrapper">...</section>

属性一覧

属性	概要
id	要素を一意に識別する名前を指定します。1ページ内で同じidを複数の要素に使うことはできません。
class	要素が属するクラス名を指定します。スペース区切りで複数のクラスを指定できます。同じクラス名を複数の要素に使えます。

CSSでの使い方

セレクター	概要
#id名	『#』を先頭に付けてidを指定します。例：『#header { background: #fff; }』
.class名	『.』を先頭に付けてclassを指定します。例：『.text-red { color: red; }』

サンプルコード

sample_id_class.html

<!-- CSSでidとclassを使う -->
<style>
  /* idセレクター（#）: 1ページに1つだけ */
  #main-title {
    font-size: 2rem;
    color: #333;
  }

  /* classセレクター（.）: 複数の要素に使い回せる */
  .highlight {
    background-color: yellow;
  }

  /* 複数のclassを組み合わせる */
  .btn {
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
  }
  .btn-primary {
    background-color: #0066cc;
    color: white;
    border: none;
  }
  .btn-secondary {
    background-color: #eee;
    color: #333;
    border: 1px solid #ccc;
  }
</style>

<!-- idで一意に識別 -->
<h1 id="main-title">メインタイトル</h1>

<!-- classで複数の要素にスタイルを適用 -->
<p>通常のテキストと<span class="highlight">ハイライトされたテキスト</span>。</p>

<!-- 複数のclassを組み合わせて使用（スペース区切り） -->
<button class="btn btn-primary">送信する</button>
<button class="btn btn-secondary">キャンセル</button>

<!-- JavaScriptでidを使って要素を取得・操作する -->
<p id="status">状態：待機中</p>
<button onclick="document.getElementById('status').textContent = '状態：完了';">
  完了にする
</button>

<!-- JavaScriptでclassを動的に追加・削除する -->
<p id="target">このテキストをハイライトする</p>
<button onclick="document.getElementById('target').classList.toggle('highlight');">
  ハイライト切り替え
</button>

実行結果

見出しに大きなフォントサイズと色が適用され、『highlight』クラスが付いた箇所は黄色い背景で表示されます。2つのボタンは共通の『btn』スタイルが適用され、送信ボタンのみ青背景・白文字のスタイルが追加されます。

サンプルページはこちら

概要

『id』は1ページ内で一意（ユニーク）でなければなりません。同じidを複数の要素に使うことはHTMLの仕様違反です。JavaScriptの『document.getElementById()』はidが重複している場合、最初の要素しか取得できません。

『class』は同じ名前を何度でも使えます。同じクラス名を持つ要素に対して一括でCSSを適用したり、JavaScriptで『document.querySelectorAll(".クラス名")』で複数の要素をまとめて操作したりできます。

名前の付け方のルールとして、数字から始まることはできません。また、スペースを含めることもできないため、複数の単語をつなげる場合はハイフン（例: 『main-title』）またはアンダースコア（例: 『main_title』）を使います。

命名規則（BEM記法）

大規模なプロジェクトでは、クラス名の命名規則を決めることでコードの可読性・保守性が大幅に向上します。BEM（Block Element Modifier）はその中で最も広く使われている命名規則です。

要素	役割	記法	例
Block（ブロック）	独立した意味を持つコンポーネント	block	card, nav, button
Element（エレメント）	ブロックを構成するパーツ	block__element	card__title, nav__item
Modifier（モディファイア）	状態・バリエーションの違い	block--modifier	button--primary, card--featured

<!-- BEM記法の実例：カードコンポーネント -->
<style>
  .card { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
  .card--featured { border-color: #e74c3c; }   /* Modifier */
  .card__header { background: #f5f5f5; padding: 1rem; }  /* Element */
  .card__title { font-size: 1.2rem; margin: 0; }         /* Element */
  .card__body { padding: 1rem; }                         /* Element */
  .card__footer { background: #f5f5f5; padding: 0.5rem 1rem; font-size: 0.85rem; }
</style>

<!-- 通常カード -->
<article class="card">
  <div class="card__header">
    <h2 class="card__title">記事タイトル</h2>
  </div>
  <div class="card__body">
    <p>記事の本文...</p>
  </div>
  <div class="card__footer">2025-01-15</div>
</article>

<!-- 注目カード（Modifier追加） -->
<article class="card card--featured">
  <div class="card__header">
    <h2 class="card__title">注目記事</h2>
  </div>
  <div class="card__body">
    <p>注目の記事の本文...</p>
  </div>
  <div class="card__footer">2025-06-01</div>
</article>

JavaScriptでクラスを動的に操作する

『classList』APIを使うとクラスの追加・削除・切り替えが簡単にできます。

var el = document.getElementById("target");

// クラスを追加する
el.classList.add("active");

// クラスを削除する
el.classList.remove("active");

// クラスがあれば削除、なければ追加（トグル）
el.classList.toggle("open");

// クラスが含まれているか確認する
if (el.classList.contains("disabled")) {
  console.log("無効化されています");
}

// 複数のクラスをまとめて操作する
el.classList.add("fade-in", "visible");
el.classList.remove("fade-out", "hidden");

// クラスを置き換える（古いクラス → 新しいクラス）
el.classList.replace("btn-secondary", "btn-primary");