WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

【CSS】「classセレクタ」と「idセレクタ」って何が違うの?

公開日:2016(平成28)年4月10日/最終更新日:

ノートパソコン



【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

最近CSSの勉強を始めたばかりでまだ右も左もわからない段階ではありますが、素朴な疑問が。
CSSで使う「classセレクタ」と「idセレクタ」って何が違うの?

これを解決するためにいろいろと勉強してみました。
結論としては、
設定してみて適用される側を使う
ということ。

CSSの基本文法から見た「classセレクタ」と「idセレクタ」の違い

どちらのセレクタも
HTML文の中でセレクタが設定されている場合にはCSSから同じセレクタのデザイン設定を適用する
ことには違いがありません。

classセレクタの基本的な使い方

HTMLタグの中に「class = class名」という文を追記します
cssファイルの中に「.class名」としてデザイン要素を追記します

そして表示されたときにはCSSから呼び出されたデザイン要素をHTMLに反映させて表現します

idセレクタの基本的な使い方

HTMLタグの中に「id = id名」という文を追記します
cssファイルの中に「#class名」としてデザイン要素を追記します

そして表示されたときにはCSSから呼び出されたデザイン要素をHTMLに反映させて表現します


このように呼び出す文字が「class」なのか「id」なのかの違いと、cssファイルの中で「.」はclass、「#」はidという違いがある程度です。

では、何が違うのか?それは1つのHTML文(html~/htmlまでの間)で

  • id要素は1回しか使用できない
  • classは複数回使用できる

という違いがあるのです。
それでは全てclassにすればいいのでは?と思うのですが、主にidセレクタはJavaなどで利用されることが多いため、使い方としてすべてclassセレクタで設定するということ自体は正解です。が、実際にカスタマイズしてみるとどうやらそうでもなさそうです。

どちらを使うかはケースバイケース

それでは全てclassで!!と言いたいところですが、自分で1つ1つ作り上げたHTMLやCSSであればそれなりに理解して作成しているので問題ないのですが、WordPressをはじめとするCMSツールやブログなどではあらかじめ作り上げられたHTMLとCSSの要素の中にコンテンツを追加していくという性質上、正解が分かりません。

従って、プレビューで表示しながらどちらのセレクタが正しく動作するのかを確認するというのが大正解なのです。
よく、このままコピペすれば・・・というようなページを見て、やってみたけど素っ気ない文字だけ表示されて全然デザイン反映がされない・・・という現象が特に初心者を悩ませると思うのですが、そんなときはセレクタ要素を替えてみると案外簡単に解決します。

ですから結論として
設定してみて適用される側を使う
というところに行きつくのです。