HTMLやCSSを勉強していると必ず出てくるidとclass。今回はこの２つの違いや使い方含め、徹底的に解説していきたいと思います！
かもめidとclassについて理解するためには、HTMLとCSSについての知識がある程度必要となってきます。少しあやふやになっている方は、下の記事を読んでください！
id、classとは一体何？
そもそもidとclassが一体何のために存在しているのかをおさらいしてみましょう。これら２つは、特定の部分にのみCSSを適用する際に必要になるものです。
id/classを使わない場合
まずはidとclassを使わない書き方を見てみましょう。
<p>吾輩は猫である。</p>
<p>名前はまだ無い。</p>
<p>どこで生れたかとんと見当がつかぬ。</p>サンプルコードのHTMLでは、<p>で挟まれた文章が三行ありますね。
吾輩は猫である。
名前はまだ無い。
どこで生れたかとんと見当がつかぬ。
CSSで何も装飾していない状態ですので、画面には真っ黒な文字が表示されます。
かもめこのままでは味気ないので、CSSを適用してみましょう！
p {
color: red;
}CSSで<p>タグに対して文字色を赤にすると指定します。
| セレクタ | <p>の |
| プロパティ | 文字色を |
| 値 | 赤色に |
吾輩は猫である。
名前はまだ無い。
どこで生れたかとんと見当がつかぬ。
すると、画面上では、全ての<p>の文字色が赤色に変わります。
タグに対してCSSを指定すると、ページ全体のタグに適用されるからですね。
迷える子羊全部じゃなくて、一つ目のpタグだけ色を変えたいな〜
それでは、迷える子羊さんが言っているように「一つ目の<p>だけ文字を赤くする」場合はどうすればいいのでしょうか。
ここで登場するのがidとclassです！
id/classを使う場合
<p class="text_red">吾輩は猫である。</p>
<p>名前はまだ無い。</p>
<p>どこで生れたかとんと見当がつかぬ。</p>サンプルコードのHTMLのうち、１行目の<p>の中にclass="text_red"が増えました。
.text_red {
color: red;
}text_redというclassに対し、文字色を赤にするCSSを書きます。
| セレクタ | text_redの |
| プロパティ | 文字色を |
| 値 | 赤色に |
吾輩は猫である。
名前はまだ無い。
どこで生れたかとんと見当がつかぬ。
もうお分かりですね。今度は一つ目の<p>の文字色のみ赤色に変わりました！
それぞれ個別に名前をつけてあげるイメージです。全体ではなく、特定の要素のみに何かを適用したい場合にidとclassを使用します！
idとclassのまとめ
こちらはidとclassを使用していない状態のイメージ図です。
かもめが三羽いますが、同じかもめなので誰が誰なのか全く分かりませんよね。
続いて、こちらがidとclassを使用しているイメージ図です。
単純な話ではありますが、それぞれに名前をつけてあげると識別できるようになりますよね。
idとは？
それでは、ここからidについて解説していきます。
idの書き方（HTML）
<p id="○○">吾輩は猫である。</p><タグ名 id="id名">という書き方をします。ここに入るタグ名は、divやpなどです。
- 半角英数字（大文字OK）
- 記号は-（ハイフン）と_（アンダーバー）のみOK
- 先頭が数字・記号から始まるのはNG
というように、名前の付け方にもルールがあります。NGの名前でid名を書くと、エラーが出てCSSが反映されないので注意しましょう。
idの書き方（CSS）
CSSのセレクタでidを指定する際は
#（シャープ）+ id名
というようにセレクタに記述します。
同じidは１ページに１つだけ
classと大きく違う部分が、数の制限です。同じ名前のid名が１ページに存在してはいけません！
<!-- NG -->
<p id="cat">吾輩は猫である。</p>
<p id="cat">名前はまだ無い。</p>
<p id="cat">どこで生れたかとんと見当がつかぬ。</p>１ページに同じcatという名前のidが存在しているので、こちらはNGです。
classとは？
続いてclassについてです。idと似ている部分が数多くありますが、少しだけ違う部分がありますのでそのあたりも含めて解説いたします。
<p class="○○">吾輩は猫である。</p><タグ名 class="id名">という書き方をします。
また、名前に関してもルールも同様で
- 半角英数字（大文字OK）
- 記号は-（ハイフン）と_（アンダーバー）のみOK
- 先頭が数字・記号から始まるのはNG
となっております。
idの書き方（CSS)
CSSのセレクタでclassを指定する際は
.(ドット）+ class名
というようにセレクタに記述します。
classは１ページに複数あってもOK！
idとの大きな違いがこの部分です！
<!-- OK -->
<p class="cat">吾輩は猫である。</p>
<p class="cat">名前はまだ無い。</p>
<p class="cat">どこで生れたかとんと見当がつかぬ。</p>先ほどの復習ですが、１ページに同じid名が複数存在するのはNGでしたよね。ところが、classはその制限がありません！
- ボタン
- リンク
- 文字色
など、共通のデザインの要素には同じclassをつけることができます！
idとclassの違いについて
ここまでの解説で、idとclassの概要はお分かりいただけましたでしょうか。それでは、ここからは明確にどのような違いがあるのかを解説したいと思います。
idは複数NG、classは複数OK
何度も言っている通り、１ページ内にidは１つだけ、classは１つでも複数でもOKという点です。
かもめここまでに解説したので、詳細は省略しますね
CSSの優先順位
学習を始めたばかりの方ですとあまりピンとこないかもしれませんが、実はCSSには優先順位というものがあります。まずは例を見てみましょう！
<p class="blue">吾輩は猫である。</p>
<p class="blue">名前はまだ無い。</p>
<p class="blue" id="orange">どこで生れたかとんと見当がつかぬ。</p>例のHTMLには、３つの<p>タグが並んでいます。
そのうち３つめの<p>にのみ、classとidの両方が書かれていることを覚えておいてください。
.blue{
color : blue;
}
#orange{
color : orange;
}次にCSSです。
今回は分かりやすいようblueというclassは文字を青色に、orangeというidには文字をオレンジ色にするCSSを書いています。
かもめどうなるか予想してみよう！
吾輩は猫である。
名前はまだ無い。
どこで生れたかとんと見当がつかぬ。
webページの表示はこうなります。１行目と２行目は文字が青色になりましたが、３行目はオレンジ色になりました。
これがCSSの優先度、というものです。同じ要素に対して複数のCSSが指定されていた場合、どのスタイルが優先されるかが明確に決まっています。
今回の場合で言うと、３行目はclassよりもidのほうが優先度が高いのでcolor : orange;が優先されたというわけです。
両方が混在する場合など、スタイルの上書きが困難になります。予期せぬことが起きた場合、デザイン崩れの原因にもなり得ます。
また、idを多用していると作成時はよくても改修作業の際、困ることの方が多いので現場でHTML/CSSを書く際には必要な時以外はclassを使用します。
JavaScriptセレクタでの処理速度の違い
ここからの解説は少し先の話になりますので、知識として吸収しようとするのではなく、流し読み程度で頭の片隅にでも置いていただければと思います。
Webページに動きをつけるJavaScriptという言語がありますが、CSS同様、セレクタで「どこに」適用するのかを指定する必要があります。
その際、idを指定すると処理速度が圧倒的に速くなります。
結局、どちらを使えばいいのか
HTMLとCSSを書く際は、基本的にはclassを使用しましょう！
迷える子羊じゃあidは使わないの？
というお声が聞こえてきそうですね。正直に申しますと、勉強中の方や駆け出しの方は気にしなくて大丈夫です。先ほどもお伝えした通り、実務でもHTML/CSSではidを使うことはありません。「とりあえずclass！」と覚えていただければと思います。
id必須の場合を除き、classを使用するようにしましょう！
idとclassの違い まとめ
idとclassは、識別するために名前をつけているid……１ページに複数NGclass……１ページに1つでも複数でもOK- 同じ要素に
idとclassを書くことが可能 - 優先度は
id > class - あれこれ悩まず、とりあえず
classを使ってください
