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文法の基礎などをどかっとやってしまってこんがらがってしまっていると思いますので次の記事ではそれらをちょいとまとめて再確認してしまいましょう。

ではー。

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

著者が愛する小型哺乳類

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

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

トップページへ

前の記事へ

次の記事へ

Tweet

シェア