HTMLのidとclassの違いや使い分けなどを簡単に解説

公開：2024年9月3日更新：2025年10月28日

CodeCampが提供するDX人材育成が可能なプログラミングやITが学べる公開講座

HTMLのidとclassの違い
使用回数の違い
複数指定の可否
CSSの優先順位の違い
HTMLのidとclassの基本的な書き方
idの書き方
classの書き方
HTMLのidとclassの使い分け
CSSで装飾する場合
ページ内リンクを作る場合
JavaScriptで操作する場合
HTMLのidとclass名を決めるときのルール
使用できる文字の制限
先頭文字の制限
大文字と小文字の区別

HTMLのidとclassの違い

idとclassは似た機能を持つ属性ですが、使用回数やCSSの適用順序など明確な違いがあります。適切に使い分けるためには、これらの違いを理解することが重要です。

idとclassの主な違いとして、以下の3つがあります。

使用回数の違い
複数指定の可否
CSSの優先順位の違い

それぞれの違いを理解することで、状況に応じた最適な選択ができるようになります。以下では各違いについて詳しく解説していきます。

使用回数の違い

idとclassの最も大きな違いは、1ページ内での使用回数の制限です。idは1ページ内で同じ名前を1回のみ使用でき、classは同じ名前を何度でも使用できます。

<!-- idの使用例 -->
<div id="header">ヘッダー</div>
<div id="main">メインコンテンツ</div>
<div id="footer">フッター</div>

<!-- classの使用例 -->
<p class="text">テキスト1</p>
<p class="text">テキスト2</p>
<p class="text">テキスト3</p>

上記のコードだと、idは「header」「main」「footer」とそれぞれ異なる名前を付けており、同じid名は使用していません。一方、classは「text」という同じ名前を3つのpタグに付けており、このような使い方が可能です。idで同じ名前を複数回使用するとHTML構文エラーとなり、予期しない動作の原因になるため注意が必要です。

複数指定の可否

1つのHTMLタグに対して「複数の名前を指定できるかどうか」も、idとclassで異なります。classは半角スペースで区切ることで複数のclass名を指定できますが、idは複数のid名を指定できません。

<!-- classの複数指定（可能） -->
<div class="box red shadow">
  <p>複数のclass名を指定した要素</p>
</div>

<!-- idの複数指定（不可） -->
<div id="content main">
  <p>この書き方は正しくありません</p>
</div>

上記のコードだと、classは「box」「red」「shadow」の3つを半角スペースで区切って指定しており、それぞれのclass名に対応するCSSが適用されます。idを複数指定した場合、ブラウザによって動作が異なり、最初のid名のみが有効になるか、全てが無効になる可能性があります。複数の属性を付与したい場合、classを使用する必要があることは覚えておくと良いでしょう。

CSSの優先順位の違い

同じHTMLタグにidとclassの両方を指定した場合、CSSの適用順序に優先順位があります。「idで指定したCSS」の方が「classで指定したCSS」よりも優先順位が高く、先に適用されます。

<p id="title" class="blue">このテキストは何色になるでしょうか</p>

#title {
  color: red;
}

.blue {
  color: blue;
}

上記のコードでは、pタグに「title」というid名、「blue」というclass名の両方を指定していますが、実際に表示されるテキストの色は赤色になります。これはid名で指定した「color: red;」の方がclass名で指定した「color: blue;」よりも優先順位が高いためです。この優先順位を理解しておくことによって、意図したスタイルが適用されない場合のトラブルシューティングに役立ちます。

【PR】プログラミングや生成AIを無料で学べる「コードキャンプフリー」

HTMLのidとclassの基本的な書き方

HTMLでWebページを作成する際、特定の要素にだけスタイルを適用したい場合があると思います。idとclassは「HTMLタグに名前を付けて識別するための属性」で、CSSやJavaScriptで特定の要素を指定する際に使用します。

それぞれHTMLとCSSでの記述方法が異なり、CSSだとidは「#」、classは「.」を使って指定します。以下では各書き方について詳しく解説していきます。

idの書き方

idはHTMLタグに対して固有の名前を付ける属性で、1ページ内で同じid名は1回のみ使用できます。HTMLではid属性に任意の名前を指定し、CSSではid名の前に「#」を付けて指定します。

