CSSセレクターとは？基本の仕組みと使い方をわかりやすく解説

CSSセレクターとは何か

セレクター（Selector）とは、CSSでスタイルを適用する対象となるHTML要素を指定するための仕組みです。HTML文書内のどの部分にデザインを反映させるかを決める、いわば「スタイル適用の目印」のような役割を果たします。

セレクターには任意のHTMLタグを指定でき、例えば見出しを表す<h1>や、表を作成する<table>などが挙げられます。セレクターで要素を指定することで、「このタグにはこの装飾を適用する」というルールを明確に定義できるのです。

セレクターのイメージ図

以下の図は、セレクターがどのような役割を持つのかを視覚的に示したものです。CSSの記述は「セレクター＋宣言ブロック」で構成され、セレクターが対象要素を選び出し、その後ろに続く波括弧（{ }）の中にプロパティと値を記述します。

タイプセレクター（要素セレクター）の使用例

最も基本的なセレクターがタイプセレクター（要素セレクター）です。これはHTMLタグ名をそのまま指定する方法で、ページ内の同じ種類の要素すべてに一括してスタイルを適用できます。

例えば、<h1>要素の文字色を変更したい場合は、次のように記述します。

h1 {
    color: #36CFFF;
}

このコードでは、セレクターとして「h1」を指定しています。これにより、ページ内のすべての<h1>見出しの文字色が、明るい水色（#36CFFF）に統一されます。

コードの読み方

• h1 … セレクター部分。スタイルを適用する対象のHTMLタグを指します。
• { } … 宣言ブロック。適用するスタイルの中身を波括弧で囲みます。
• color: #36CFFF; … プロパティ（color）と値（#36CFFF）からなる「宣言」です。

まとめ

セレクターはCSSの土台となる重要な概念であり、「どこにスタイルを適用するか」を決定する役割を担います。まずはタグ名を直接指定するタイプセレクターから理解を深め、慣れてきたらクラスセレクター（.example）やIDセレクター（#example）なども併用すると、より柔軟で効率的なスタイリングが可能になります。