そんな悩みにお答えします。
コーディング学習を始めたときに誰もが一度は思う素朴な疑問、それが「classとidってどう違うの？」ってことです。
どちらを使ってもCSSにスタイルは当てられる。
だったらどう使い分けるものなのか？
そこはよくわからないまま、とりあえずclassを使ってコーディングを進めたという方も少なくないと思います。
今回はidっていつ使うべきものなのかという点を解説します。
目次
classとid
まずはおさらいとして、それぞれの書き方を見ておきましょう。
classの書き方
<div class="hoge">ほにゃらら</div>.hoge {
color: #00CC99;
}CSSでは「.」を前につけます。
idの書き方
<div id="hoge">ほにゃらら</div>#hoge {
color: #00CC99;
}CSSでは「#」を前につけます。
スタイルを指定するのに大して違いのない両者に見えますが、一点大きな違いがあります。
- class : 1ページ内で同じ名前を何度も使用できる
- id : 1ページ内で同じ名前を何度も使用できない（1回限り）
このそれぞれの特性を別の文章にすれば
- classは複数のHTML要素を分類するために使うもの
- idはHTML要素に関連付けする何かとid指定した要素を1対1の関係で使うもの
と言えます。
ではidの「HTML要素に関連付けする何かとid指定した要素を1対1の関係で使う」ケースとはどういったものがあるのかを次の項で見ていきましょう。
idの使いどころ
idは1ページ内にひとつしか存在しないので、特定の要素や場所を指定する目印として使うのに適しています。
すぐに思い浮かぶケースとしては次の３つがあります。
- ページ内リンク
- JavaScript・jQueryを指定するときの目印
- label要素とinput要素との紐づけ
ページ内リンク
<li><a href="#about">ABOUT</a></li><section id="about" class="about">ABOUT</section>こう書くことでABOUTをクリックすると「id=”about”」の場所までジャンプします。
この仕組みをページ内リンクといいます。
この際の移動をなめらかに動作させる仕組みがスムーススクロールです。
詳しくはこちらの記事をどうぞ。
【完全解説】ページ内スムーススクロールをjQueryで実装する方法
JavaScript・jQueryを指定するときの目印
<header id="js-header" class="header">たとえば
【jQuery】スクロールすると上から出てくるヘッダーの実装方法
のような場合、ヘッダーの位置によって クラスのつけ外しを行うのでヘッダーが対象物となります。
そのための目印として「id=”js-header”」とつけています。
1ページ内で同じ名前を何度も使用できないからこそ、複数の要素が取得されることはなくJavaScript・jQueryは正常に動作します。
ひとつしかない特定の要素をJavaScript・jQueryで指定したい場合は目印としてidを使うのがベストです。
label要素とinput要素との紐づけ
<label for="hoge">お名前：</label>
<input id="hoge" type="text" name="your_name">labelには「for=”△△”」、inputには「id=”△△”」と同じ名前を書きます。
こうすることでlabel要素とinput要素の紐づけができます。
詳しくはこちらの記事をどうぞ。
【フォーム作成に必須】】inputとlabelを紐づける２つの方法
CSSの優先度
最後にもう一点idとclassについて押さえておくべきところを。
それは「idはclassよりも優先されてCSSが効く」ということです。
この例は以下を見てください。
<div id="hoge" class="hoge">ほにゃらら</div>#hoge {
color: orange; /* オレンジ */
}
.hoge {
color: green; /* グリーン */
}上記の場合、実際に出力し表示される色はオレンジです。
本来はあとに書かれているclass指定で上書きされてグリーンになるはずですが、そうはなりません。
その理由はidがclassよりも優先度が高いためです。
この点は注意しておきましょう。
まとめ
最終的な結論としては以下になります。
- CSSでスタイルを当てる際にはclassを使い、idは使わない
- idは目印として使う
こうすることで管理がしやすく、メンテナンスも楽になります。
初心者の頃はidの使いどころに悩みますが、JavaScript・jQueryを使いだすと徐々に理解できてくると思います。
classとidをしっかり使い分けたメンテナンス性の高いコーディングを目指しましょう。
投稿者 トシ
コメントを残す