【初心者向け】CSSのidとclassの違いとは？

2021/4/5

CSSに出てくるidとclassの違いとはなんでしょうか。そしてどう使い分ければいいのでしょうか。

そもそもidとclassは両方とも、事前に定義してある外壁や装飾のようなものです。

HTMLという骨組みにclassやidを適用することで立派な家や部屋になるイメージです。

同じような役割を持つ両者ですが、使い方に若干の違いがあります。

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

idのほうがclassより優先される
idはHTML内で1回しか使えない
classはHTML内で複数回使える

といったところです。idを必ず使わなければいけないわけでもなく、すべてclassで記述しても問題ありません。

反対にすべてidで記述しても問題はありませんが、HTMLで1回しか使えないため、例えば二つ同じ装飾があっても別idにする必要があり、実用的ではないかもしれません。

idを使うメリットとは

HTMLに1回しか使えないことを応用して、idをアンカータグとして使うことができます。

アンカータグとはHTMLの途中に遷移するタグですね。

例えばこのページにもidを使ってみました。
https://amsstudio.jp/news/2021/04/css-class-id.html#id

にアクセスすると、idを使うメリットとは、に飛びますよね。こういった使い方も可能です。

また、技術的な話になりますが、idはHTMLに一つしかないのでJavaScriptを使ってHTMLを動的に変更する際にも利用したりもします。

classやidの使い方は人それぞれですが、基本classを使い、目印としてidを使うケースが多いようですね。