IDとClassの使い分け
スタイルをあてるのにIDでもClassでもどちらでもできるけど、どちらを使えば良いの？
素朴な疑問ですが、自分は学習し始めの頃に少し悩みました。考え方はいくつかあると思いますが、自分なりに整理してみましたので、参考にしていただけるとありがたいです。
とりあえず、結論を先に書いておきます。
結論：スタイルを当てる場合はIDは使用せず、Class一択でOK。
CSSの記述方法
IDとClassに対してCSSでスタイルを当てる場合、以下のような記述となります。
- IDの場合 ：#id_value { スタイルプロパティ }
- Classの場合： .class_value{ スタイルプロパティ }
つまりIDは「#」、Classは「.」を名前の前につければ、どちらでもスタイルを指定することが可能です。
CSS記述の考え方
スタイルをあてるためにCSSを記述していくのですが、「保守しやすい」コードを記述するという考え方があります。
まず以下のコードを御覧ください。
<div class="sample1 center"> sample1 </div>.sample1{ width:500px; }
.center{ margin-right:auto;
margin-left:auto; }ここではdiv「sample1」としていますが、これはcardなど何かのブロックをイメージして頂ければと思います。
ポイントは「center」というクラスを追加して、そちらで左右中央寄せの指定をしているところとなります。もし中央寄せでなく左寄せに変更したいとなった時、CSSを変更するのではなくHTMLでクラス「center」を削除すれば簡単に修正できます。
クラスを分けてスタイルをあてることで保守しやすいコードにするという考え方です。
もう一つこちらのコードを御覧ください。
<div class="sample2 yellow"> sample2 </div>.sample2{ width: 500px;
background-color : blue; }
.yellow{ background-color : yellow; }先程と同じようにクラスが２つありますが、こちらはスタイルを上書きしています。sample2のdivに対してbackground-colorだけ変更するといった使い方になります。
実際に使用する場面としましては、ボタンを作成したときに一つだけ色を変更したいというときに、そのボタンに対してクラスを割り当てて上書きするといった感じになります。
まとめるとCSSは下記２つの特徴があります。
- クラスを追加して記述を追加できる
- クラスを追加して記述を上書きできる
一言で言ってしまうと「カスケーディング（数珠つなぎ）できる」ということです。
この特徴をうまく利用して「保守しやすい」コードを目指していくという考え方となります。
IDについて
ここでスタイルをあてるのに「ClassではなくIDを使うとどうなるか？」を少し考えてみます。
IDの特徴、制約は下記のとおりです。
- 名前が重複できない
- １つのタグに複数指定ができない
- 詳細度が高い
一つ一つ解説していきます。
１．名前が重複できない
これはサイトに複数設置されているボタンを考えて頂けると分かりやすいと思います。コードのイメージを示しますので御覧ください。
まずはクラスを使用した場合です。クラス名は使い回せるのでCSSの記述は一つで済みます。
<a class="btn" href="#">資料請求</a>
<a class="btn" href="#">お問い合わせ</a>.btn {
display: inline-block;
width: 200px;
padding: 10px 10px;
background-color: blue;
color: white;
text-align: center;
text-decoration: none;
}次にIDを使用した場合です。IDの名前はタグに対して固有となりますので下記のようなコードになってしまいます。
<a id="btn1" href="#">資料請求</a>
<a id="btn2" href="#">お問い合わせ</a>#btn1 {
display: inline-block;
width: 200px;
padding: 10px 10px;
background-color: blue;
color: white;
text-align: center;
text-decoration: none;
}
#btn2 {
display: inline-block;
width: 200px;
padding: 10px 10px;
background-color: blue;
color: white;
text-align: center;
text-decoration: none;
}IDの名前は使い回すことができないので、CSSの記述が無駄に増えてしまうことが発生してしまいます。
２．１つのタグに複数指定できない
IDの制約として１つのタグに複数指定はできません。以下のコードはNGです。
<div id="sample1 center"> sample1 </div>中央寄せのため「center」を追加してそれにスタイルを当てるということは、IDではできないということになります。
３．詳細度が高い
詳細度の説明は省かせていただきますが、要するに「記述が適用される優先度が高い」と考えて頂ければよいかと思います。
たとえば下記のようなコードを記述したとします。
<div id="sample2" class="yellow"> sample2 </div>#sample2{ width: 500px;
background-color : blue; }
.yellow{ background-color : yellow; }IDは一つしか設定していないので、HTMLの記述に問題はございません。
ただしIDは優先度が高いので、「.yellow」で記述した「background-color:yellow」よりも「#sample2」で記述した 「background-color:blue」が優先されます。
つまり「.yellow」は「#sample2」の後に記述しているけど適用されず上書きできないということになります。
まとめますと下記の通りとなります。
- 名前が重複できない → 使い回すことができない
- １つのタグに複数指定ができない → カスケーディングできない
- 詳細度が高い → 上書きできない
この３つの理由により、スタイルをあてるのにIDを使うメリットはほぼないかと思います。
IDを使用するケース
スタイルをあてる場合はClassだけで対応可能ですが、それ以外でIDを使用するケースがあります。
- ページ内で移動する場合
- labelタグをfor属性でinputタグに紐付けする場合
簡単に説明していきます。
１．ページ内で移動する場合
ページ内で移動したい場合、そのタグにIDをつけてaタグにそのIDを指定することがあります。コードのイメージは以下のとおりです。
<a class="btn" href="#link"> sample1へ移動 </a>
...
<div id="link" class="sample1"> sample1 </div>.sample1{ width: 500px; }
.btn {
display: inline-block;
width: 200px;
padding: 10px 10px;
background-color: blue;
color: white;
text-align: center;
text-decoration: none;
}aタグのhrefに「#{ID名}」を指定すると、そのIDを指定したタグに移動することができます。ただし前述の通りスタイルをあてるのはクラスに対してとなりますので、IDだけでなくクラスも指定します。
２．labelタグをfor属性でinputタグに紐付けする場合
詳細な説明は割愛いたしますが、labelタグでfor属性を使うときに対象となるinputタグに対してIDを指定します。
<label for="check" class="label">チェックをしてください</label>
<input type="checkbox" name="check" id="check" class="check">上記コードのようにIDとfor属性を使うことでlabelタグとinputタグを紐付けすることができます。こちらでもスタイルをあてるためにIDだけでなくクラスも指定します。
まとめ
IDとClassの違いについて、「どう使い分けるの？」といった観点で考えをまとめてみました。少し違った角度から見てみることで理解のお役に立てれば幸いです。