HTMLでのidの記述は、以下の形式で行います。

<div id="main">
  <h1 id="page-title">ページタイトル</h1>
  <p>本文がここに入ります。</p>
</div>

上記のコードでは、divタグに「main」というid名を、h1タグに「page-title」というid名を付けています。CSSでこれらのid名を指定する場合は、id名の前に「#」を付けて記述します。

#main {
  width: 800px;
  margin: 0 auto;
}

#page-title {
  font-size: 24px;
  color: #333;
}

CSSでは「#main」「#page-title」のように記述することで、それぞれのid名が付いた要素にスタイルを適用できます。id名の前の「#」を忘れると正しく適用されないため注意が必要です。

classの書き方

classはHTMLタグに分類用の名前を付ける属性で、1ページ内で同じclass名を何度でも使用できます。HTMLではclass属性に任意の名前を指定し、CSSではclass名の前に「.」を付けて指定します。

HTMLでのclassの記述は、以下の形式で行います。

<div class="container">
  <p class="text">これは通常の文章です。</p>
  <p class="text red">これは赤色の文章です。</p>
  <p class="text">これも通常の文章です。</p>
</div>

上記のコードでは、divタグに「container」というclass名、複数のpタグに「text」というclass名を付けています。2番目のpタグには、「text」と「red」の2つのclass名を半角スペースで区切って指定しており、複数のclass名を同時に指定することも可能です。

.container {
  padding: 20px;
  background-color: #f5f5f5;
}

.text {
  font-size: 16px;
  line-height: 1.6;
}

.red {
  color: #ff0000;
}

CSSでは「.container」「.text」「.red」のように記述することで、それぞれのclass名が付いた要素にスタイルを適用できます。class名の前の「.」を忘れると、正しく適用されないため注意が必要です。

HTMLのidとclassの使い分け

idとclassは使用回数や優先順位が異なるため、状況に応じて適切に使い分ける必要があります。どちらを使うべきか判断する基準を理解することで、保守性の高いコードを書けるようになります。

idとclassの使い分けとして、以下の3つの場面があります。

CSSで装飾する場合
ページ内リンクを作る場合
JavaScriptで操作する場合

それぞれの場面で適切な選択をすることで、効率的で読みやすいコードを書けます。以下では各場面での使い分けについて詳しく解説していきます。

CSSで装飾する場合

CSSでスタイルを適用する場合、基本的にはclassを使用することが推奨されます。classは何度でも使用できるため、同じスタイルを複数の要素に適用したり、後から変更したりする際に便利です。

<div class="card">
  <h2 class="card-title">カードタイトル1</h2>
  <p class="card-text">カードの説明文です。</p>
</div>

<div class="card">
  <h2 class="card-title">カードタイトル2</h2>
  <p class="card-text">カードの説明文です。</p>
</div>

.card {
  border: 1px solid #ddd;
  padding: 20px;
  margin-bottom: 20px;
}

.card-title {
  font-size: 20px;
  font-weight: bold;
}

.card-text {
  font-size: 14px;
  color: #666;
}

上記のコードでは、同じclass名「card」を2つのdivタグに使用しており、同じスタイルを繰り返し適用しています。idを使用した場合、同じ名前を複数回使用できないため、「card1」「card2」のように異なる名前を付ける必要があり、CSSの記述量が増えてしまいます。ただし、ヘッダーやフッターなど1ページに1つしか存在しない要素には、idを使用して大まかなレイアウトを定義することも可能です。

【PR】『Python』を学べる企業・個人向けのプログラミングコース

ページ内リンクを作る場合

ページ内リンクを作成する場合は、idを使用する必要があります。ページ内リンクとは、同じページ内の特定の位置にジャンプするリンクのことで、目次から各セクションに移動する際などに使用されます。

<nav>
  <ul>
    <li><a href="#section1">セクション1へ</a></li>
    <li><a href="#section2">セクション2へ</a></li>
    <li><a href="#section3">セクション3へ</a></li>
  </ul>
</nav>

<div id="section1">
  <h2>セクション1</h2>
  <p>セクション1の内容です。</p>
</div>

<div id="section2">
  <h2>セクション2</h2>
  <p>セクション2の内容です。</p>
</div>

<div id="section3">
  <h2>セクション3</h2>
  <p>セクション3の内容です。</p>
