Webサイトを作るとき、「この見出しを赤色にしたい」「このボタンを丸くしたい」と思ったことはありませんか？
そんな時に使うのが「CSSセレクタ」です。
HTMLで作った文章構造に、デザインを加えるために欠かせない存在なんですよ。
この記事では、CSSセレクタの基本から実際の使い方まで、わかりやすく解説していきます。
CSSセレクタとは？
CSSセレクタとは、どのHTML要素にスタイル（装飾）を適用するかを指定するものです。
例えば、こんな感じで使います。
p {
color: blue;
}この場合、pがセレクタにあたります。
pはHTMLの段落を表すタグですから、「すべての段落を青色にする」という意味になるんですね。
CSSは「セレクタ」「プロパティ」「値」の3つで1セットです。
- セレクタ：どの要素を選ぶか（例：p）
- プロパティ：何を変えるか（例：color）
- 値：どう変えるか（例：blue）
つまり、セレクタはWebページのデザインをコントロールする「住所」のようなものだと考えてください。
基本的なセレクタの種類
CSSセレクタにはいくつかの種類があります。
ここでは、よく使う基本的なものを紹介していきましょう。
要素セレクタ（タイプセレクタ）
要素セレクタは、HTMLタグをそのまま指定する方法です。
最もシンプルで、初心者にも使いやすいセレクタですね。
使い方の例：
h1 {
font-size: 32px;
}
p {
line-height: 1.8;
}この例では、すべてのh1見出しのフォントサイズを32ピクセルに、すべての段落の行間を1.8倍にしています。
同じタグが複数あっても、まとめて同じスタイルを適用できるのが便利なんですよ。
クラスセレクタ
クラスセレクタは、特定のclass属性を持つ要素を選択します。
セレクタの前に「.」（ドット）を付けるのが特徴です。
HTMLの例：
<p class="important">この段落は重要です。</p>
<p>これは普通の段落です。</p>
<p class="important">これも重要な段落です。</p>CSSの例：
.important {
background-color: yellow;
font-weight: bold;
}この場合、importantというクラスが付いた段落だけが、黄色の背景で太字になります。
同じクラス名は何度でも使えるので、複数の要素に同じデザインを適用したい時に便利なんですね。
IDセレクタ
IDセレクタは、特定のid属性を持つ要素を選択します。
セレクタの前に「#」（シャープ）を付けます。
HTMLの例：
<div id="header">ヘッダー部分</div>
<div id="main">メインコンテンツ</div>CSSの例：
#header {
background-color: navy;
color: white;
}IDは1つのページに1回しか使えないという重要なルールがあります。
ページ内でユニークな要素（ヘッダーやメインコンテンツなど）に使うのが基本ですね。
全称セレクタ
全称セレクタは「*」（アスタリスク）で表し、すべての要素にスタイルを適用します。
* {
margin: 0;
padding: 0;
}この例は、Webサイト制作でよく使われる「リセットCSS」の一部です。
ブラウザが自動的に付ける余白をゼロにして、デザインをコントロールしやすくしているんですよ。
ただし、全要素に適用されるので使いすぎには注意が必要です。
属性セレクタ
属性セレクタは、特定の属性を持つ要素を選択できます。
input[type="text"] {
border: 1px solid gray;
}
a[target="_blank"] {
color: red;
}最初の例は「テキスト入力欄だけ」に、2番目の例は「別ウィンドウで開くリンクだけ」にスタイルを適用しています。
細かい条件で要素を選びたい時に役立つセレクタですね。
擬似クラス
擬似クラスは、要素の状態に応じてスタイルを変えられます。
「:」（コロン）を使って指定します。
a:hover {
color: orange;
}
input:focus {
border-color: blue;
}
li:first-child {
font-weight: bold;
}実際の動き：
:hover：マウスを乗せた時:focus：入力欄をクリックした時:first-child：最初の子要素
リンクにマウスを乗せると色が変わるのも、この擬似クラスのおかげなんですよ。
セレクタを組み合わせる方法
複数のセレクタを組み合わせると、もっと細かく要素を指定できます。
これを「結合子」や「コンビネータ」と呼びます。
子孫セレクタ（スペースで区切る）
div p {
color: green;
}この例は「divタグの中にあるすべての段落」を選択します。
入れ子の深さは関係なく、divの中に含まれていれば適用されるんですね。
子セレクタ（>で区切る）
ul > li {
list-style: square;
}「>」を使うと、直接の子要素だけを選択できます。
孫要素には適用されないので、より限定的な指定になります。
グループセレクタ（カンマで区切る）
h1, h2, h3 {
font-family: "Arial", sans-serif;
}複数のセレクタに同じスタイルを適用したい時は、カンマで区切ります。
コードがシンプルになって、管理しやすくなるメリットがありますよ。
セレクタの使い分けポイント
実際のWeb制作では、どのセレクタをいつ使えばいいのでしょうか？
基本的な考え方を紹介します。
要素セレクタを使う場面：
- サイト全体の基本的なスタイルを設定する時
- すべての見出しや段落に共通のデザインを適用する時
クラスセレクタを使う場面：
- 複数の場所で使い回すデザインパーツを作る時
- 「ボタン」「カード」など、繰り返し使う要素のスタイリング
IDセレクタを使う場面：
- ページ内で1回しか使わない特別な要素（ヘッダー、フッターなど）
- JavaScriptで特定の要素を操作する時の目印
擬似クラスを使う場面：
- マウスホバーやクリックなど、ユーザーの操作に反応させたい時
- リストの最初や最後など、位置で判断する時
迷った時は、クラスセレクタから始めるのがおすすめです。
柔軟性が高く、後から変更しやすいからなんですね。
まとめ
CSSセレクタは、Webページのデザインを自由自在にコントロールするための基本ツールです。
今回紹介した内容をまとめると：
- 要素セレクタ：HTMLタグをそのまま指定する最もシンプルな方法
- クラスセレクタ：「.」で始まり、複数の要素に同じスタイルを適用できる
- IDセレクタ：「#」で始まり、ページ内で1回だけ使える
- 全称セレクタ：「*」ですべての要素を選択する
- 属性セレクタ：特定の属性を持つ要素だけを選べる
- 擬似クラス：要素の状態や位置に応じてスタイルを変えられる
最初は基本的なセレクタだけで十分です。
実際にコードを書きながら、少しずつ使い分けを覚えていきましょう。
CSSセレクタを使いこなせるようになれば、思い通りのWebサイトデザインが作れるようになりますよ。
コメント