【CSS】レッスン2-04:4種類のセレクタを使いこなそう

一つ前の章ではテキストスタイルの本校方法について学習しました。

今回は4種類のセレクタについて見ていきましょう。

Lesson2-1:CSS学習の入り口|文字に色を付けよう
Lesson2-2:CSSを読み込む3つの方法
Lesson2-3:テキストスタイルを変更しよう
Lesson2-4:4種類のセレクタを使いこなそう ◁今回はココ
Lesson2-5:ボックスモデルを理解しよう
Lesson2-6:ボックススタイルを変更しよう
Lesson2-7:継承とカスケードを理解しよう

ウェブページのデザインやレイアウトを指定するために不可欠なCSS(Cascading Style Sheets)。

その中でも「セレクタ」は、どの要素にスタイルを適用するのかを決定する非常に重要な役割を担っています。

セレクタを適切に使うことで効率的に一貫したデザインを実現し、メンテナンスしやすいスタイルシートを作成できます。

この記事では、CSSの4つの基本的なセレクタである以下の項目について詳しく解説します。

CSSの4つの基本的なセレクタ
  • 要素セレクタ:HTMLタグそのものをターゲットにするセレクタ
  • クラスセレクタ:特定のグループにスタイルを適用するためのセレクタ
  • IDセレクタ:一意の要素にスタイルを適用するためのセレクタ
  • 疑似クラス:特定の状態(ホバー、最初の要素など)に応じて適用するセレクタ

これらのセレクタを理解し、適切に使い分けることで、CSSの柔軟性を最大限に活かすことができます。

それではまず「セレクタとは何か」を復習しながら、各種類のセレクタについて学んでいきましょう。

<<前のページ HTML/CSSの記事一覧 次のページ>>

セレクタとは?(Lesson2-1の復習)

CSS(Cascading Style Sheets)はHTML要素にスタイルを適用するための言語です。

基本的なCSSの構造は、セレクタ(selector)、プロパティ(property)、値(value) の3つの要素で構成されています。

例えば、以下のようなコードを見てみましょう。

p {
  color: blue; /* プロパティ:color, 値:blue */
  font-size: 16px; /* プロパティ:font-size, 値:16px */
}

このコードの意味は「すべての <p> 要素の文字色を青にし、フォントサイズを16ピクセルに設定する」というものです。

セレクタの役割

セレクタとはどのHTML要素に対してCSSのスタイルを適用するのかを指定するためのものです。

例えば上記の例では p というセレクタを使って、<p> タグにスタイルを適用しています。

セレクタの基本的な書き方

CSSの基本的なルールは次の通りです。

セレクタ {
  プロパティ: 値;
}

例えば、次のように書くことで、異なる要素に異なるスタイルを適用できます。

h1 {
  color: red;
}

p {
  font-size: 14px;
}

この場合h1 要素は赤色になり、p 要素のフォントサイズは14ピクセルになります。

どんなセレクタがあるの?

CSSではさまざまな方法でHTML要素をターゲットにできます。

今回の記事では、次の4種類の基本的なセレクタについて学びます。

  1. 要素セレクタ – HTMLのタグ名を直接指定する
  2. クラスセレクタ – 特定のグループの要素にスタイルを適用
  3. IDセレクタ – 一意の要素に対してスタイルを適用
  4. 疑似クラス – 特定の状態や条件に応じてスタイルを適用

これらのセレクタを適切に理解し、使い分けることで、ウェブページのスタイルをより自由にコントロールできるようになります。

要素セレクタ

HTMLの要素を直接指定してスタイルを適用する最も基本的なセレクタが要素セレクタです。

要素セレクタは、HTMLタグの名前をそのまま指定することで、同じ種類のすべての要素にスタイルを適用できます。

要素セレクタの基本的な使い方

要素セレクタは、次のように記述します。

h1 {
  color: red;
  font-size: 24px;
}

このCSSはすべての<h1>要素の文字色を赤、フォントサイズを24ピクセルに設定します。