</div>

上記のコードでは、各セクションのdivタグにid名を付け、aタグのhref属性に「#id名」の形式でリンク先を指定しています。リンクをクリックすると、指定したid名が付いた要素の位置までページがスクロールされます。classではページ内リンクを作成できないため、この機能を使用する場合は、必ずidを使用する必要がある点に注意しましょう。

JavaScriptで操作する場合

JavaScriptで要素を操作する場合、idとclassのどちらも使用できますが、基本的にはidを使用することが推奨されます。idは1ページ内で固有の名前であるため、誤って複数の要素に同じ名前を付けてしまうリスクが少なく、処理速度も速くなります。

<button id="submit-btn">送信</button>
<div id="result"></div>

<script>
document.getElementById('submit-btn').addEventListener('click', function() {
  document.getElementById('result').textContent = '送信しました';
});
</script>

上記のコードでは、buttonタグとdivタグにそれぞれid名を付け、JavaScriptでgetElementByIdメソッドを使用して要素を取得しています。idは固有の名前であるため、意図した要素を確実に取得できます。一方、複数の要素に同じ操作を適用したい場合は、classを使用する方が便利です。その場合、getElementsByClassNameメソッドやquerySelectorAllメソッドを使用して、要素を取得します。

HTMLのidとclass名を決めるときのルール

idとclass名を付ける際は、HTML仕様で定められた命名ルールに従う必要があります。ルールに違反した名前を使用すると、CSSやJavaScriptが正しく動作しない可能性があります。

idとclass名を決めるときのルールとして、以下の3つがあります。

使用できる文字の制限
先頭文字の制限
大文字と小文字の区別

それぞれのルールを守ることで、ブラウザ間で一貫した動作を保証できます。以下では各ルールについて詳しく解説していきます。

使用できる文字の制限

idとclass名には、半角英数字とハイフン、アンダーバーのみが使用できます。全角文字やハイフン・アンダーバー以外の記号を使用すると、CSSやJavaScriptで正しく認識されない場合があります。

<!-- 正しい名前の付け方 -->
<div id="main-content"></div>
<div class="card_item"></div>
<div class="box01"></div>

<!-- 誤った名前の付け方 -->
<div id="メインコンテンツ"></div>
<div class="card@item"></div>
<div class="box#01"></div>

上記のコードでは、「main-content」「card_item」「box01」のように半角英数字とハイフン、アンダーバーのみを使用しています。一方、誤った名前の付け方では全角文字や「@」「#」などの記号を使用しており、これらはブラウザによって動作が異なるため避ける必要があります。特に全角文字を使用すると、見た目では判別しにくいバグの原因になるため注意が必要です。

先頭文字の制限

idとclass名の先頭文字には、数字や記号を使用できません。先頭文字は必ず半角英字で始める必要があり、数字は2文字目以降であれば使用できます。

<!-- 正しい名前の付け方 -->
<div id="section1"></div>
<div class="item01"></div>
<div class="box-a"></div>

<!-- 誤った名前の付け方 -->
<div id="1section"></div>
<div class="01item"></div>
<div class="-box"></div>

上記のコードでは、正しい名前の付け方として「section1」「item01」「box-a」のように先頭を半角英字にし、数字やハイフンは2文字目以降に配置しています。一方、誤った名前の付け方では「1section」「01item」のように先頭に数字を使用しており、これらはCSSセレクタとして正しく認識されません。また、「-box」のように先頭にハイフンを使用することも避ける必要があります。

大文字と小文字の区別

idとclass名では、大文字と小文字が区別されます。そのため、HTMLで「sample」と記述し、CSSで「Sample」と記述した場合、別の名前として認識されてスタイルが適用されません。

<p class="sample">このテキストは赤色になります</p>
<p class="Sample">このテキストは黒色のままです</p>

.sample {
  color: red;
}

上記のコードでは、1つ目のpタグは「sample」というclass名で、2つ目のpタグは「Sample」というclass名で記述しています。CSSでは小文字の「.sample」のみを定義しているため、1つ目のpタグにはスタイルが適用されますが、2つ目のpタグには適用されません。命名ミスを防ぐため、基本的には小文字のみを使用し、単語の区切りにはハイフンやアンダーバーを使用することが推奨されます。

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。