【CSS基礎】classセレクタとidセレクタの正しい使い方|違いや注意点も

2021.09.15

コードを書いている最中に、「これは、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に関する問題が発生した時に、一度チェックしてみてくださいね。

原因1
原因1
そもそもclass(id)名が間違っている
対策:HTMLで指定したclass(id)名をコピペしてスタイリングする
原因2
原因2
いつの間にか全角スペースを使っている
対策①:テキストエディタで全角を視覚的にわかる設定をして削除
対策②:テキストエディタの検索機能で全角スペースを検索して削除
原因3
原因3
「{}(括弧)」や「:(コロン)」「;(セミコロン)」などの記号がない
対策:反映されないclass、idの記号を再確認
※特に「;(セミコロン)」「{(開始の括弧)」が抜けやすい
原因4
原因4
コメントアウトの位置がずれている
対策:反映されないclass、id付近のコメントアウトを再確認
原因5
原因5
CSSの指定が被っている
対策:テキストエディタの検索機能で反映されないclass(id)名を検索し、どちらかを削除

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

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

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

  • 複数のHTML要素に同じCSSを反映させたい時にはclass属性を使用する
  • id属性はページ内リンクも設置できる
  • class、idの使用前にしっかりと注意点やルールを確認しておくことが大切

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

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

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

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2021 WEBCAMP MEDIA Powered by AFFINGER5