要素セレクタのメリット

要素セレクタを使用することで、簡単に複数の同種の要素に対して統一したスタイルを適用できます。

特に、基本的なスタイルを設定する際に便利です。

  • HTMLタグ名を直接指定するため、簡単でわかりやすい
  • 同じ要素に一括でスタイルを適用できる

要素セレクタのデメリット

しかし、要素セレクタにはいくつかのデメリットもあります。

  • すべての同じ要素に適用されるため、細かい制御が難しい
  • クラスやIDの使用と比べて、スタイルの上書きが難しくなる
  • ページ全体のデザインを統一する場合、他のセレクタとの併用が必要

例えば、異なる見た目にしたい<h1>タグがある場合、要素セレクタだけでは対応が難しく、クラスやIDを組み合わせる必要があります。

まとめ

要素セレクタはCSSの基礎として非常に重要な概念です。

簡単な指定方法でHTML全体にスタイルを適用できますが、細かいデザイン調整が難しいため他のセレクタとの組み合わせが必要です。

次は、より柔軟なスタイリングが可能なクラスセレクタについて学びましょう。

クラスセレクタ

クラスセレクタは特定のグループにスタイルを適用するためのセレクタです。

同じスタイルを複数の異なるHTML要素に適用したい場合に便利で、ページ全体のデザインを統一しやすくなります。

クラスセレクタの基本的な使い方

クラスセレクタはCSS内で ドット(. を使用して任意の文字列を指定します。

例えば「text-red」というクラスセレクタを指定するには以下のように記述します。

.text-red {
  color: red;
  font-weight: bold;
}

一方HTML側では、class 属性を使用して要素にクラスを付与します。

<p class="text-red">この文章は赤色で太字になります。</p>
<p>この文章は通常の色です。</p>

この場合class="text-red" を持つ段落だけが、赤色で太字になります。

以下のHTMLコードにCSSを追加し、クラスセレクタを使って<p>タグの文字色を 青色 に変更してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>クラスセレクタ練習</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>これは練習問題の段落です。</p>
</body>
</html>

クラスセレクタのメリット

クラスセレクタを使用することには、以下のような利点があります。

  • 再利用性が高い:同じスタイルを複数の異なる要素に適用できる。
  • デザインの一貫性を保ちやすい:ページ全体の統一感を出すために役立つ。
  • 要素の種類に依存しない:任意のHTML要素に適用できる。
<h1 class="text-red">見出しも赤色に</h1>
<p class="text-red">段落も赤色に</p>

クラスセレクタのデメリット

一方で、クラスセレクタには以下のようなデメリットもあります。

  • 一意性が保証されない:クラスは複数の要素に適用できるため、特定の要素だけに適用したい場合には不向き。
  • 管理が複雑になりやすい:クラス名が増えると、管理や修正が煩雑になる可能性がある。

クラスの複数適用

HTML要素には複数のクラスを適用することも可能です。

例えば、以下のように二つのクラスセレクタを含んだCSSコードを見てみます。

.text-red {
  color: red;
}

.large-text {
  font-size: 24px;
}

この二つのクラスを一つのHTML要素に付与するには、スペース区切りで記述します。

<p class="text-red large-text">赤色で大きな文字</p>

この場合text-redlarge-text の両方のスタイルが適用され、赤色で大きな文字が表示されます。

クラスセレクタの優先順位

CSSではより詳細なセレクタが優先されます。

同じ要素に複数のスタイルが適用された場合、後から指定されたルールや、より具体的なセレクタ(例:IDセレクタ)が優先される点に注意が必要です。

まとめ

クラスセレクタはウェブサイト全体のデザインを統一し、複数の要素に柔軟にスタイルを適用できる強力なツールです。

しかし適切に管理しないと、クラス名の増加によってコードの可読性が低下する可能性があります。

次は、より特定の要素にスタイルを適用できるIDセレクタについて学びましょう。

IDセレクタ

IDセレクタは特定の1つの要素にスタイルを適用したい場合に使用されます。

他のセレクタと異なり、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のスタイルが適用されます。

以下のHTMLコードにCSSを追加し、IDセレクタを使って h1 要素の文字色を 赤色 に変更してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IDセレクタ練習</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>IDセレクタを使ってみよう!</h1>
</body>
</html>

IDセレクタのメリット

IDセレクタを使用することには、以下のような利点があります。

  • 一意性の保証:ページ内で一度しか使用できないため、特定の要素のスタイル指定に適している。
  • 優先度が高い:クラスセレクタや要素セレクタよりも高い優先度を持ち、確実に適用される。
  • JavaScriptとの連携が容易:JavaScriptで特定の要素を操作する際、IDを利用すると簡単に要素を取得できる。

IDセレクタのデメリット

一方でIDセレクタには以下のデメリットもあります。

  • 再利用性が低い:同じIDを複数の要素に使用できないため、ページ全体のスタイル適用には不向き。
  • 変更が難しい:HTMLとCSSの管理が複雑になり、IDの使いすぎによってメンテナンスが困難になることがある。
  • 優先度の問題:他のセレクタと組み合わせると、スタイルの上書きが難しくなる場合がある。

以下のコードの場合、id="main-title" を持つ <h1> 要素の色は、タグ指定の赤ではなくID指定の青が適用されます。

#main-title {
  color: blue;
}

