みやちサイト制作所

未経験でもWEBサイト制作で稼ぐためのノウハウまとめ

閉じる

CSSのIDとclass(クラス)の使い分けは、完成後の保守性まで考慮に入れて決めよう

idとクラス

CSSを使ってサイトを作っていると、

question
IDとクラスってどっち使うべき?

みたいに迷うことってありますよね。

単純にCSSでデザインを1ヶ所だけ変更するだけであれば、IDでもクラスでも良いような気がしてしまいます。

ただし、実はIDとクラスは明確に役割・性質が異なり、それをどう使うかはその人の開発方針による部分が大きいです。

そこで、この記事ではIDとクラスがどう違うのかまとめつつ、

  • JavaScriptやjQueryのとの関連性
  • サイト完成後のカスタマイズ性(保守性)

も視野に入れた使い分け方法についてまとめました。

この記事にあることを実践するだけで、「ただコードを書ける人」から「きちんとコードをわかって使い分けができる人」になれるので、おすすめです。

miyachi
保守性まで意識できる人は重宝されるよ

【この記事の目次】

CSSのIDとclass(クラス)の違い

IDとクラスを効果的に使えるようになるには、まずIDとクラスは何がどう違うのかをしっかり抑える必要があります。

表記方法の違い

基本的なところとして、IDとクラスでは書き方が異なります。

IDの場合、HTML側では

<div id="sample">あいうえお</div>

と表記し、CSS側では

#sample {
  color: #000;
}

となります。

つまり、HTMLにおいてIDは「id=”xxxx”」、クラスは「class=”xxxx”」で表記します。
CSSでは、IDなら「#」、クラスなら「.」を頭に付けます。

使える回数の違い

単にデザインを反映させるだけで考えるとIDとクラスは同じですが、両者は1ページの中で使える回数に違いがあります。

IDは1ページに1回しか使えませんが、クラスは同じものを何度も使えます。

つまり、デザインを設定するという点において、同じパターンを複数箇所に適用させるにはクラスを使うことになります。

詳細度の違い

IDとクラスは、使用回数のほか、詳細度に違いがあります。
平たく言えば「デザインを適用させるときの強制力の違い」です。

例えば、↓があったとします。

<div id="sample-id" class="sample-claass">あいうえお</div>

CSSで、

#sample-id { color: red; }
.sample-class { color: blue; }

とした場合、どちらが適用されるでしょうか。

基本的に、後に書いたCSSのほうが適用されるのですが、IDとクラスで比較した場合はIDの方が強制力が強く、文字は赤色で表示されます。

詳しくは、↓の記事が参考になります。

【上級コーダーになるために】CSSが適用されるときのクセを知っておく!CSSの詳細度とは

2020.06.16

こんにちは。HTML, CSSを学び始めてから13年の藤ミヤチです。 コーディングをするにあたって という場面には何度も遭遇すると思います。 まあ、クラス名…

IDとクラスの特性まとめ

あらためて、IDとクラスの違いをまとめると、以下の表になります。

IDクラス
記述方法HTML: id=”sample”
CSS: #sample
HTML: class=”sample”
CSS: .sample
1ページで使える回数1回のみ複数OK
詳細度強い弱い

IDとclass(クラス)の使いわけ方法 3パターン

実際に記述したHTMLに使用しているIDやクラスは、JavaScriptを動かす際のターゲットになります。

IDとクラスを使い分ける方法として、よくあるのは下記の3パターンです。

  1. 使用回数で使い分け
  2. セクション名だけID
  3. JavaScriptも意識した使いわけ

カスタマイズ性を考えると、断然「③JavaScriptも意識した使い分け」がおすすめです。

「①使用回数で使い分け」「②セクション名だけID」では、HTMLとCSSのことしか考えてないので、のちのちJavaScriptの組み込みやカスタマイズなどで困ることも多いです。

なぜ困るのかの理由も含め、それぞれの使い分け方法について説明していきますね。

使用回数で使い分け

これは一番わかりやすく、下記のルールに従って使い分ける方法です。

  • 1ヶ所のみに適用するのであればID
  • 複数ヶ所のみに適用するのであればクラス

もともとのID・クラスの特性に応じているので、システム的に問題はありません。
使い分けも明確で間違えようがないですよね。

ただしHTMLを見たときにIDとクラスが入り乱れることになり、いざCSSを書くときに

question
IDだっけ?クラスだっけ?

と迷い、間違えてしまうこともあるかもしれません。

また、書いたjavascirptが全然反映されなくて調べまくったら、実は「#」と「.」の間違いだった……

なんてこともあります。

いったんは1ヶ所のみの適用で良いと思っていたCSS(デザイン)が他にも適用することになった場合、IDからクラスへの変更が面倒です。

つまり、作業は楽に見えても、いったん書いたあとの調整が大変なんですね。

開発時の使い分けルールのわかりやすさ
後からの調整のしやすさ×
JavaScript/jQueryとの兼ね合い×

セクション名だけID

次に採用される使い分け方法としては「セクション名だけIDにして、ほかはクラスにする」という方法です。

具体的には、HTML側で

<section id="sample">
  <h2 class="sample-title">Sample</h2>
  <p class="sample-text">Sample Text. Sample Text. Sample Text.</p>
</section>

というように、デザイン的な1ブロックを囲う要素(section等)にはIDをつけ、ほかはクラスで対応するという方法です。

