HTMLは、インターネットに関わる仕事をしていれば、どのようなシステム構築であっても必ず登場します。HTMLを学習していくと、必ず目にするのが「div」というワードであり、divには「class」と「id」という2種類の属性が存在しています。

とはいえ、HTMLについての学習を始めたばかりだと、そもそもdivタグとはなんなのか、属性とはどのようなもので、なにができるのかという疑問を持つ方も多いのではないでしょうか。
これらの点は、HTMLにおいて重要な要素になるため、それぞれの違いについて理解することは非常に大切です。

そこで本記事では、HTMLでは必須のdivや、divの2種類の属性である「class」と「id」の違いについて解説していきます。ぜひ、最後までご覧になってくださいね。

divとは？

クラス定義
divは、ブロック要素であり、HTMLに記述したコードをグループ化できるというものです。

複数のコードに色を指定したい場合や、CSS等で別々に色指定をおこなうと、複数回にわたって作業することになりますが「div」を活用することによってコードをグループ化し、一度に色指定することが可能になります。

HTML classとは？idとの違いってなに？

classとidの違い
HTMLには、divという、グループ化することに特化した要素があり、そのdivには「class」と「id」という2種類の属性が存在しています。
この章では、これら属性の違いについて詳しく解説していきます。

classとは？

classとは、divタグにつける名前です。divタグは、コードをグループ化できるメリットがありますが、グループ化したコードが複数あると、どのグループコードに、何の作業をおこなえばいいのかわかりにくくなります。そのような場合に、divタグによってまとめたグループごとで区別がつくように「class」をつけます。そうすることで、コードを把握しやすくなり、作業範囲も明確になるでしょう。

idとの違い

「class」と「id」は、それぞれ、divタグ属性の一種です。
「class」は主に、CSSやjavascriptに適用されるケースが多いですが「id」も「class」と同じようにdivタグに名前をつけることができます。

しかし「class」と「id」には大きな違いがあります。
その違いは明白で「class」は同じ名前をコードの中で何度も使えるが「id」は同じ名前をコードの中で一度しか使えないという点です。
実際にコードを用いて、以下で詳しく説明します。

See the Pen
例1 by CREATRIVE VILLAGE (@onsight_llc)
on CodePen.

このように「class」であれば「test」という同じ名前を何度使用しても問題ありません。
一方「id」の場合は、

See the Pen
例2 by CREATRIVE VILLAGE (@onsight_llc)
on CodePen.

上記のように、同じidを同プログラミング内で複数回使用することはできません。
（CSS等の使用で問題が起き得る）
つまり以下のように、

See the Pen
例3 by CREATRIVE VILLAGE (@onsight_llc)
on CodePen.

例えば上記のように「test1」「test2」と、異なったid名を設定することが必要になります。

これらのことから

  • class：複数コードに同じ処理をしたい
  • id：特定のコードにのみ処理をしたい

という使い分けがおすすめです。

HTML classでできること

CSSの設定
「class」は主に、CSSの設定を適用するために使用されます。
また、javascriptでも活用でき、javascriptにおける「class」はCSSのような装飾だけでなく、例えば下記のような処理も実行できます。

・データの取得・表示
・文字の表示・非表示
・関数の実行

ほかにも、サーバーでdivタグの名称を取得して、動的処理を実行するなどさまざまな活用方法があり、表現の幅が大きく広がります。

HTML classの使い方と具体例

Web開発中の場面
この章では、HTML classの使い方と具体例について解説していきます。

1つの「class」の設定

See the Pen
1つのクラス by CREATRIVE VILLAGE (@onsight_llc)
on CodePen.

上記のHTMLで「creative」というクラスを作成し、CSSでクラス「creative」に対して、装飾（ここではカラー→レッド）を適用しています。

また、クラスはjavascriptに対しても有効であるのは先述の通りです。

See the Pen
Untitled by CREATRIVE VILLAGE (@onsight_llc)
on CodePen.

上記の例では「クリエイティブ？」の下のボタン（HTMLで定義）をクリックすると「ヴィレッジ!！」に文字が変更される処理を、クラス「creative2」に対して、おこなっています。

複数の「class」の設定

See the Pen
複数のクラス by CREATRIVE VILLAGE (@onsight_llc)
on CodePen.

「クリエイティブ」及び「ヴィレッジ」共通のクラス「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をより使いこなせるようになりましょう。