シェアする
CSS Syntax: Differences Between Class and ID Selectors - Japanese Only
どうもみなさまこんにちは。
では続きまして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文法の基礎などをどかっとやってしまってこんがらがってしまっていると思いますので次の記事ではそれらをちょいとまとめて再確認してしまいましょう。
ではー。
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
