CSSのclassセレクタとidセレクタの正しい使い方を解説
![classセレクトとidセレクトの正しい使い方](https://web-camp.io/magazine/wp-content/uploads/2021/09/210912_css-id.png)
コードを書いている最中に、「これは、classとidどっちを指定しよう?」と時々思うことはありませんか?
classやidの指定は、結局どっちを使えば良いのかわからなくなりますよね。
そこで今回は、classとidの正しい使い方と注意点を解説します!
この記事を読んでわかる内容は以下の通りです。
- classとidの役割
- classとidの使い方
- 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名のつけ方には、以下のようなルールがあるので覚えておきましょう。
- 数字や記号から始まる名前はNG
- 使用して良い記号は「-(ハイフン)」と「_(アンダーバー)」のみ
- 半角英数字を使用する
classは、同じHTMLページ内に同じclass名を複数記述することができます。
複数のHTML要素に同じclass名を付けることで、同じCSSを一度に適用させることが可能です。
id属性の書き方
HTMLでのid属性は、以下のように使用します。
<要素名 id="id名">
id名のつけ方には、以下のようなルールがあるので覚えておきましょう。
- 使用して良い記号は「-(ハイフン)」と「_(アンダーバー)」のみ
- 基本的に半角英数字を使用する(大文字でもOK)
- 数字や記号から始まる名前はNG
また、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を同じタグに指定するのはコーディング規約違反
- 複数使用した場合はCSSが効かない
- HTMLで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属性はページ内リンクも設置できる
- class、idの使用前にしっかりと注意点やルールを確認しておくことが大切
特定のHTML要素をCSSでスタイリングしたい時に、classとidは便利です。
しかし、使い方を間違えると、CSSが反映されないだけでなく、プログラムに不具合が発生する場合もあります。
複数同じ名前が使えるか、名づけ方に注意すべきことはないかなどをしっかり理解した上でclassとidを正しく使用しましょう!
\プログラミングスクールを比較/
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
---|---|---|---|
![]() |
![]() |
![]() |
|
目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
分割払い | ○ | ○ | ○ |
補助金 | ○ | × | ○ |
転職保証 | ○ | × | × |
受講期間 | 12週間〜 | 3ヶ月〜 | 5ヶ月〜 |
特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間(約9カ月)のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
公式HP |
公式HP |
公式HP |