（最終更新月：2021年6月）
HTMLで出てくる”class”、”id”ってどうやって使い分けるの？
という初学者の方へ向けた記事、
HTMLのタグ属性 “class”と”id”の違い
について解説します
classとidってどんな時に使うの？
id、classは、CSSやJavaScriptで特定の要素に名前を付ける役割をしています
例えば、下記のように同一ページに同じ要素が並んでいて、
<p>ノーマルサイズのフォント</p> <p>20pxサイズのフォント</p> <p>ノーマルサイズのフォント</p>
特定の要素にCSSを反映させたい場合、他と区別する必要が出てきます
idを使って、
<p id="20pxFont">20pxサイズのフォント</p>
など記述することで、idによる特定要素の指定が可能になります
もちろん、idをclassに置き換えても同様の効果が得られます
次章ではidとclassをどのように使い分けるか、違いについて解説します
class
ズバリ、複数の要素に使われます
同一Webページ内で、複数の要素に同じ効果をもたらしたいときにはclassが使えます
javascriptでの要素指定を例にとると、
document.getElementsByClassName(クラス名)
となり、”Elements”と複数形になっているのがわかります
id
ズバリ、単一の要素に使われます
同一ページ内で同じid名は2度使えません
javascriptでの要素指定を例にとると、
document.getElementById(id名)
となり、”Element”と単数形になっています
まとめ
idとclassの特長、違いをまとめると下記の通り
- 特定の要素に名前を付ける役割をしている
- 複数の要素を特定する場合は、classを使う
- 単一の要素で事足りる場合は、idを使う
皆様のご意向に合わせてclassとidを使い分けてください
「もっとHTML/CSSの基本について学びたい！」という方はこちら！
最後までご覧頂きありがとうございました！！！