h1 {
  color: red;
}

IDセレクタとクラスセレクタの違い

IDセレクタとクラスセレクタの違いをまとめると、以下のようになります。

比較項目 IDセレクタ クラスセレクタ
記述方法 #id-name .class-name
適用対象 1つの要素のみ 複数の要素
再利用性 低い 高い
優先度 高い 低め

まとめ

IDセレクタは特定の要素をピンポイントで指定する際に便利ですが、再利用性が低いため、汎用的なスタイリングにはクラスセレクタの使用が推奨されます。

適切な場面でIDセレクタを使用し、効率的なスタイル設計を行いましょう。

次は、状態や特定の条件に応じてスタイルを適用できる疑似クラスについて学びます。

疑似クラス

疑似クラスは特定の状態や条件に基づいて要素にスタイルを適用するセレクタです。

例えばマウスカーソルが要素に乗ったときや、最初の要素だけにスタイルを適用したい場合などに使用します。

疑似クラスは通常のセレクタに コロン(: を付けることで指定します。

疑似クラスの基本的な使い方

疑似クラスを使用することで、特定の状況に応じたスタイルを設定できます。

例えばリンク要素に対して「ホバー時に色を変更する」場合、以下のように記述します。

a:hover {
  color: red;
  text-decoration: underline;
}

このCSSコードを読み込むと、HTMLコードの全ての<a>タグに適用されます。

この場合、リンクにマウスカーソルを合わせると文字色が赤くなり、下線が表示されます。

代表的な疑似クラス

疑似クラスにはさまざまな種類がありますが、ここではよく使用される代表的なものを紹介します。

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コードを読み込むと、最後のリストアイテムのみ緑色になります。

以下のHTMLコードで、疑似クラス :first-child を使って、最初のリストアイテム(li)の文字色を 赤色 に変更してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>リストのスタイル</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <ul>
        <li>最初のアイテム</li>
        <li>2番目のアイテム</li>
        <li>3番目のアイテム</li>
    </ul>
</body>
</html>

疑似クラスのメリット

疑似クラスを使用することで、以下のような利点があります。

  • インタラクティブなデザインが簡単に実装できる:ユーザーの操作に応じたスタイル変更が可能。
  • HTML構造を変更せずに、特定の要素にスタイルを適用できる:JavaScriptなしで動的なデザインを実現できる。
  • 特定の要素だけを簡単にターゲットにできる:例えば、リストの最初や最後の要素にだけスタイルを適用可能。

疑似クラスのデメリット

一方で、疑似クラスには以下のような注意点があります。

  • 動作がブラウザ依存になる場合がある:一部の疑似クラス(例::focus-visible)は古いブラウザではサポートされていない場合がある。
  • 複雑な条件指定には不向き:より高度なインタラクションを求める場合、JavaScriptとの併用が必要になる。

まとめ

疑似クラスを使用することで、ユーザーの操作や要素の特定の状態に応じたスタイルを簡単に適用できます。

特に:hover などはインタラクティブなUIを実現する際に非常に役立ちます。

次は学んだ知識を振り返り、4種類のセレクタの使い分けについて確認しましょう。

まとめ

この記事では、CSSの4種類の基本的なセレクタについて学習しました。

それぞれのセレクタには異なる特徴があり、適切に使い分けることで、効率的にウェブページのスタイルを管理することができます。

セレクタの種類 記述方法 適用範囲 主な用途
要素セレクタ p {} 指定したHTMLタグすべて 基本的なスタイル設定に使用
クラスセレクタ .classname {} クラスが適用されたすべての要素 再利用可能なスタイル適用
IDセレクタ #idname {} ページ内の1つの要素 一意のスタイル適用(JavaScript連携にも便利)
疑似クラス a:hover {} 特定の状態の要素 ユーザーの操作に応じたデザイン

セレクタの使い分け方

これらのセレクタをどのように使い分けるかは、プロジェクトの規模やデザインの要件によります。

以下の指針を参考にすると良いでしょう。

  • 基本的なスタイルは要素セレクタで設定する。
  • 複数の要素に適用したい場合はクラスセレクタを使用する。
  • 特定の要素をターゲットにしたい場合はIDセレクタを使用する。
  • ユーザーの操作や特定の条件に応じたスタイルには疑似クラスを活用する。

お疲れさまでした!

これでCSSの基本的なセレクタについての学習が完了しました。ここで学んだ内容を活かして、次のステップに進んでいきましょう。

次のレッスンでは、CSSのボックスモデルについて学習し、ウェブページのレイアウトをより深く理解していきます。

これからも楽しんで学習を続けてください!

練習問題2-4:セレクタを使い分けよう

VSCで「Lesson2-4.html」と「lesson2-4.css」のふたつのファイルを作って保存してください。

Lesson2-4.htmlには次のHTMLコードコピーして修正せずに使用、lesson2-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学習の入り口) からLesson3-9まで順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。

