HTMLは、インターネットに関わる仕事をしていれば、Webサイト制作はもちろんシステム構築であっても必ず登場する言語です。
HTMLを学習されている方はよく目にするかもしれませんが、タグが持つ要素として「class」と「id」という2種類の属性が存在しています。
とはいえ、HTMLについての学習を始めたばかりだと、この属性を使ってなにができるのかという疑問を持つ方も多いのではないでしょうか。
「class」と「id」はHTMLにおいて重要な要素になるため、それぞれの違いについて理解することは非常に大切です。
そこで本記事では「class」と「id」の違いについて解説していきます。ぜひ、最後までご覧になってください。
classとは？どんな役割があるのか
classは、HTML要素に付与する共通の識別名です。divタグをはじめとするHTML要素にclassを設定することで、複数の要素をグループ化し、CSSやJavaScriptでまとめて適用できるようになります。
例えば、Webページ内の複数のボタンに同じデザインを適用したい場合、各ボタンに同じclass名をつけることで、一括でデザインを変更できます。これにより、コードの可読性が向上し、メンテナンスも容易になります。
このように、classを活用すれば、共通のスタイルや動作を複数の要素に適用できるのが大きなメリットです。
idとの違い
「class」は主に、CSSやjavascriptに適用されるケースが多いですが「id」も「class」と同じようにdivタグに名前をつけることができます。
しかし「class」と「id」には大きな違いがあります。
その違いは明白で「class」は同じ名前をコードの中で何度も使えるが「id」は同じ名前をコードの中で一度しか使えないという点です。
実際にコードを用いて、以下で詳しく説明します。
このように「class」であれば「test」という同じ名前を何度使用しても問題ありません。
一方「id」の場合は、
上記のように、同じidを同プログラミング内で複数回使用することはできません。
（CSS等の使用で問題が起き得る）
つまり以下のように、
例えば上記のように「test1」「test2」と、異なったid名を設定することが必要になります。
これらのことから
- class：複数コードに同じ処理をしたい
- id：特定のコードにのみ処理をしたい
という使い分けがおすすめです。
classでできること
「class」は主に、CSSの設定を適用するために使用されます。
また、javascriptでも活用でき、javascriptにおける「class」はCSSのような装飾だけでなく、例えば下記のような処理も実行できます。
- データの取得・表示
- 文字の表示・非表示
- 関数の実行
ほかにも、サーバーでdivタグの名称を取得して、動的処理を実行するなどさまざまな活用方法があり、表現の幅が大きく広がります。
classの使い方と具体例
この章では、HTML classの使い方と具体例について解説していきます。
1つの「class」の設定
上記のHTMLで「creative」というクラスを作成し、CSSでクラス「creative」に対して、装飾（ここではカラー→レッド）を適用しています。
また、クラスはjavascriptに対しても有効であるのは先述の通りです。
上記の例では「クリエイティブ？」の下のボタン（HTMLで定義）をクリックすると「ヴィレッジ!！」に文字が変更される処理を、クラス「creative2」に対して、おこなっています。
複数の「class」の設定
「クリエイティブ」及び「ヴィレッジ」共通のクラス「box」に対しては、共通の装飾を、個別で設定したい、色やアンダーラインの有無、文字の太さに関しては、それぞれ「blue」「yellow」のクラスで定義し、それぞれにCSSで、指示しました。
つまり、上記のように、複数の「class」を空欄で同時に設定することで、例えば「クリエイティブ」「ヴィレッジ」といった別々の文章に対しても、共通・個別の装飾を効率良く施すことが可能です。
「class」の意味を理解してHTMLをより深くマスターしよう
【classの仕組みまとめ】
- 「class」や「id」は、divタグの属性の一種
- classとは、divタグにつける名前
- divタグは、HTMLに記述したコードをグループ化できる
- 「class」は同じ名前をコードのなかで何度も使えるが「id」は同じ名前をコードのなかで1度しか使えない
HTMLとCSSは非常に密接に関わっています。そのHTMLのなかでも「class」や「id」といった要素は欠かせないものです。しかし、プログラミング初心者の方だと「class」や「id」などの属性について深く理解できていないケースも多いです。
理解しきれないまま作業をおこなうと、トラブルの発生が多くなり、作業に支障が出る恐れがあります。そのため「class」や「id」の違いについてもしっかりと把握し、わかりやすいコードを記述できるように2種類の属性を上手く使いわける必要があるでしょう。
特に「class」や「id」は記述ルールも異なるため、曖昧にせず、明確に理解しておくことが重要です。
本記事を参考にぜひ、classの意味や仕組みを理解し、HTMLをより使いこなせるようになりましょう。
