CSSのclassとidは何が違う？二枚のカードで見た目を比べよう

HTMLにあるclass="card"とid="featured"。どちらも名前を付けているように見えるけれど、使いどころが違うよ。

この記事では、複数の要素へ同じ見た目を付けるclassと、ページ内で一つの要素を識別するidを区別することを目標にする。必要なのはブラウザだけ。コード編集の準備がなくても、ページ内の作例で違いを試せるよ。

classは、同じ仲間へ付けられる名前

classは、複数のHTML要素に共通の名前を付けたいときに使える。同じclassを、いくつもの要素へ付けてよいよ。

<p class="card">朝の案内</p>
<p class="card">昼の案内</p>

CSSでclassを選ぶときは、名前の前にドット.を付ける。次の指定なら、上の二つの要素に同じ背景色が付く。

.card {
  background-color: #eeebff;
}

HTMLのclass属性にはドットを書かず、CSSで選ぶときに付ける点を分けて覚えよう。

idは、文書の中で重複させない識別子

idは、そのHTML文書の中で一意になるように付ける名前。同じページの二つの要素に、同じidを付けないようにする。

<p class="card" id="featured">朝の案内</p>
<p class="card">昼の案内</p>

この例では、二つともcardというclassを持ち、そのうち朝の案内だけがfeaturedというidを持つ。classとidを同じ要素に付けてもよいよ。

CSSでidを選ぶときは、名前の前に#を付ける。

#featured {
  border: 3px solid #4149e8;
}

これで、朝の案内だけに枠線を付けられる。CSSは画面の見た目を指定する仕組みで、.cardや#featuredのように対象を選ぶ部分を「セレクター」と呼ぶよ。

二つのスイッチで、実際に比べよう

記事の下にある「動かしてみよう」では、二枚の案内を並べている。

1. 最初はclassによる色とidによる枠線が、どちらも有効になっている。
2. 「classの背景色」をオフにすると、二枚とも背景が白くなる。
3. 「idの枠線」をオフにすると、朝の案内だけにあった紫色の枠が消える。
4. スイッチを戻すと、元の見た目へ戻る。

classの指定が二枚へまとめて作用し、idの指定は一枚へ作用することを比べてみよう。操作しているのは、この作例の中の表示だけだよ。

編集部でも、classのスイッチで二枚の背景色が切り替わること、idのスイッチで朝の案内だけの枠線が変わることをブラウザで確認した。記事の作例全体を初期状態へ戻したい場合は、「最初から試す」を押してね。

一つの要素に、複数のclassも付けられる

<p class="card important">朝の案内</p>

このように空白で区切ると、cardとimportantという二つのclassを持つ。card-importantなら、一つの別の名前なので区別しよう。

一方、idは一つの要素に一つの値として付ける。「一つのid欄に空白区切りで複数のidを書こう」とはしないでね。

どちらを使えばよい？

見た目を共通化したいなら、まずclassを使うと、別の場所にも同じスタイルを再利用しやすい。idは、ページ内リンクの移動先や、特定の要素を識別するためにも使われる。

ただし「classはCSSだけ」「idはJavaScriptだけ」という区分ではないよ。どちらもCSSの対象にでき、JavaScriptから要素を探すときにも使われる。用途と、文書内での一意性を分けて考えよう。

同じ性質へ複数のCSSルールが当たると、どれが適用されるかには詳細度などのルールが関係する。今回の作例は背景色と枠線を別々に変え、同じ性質の競合は扱っていない。「idのほうが強そうだから、何でもidで直す」とはせず、まず対象を整理したいね。

思ったとおりに変わらないとき

• HTMLのclass属性へ、CSS用のドットを付けていないか。
• CSSでclassを選ぶのに#、idを選ぶのに.を使っていないか。
• 名前の大文字・小文字や綴りが一致しているか。
• 同じidを複数の要素へ付けていないか。
• 別のCSSルールが同じ性質を指定していないか。

最初はcardやfeaturedのような単純な名前で試すと読みやすいよ。HTMLで使える名前でも、CSSで選ぶときに特別な書き方が必要になる場合があるので、複雑な記号や数字始まりの名前は、規則を確認してから使おう。

HTML・CSS・JavaScript全体の役割は小さなページで比べる記事、文字のサイズ指定はrem・em・pxの違いへ進んでみてね。