【HTML(初学者向け)】タグ属性 クラス、IDの違い

HTML

(最終更新月: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の基本について学びたい!」という方はこちら!

最後までご覧頂きありがとうございました!!!

タイトルとURLをコピーしました