👉 「CSSのセレクタってよく聞くけど、結局なに？」
初心者がCSSを学ぶときに最初につまずきやすいのが「セレクタ」です。セレクタとは、どのHTML要素にスタイルを適用するかを指定するもの。この記事では、初心者が必ず押さえておきたい 3つの基本セレクタ（タグ・クラス・ID） を、具体的なコード例を使ってわかりやすく解説します。この記事を読めば、CSSの基礎がスッキリ理解できるはずです。
さらに、CSSをもっと深く理解したい方におすすめの記事も紹介しているので、ぜひあわせて学習してください。
👉 内部リンク例
・これで完璧！外部 CSS の作り方完全ガイド
・class と id の違いを めちゃくちゃ分かりやすく解説！
CSSセレクタとは？
CSSセレクタとは、「どのHTML要素にスタイルを適用するのかを指定するための書き方」 です。
たとえば、文字の色やサイズを変えるときに「どのタグを対象にするのか」を指定する役割を持っています。
タグセレクタとは
タグセレクタは、HTMLタグそのものを指定する方法 です。
【 コード を使って説明するよ！】
htmlコードに <h1>絶品カレーの作り方</h1> とあります。
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
結果として、<h1> タグで囲まれた文字が青色で表示されます。
この場合の「セレクタ」は h1 で、これを タグセレクタ と呼びます。
・実際のパソコン画面↓
クラスセレクタとは
クラスセレクタは、class属性を指定する方法 です。
複数の要素に同じスタイルを適用したいときに便利です。
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
この場合、.text-brown がセレクタとなり、文字色を茶色にし、サイズを24pxに変更します。
クラスを指定するときは 必ずドット（.）を付ける のがルールです。
セレクタは、クラス名である .text-brown になり、これを「クラスセレクタ」と言います
class名を使ってCSSでスタイルを指定するときは、必ずドット . を付けます
👉 関連記事：classとidの違いを超わかりやすく解説
IDセレクタとは
IDセレクタは、id属性を指定する方法 です。
ページ内で一意（ユニーク）な要素に対してスタイルを適用するときに使います。
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
この場合、#tokubetu がセレクタとなり、文字を赤色・太字にします。
IDを指定するときは シャープ（#）を付ける のがルールです。
実際のパソコン画面↓
セレクタは、id名である #tokubetu になり、これを「idセレクタ」と言います
クラスセレクタの場合は、「ドット . 」 idセレクタの場合は 「シャープ # 」を付けます
クラスセレクタとIDセレクタの違い
- クラスセレクタ（.） → 複数の要素に適用できる
- IDセレクタ（#） → ページ内で一度だけ使う
使い分けを意識することで、効率的にスタイルを管理できます。
まとめ
- セレクタとは「どのHTML要素にスタイルを適用するか」を指定するもの
- 初心者が覚えるべき3つの基本セレクタは以下の通り：
- タグセレクタ → タグ名をそのまま指定
- クラスセレクタ → ドット（.）を付ける
- IDセレクタ → シャープ（#）を付ける
👉 関連記事：これで完璧！外部CSSの作り方完全ガイド
・セレクタとはCSSのココのこと↓
コメント