class属性とid属性

目次

1. class, idとは何か
2. 違いと使い分け
3. 参考

1. class, idとは

どちらもHTMLにおいて用いられる属性である。
CSSのセレクタとして、h1やp要素を用いることもできるが、同一要素の中でもさらに特定のものを指定したいときにこれらの属性を用いるのが一般的である。

2. 違いと使い分け

ひとつのWebページ内において、class属性は複数回用いることが可能な一方、id属性は重複して複数回用いることができないという違いがある。
一見、class属性を用いれば問題が無いようにも思えるが、使い分けをすることにより大規模なソースに対しても何がどこに適用されるのかを読み取りやすくなるというメリットがある。

使い分けの基準は簡単で、その装飾を複数箇所にあてたいのならclass、単一箇所でよいのならidというものである。(ほかの考え方も勿論あり、各人さまざまであることに注意。)
例として、classを使えるようなものとしては段落ごとの章の名前、本文など。id属性を使えるようなものとしてはヘッダー、フッターなどがある。

参考

https://allabout.co.jp/gm/gc/23897/2/
https://techacademy.jp/magazine/28544#ta-toc-4