【CSS】レッスン2-4：4種類のセレクタを使いこなそう｜基本から実践まで
一つ前の章ではテキストスタイルの本校方法について学習しました。
今回は４種類のセレクタについて見ていきましょう。
Lesson１：HTML入門編
Lesson２：CSS入門編
・Lesson2-1：CSS学習の入り口｜文字に色を付けよう
・Lesson2-2：CSSを読み込む３つの方法
・Lesson2-3：テキストスタイルを変更しよう
・Lesson2-4：４種類のセレクタを使いこなそう ◁今回はココ
・Lesson2-5：ボックスモデルを理解しよう
・Lesson2-6：ボックススタイルを変更しよう
・Lesson2-7：継承とカスケードを理解しよう
・Lesson2-☆1：セレクタの階層構造と優先順位を理解しよう
・Lesson2-☆2：Webサイトの配色をマスターしよう
Lesson３：CSS応用編
ウェブページのデザインやレイアウトを指定するために不可欠なCSS。
その中でも「セレクタ」は、どの要素にスタイルを適用するのかを決定する非常に重要な役割を担っています。
セレクタを適切に使うことで効率的に一貫したデザインを実現し、メンテナンスしやすいスタイルシートを作成できます。
この記事では、CSSの４つの基本的なセレクタである以下の項目について詳しく解説します。
- 要素セレクタ：HTMLタグそのものをターゲットにするセレクタ
- クラスセレクタ：特定のグループにスタイルを適用するためのセレクタ
- IDセレクタ：一意の要素にスタイルを適用するためのセレクタ
- 疑似クラス：特定の状態（ホバー、最初の要素など）に応じて適用するセレクタ
これらのセレクタを理解し、適切に使い分けることで、CSSの柔軟性を最大限に活かすことができます。
そもそも「セレクターとは何か」が分からない人はこの記事の前に↓↓の記事を見て復習を行ってください。
<<前のページ
記事一覧
次のページ>>
要素セレクタ（element）とは｜HTMLタグを直接指定する基本
HTMLの要素を直接指定してスタイルを適用する最も基本的なセレクタが 要素セレクタ です。
要素セレクタは、HTMLタグの名前をそのまま指定することで、同じ種類のすべての要素にスタイルを適用できます。
Lesson2-3までに使用してきたセレクターは、全て要素セレクタになります。
要素セレクタの使い方と実例｜h1・p・aなどの指定
要素セレクタは、これまで学習してきた通り、例えば次のように記述します。
h2 { /* 全てのh2タグにスタイルを適用 */
color: red; /* カラーを赤に変更 */
font-size: 24px; /* フォントサイズを24pxに変更 */
}このCSSはすべての<h2>要素の文字色を赤、フォントサイズを24ピクセルに設定します。
要素セレクタのメリットとデメリット
要素セレクタには以下のようなメリット・デメリットがあります。
メリット｜シンプルで学習容易・ベーススタイルに最適
要素セレクタを使用することで、簡単に複数の同種の要素に対して統一したスタイルを適用できます。
特に、基本的なスタイルを設定する際に便利です。
- HTMLタグ名を直接指定するため、簡単でわかりやすい
- 同じ要素に一括でスタイルを適用できる
デメリット｜粒度が粗く衝突しやすい（詳細度が低い）
しかし、要素セレクタにはいくつかのデメリットもあります。
- すべての同じ要素に適用されるため、細かい制御が難しい
- クラスやIDの使用と比べて、スタイルの上書きがしにくい
- ページ全体のデザインを統一する場合、他のセレクタとの併用が必要
例えば、異なる見た目にしたい<h2>タグがある場合、要素セレクタだけでは対応が難しく、クラスやIDを組み合わせる必要があります。
要素セレクタはCSSの基礎として非常に重要な概念です。
簡単な指定方法でHTML全体にスタイルを適用できますが、細かいデザイン調整が難しいため他のセレクタとの組み合わせが必要です。
次は、より柔軟なスタイリングが可能なクラスセレクタについて学びましょう。
クラスセレクタ（.class）とは｜複数要素に共通のスタイル
クラスセレクター は特定のグループにスタイルを適用するためのセレクターです。
複数の異なるHTML要素に同じスタイルを適用したい場合に便利で、ページ全体のデザインを統一しやすくなります。
クラスセレクタの書き方と実例｜.classの使い方
クラスセレクターはCSS内で ドット（.） を使用して任意の文字列を指定します。
例えば「text-red」というクラスセレクタを作るには以下のように記述します。
.text-red { /* text-redという名前のクラスセレクタを定義 */
color: red; /* カラーを赤に変更 */
font-weight: bold; /* 文字を太字に変更 */
}一方HTML側では、class 属性を使用して要素にクラスを付与します。
<p class="text-red">この文章は赤色で太字になります。</p> <p>この文章は通常の色です。</p>
この場合class="text-red" を持つ段落だけが、赤色で太字になります。
クラスセレクタのメリットとデメリット
クラスセレクタには以下のようなメリット・デメリットがあります。
メリット｜再利用性・保守性・可読性が高い
クラスセレクタを使用することには、以下のような利点があります。
- 同じスタイルを複数の異なる要素に適用できる。
- デザインの一貫性を保ちやすい。
- 任意のHTML要素に適用できる。
<h1 class="text-red">見出しも赤色に指定</h1> <p class="text-red">同じクラスセレクタを段落に適用</p>
デメリット｜乱立で命名衝突・肥大化のリスク
一方で、クラスセレクターには以下のようなデメリットもあります。
- 要素に適用できるため、特定の要素だけに適用したい場合には不向き。
- クラスが増えると管理や修正が煩雑になる。
class属性のコツ｜複数指定の考え方
1つの要素に複数のクラスを適用することも可能です。
例えば、以下のように二つのクラスセレクタを含んだCSSコードを見てみます。
.text-red { /* text-redという名前のクラスセレクタを定義 */
color: red; /* カラーを赤に変更 */
}
.large-text { /* large-textという名前のクラスセレクタを定義 */
font-size: 24px; /* フォントサイズを24pxに変更 */
}この二つのクラスを一つのHTML要素に付与するには、スペース区切りで記述します。
<p class="text-red large-text">赤色で大きな文字</p>
この場合text-red と large-text の両方のスタイルが適用され、赤色で大きな文字が表示されます。
クラスセレクタはウェブサイト全体のデザインを統一し、複数の要素に柔軟にスタイルを適用できる強力なツールです。
しかし適切に管理しないと、クラス名の増加によってコードの可読性が低下する可能性があります。
次は、より特定の要素にスタイルを適用できるIDセレクタについて学びましょう。
IDセレクタ（#id）とは｜一意の要素をピンポイント指定
IDセレクタ は特定の1つの要素にスタイルを適用したい場合に使用されます。
他のセレクタと異なり、IDはページ内で一意である（ページ内に一つしかない）必要があり、同じIDを複数の要素に使用することは推奨されません。
IDセレクタの使い方とサンプルコード｜#idの使い方
IDセレクタはCSS内で #（シャープ記号） を使用して指定します。
セレクタ自体の名前はクラスセレクタと同様、任意に決めることができます。
例えば「main-title」というIDセレクタの記述例を見てみましょう。
#main-title { /* main-titleという名前のIDセレクタを定義 */
color: blue; /* カラーを青に変更 */
text-align: center; /* テキストをセンター揃えに変更 */
font-size: 32px; /* フォントサイズを32pxに変更 */
}HTML側では、id 属性を使用して要素にIDを付与します。
<h1 id="main-title">ウェブデザインの基本</h1> <p>これは通常の段落です。</p>
この場合id="main-title" を持つ<h1>要素だけに、青色で中央揃え、フォントサイズ32pxのスタイルが適用されます。
IDセレクタのメリットとデメリット
IDセレクタには以下のようなメリット・デメリットがあります。
メリット｜特定の要素をピンポイントで装飾
IDセレクタを使用することには、以下のような利点があります。
- 特定の要素のスタイル指定に適している。
- クラスセレクタや要素セレクタよりも優先度が高く、確実に適用される。
- JavaScriptで特定の要素を操作する際に使用できる。
デメリット｜再利用不可かつ優先度が高すぎる
一方でIDセレクタには以下のデメリットもあります。
- ページ全体のスタイル適用には不向き。
- 使いすぎると管理が複雑になり、メンテナンスが困難になる。
- 優先度が高く、スタイルの上書きが難しくなる場合がある。
以下のコードの場合、id="main-title" を持つ <h1> 要素の色は、タグ指定の赤ではなくID指定の青が適用されます。
#main-title { /* IDセレクタの定義 */
color: blue;
}
h1 { /* 要素セレクタの定義 */
color: red;
}クラスとIDの使い分け｜比較表（再利用性・詳細度・可読性）
IDセレクタとクラスセレクタの違いをまとめると、以下のようになります。
| 比較項目 | IDセレクタ | クラスセレクタ |
|---|---|---|
| 記述方法 | #id-name | .class-name |
| 適用対象 | 1つの要素のみ | 複数の要素 |
| 再利用性 | 低い | 高い |
| 優先度 | 高い | 低め |
IDセレクタは特定の要素をピンポイントで指定できますが、再利用性が低いため汎用的なスタイリングにはクラスセレクタの方が使いやすいです。
適切な場面でIDセレクタを使用し、効率的なスタイル設計を行いましょう。
疑似クラスとは｜状態に応じてスタイルを切り替える
疑似クラス は特定の状態や条件に基づいて要素にスタイルを適用するセレクタです。
例えばマウスカーソルが要素に乗ったときや、最初の要素だけにスタイルを適用したい場合などに使用します。
疑似クラスは通常のセレクタに コロン（:） を付けることで指定します。
疑似クラスの書き方と基本例｜:hoverなどの状態指定
疑似クラスを使用することで、特定の状況に応じたスタイルを設定できます。
例えばリンク要素に対して「ホバー時に色を変更する」場合、以下のように記述します。
a:hover { /* <a>タグに:hoverを適用した要素セレクタ */
color: red; /* カラーを赤に変更 */
text-decoration: underline; /* テキストに下線を追加 */
}このCSSコードを読み込むと、HTMLコードの全ての<a>タグに適用されます。
この場合、リンクにマウスカーソルを合わせると文字色が赤くなり、下線が表示されます。
よく使う疑似クラス｜:hover／:first-child／:nth-child
疑似クラスにはさまざまな種類がありますが、ここではよく使用される代表的なものを紹介します。
:hover（ホバー）
要素にマウスが乗ったときに適用されるスタイル。
button:hover { /* <button>タグに:hoverを適用した要素セレクタ */
background-color: #007BFF;
color: white;
}:first-child（最初の子要素）
親要素内の最初の子要素に対してスタイルを適用します。
p:first-child { /* <a>タグに:first-childを適用した要素セレクタ */
font-weight: bold;
}このCSSコードを読み込むと、HTMLコード内に複数の段落があっても、最初の<p>要素だけが太字になります。
:last-child（最後の子要素）
親要素内の最後の子要素に適用されるスタイル。
li:last-child { /* <li>タグに:last-childを適用した要素セレクタ */
color: green;
}HTMLのリストにこのCSSコードを読み込むと、最後のリストアイテムのみ緑色になります。
疑似クラスのメリットとデメリット
疑似クラスには以下のようなメリット・デメリットがあります。
メリット｜ユーザーの操作に応じた表現が可能
疑似クラスを使用することで、以下のような利点があります。
- ユーザーの操作に応じたスタイル変更が可能。
- JavaScriptなしで動的なデザインを実現できる。
デメリット｜互換性や指定の複雑化に注意
一方で、疑似クラスには以下のような注意点があります。
- 動作がブラウザ依存になる場合がある（古いブラウザでは動かない場合がある）
- 複雑な条件指定はできない
まとめ｜4種類のセレクタを目的に合わせて使い分けよう
この記事では、CSSの4種類の基本的なセレクタについて学習しました。
それぞれのセレクタには異なる特徴があり、適切に使い分けることで、効率的にウェブページのスタイルを管理することができます。
| セレクタの種類 | 記述方法 | 適用範囲 | 主な用途 |
|---|---|---|---|
| 要素セレクタ | p {} | 指定したHTMLタグすべて | 基本的なスタイル設定に使用 |
| クラスセレクタ | .classname {} | クラスが適用されたすべての要素 | 再利用可能なスタイル適用 |
| IDセレクタ | #idname {} | ページ内の1つの要素 | 一意のスタイル適用 （JavaScript連携にも便利） |
| 疑似クラス | a:hover {} | 特定の状態の要素 | ユーザーの操作に応じたデザイン |
これでCSSの基本的なセレクタについての学習が完了しました。ここで学んだ内容を活かして、次のステップに進んでいきましょう。
次のレッスンでは、CSSのボックスモデル について学習し、ウェブページのレイアウトをより深く理解していきます。
これからも楽しんで学習を続けてください！
練習問題｜セレクタを使い分けよう
今回学習した内容を復習する練習問題に挑戦しましょう。
問題｜要素・クラス・ID・ホバーを指定するスタイルシート
VSCで「training2-4.html」と「training2-4.css」のふたつのファイルを作って保存してください。
training2-4.htmlには次のHTMLコードコピーして修正せずに使用、training2-4.cssにコードを書いて読み込んで、以下の条件を満たすようにスタイリングしてください。
- 要素セレクタを使用し、
<h1>要素の文字色を青色にする。 descriptionクラスを持つ段落のフォントサイズを16px、行間を1.5にする。id="highlight"を持つ段落の背景色を黄色にし、文字を太字にする。- ボタンにマウスを乗せたとき、背景色を緑色にする。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSSセレクタの復習</title>
<link rel="stylesheet" href="training2-4.css">
</head>
<body>
<h1>ウェブデザインの基本</h1>
<p class="description">これは段落です。</p>
<p class="description">これも段落です。</p>
<p id="highlight">これは特別な段落です。</p>
<button class="btn">クリック</button>
</body>
</html>この問題の解答例
模範解答は以下の通りです。
- 正解コード
-
/* 1) 要素セレクタ：h1 の文字色を青に */ h1 { color: blue; } /* 2) クラスセレクタ：.description の文字サイズと行間 */ .description { font-size: 16px; line-height: 1.5; } /* 3) IDセレクタ：#highlight の背景を黄、文字を太字に */ #highlight { background-color: yellow; font-weight: bold; } /* 4) 疑似クラス：ボタンにホバーしたら背景を緑に */ button:hover { background-color: green; }
<<前のページ
記事一覧
次のページ>>
初めてのWebサイトを作ろう2-4
このサイトの Lesson1-1（HTML学習の入り口） かLesson2-1（CSS学習の入り口）から順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。
サイトのタイトルは「自分で作る！HTML＆CSSの学習サイト」
この「初心者のためのプログラミングテキスト＆問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。
- Webサイト制作に挑戦する人はここをクリック！
-
自分だけのWebサイト制作にはベースとなる基本セットが必要になります。
まだ入手していない人はLesson1-1かLesson2-1のページ下部からダウンロードして下さい。
既に入手済みの場合はこのLessonのまとめノートと練習問題の解答を、MyWebsiteフォルダに追加しましょう。
練習問題の解答を保存しよう
練習問題2-4で作成した２つのファイルを学習フォルダの中に保存しましょう。
- training2-4.html ⇒ Lesson2フォルダに保存
- training2-4.css ⇒ Lesson2フォルダの中のstyleフォルダに保存
トップページからリンクで飛べるようになりますので確認しましょう。
今回のまとめノートを作成・保存しよう
下記のHTMLコードは、このLesson2-4で紹介した内容を端的にまとめてブラウザ表示するためのコードです。
これをコピーして「MyWebsite2-4.html」という名前で保存し、「lesson2（学習フォルダ）」の中に保存してください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lesson2-4</title> <link rel="stylesheet" href="style/styles-lesson2.css"> </head> <body> <h1>Lesson2-4：４種類のセレクタを使いこなそう</h1> <div class="container"> <h2>目的・要点</h2> <p> CSSの「セレクタ」は、どのHTML要素にスタイルを適用するかを決定する重要な要素です。 適切なセレクタを使い分けることで、効率的に一貫したデザインを適用し、 メンテナンスしやすいスタイルシートを作成できます。 </p> <h2>本レッスンの到達目標</h2> <p> CSSの4種類の基本的なセレクタ（要素セレクタ、クラスセレクタ、IDセレクタ、疑似クラス）を 理解し、それぞれの適用方法を実践できるようになることです。 </p> <h2>このレッスンで学習した内容</h2> <h3>要素セレクタ</h3> <ul> <li>HTMLのタグ名（例：p や h1）を指定して、同じ種類の要素すべてにスタイルを適用</li> <li>例：<code>p { color: blue; }</code>（すべての <code><p></code> 要素に青色を適用）</li> </ul> <h3>クラスセレクタ</h3> <ul> <li>複数の要素に共通のスタイルを適用するためのセレクタ（.クラス名）</li> <li>例：<code>.text-red { color: red; }</code>（class="text-red" を持つ要素に適用）</li> </ul> <h3>IDセレクタ</h3> <ul> <li>特定の1つの要素にスタイルを適用するためのセレクタ（#ID名）</li> <li>例：<code>#main-title { font-size: 32px; }</code>（id="main-title" の要素に適用）</li> </ul> <h3>疑似クラス</h3> <ul> <li>特定の状態（ホバー、最初の要素など）に応じて適用するセレクタ</li> <li>例：<code>a:hover { color: red; }</code>（リンクにマウスが乗ったときに赤色に変更）</li> </ul> <h2>CSSのセレクタの優先順位</h2> <p>インラインスタイル > IDセレクタ > クラスセレクタ > 要素セレクタ の順で適用</p> <h2>トピック・豆知識</h2> <h3>クラスとIDの使い分け</h3> <ul> <li>クラスセレクタは再利用性が高く、複数の要素に適用できる</li> <li>IDセレクタは特定の1つの要素だけに適用し、他の要素には適用できない</li> <li>同じ要素に複数のクラスを適用することも可能（例：<code><p class="text-red large-text"></code>）</li> </ul> <h3>疑似クラスの活用</h3> <ul> <li><code>:hover</code>（マウスが乗ったとき）、<code>:first-child</code>（最初の子要素）など、特定の状態を指定できる</li> </ul> <h2>まとめ</h2> <p> 本レッスンでは、CSSの4種類の基本的なセレクタを学び、それぞれの特徴と適用方法を習得しました。 </p> <p> 適切なセレクタを使い分けることで、効率的なスタイル管理が可能になります。 </p> <p><a href="../MyWebsite.html">トップページへ戻る</a></p> </div> <footer> <p>© 初心者のためのプログラミングテキスト＆問題集</p> </footer> </body> </html>これでLesson2-4の作業は完了です。
継続は力なり。次のLessonも、引き続き頑張ってください^^
セレクターの疑問解消｜FAQとよくあるトラブル
初心者がつまずきやすいポイントをFAQとしてまとめ、よくあるトラブルとその解決法をわかりやすく整理しました。
理解を深めたいときや、ふと疑問に感じたときに役立ててください。
FAQ｜CSSセレクターに関するよくある質問
今回の記事に関する「よくある質問」とその解答について、以下の内容を参考にしてください。
- Q1. 要素セレクターとクラスセレクターはどのように使い分けるべきですか？
-
要素セレクターはHTMLのタグ名自体にスタイルを適用したい場合に使いますが、複数の要素に共通のデザインを適用したい場合や、柔軟にデザインを管理したい場合はクラスセレクターの利用が推奨されます。例えば、異なる種類のタグでも同じ見た目にしたいときはクラスセレクターが便利です。
- Q2. IDセレクターはどんな場面で使うのが適切ですか？
-
IDセレクターは一つのページ内で一意の要素にだけスタイルを適用したい場合に使います。たとえば、特定のボタンや特別なセクションだけに特別なスタイルを当てたいときに有効です。ただし、IDはページ内で重複して使わないよう注意しましょう。
- Q3. 疑似クラス（:hoverや:first-childなど）はどんな場面で使うと効果的ですか？
-
疑似クラスは、ユーザーの操作やHTML構造に基づいて特定の状態にスタイルを当てたい場合に便利です。たとえば、:hoverはマウスカーソルを合わせたときにボタンの色を変えるといったインタラクティブな演出に使われます。:first-childや:nth-childは、リストの特定の項目だけスタイルを変えたいときなどに活躍します。
よくあるトラブルと解決法｜４種類のセレクタ編
今回の記事に関する「よくあるトラブル」とその原因、解決法について、以下の内容を参考にしてください。
クラスセレクターでスタイルが反映されない
- トラブルの原因と対処法を見る
-
・トラブルの原因例
class属性のスペルミスや、大文字・小文字の違い- HTML側でクラス名を複数指定する際にスペースが抜けている
- CSSファイル側でクラス名の前にドット（.）がついていない
・トラブルの解決法
HTMLで指定したクラス名とCSS側のクラス名が完全に一致しているか、一文字ずつ丁寧に見比べてください。また、HTMLの
class属性で複数のクラス名を指定している場合は、スペースが正しく入っているか確認しましょう。さらに、CSSではクラスセレクターの前に必ずドット（.）がついているか確認してください。
IDセレクターを使ってもスタイルが適用されない
- トラブルの原因と対処法を見る
-
・トラブルの原因例
- HTML要素の
id属性値と、CSSで指定したID名が異なっている - 同じページ内で同じIDが複数の要素に使われている
- CSS側でIDセレクターの前に「#」が抜けている
・トラブルの解決法
HTML側で指定した
idの値とCSSのIDセレクター名が一文字も違わず合っているかを確認しましょう。同じページ内で同じIDが複数回使われていないか探し、もし重複があればIDをユニークに変更してください。また、CSSでIDセレクターを指定する際に「#」が抜けていないかも確認してください。 - HTML要素の
疑似クラス（:hoverや:nth-childなど）が期待通りに動作しない
- トラブルの原因と対処法を見る
-
・トラブルの原因例
- セレクターの指定が正しくない（例：.btn:hoverのつもりが.btn :hoverになっている）
- 疑似クラスを適用したい要素に正しいクラスやIDがついていない
- 他のCSSルールで上書きされている
・トラブルの解決法
CSSで疑似クラスを指定している部分（:hoverや:nth-childなど）の書き方に誤りがないか、コロンの位置やスペースの有無など細かい部分まで一つずつ確認してください。疑似クラスを適用したい要素に意図したクラス名やIDがついているか探しましょう。また、他のセレクターによってスタイルが上書きされていないかも併せてCSS全体をチェックしてください。
<<前のページ
記事一覧
次のページ>>