Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

  1. トップページ
  2. CSS入門編 - CSS文法の基礎 classセレクタとidセレクタの違い

CSS文法の基礎 classセレクタとidセレクタの違い

どうもみなさまこんにちは。

では続きましてid属性とclass属性の違いについてやっていきましょう。

HTMLをすでに勉強されている方はご存知かと思いますが、id属性に同じ値をもった要素はひとつのHTMLファイル内で重複して存在してはいけないという文法上のルールがあります。対してclass属性に同じ値を持った要素はひとつのHTMLファイル内でいくらでも重複して存在することができます。

噛み砕いていうと同じHTMLファイル内で同じclass名を持った要素はいくらでも存在することができますが、同じid名を持った要素は複数存在してはダメってことです

<div id="test">同じtestってid名がついてるからこれはダメだよ</div>
<div id="test">同じtestってid名がついてるからこれはダメだよ</div>

<div class="test">同じtestだけどこっちはクラス名だからOKだよ</div>
<div class="test">同じtestだけどこっちはクラス名だからOKだよ</div>

ちなみにid名とclass名は全く違うものなのでまたがって同じ名前を使用しても大丈夫です。

/* これは大丈夫です */
p#test {
    color: red;
}
p.test {
    color: blue;
}

では「どういう時にid名を使ってどういう時にクラス名を使えばいいんだろう?」となりますよね。

「自由に名前が付けられるんだしid名は重複して使えないんだったら全部クラス名で構成しちゃった方が便利なんじゃないかな。」と考えた方、大正解です。

基本的にHTMLとCSSのみで構成されたウェブサイトであるならばid名を使うメリットはほぼありません。全てclass属性で構成してしまってOKです。「1つしか使わない要素はid名で〜」というように無理してid名を使用してウェブサイトを構築する必要はありません。

「じゃあid属性はどういう時に使うんだろう」となりますが、id属性は主にJavaScriptで使用する目的で組み込まれる事が多いです。

JavaScriptの創世記から存在している『document.getElementById();』というメソッドがあるのですが、これはid名のついた要素を特定、取得する関数です。JavaScriptでは様々な要素の特定方法がありますが、爆速で要素を取得できるのがこのメソッドです。

ですのでJavaScriptで処理を加えたい要素のみid属性を記述して他は全部クラス名で構成しちゃってOKです。処理速度という観点からみてもid名とclass名で急激に速度が変わるものでもありませんのでご安心ください。

「同じid名をもった要素が複数存在した場合ってCSSで指定したスタイルはどんな風に反映されるんだろう」と疑問に思った方いらっしゃるかと思います。

ブラウザによって多少の差がありますが、実はclass名と同じようにそのid名がついている全ての要素にCSSスタイルが適用されたりします。

しかし文法的には間違いなので複数の要素を特定して処理をさせたい場合はid名ではなくclass名を使用するようにしてください。

JavaScriptでid名から要素の特定処理を行った場合では最初のid名が付いた要素を見つけた瞬間に要素の特定処理が終了となり2つ目以降の要素は無視されます。

idセレクタとクラスセレクタの使い方や文法、そしてその違いについては以上となります。ちょっと難しいかもしれませんがとても大切な基礎となりますので頑張って覚えてしまいましょう。

今まで色々なCSS文法の基礎などをどかっとやってしまってこんがらがってしまっていると思いますので次の記事ではそれらをちょいとまとめて再確認してしまいましょう。

ではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto

ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。