HTMLのclassとidの違いをわかりやすく解説

HTML class と id の違いとは？

HTMLを書いていると必ず出てくる class と id。どちらも要素に名前をつける属性ですが、使い方に大きな違いがあります。

一言で言うと、

この違いを理解していないと、「CSSが効かない」「JavaScriptで要素が取得できない」といった問題に悩まされます。この記事でしっかり使い分けを覚えましょう。classとidはHTML・CSS・JavaScriptすべてで使う基本中の基本です。ここをマスターすれば、Web開発の土台が固まります。

classの使い方

class 属性は、同じスタイルを複数の要素に適用したいときに使います。1つの要素に複数のクラスをスペース区切りで指定することもできます。Webサイトのスタイリングでは、classを使うのが基本です。

<!-- 複数の要素に同じクラスをつけられる -->
<div class="card">カード1</div>
<div class="card">カード2</div>
<div class="card">カード3</div>

<!-- 複数のクラスをスペース区切りで指定 -->
<button class="swp-btn swp-btn--primary">送信</button>

.card {
  background-color: white;
  border-radius: 12px;
  padding: 24px;
}

.btn {
  padding: 10px 24px;
  border-radius: 6px;
}

.btn-primary {
  background-color: #0d9488;
  color: white;
}

💡 HTMLタグ一覧【よく使う20選】で基礎を確認できます。

idの使い方

id 属性は、ページ内で1つだけの要素を特定するときに使います。同じidを複数の要素につけてはいけません。idは「この要素は世界に1つだけ」という意味を持ちます。

<!-- idはページ内で1つだけ -->
<header id="site-header">...</header>
<main id="main-content">...</main>
<footer id="site-footer">...</footer>

idはページ内リンク（アンカーリンク）にも使えます。

<a href="#section2">セクション2へ移動</a>

<h2 id="section2">セクション2</h2>

🔗 あわせてHTMLリストの作り方もチェックしてみましょう。

CSSでの指定方法の違い

CSSでclassとidを指定するときの書き方が異なります。classはドット（.）、idはシャープ（#）で始めます。

/* classセレクター：.（ドット）から始まる */
.card {
  background-color: white;
}

/* idセレクター：#（シャープ）から始まる */
#site-header {
  position: sticky;
  top: 0;
}

IDセレクターはclassセレクターより「詳細度」が高いため、同じプロパティを指定した場合はIDが優先されます。これが「IDをスタイリングに使わない方がいい」理由です。後からclassで上書きしようとしても効かなくなります。

JavaScriptからの取得方法

// classで取得（複数の要素）
const cards = document.querySelectorAll('.card');

// idで取得（1つの要素）
const header = document.getElementById('site-header');
const header2 = document.querySelector('#site-header');

📖 詳しくはHTML問題ドリルで解説しています。

使い分けのまとめ

迷ったらクラスを使いましょう。IDはJavaScriptで特定の要素を操作するときや、ページ内リンクのアンカーとして使うときだけで十分です。実際のプロジェクトでは、CSSのスタイリングにIDを使うことはほとんどありません。IDセレクターは詳細度が高すぎて、後からスタイルを上書きしにくくなるためです。「スタイルはclass、操作はid」と覚えておきましょう。この原則を守れば、CSSの詳細度で悩むことが格段に減ります。classだけでスタイリングすれば、後から簡単に上書きや変更ができます。プロのエンジニアも全員この原則を守っています。classとidの使い分けは、Web開発者としての第一歩です。しっかり身につけて、自信を持ってコードを書きましょう。この記事の内容を理解できたら、次はCSSセレクタの詳細度について学ぶと、さらにレベルアップできます。CSSの詳細度を理解すれば、スタイルが効かない問題を自力で解決できるようになります。頑張りましょう。応援しています。

クラス名の命名規則

クラス名の付け方にはいくつかのルールがあります。チームで開発するときに統一しておくと、コードが読みやすくなります。

• ケバブケース：単語をハイフンでつなぐ（main-content、nav-link）。CSSで最も一般的な書き方です。
• 意味のある名前をつける：見た目ではなく役割で名前をつけましょう。red-text より error-message の方が良い名前です。色を変えたくなったとき、名前を変えなくて済みます。
• 短すぎず長すぎず：a は短すぎて意味がわからず、main-navigation-link-active-state は長すぎます。nav-link--active くらいが適切です。

よくある間違い

