HTMLのidとclassの違いをわかりやすく解説【初心者向け】

HTMLを書いていると、必ずといっていいほど登場するのが id と class という属性です。

どちらも「要素に名前をつける」ためのものですが、使い方や役割には明確な違いがあります。

この記事では、それぞれの特徴や使い分けを、具体的なコードを交えながら丁寧に説明していきます。

idとclassは何のために使うのか

HTMLタグには <p> や <div> など、さまざまな種類があります。でも、同じ <p> タグが10個並んでいたとして、「この1つだけ色を変えたい」「この3つだけフォントを変えたい」というときはどうすればいいでしょうか。

そのために使うのが id と class です。要素に名前をつけることで、CSSでスタイルを当てたり、JavaScriptで操作したりするときに「どの要素か」を特定できるようになります。

idの特徴

id は、ページの中に1つしか存在しないユニークな名前をつけるための属性です。「身分証明書のナンバー」のようなもので、同じページ内で同じidを複数の要素に使ってはいけません。

HTMLでの書き方はこのようになります。

<h1 id="page-title">はじめてのHTML</h1>
<p id="intro-text">HTMLの基礎を学んでいきましょう。</p>

CSSでidを指定するときは、名前の前に #（シャープ）をつけます。

#page-title {
  color: navy;
  font-size: 2rem;
}

#intro-text {
  color: gray;
}

# がidのセレクタ記号だと覚えておきましょう。

classの特徴

class は、複数の要素に同じ名前をつけられる属性です。

「グループに名札をつける」イメージに近く、同じスタイルを何か所にも適用したいときに使います。

<p class="highlight">ここは強調したいテキストです。</p>
<p>ここは普通のテキストです。</p>
<p class="highlight">ここも強調したいテキストです。</p>

CSSでclassを指定するときは、名前の前に .（ドット）をつけます。

.highlight {
  background-color: yellow;
  font-weight: bold;
}

この書き方だと、class="highlight" がついている要素すべてに、まとめてスタイルが適用されます。1か所直せば全部変わるので、とても効率的です。

また、classは1つの要素に複数指定することもできます。スペース区切りで並べるだけです。

html

<p class="highlight large-text">このテキストは強調＋大きめのサイズです。</p>

css

.large-text {
  font-size: 1.5rem;
}

このように、複数のclassを組み合わせることでスタイルを柔軟に管理できます。

idとclassの違いをまとめると

idとclassに共通するルール

idとclassには、どちらにも共通するルールがいくつかあります。

初心者のうちに押さえておくと、あとで混乱しにくくなります。

任意の名前をつけられる

idもclassも、基本的には自分で好きな名前をつけることができます。

「これはメインのタイトルだから main-title にしよう」

「この部分は赤いボックスだから red-box にしよう」

といった具合に、内容や役割が伝わる名前をつけるのがベストです。

必ず英字から始める

名前は必ずアルファベット（英字）から始めなければなりません。

数字やハイフン（-）から始める名前は無効になります。

以下に、よくあるNGパターンとOKパターンを紹介します。

html

<!-- NG：数字から始まっている -->
<p id="1st-paragraph">テキスト</p>

<!-- OK：英字から始まっている -->
<p id="first-paragraph">テキスト</p>

html

<!-- NG：ハイフンから始まっている -->
<div class="-box">テキスト</div>

<!-- OK：英字から始まっている -->
<div class="red-box">テキスト</div>

大文字・小文字は区別される

Title と title は別物として扱われます。

名前のブレを防ぐため、基本的にはすべて小文字で統一するのがおすすめです。

スペースは使えない

名前の途中にスペースを入れることはできません。

複数の単語をつなげたいときは、ハイフン（-）かアンダースコア（_）を使います。

html

<!-- NG：スペースが入っている（classが2つと認識されてしまう） -->
<p class="main text">テキスト</p>

<!-- OK：ハイフンでつなぐ -->
<p class="main-text">テキスト</p>

どっちを使えばいいの？迷ったときの考え方

「結局、idとclassはどちらを使えばいいの？」と迷う方も多いと思います。

シンプルな判断基準としては、次のように考えるといいでしょう。

ページ内でその要素が1つしかない場合 → id、同じスタイルを複数の場所に使いたい場合 → class という使い分けが基本です。

実際の現場では、classを使うケースの方がずっと多いです。

idはページ内リンク（<a href="#section1"> のようなアンカーリンク）やJavaScriptでの操作に使われることが多く、スタイリング目的ではclassが主役になります。

最初はとにかく「繰り返し使うならclass、1か所だけならid」と覚えておけば、実用上は問題ありません。

まとめ

idとclassの違いを整理すると、こんなイメージです。

• id：ページ内で1つだけ使えるユニークな名前。CSSでは #名前 で指定する。
• class：複数の要素に同じ名前をつけられる。CSSでは .名前 で指定する。
• どちらも英字から始め、スペースは使えない、という共通ルールがある。

HTMLとCSSを書くうえで、idとclassは毎日のように使う基本中の基本です。

最初は「とりあえずclassを使ってみる」ところから始めて、徐々に使い分けを体で覚えていくのがおすすめです。