HTMLで必須の知識である、class属性、id属性。この二つはほとんど同じような使い方をするが故に、どう使い分ければいいのか悩んだことはありませんか。
今回はそれぞれの違いや特徴を説明すると共にそれぞれの使い所についても詳しく解説していきます。
CSSを勉強し始めたばかりの方や、CSSについてもっと詳しく知りたい方はCSSの使い方、書き方を初心者でも分かりやすく簡単解説で詳しく解説していますので、参考にしてみてください。
それではここからclass属性、id属性について解説していきます。
Contents
前提：class属性、id属性とは指定した要素に名前を付ける
大前提として、class属性、id属性の共通する使い方として、指定した要素にclass名、id名を指定する役割があります。
<p class="class1">クラス1</p>
<p id="id1">ID1</p>class属性、id属性の記述の仕方は基本的には同じです。
上記のようにタグ名を記述した後、半角スペースを空けて、『class』、もしくは『id』と記述します。その後、『=”〇〇”』という形でclass名、id名を記述することで、そのタグにclass属性、id属性を指定することが出来ます。
これらはCSSなどでデザインを指定するときに、どの要素に指定するデザインなのかが分かるという利点があります。
例えば、class属性、id属性を指定していない場合、数あるpタグの中から特定のpタグにのみ別のデザインを指定することは出来ません。
しかし、class属性、id属性を指定すると、特定のタグにそのタグに適したデザインをそれぞれ指定することが出来ます。
この主となる役割が同じであることが原因で、class属性、id属性はその使い方に区別を付けることが難しくなってしまっています。
これからは二つの違いとその特徴について解説していきます。
特徴：class属性は複数指定可能、id属性は単独指定のみ可能
class属性、id属性の一番の違いとして、class属性は同Webページ内に同じclass名を複数使用することが可能であるのに対し、id属性は同Webページ内に同じid名を指定することは出来ません。
前述した要素に名前を付けるという大きな役割は同一のclass属性とid属性ですが、それぞれの指定できる数によって、使い方に明確な差が生まれていきます。その影響により、使い分けが必要になってくるのです。
また、CSSの記述の仕方も少し変わっていきます。
.class1 {
color: red;
}
#id1 {
color: blue;
}class属性を指定したタグをセレクタにする時、class名の前に『.』を付ける必要があります。これを付けることにより、これから使用するセレクタがclass属性であることが分かります。
一方、id属性を指定したタグをセレクタにする時、id名の前に『#』を付ける必要があります。これを付けることにより、これから使用するセレクタがid属性であることが分かります。
このようにclass属性とid属性では大きな役割としてはタグに名前を付けると、共通する部分がありますが、その記述方法については異なる部分が存在します。
ここからはそれぞれの使い方について詳しく解説していきます。
使い方1：id属性は同一Webページ内に一つだけの名前を指定したい場合に使用する
id属性は同一Webページ内に一つだけしか指定することができません。
そのため、この名前は他では使いたくないといった場合に有効な手段として働かせることができます。
id属性は『header』や『sidebar』などといった、大きな領域に指定されることが多く、Webページ内の小さな一つの要素にid属性を指定することは少ないです。
続いてはclass属性の使い方について解説していきます。
使い方2：class属性は複数の要素に同じCSSのプロパティ、値を指定したいものがある場合に使用する
class属性の一番の特徴として、同一のclass名の要素を複数指定することが可能なことを前述しました。
この特徴を活かす方法として、同じCSSのプロパティ、値を指定したい複数の要素がある場合、それらの要素を同一のclass名に指定することで、同じデザインを反映させることが出来ます。
class属性の具体例としてはメニューバーにある一つひとつのメニューが挙げられます。基本的にメニューはそれぞれの独立した別々の要素に同じデザインが反映されています。
これを成立させるためにはメニューのそれぞれの要素に同一のclass名を指定しなければいけません。
id属性は同一のid名を複数指定することは出来ません。
そのため、このような使い方をしたい場合はclass名を使うしかないということになります。
しかし、ここで複雑になっていくのが一回しか使用していないclass名は全てid名にしなければいけないのかという問題が発生するということです。
そのことについて私の見解をこれから解説していきます。
まとめ：基本的にはclass属性、大きな領域に対してはid属性を使用する
class属性、id属性の使い分けに関して、明確な基準はありません。
つまり、一回しか使用していないclass名が存在することは間違いではないのです。
そのため、今回は一つの目安としてclass属性、id属性を使い分ける際の指標を作成しました。
・基本的にはclass属性を使用する
・大きな領域に対してはid属性を使用する
基本的に全てのタグにはclass属性を使用することでどんなタグにも名前を付けることが可能となります。
そして、大きな領域に対してはid名を指定することで、それぞれの領域の役割を明確にすることが出来ます。
『大きな領域』という言葉の定義があいまいですが、主に『header』、『main』、『sidebar』、『footer』の4つを指しています。
これ以上の区分をしても問題はありませんが、前述したようにid名は同一Webページ内に複数指定することはできません。そのルールを遵守すれば問題なくWebページを制作することが可能となります。
複数人で一つのWebページを制作する場合はそのチーム毎のルールに従い、class属性、id属性を使用しなければいけませんが、一人で制作する場合は上記を目安に使い分けてみてください。
今回はclass属性、id属性の違いとそれぞれの使い方、使い分けについて解説していきました。
今回、紹介させていただいた指標は数ある中の一つに過ぎません。他の人の意見や新しく加わったチームのルールなどを自分の中に取り込んで、より良い使い分けを探していってみてください。