これだと、各ブロックに固有の名前を付けて管理すればID名のかぶりも防げますし、1ヶ所に適用すると思っていたデザインが他でも適用されることになった場合も、基本的にはクラス名を流用するだけなので、問題はありません。

ただし、このパターンはうまく言っているようで、HTMLやCSSのことしか考えていないので、JavaScriptで動きをつけることを考慮するとあまりいい方法ではありません

<section id="sample">
  <h2 class="sample-title">Sample</h2>
  <p class="sample-text">Sample Text. Sample Text. Sample Text.</p>
</section>

たとえば、↑の.sample-titleめがけてなんらかのJavaScriptを書いたとします。
クリックしたら色が変わる等ですね。

そのあと、何らかの理由があって、デザインを変更したくなりクラス名を書き換えることにしました。

この「デザインを変更する」瞬間、見た目のことに注目しているので、JavaScriptがそのクラスを利用しているかどうかまでチェックしていないことが多いです。

だから

miyachi2
デザイン変えた!

となった後に

miyachi3
クリックしても色が変わらないのはなんでだ……?

と頭を抱えることになります。

かといって、クラス名を変えるごとにJavaScriptのコードを全チェックするのは馬鹿らしいですよね。

その理由で、私は「②セクション名だけID」も微妙だと思います。

開発時の使い分けルールのわかりやすさ
後からの調整のしやすさ
JavaScript/jQueryとの兼ね合い×

JavaScriptも意識した使いわけ

最後に紹介するのが「③JavaScriptも意識した使いわけ」です。

いろいろなサイトを作ってきた経験上、一番優れていると思うのがこの使い分けです。

基本的に、HTML・CSSを使ってデザインを設定していく際にIDは使いません。
すべてクラスで書いていきます。

そもそも、クラスは「同一ページ内の複数ヶ所に利用してもOK」であり、1ヶ所だけで利用してはダメ、ということはありません。

そのため「CSSを適用させてデザインを変えたい」のであれば、すべてクラスでまかないます。

一方、IDはどこで使うかと言うと、IDはJavaScript(jQuery)を適用させるためのターゲットとして利用します。

<section class="sample">
  <h2 class="sample-title">Sample</h2>
  <p class="sample-text">Sample Text. Sample Text. Sample Text.</p>
</section>

↑がJavaScriptのコードを書く前に、HTML・CSSのみを意識して作ったコードだとします。

その後、h2のテキストをクリックしたときに色を変えたいと言う場合には、ターゲットとなるh2タグにIDを追加します。

<section class="sample">
  <h2 class="sample-title" id="sample-title">Sample</h2>
  <p class="sample-text">Sample Text. Sample Text. Sample Text.</p>
</section>

もちろん、このID「sample-title」めがけてかかれたCSSはありません。
ID「sample-title」はJavaScriptでのみ利用されます。

つまり、クラスはデザイン設定用、IDはJavaScript設定用、と役割を分けるんですね。

そうすることで、デザインを変更しているだけのつもりでJavaScriptに影響を与えてしまう問題は解消されます。

また、コードを見たときにどの要素がどんな役割をもっているかがわかりやすいです。

ただし、この使い分け方法にも少し弱点があります。

弱点とは、同じ動作のJavaScriptを複数ヶ所に適用したくなった場合です。

たとえば、先程の「クリックしたら色を変える」というものを、3ヶ所に適用したい場合は、IDだと無理です。

IDは「1ページに1箇所しか使えない」という大原則があるので、もし無理やりIDでなんとかしようとする場合は

  • sample-title1
  • sample-title2
  • sample-title3

と3つのIDを個別につくり、同じJavaScriptのコードを3回書くことになります。

これは非常に非効率です。

そこで、私は複数箇所にJavaScriptを適用する場合はIDではなくクラスを使います。
ただしそのクラスにはCSSを一切あてません

<section class="sample">
  <h2 class="sample-title sample-title-change">Sample</h2>
  <p class="sample-text">Sample Text. Sample Text. Sample Text.</p>
</section>

上記の例のように、「sample-title-change」というクラスにデザインの設定(CSS)は一切適用させず、JavaScriptのみで利用するクラスにします。

そうすることで、クラス名を変えようとしたときなどに、無意識にJavaScriptに影響をあたえるリスクを回避しつつ、無駄にJavaScriptを書くこともありません。

開発時の使い分けルールのわかりやすさ
後からの調整のしやすさ
JavaScript/jQueryとの兼ね合い

やや開発時に注意する必要はありますが、一度コードを書いたあとのトラブルを未然に防ぐことができるんです。

miyachi
私はこのルールに従ってコードを書いているよ

まとめ

IDとクラスは同じように見えて、役割が全然違います。

両者をどう使うかによって、一度コードを書いたあとの修正のしやすさ(カスタマイズのしやすさ)が変わってきます。

サイトは1度つくったら終わりではなく、状況に応じて都度変更することが多いものです。

そのため「ただ作れるだけ」のサイト制作者ではなく、「作ったあとのことも視野に入れたコードが書ける」ことが重要です。

完成したあと、将来的に自分がカスタマイズすることも想定しながらサイトを作れるようになるといいですね。

miyachi2
コードを書けるだけ、の初心者からは卒業しよう!

サイトを効率的に作るための
秘蔵ノウハウを発信中

note

開発の基本的な部分はもちろん、コードをより素早く理解して書くための「コツ」をまとめました。15年の開発経験に裏付けられたノウハウをどうぞ!

詳しくはこちら

記事をシェア