サイトのタイトルは「HTML/CSSの情報まとめ

この「初心者のためのプログラミングテキスト&問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。

Lesson2-4のまとめノートを作ろう

VSCを使ってlesson2フォルダの中に「MyWebsite2-4.html」というファイルを作り、下記のHTMLコードをコピーして貼り付けて下さい。

まとめノート(Lesson2-4/HTMLコード)
<!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/color.css">
    <link rel="stylesheet" href="style/text-style.css">
    <link rel="stylesheet" href="style/link.css">
</head>
<body>
    <header>
        <h1>Lesson2-4: 4種類のセレクタを使いこなそう</h1>
        <nav>
            <ul>
                <li>Lesson2-3:<a href="MyWebsite2-3.html">テキストスタイルを変更しよう</a></li>
                <li>Lesson2-5:<a href="MyWebSite2-5.html">ボックスモデルを理解しよう</a> </li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>1.セレクタとは?</h2>
            <p>HTML要素にCSSスタイルを適用するための指定方法。</p>
            <p><strong>基本構造</strong>:</p>
            <pre><code>セレクタ {
  プロパティ: 値;
}</code></pre>
            <p>例:</p>
            <pre><code>p {
  color: blue;
  font-size: 16px;
}</code></pre>
        </section>

        <section>
            <h2>2.4種類のセレクタ</h2>
            <h3>1. 要素セレクタ</h3>
            <p>HTMLのタグ名を直接指定してスタイルを適用。</p>
            <p>例:</p>
            <pre><code>h1 {
  color: red;
  font-size: 24px;
}</code></pre>
            <p><strong>特徴:</strong></p>
            <ul>
                <li class="merit">メリット: 同じ種類の要素すべてに一括適用可能。</li>
                <li class="demerit">デメリット: 細かい制御が難しい。</li>
            </ul>

            <h3>2. クラスセレクタ</h3>
            <p>クラス属性 (<code>class</code>) を持つ要素を指定。</p>
            <p>例:</p>
            <pre><code>.text-red {
  color: red;
  font-weight: bold;
}</code></pre>
            <pre><code>&lt;p class="text-red"&gt;赤色のテキスト&lt;/p&gt;</code></pre>
            <p><strong>特徴:</strong></p>
            <ul>
                <li class="merit">メリット: 再利用性が高い。複数の異なる要素に適用可能。</li>
                <li class="demerit">デメリット: クラス名の管理が複雑になることがある。</li>
            </ul>

            <h3>3. IDセレクタ</h3>
            <p>ID属性 (<code>id</code>) を持つ要素を指定。</p>
            <p>例:</p>
            <pre><code>#main-title {
  color: blue;
  text-align: center;
}</code></pre>
            <pre><code>&lt;h1 id="main-title"&gt;タイトル&lt;/h1&gt;</code></pre>
            <p><strong>特徴:</strong></p>
            <ul>
                <li class="merit">メリット: 一意性が保証されるため特定の要素に適用可能。</li>
                <li class="demerit">デメリット: 再利用性が低く、汎用性に欠ける。</li>
            </ul>

            <h3>4. 疑似クラス</h3>
            <p>特定の状態や条件に基づいてスタイルを適用。</p>
            <p>例:</p>
            <pre><code>a:hover {
  color: green;
  text-decoration: underline;
}</code></pre>
            <p><strong>特徴:</strong></p>
            <ul>
                <li class="merit">メリット: ユーザー操作に応じたインタラクティブなデザインが可能。</li>
                <li class="demerit">デメリット: 高度な動作にはJavaScriptが必要な場合もある。</li>
            </ul>
        </section>

        <section>
            <h2>3.まとめ</h2>
            <p>
                各セレクタには適切な用途があり、効果的に使い分けることでデザインの自由度が向上する。
            </p>
            <p>
                <strong>例</strong>:
                基本スタイルには要素セレクタ、再利用性が必要ならクラスセレクタ、一意性を持たせる場合はIDセレクタを選択。
            </p>
        </section>
    </main>

    <aside>
        <p><a href="../MyWebsite.html">ページトップへ戻る</a></p>
    </aside>
    <footer>
        <p>&copy; 初心者のためのプログラミングテキスト&問題集</p>
    </footer>
