CSSのclassセレクタとidセレクタの正しい使い方を解説

コードを書いている最中に、「これは、classとidどっちを指定しよう？」と時々思うことはありませんか？

classやidの指定は、結局どっちを使えば良いのかわからなくなりますよね。

そこで今回は、classとidの正しい使い方と注意点を解説します！

この記事を読んでわかる内容は以下の通りです。

「CSSでidやclassセレクタを指定したのに、なぜか効かない…」

などという場合の原因と対処法についても解説しますので、ぜひ最後まで見てくださいね。

「class」と「id」にはそれぞれ役割がある

「classやidは、何となく使い分けている」という方もいるでしょう。

しかし、それぞれ特徴や役割が明確に異なるので、CSSでスタイリングするための命名など、同じ意味で使用すべきではありません。

classとidの特徴や違いを理解する前に、まずはHTMLとCSSでどのような役割を持っているのか理解しておきましょう。

HTMLではclass・id属性、CSSではclass・idセレクタと呼び、どちらの場合も特定の要素にだけCSSを適用させたい時に使用します。

HTMLの要素にclassやid属性で名前を付けることにより、CSSでそれをセレクタとして扱うことができるようになります。

つまり、classとidは「セレクタで使用したいHTML要素に名前をつける」という役割になります。

では、それぞれの使い方を学びながら特徴を理解していきましょう。

HTMLでのclassとidの使い方

classとidでは、それぞれ使い方と特徴が異なります。

しかし、同じ要素にclassやidを複数つけることは可能ですので、同じ要素に一度に指定することができます。

例えば、以下のような記述が可能です。

<p class="class" id="id">classとidを正しく使い分けよう！</p>

では、HTMLでのclassとidの使い方を見ていきましょう。

class属性の書き方

HTMLでのclass属性は、以下のように使用します。

<要素名 class="class名">

class名のつけ方には、以下のようなルールがあるので覚えておきましょう。

classは、同じHTMLページ内に同じclass名を複数記述することができます。

複数のHTML要素に同じclass名を付けることで、同じCSSを一度に適用させることが可能です。

id属性の書き方

HTMLでのid属性は、以下のように使用します。

<要素名 id="id名">

id名のつけ方には、以下のようなルールがあるので覚えておきましょう。

また、idは「同じページ内に1つしか使用できない」というルールがあります。

例えば、以下のように同じHTMLファイル内に、同じidが複数存在しているのはNGということになります。

<p id="zokusei">class属性とid属性を正しく使い分けよう！</p>
<p id="zokusei">classセレクタとidセレクタを正しく使い分けよう！</p>

また、id名の先頭に「#（シャープ）」を付けることで、ページ内リンクを作成することも可能です。

<div id="home">...</div>


<a href="#home">HOMEへ戻る</a>

ページ内リンクのid名は、aタグ内に設置します。

上記の場合は、「#home」をクリックするとid名「home」の位置までリンクするということになります。

CSSでのclassとidの使い方

CSSでは、HTMLで名付けたclassやid名を使用することでセレクタとして使用することができます。

classセレクタの書き方

CSSでは、以下のようにclassセレクタを使用します。

.class名 {
 プロパティ: 値;
}

classでは先頭に「.（ドット）」を付けます。

idセレクタの書き方

CSSでは、以下のようにidセレクタを使用します。

#id名 {
 プロパティ: 値;
}

classでは「.（ドット）」ですが、idでは先頭に「#（シャープ）」を付けます。

classとidの優先順位について

優先順位は、「別々のCSSが同じ要素に対して適用された時どちらを優先して反映させるか」というCSSにおける概念です。

基本的には、上から下に行くにつれて優先順位が高くなります。

つまり、下にあるほど優先順位が高いということです。

しかし、これはclassにおける優先順位で、どちらも存在している場合はidセレクタが優先されます。

classなのかidなのか、どこに書かれているセレクタなのかなどでCSSが反映される優先順位が変わってきますので、覚えておきましょう。

idセレクタを使う時の注意点

これまでに説明した通り、idを使用する際には、いくつかルールがあります。

さらに、詳しく注意点も含めて解説しますので、実際にidを使用する前に確認しておきましょう。

idは同じ名前を同じページ内に複数使用するのがとにかくNG。

CSSが反映されないだけでならまだしも、コーディング規約違反となってしまうので、細心の注意が必要です。

ページ内リンクやjQueryなどでもエラーが発生することがあり、プログラムやデザインにも不具合が生じるので、必ずid名は同じHTMLページに一つにしましょう。

CSSでclassやidセレクタが効かない時に考えられる原因

「CSSが効かない！」というのは、コードを書いていると必ずと言って良いほど発生する問題ですよね。

特にclassやidセレクタが反映されないということはよくあります。

そこで、classやidセレクタがなぜか効かない時に考えられる原因と対策をまとめました。

CSSに関する問題が発生した時に、一度チェックしてみてくださいね。

classとidセレクタを正しく使い分けてCSSでのスタイリングをマスターしよう！

今回は、classとidの特徴や使い方、注意点などについて解説しました。

以下はこの記事のまとめです。

特定のHTML要素をCSSでスタイリングしたい時に、classとidは便利です。

しかし、使い方を間違えると、CSSが反映されないだけでなく、プログラムに不具合が発生する場合もあります。

複数同じ名前が使えるか、名づけ方に注意すべきことはないかなどをしっかり理解した上でclassとidを正しく使用しましょう！