一つ前の章ではテキストスタイルの本校方法について学習しました。
今回は４種類のセレクタについて見ていきましょう。
Lesson2-1：CSS学習の入り口｜文字に色を付けよう
Lesson2-2：CSSを読み込む３つの方法
Lesson2-3：テキストスタイルを変更しよう
Lesson2-4：４種類のセレクタを使いこなそう ◁今回はココ
Lesson2-5：ボックスモデルを理解しよう
Lesson2-6：ボックススタイルを変更しよう
Lesson2-7：継承とカスケードを理解しよう
ウェブページのデザインやレイアウトを指定するために不可欠なCSS。
その中でも「セレクタ」は、どの要素にスタイルを適用するのかを決定する非常に重要な役割を担っています。
セレクタを適切に使うことで効率的に一貫したデザインを実現し、メンテナンスしやすいスタイルシートを作成できます。
この記事では、CSSの４つの基本的なセレクタである以下の項目について詳しく解説します。
- 要素セレクタ：HTMLタグそのものをターゲットにするセレクタ
- クラスセレクタ：特定のグループにスタイルを適用するためのセレクタ
- IDセレクタ：一意の要素にスタイルを適用するためのセレクタ
- 疑似クラス：特定の状態（ホバー、最初の要素など）に応じて適用するセレクタ
これらのセレクタを理解し、適切に使い分けることで、CSSの柔軟性を最大限に活かすことができます。
それではまず「セレクタとは何か」を復習しながら、各種類のセレクタについて学んでいきましょう。
<<前のページ
記事一覧
次のページ>>
セレクタとは？基本の役割と使い方をおさらい（Lesson2-1の復習）
CSS（Cascading Style Sheets）はHTML要素にスタイルを適用するための言語です。
基本的なCSSの構造は、セレクタ（selector）、プロパティ（property）、値（value） の３つの要素で構成されています。
CSSの書き方 ： セレクター { プロパティ ： 値 ； }
例えば、以下のようなコードを見てみましょう。
p {
color: blue; /* プロパティ：color, 値：blue */
font-size: 16px; /* プロパティ：font-size, 値：16px */
}このコードの意味は「すべての <p> 要素の文字色を青にし、フォントサイズを16ピクセルに設定する」というものです。
CSSセレクタが果たす役割とは？初心者向け解説
セレクタとは、どのHTML要素に対してスタイルを適用するのかを指定するものです。
例えば上記の例では p というセレクタを使って、<p> タグにスタイルを適用しています。
セレクタの基本的な書き方
CSSの基本的なルールは次の通りです。
セレクタ {
プロパティ: 値;
}例えば、次のように書くことで、異なる要素に異なるスタイルを適用できます。
h1 {
color: red;
}
p {
font-size: 14px;
}この場合h1 要素は赤色になり、p 要素のフォントサイズは14ピクセルになります。
CSSの基本4種類のセレクタを紹介
CSSではさまざまな方法でHTML要素をターゲットにできます。
今回の記事では、次の４種類の基本的なセレクタについて学びます。
- 要素セレクタ – HTMLのタグ名を直接指定する
- クラスセレクタ – 特定のグループの要素にスタイルを適用
- IDセレクタ – 特定の要素に対してスタイルを適用
- 疑似クラス – 特定の状態や条件に応じてスタイルを適用
これらのセレクタを適切に理解し、使い分けることで、ウェブページのスタイルをより自由にコントロールできるようになります。
要素セレクタとは？HTMLタグを直接操作する基本テクニック
HTMLの要素を直接指定してスタイルを適用する最も基本的なセレクタが 要素セレクタ です。
要素セレクタは、HTMLタグの名前をそのまま指定することで、同じ種類のすべての要素にスタイルを適用できます。
要素セレクタの使い方と実例
要素セレクタは、次のように記述します。
h1 {
color: red;
font-size: 24px;
}このCSSはすべての<h1>要素の文字色を赤、フォントサイズを24ピクセルに設定します。
要素セレクタの利点｜簡単で汎用性が高い
要素セレクタを使用することで、簡単に複数の同種の要素に対して統一したスタイルを適用できます。
特に、基本的なスタイルを設定する際に便利です。
- HTMLタグ名を直接指定するため、簡単でわかりやすい
- 同じ要素に一括でスタイルを適用できる
要素セレクタの弱点｜汎用性が高い分、詳細な指定が難しい
しかし、要素セレクタにはいくつかのデメリットもあります。
- すべての同じ要素に適用されるため、細かい制御が難しい
- クラスやIDの使用と比べて、スタイルの上書きがしにくい
- ページ全体のデザインを統一する場合、他のセレクタとの併用が必要
例えば、異なる見た目にしたい<h2>タグがある場合、要素セレクタだけでは対応が難しく、クラスやIDを組み合わせる必要があります。
要素セレクタのポイントまとめ
要素セレクタはCSSの基礎として非常に重要な概念です。
簡単な指定方法でHTML全体にスタイルを適用できますが、細かいデザイン調整が難しいため他のセレクタとの組み合わせが必要です。
次は、より柔軟なスタイリングが可能なクラスセレクタについて学びましょう。
クラスセレクタとは？CSSで複数要素をまとめて装飾
クラスセレクタ は特定のグループにスタイルを適用するためのセレクタです。
複数の異なる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属性の活用術
HTML要素には複数のクラスを適用することも可能です。
例えば、以下のように二つのクラスセレクタを含んだCSSコードを見てみます。
.text-red {
color: red;
}
.large-text {
font-size: 24px;
}この二つのクラスを一つのHTML要素に付与するには、スペース区切りで記述します。
<p class="text-red large-text">赤色で大きな文字</p>
この場合text-red と large-text の両方のスタイルが適用され、赤色で大きな文字が表示されます。
クラスセレクタの使い方まとめ
クラスセレクタはウェブサイト全体のデザインを統一し、複数の要素に柔軟にスタイルを適用できる強力なツールです。
しかし適切に管理しないと、クラス名の増加によってコードの可読性が低下する可能性があります。
次は、より特定の要素にスタイルを適用できるIDセレクタについて学びましょう。
IDセレクタとは？唯一無二のスタイリングを実現
IDセレクタ は特定の1つの要素にスタイルを適用したい場合に使用されます。
他のセレクタと異なり、IDはページ内で一意である（ページ内に一つしかない）必要があり、同じIDを複数の要素に使用することは推奨されません。
IDセレクタの使い方とサンプルコード（#idの使い方）
IDセレクタはCSS内で #（シャープ記号） を使用して指定します。
セレクタ自体の名前はクラスセレクタと同様、任意に決めることができます。
例えば「main-title」というIDセレクタの記述例を見てみましょう。
#main-title {
color: blue;
text-align: center;
font-size: 32px;
}HTML側では、id 属性を使用して要素にIDを付与します。
<h1 id="main-title">ウェブデザインの基本</h1> <p>これは通常の段落です。</p>
この場合id="main-title" を持つ<h1>要素だけに、青色で中央揃え、フォントサイズ32pxのスタイルが適用されます。
IDセレクタの利点｜特定の要素をピンポイントで装飾
IDセレクタを使用することには、以下のような利点があります。
- 特定の要素のスタイル指定に適している。
- クラスセレクタや要素セレクタよりも優先度が高く、確実に適用される。
- JavaScriptで特定の要素を操作する際に使用できる。
IDセレクタの欠点｜再利用不可で優先度が高すぎる
一方でIDセレクタには以下のデメリットもあります。
- ページ全体のスタイル適用には不向き。
- 使いすぎると管理が複雑になり、メンテナンスが困難になる。
- 優先度が高く、スタイルの上書きが難しくなる場合がある。
以下のコードの場合、id="main-title" を持つ <h1> 要素の色は、タグ指定の赤ではなくID指定の青が適用されます。
#main-title {
color: blue;
}
h1 {
color: red;
}クラスとIDはどう違う？使い分けを徹底解説
IDセレクタとクラスセレクタの違いをまとめると、以下のようになります。
| 比較項目 | IDセレクタ | クラスセレクタ |
|---|---|---|
| 記述方法 | #id-name | .class-name |
| 適用対象 | 1つの要素のみ | 複数の要素 |
| 再利用性 | 低い | 高い |
| 優先度 | 高い | 低め |
IDセレクタのポイントまとめ
IDセレクタは特定の要素をピンポイントで指定できますが、再利用性が低いため汎用的なスタイリングにはクラスセレクタの方が使いやすいです。
適切な場面でIDセレクタを使用し、効率的なスタイル設計を行いましょう。
次は、状態や特定の条件に応じてスタイルを適用できる疑似クラスについて学びます。
疑似クラスとは？要素の特定状態にスタイルを適用
疑似クラス は特定の状態や条件に基づいて要素にスタイルを適用するセレクタです。
例えばマウスカーソルが要素に乗ったときや、最初の要素だけにスタイルを適用したい場合などに使用します。
疑似クラスは通常のセレクタに コロン（:） を付けることで指定します。
疑似クラスの書き方と基本例（:hover など）
疑似クラスを使用することで、特定の状況に応じたスタイルを設定できます。
例えばリンク要素に対して「ホバー時に色を変更する」場合、以下のように記述します。
a:hover {
color: red;
text-decoration: underline;
}このCSSコードを読み込むと、HTMLコードの全ての<a>タグに適用されます。
この場合、リンクにマウスカーソルを合わせると文字色が赤くなり、下線が表示されます。
よく使う疑似クラス一覧と使い方例（:hover, :first-child, :nth-child）
疑似クラスにはさまざまな種類がありますが、ここではよく使用される代表的なものを紹介します。
1. :hover（ホバー）
要素にマウスが乗ったときに適用されるスタイル。
button:hover {
background-color: #007BFF;
color: white;
}2. :first-child（最初の子要素）
親要素内の最初の子要素に対してスタイルを適用します。
p:first-child {
font-weight: bold;
}このCSSコードを読み込むと、HTMLコード内に複数の段落があっても、最初の<p>要素だけが太字になります。
3. :last-child（最後の子要素）
親要素内の最後の子要素に適用されるスタイル。
li:last-child {
color: green;
}HTMLのリストにこのCSSコードを読み込むと、最後のリストアイテムのみ緑色になります。
疑似クラスの利点｜ユーザーの操作に応じた表現が可能
疑似クラスを使用することで、以下のような利点があります。
- ユーザーの操作に応じたスタイル変更が可能。
- JavaScriptなしで動的なデザインを実現できる。
疑似クラスの欠点｜ブラウザ互換性や指定の複雑さ
一方で、疑似クラスには以下のような注意点があります。
- 動作がブラウザ依存になる場合がある（古いブラウザでは動かない場合がある）
- 複雑な条件指定はできない
疑似クラスの使い方まとめ
疑似クラスを使用することで、ユーザーの操作や要素の特定の状態に応じたスタイルを簡単に適用できます。
特に:hover などはインタラクティブなUIを実現する際に非常に役立ちます。
まとめ
この記事では、CSSの4種類の基本的なセレクタについて学習しました。
それぞれのセレクタには異なる特徴があり、適切に使い分けることで、効率的にウェブページのスタイルを管理することができます。
| セレクタの種類 | 記述方法 | 適用範囲 | 主な用途 |
|---|---|---|---|
| 要素セレクタ | p {} | 指定したHTMLタグすべて | 基本的なスタイル設定に使用 |
| クラスセレクタ | .classname {} | クラスが適用されたすべての要素 | 再利用可能なスタイル適用 |
| IDセレクタ | #idname {} | ページ内の1つの要素 | 一意のスタイル適用（JavaScript連携にも便利） |
| 疑似クラス | a:hover {} | 特定の状態の要素 | ユーザーの操作に応じたデザイン |
要素・クラス・ID・疑似クラスの使いどころを比較
これらのセレクタをどのように使い分けるかは、プロジェクトの規模やデザインの要件によります。
以下の指針を参考にすると良いでしょう。
- 基本的なスタイルは要素セレクタで設定する。
- 複数の要素に適用したい場合はクラスセレクタを使用する。
- 特定の要素をターゲットにしたい場合はIDセレクタを使用する。
- ユーザーの操作や特定の条件に応じたスタイルには疑似クラスを活用する。
セレクタをマスターしたあなたの次のステップ
これでCSSの基本的なセレクタについての学習が完了しました。ここで学んだ内容を活かして、次のステップに進んでいきましょう。
次のレッスンでは、CSSのボックスモデル について学習し、ウェブページのレイアウトをより深く理解していきます。
これからも楽しんで学習を続けてください！
練習問題2-4：セレクタを使い分けよう
VSCで「training2-4.html」と「training2-4.css」のふたつのファイルを作って保存してください。
training2-4.htmlには次のHTMLコードコピーして修正せずに使用、training2-4.cssにコードを書いて読み込んで、以下の条件を満たすようにスタイリングしてください。
<!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="style.css">
</head>
<body>
<h1>ウェブデザインの基本</h1>
<p class="description">これは段落です。</p>
<p class="description">これも段落です。</p>
<p id="highlight">これは特別な段落です。</p>
<button class="btn">クリック</button>
</body>
</html><h1>要素の文字色を 青色 にする。（要素セレクタを使用）descriptionクラス を持つ段落のフォントサイズを 16px、行間を 1.5 にする。（クラスセレクタを使用）id="highlight"を持つ段落の背景色を 黄色 にし、太字にする。（IDセレクタを使用）- ボタンにマウスを乗せたとき、背景色を 緑色 にする。（疑似クラス
:hoverを使用）
初めてのWebサイトを作ろう2-4
このサイトの Lesson1-1（HTML学習の入り口） かLesson2-1（CSS学習の入り口）から順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。
サイトのタイトルは「自分で作る！HTML＆CSSの学習サイト」
この「初心者のためのプログラミングテキスト＆問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。
- Webサイト制作に挑戦する人はここをクリック！
-
自分だけのWebサイト制作にはベースとなる基本セットが必要になります。
まだ入手していない人はLesson1-1かLesson2-1のページ下部からダウンロードして下さい。
Lesson2-4のまとめノートと練習問題を追加しよう
この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｜CSSセレクタに関するよくある質問
- Q1. 「クラスセレクタ」と「IDセレクタ」の違いは何ですか？使い分けのコツを教えてください。
-
クラスセレクタは「.クラス名」で複数の要素に同じスタイルを適用できるのに対し、IDセレクタは「#ID名」で1つの要素だけにスタイルを適用します。
- 複数の要素に同じスタイルを適用する場合は「クラス」
- 1つの特定の要素にだけスタイルを付ける場合は「ID」
- Q2. CSSセレクタは複数組み合わせて使えますか？その書き方は？
-
はい、CSSセレクタは複数組み合わせて使えます。例えば次のような書き方ができます：
p.red { color: red; }これは「
pタグでクラスがredの要素」にだけスタイルを適用します。
- Q3. 「疑似クラス」と「疑似要素」は何が違うのですか？
-
「疑似クラス」は要素の特定の状態（例：ホバー時など）にスタイルを適用するもので、「:hover」「:focus」などが該当します。
一方、「疑似要素」は要素の特定部分にスタイルを適用するもので、「::before」「::after」などが該当します。
「疑似要素」の詳しい使い方はLesson3（CSS応用編）で学びますので、続けて学習することをおすすめします。
- Q4. 「要素セレクタ」で全てのHTML要素にまとめてスタイルを適用する方法はありますか？
-
すべての要素を一括で指定する場合は「ユニバーサルセレクタ（
*）」を使います：* { margin: 0; padding: 0; }これは全ての要素に対してスタイルを適用しますが、一括リセットは慎重に使う必要があるため、詳細な調整はLesson2-5（ボックスモデル編）やLesson2-6（ボックススタイル編）の知識と組み合わせるのがおすすめです。
- Q5. CSSの「優先順位（Specificity）」はどのように決まりますか？
-
CSSの優先順位は、以下の順で決まります：
- インラインスタイル (
style="...") - IDセレクタ (
#id) - クラスセレクタ・属性セレクタ・疑似クラス (
.class,:hover) - 要素セレクタ (
p,h1) - ユニバーサルセレクタ (
*)
この順序は非常に重要ですので、確実に理解しておきましょう。
- インラインスタイル (
この記事への質問・コメント
この記事を作成するにあたりAIの力を借りています。
問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。