</body>
</html>

このコードをコピーしてMyWebsite2-4.htmlに張り付けてください。

続いてLesson2フォルダの中にあるstyleフォルダの中に「link.css」というファイルを作り、以下の内容を任意に指定してコードを書きましょう。

リンクテキストにマウスが乗った時のカラーを変更

また、<head>タグ内に内部CSSを記述し、文書内でメリットを紹介している部分を青色に、デメリットを紹介している部分を赤色に変更しましょう。

ご自身で考えて書くことを推奨しますが、模範解答も用意しましたので必要な方は以下のコードを活用して下さい。

模範解答(CSSコード)
@charset "utf-8";

a:hover{
    color:orange;
}

このコードをコピーしてlink.cssに張り付けてください。

    <style>
        .merit {
            color: blue;
        }
        .demerit {
            color: red;
        }
    </style>

このコードをコピーして<head>タグにに張り付けてください。

まとめ

お疲れさまでした!

今回の学習を通して、新たな知識やスキルを身につけることができたかと思います。

この調子でさらに理解を深めるために次のレッスンにもチャレンジしてみましょう。

継続は力なり。少しずつステップアップしていきましょう!

<<前のページ HTML/CSSの記事一覧 次のページ>>

この記事への質問・コメント

この記事を作成するにあたりAIの力を借りています。

問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。






    HTML/CSSのテキスト&問題集トップへ戻る
    トップページへ戻る