CSSのclassとidの違いとは？今のWeb制作での使い分け方をわかりやすく解説

今のWeb制作では、CSSで見た目を整えるときはclassを使い、idは別の目的に使うのが基本になっています。

昔はidでレイアウトや装飾を組む書き方もよく見られましたが、現在の実務ではclass中心で設計するほうが扱いやすく、保守もしやすいため、こちらが主流です。

この記事では、CSSにおけるclassとidの違い、今の時代の使い分け方、そして実務でclass中心になる理由をわかりやすく整理します。

これからHTMLとCSSを書く人や、古い書き方との違いが気になる人の参考になればうれしいです。

CSSはclassとidをどう使い分けるのか

結論からいうと、今の実務では次のように使い分けるのが一般的です。

つまり、CSSの主役はclassです。idは補助的な役割で使うことが多く、スタイル指定の中心にはあまり使われません。

classが主流になっているのは、見た目を作るうえで都合がいいからです。

classには、主に次のようなメリットがあります。

たとえばボタンの見た目を作るとき、classであれば共通の部品として何度でも再利用できます。さらに、色違いや大きさ違いもclassを追加するだけで管理しやすくなります。

<a href="#" class="button button--primary">お問い合わせ</a>
<a href="#" class="button button--secondary">詳しく見る</a>

このようにclassは、部品化や再利用と相性がよく、今のWeb制作の考え方に合っています。

idは1ページ内で基本的に1回しか使えないため、再利用には向いていません。さらに、CSSではidの指定が強く効くため、あとから調整しようとすると扱いにくくなりやすいです。

たとえば、最初にidでスタイルを書くとします。

#header {
  background: #fff;
}

このあと別ページや別パーツでデザイン調整をしたくなると、より強い指定を書かないと上書きしにくくなることがあります。これが積み重なると、CSS全体が重く、読みづらく、直しにくくなります。

実務では、この「あとで直しにくい」というのがかなり大きな問題です。そのため、最初からclassでそろえておく設計が好まれます。

idが不要というわけではありません。今でも、使うべき場面はきちんとあります。

代表的なのは次のような用途です。

たとえば、ページ内リンクではidがよく使われます。

<section id="access">
  <h2>アクセス</h2>
  <p>医院までの行き方を案内します。</p>
</section>

<a href="#access">アクセスを見る</a>

このように、idは固有の目印として使うのが向いています。見た目のためではなく、役割のために使うイメージです。

現在のサイト制作では、ヘッダー、ナビ、ボタン、カード、見出し、余白調整など、ほとんどの見た目をclassだけで組めます。

たとえば、昔なら次のようにidで書いていた部分も、今はclassで表現することが多いです。

<header class="header"></header>
<main class="main"></main>
<footer class="footer"></footer>

この形にしておくと、別ページや別案件に流用しやすくなります。実務では、1回きりのページよりも、あとで修正したり増やしたりする場面のほうが多いため、柔軟に使えるclassのほうが便利です。

以前はJavaScriptで要素を取るためにidを付けることもよくありましたが、今はclassやdata属性で分ける考え方も広がっています。

たとえば、見た目用のclassと、動作用の目印を分けると管理しやすくなります。

<button class="menu-button" data-menu-toggle="true">メニュー</button>

こうしておくと、CSSとJavaScriptの役割が混ざりにくくなります。見た目はclass、動作のフックはdata属性という分け方は、実務でもかなり使いやすい方法です。

HTMLとCSSを書いていて、classとidのどちらを使うべきか迷ったら、まずはこう考えるとわかりやすいです。

ほとんどの場合、これで判断できます。特にCSSを書くときは、まずclassで考える癖をつけておくと失敗しにくいです。

今の時代のCSS設計では、見た目の指定をclassで行うのが基本です。idはページ内リンクや固有識別のために使い、CSSの主役にはしないほうが管理しやすくなります。

整理すると、次の考え方が実務向きです。

これからサイト制作を進めるなら、classを土台にして組んでいくほうが、あとから修正しやすく、他のページにも展開しやすいです。今の制作現場に合わせるなら、class中心の設計で考えておくとまず間違いありません。

関連記事

CSSはidのほうが速いは本当？classより処理が速いと言われた昔の話を解説