• 同じIDを複数の要素に使う：IDはページ内で一意（ユニーク）でなければなりません。同じIDを複数の要素につけると、JavaScriptの getElementById が正しく動作しません。HTMLバリデーターでもエラーになります。
• クラス名に日本語やスペースを使う：クラス名は半角英数字とハイフン（-）、アンダースコア（_）で書きましょう。スペースを入れると別のクラスとして認識されます。例えば class="my card" は「my」と「card」の2つのクラスです。
• IDをスタイリングに多用する：IDセレクターは詳細度が高すぎて、後からスタイルを上書きしにくくなります。スタイリングにはクラスを使いましょう。IDは「JavaScriptで要素を取得する」「ページ内リンクのアンカー」の2つの用途に限定するのがベストプラクティスです。
• 数字で始まるクラス名：class="1st-item" のように数字で始まるクラス名は、CSSセレクターで直接指定できません。class="first-item" のように英字で始めましょう。

📖 CSSセレクタ完全ガイドでセレクタの詳細度を学べます。

🔗 HTML入門ガイドで基礎を確認できます。

まとめ

classとidを正しく使い分けると、コードが整理されてメンテナンスしやすくなります。チーム開発でも「classはスタイル用、idはJS用」というルールを共有すると、コードの一貫性が保てます。この基本ルールを守るだけで、コードの品質が格段に上がります。HTMLの基礎をしっかり固めて、次のステップ（CSS・JavaScript）に進みましょう。

実践例：カードコンポーネント

classとidの使い分けを、実際のカードコンポーネントで確認しましょう。同じデザインのカードを複数作るときはclassを使い、特定のカードだけをJavaScriptで操作するときはidを使います。

<!-- classで共通スタイルを適用 -->
<div class="card card--featured" id="main-card">
  <h3 class="card__title">タイトル</h3>
  <p class="card__text">説明文</p>
</div>

<div class="card">
  <h3 class="card__title">タイトル2</h3>
  <p class="card__text">説明文2</p>
</div>

この例では、.card クラスで共通のスタイルを適用し、.card--featured で特別なスタイルを追加しています。id="main-card" はJavaScriptで特定のカードを操作するために使います。

BEM記法の紹介

BEM（Block Element Modifier）は、クラス名の命名規則の一つです。大規模なプロジェクトでクラス名が衝突しないように設計されています。

• Block：独立したコンポーネント（例：card、nav、form）
• Element：Blockの一部（例：card__title、card__image）。アンダースコア2つでつなぎます。
• Modifier：状態やバリエーション（例：card--featured、btn--large）。ハイフン2つでつなぎます。

<!-- BEM記法の例 -->
<div class="card card--featured">
  <img class="card__image" src="photo.jpg" alt="写真">
  <h3 class="card__title">タイトル</h3>
  <p class="card__text">説明文</p>
  <button class="card__button card__button--primary">詳しく見る</button>
</div>

BEMを使うと「このクラスはどのコンポーネントに属しているか」が一目でわかります。チーム開発では特に重要です。

BEM以外の命名規則

BEM以外にも、以下のような命名規則があります。プロジェクトに合ったものを選びましょう。

• ケバブケース：main-content、nav-link（最も一般的）
• キャメルケース：mainContent、navLink（JavaScriptでよく使う）
• ユーティリティクラス：mt-4、text-center（TailwindCSS方式）

どの命名規則を使うにしても、プロジェクト内で統一することが最も大切です。途中で規則を変えると混乱の原因になります。

よくある質問（FAQ）

Q. classとidを両方つけてもいい？

はい、1つの要素にclassとidの両方をつけられます。<div class="card" id="main-card"> のように書きます。classでスタイルを適用し、idでJavaScriptから操作する、という使い分けが一般的です。実際のWebサイトでは、ほとんどの要素にclassがつき、特定の要素だけにidがつきます。

Q. クラス名に使える文字は？

半角英数字、ハイフン（-）、アンダースコア（_）が使えます。数字で始めることはできません。日本語やスペースは使えません。大文字と小文字は区別されるので、基本的に小文字で統一しましょう。良いクラス名の例：main-content、nav-link、btn-primary。悪いクラス名の例：1st-item（数字始まり）、赤い文字（日本語）、a（意味不明）。

Q. classをたくさんつけすぎるのは良くない？

1つの要素に3〜4個のクラスをつけるのは一般的です。TailwindCSSのようなユーティリティCSSでは10個以上つけることもあります。ただし、意味のないクラスを大量につけるのは避けましょう。各クラスに明確な役割があることが大切です。

Q. idを使わずにJavaScriptで要素を取得する方法は？

document.querySelector('.class-name') を使えば、classで要素を取得できます。idがなくても問題ありません。ただし、querySelectorは最初に見つかった1つの要素だけを返します。複数の要素を取得するには document.querySelectorAll('.class-name') を使います。