ながみえ
HTML/CSSレッスン2-☆1『セレクタの完全ガイド｜優先順位と階層構造 を理解しよう』記事用アイキャッチ画像

Lesson2-4では以下の4つの基本的なセレクタを学びました。

  • 要素セレクタ (p, div など) → HTMLタグを指定する
  • クラスセレクタ (.class-name) → 複数の要素に適用できる
  • IDセレクタ (#id-name) → 一意の要素に適用する
  • 疑似クラス (:hover, :focus など) → ユーザーのアクションに応じたスタイル変更

これらのセレクタを使うことで、 HTMLの特定の要素に対してスタイルを適用できる ようになりました。

しかし、CSSには まだ紹介しきれていない強力なセレクタ が存在します。

例えば、次のような疑問を持ったことはありませんか？

「ページ内のすべての要素を一括でスタイル適用する方法は？」
「特定の属性を持つ要素だけを狙ってデザインする方法は？」
「HTMLには存在しない要素をCSSで追加できるって本当？」

これらを解決するために、新しく 「全称セレクタ」「属性セレクタ」「疑似要素」 を学びます！

さらに、セレクタをより使いこなすための知識として階層構造とセレクタの優先順位についても見ていきましょう。

Lesson2-1：CSS学習の入り口｜文字に色を付けよう
Lesson2-2：CSSを読み込む３つの方法
Lesson2-3：テキストスタイルを変更しよう
Lesson2-4：４種類のセレクタを使いこなそう
Lesson2-5：ボックスモデルを理解しよう
Lesson2-6：ボックススタイルを変更しよう
Lesson2-7：継承とカスケードを理解しよう
Lesson2-☆1：セレクタの完全ガイド｜優先順位と階層構造 ◁今回はココ
Lesson2-☆2：色の心理学とCSSカラーデザイン術｜Webサイトの配色をマスターしよう

この記事では、以下の3点について詳しく解説します。

  • ７種類のセレクタの完全ガイド（無料）
  • HTMLの階層構造の解説（会員向け）
  • セレクタの優先順位（会員向け）

<<前のページ

HTML/CSSレッスン2-7『継承とカスケードを理解しよう』記事用アイキャッチ画像

HTML/CSSの記事一覧

HTML/CSS学習カテゴリの親ページ用アイキャッチ画像（Webサイト制作入門）、記事一覧へのリンク案内

次のページ>>

HTML/CSSレッスン2-☆2『色の心理学とCSSカラーデザイン術｜Webサイトの配色をマスターしよう』記事用アイキャッチ画像

セレクタを使いこなそう！

CSSでは、HTMLの要素を「セレクタ」を使って指定し、スタイルを適用します。

Lesson2-4では 要素セレクタ・クラスセレクタ・IDセレクタ・疑似クラス を学びましたが、今回はさらに便利なセレクタを学んで、より柔軟なデザインを可能にしましょう！

今回のテーマは 「復習しながら、新しいセレクタを習得すること」 です。
それでは、順番に解説していきます！

【CSS】勉強猫がノートパソコンを前にして学習を始める様子。記事内の学習スタート用イラスト

全称セレクタ（*）

全称セレクタ（*）は、ページ内の すべての要素にスタイルを適用 できます。

例えば、「すべての要素の余白をなくしたい」ときに役立ちます！

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
  • すべての要素の margin（余白）と padding（内側の余白）を 0 に設定
  • box-sizing: border-box; で、要素のサイズ計算をわかりやすくする
  • 全称セレクタは すべての要素に適用される ため、適用範囲が広すぎると パフォーマンスに影響 することも。
  • 「基本のスタイルを統一する」ために使うのがベスト！
コードを書いてみよう

次のHTMLがあります。全称セレクタ（*） を使って、ページ内のすべての要素の文字の色を青 (blue) にするCSSを記述してください。

<!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>
    <h1>これは見出しです</h1>
    <p>これは段落です。</p>
    <button>ボタン</button>
</body>
</html>

【復習】要素セレクタ (div, p など)

要素セレクタはHTMLの特定のタグ（要素）を対象にするセレクタ です。

p {
  font-size: 16px;
  color: #333;
}
  • すべての <p> 要素に適用 される
  • 要素セレクタは基本的だが柔軟性に欠けるので、次に紹介するクラスセレクタと組み合わせて使うのがコツ！

【復習】クラスセレクタ (.class-name)

クラスセレクタは汎用的に使えるセレクタで、複数の要素に適用できます。

.button {
  background-color: blue;
  color: white;
  padding: 10px;
}
  • 「ボタン」デザインを .button クラスに適用
  • <button> だけでなく、<a> や <div> などにも使える
  • 再利用しやすい ため、クラスセレクタは頻繁に使われる
  • IDセレクタと違い、同じクラスを複数の要素に適用できるのがポイント！

【復習】IDセレクタ (#id-name)

IDセレクタはページ内の 1つの要素だけ に適用するセレクタです。

#header {
  background-color: black;
  color: white;
}
  • id="header" を持つ要素だけに適用される
  • 他の要素には適用できない（クラスセレクタとの違い）
  • IDは 「1つのページで1回だけ使う」 のが基本！
  • 多用すると CSSの管理が難しくなる ため、基本は クラスセレクタを使うべき

属性セレクタ ([type="text"], [href^="https"] など)

属性セレクタは特定の属性を持つ要素に適用できるセレクタです。 以下のように適用させたい属性を[]で囲って使用します。

input[type="text"] {
  border: 1px solid gray;
}

a[href^="https"] {
  color: blue;
}
  • 上のセレクタは<input type="text"> だけに適用される
  • 下のセレクタはhref が https から始まるリンクだけに適用
  • 属性セレクタを使えば、より細かくスタイルを指定できる！
コードを書いてみよう

次のHTMLに対してtype="password" の <input> 要素だけに適用されるCSS を記述してください。
（input[type="password"] を使ってみましょう。）

<!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>
    <input type="text" placeholder="ユーザー名">
    <input type="password" placeholder="パスワード">
</body>
</html>

【一部復習】疑似クラス (:hover, :focus, :nth-child() など)

疑似クラスはユーザーのアクションに応じて変化するセレクタです。

a:hover {
  color: red;
}

input:focus {
  border: 2px solid blue;
}

li:nth-child(odd) {
  background-color: lightgray;
}
  • :hover → マウスが乗ったときに色を変える
  • :focus → フォームのフォーカス時のスタイルを変更
  • :nth-child(odd) → 奇数番目のリストアイテムだけに適用
  • リストの奇数・偶数ごとに色を変えるデザインなどに使える！
コードを書いてみよう

次のHTMLに対して、リストの偶数番目の項目 (2番目, 4番目, 6番目...) の背景色を lightgray にするCSS を記述してください。
（:nth-child(even) を使ってみましょう。）

<!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>バナナ</li>
        <li>みかん</li>
        <li>ぶどう</li>
        <li>なし</li>
        <li>すいか</li>
    </ul>
</body>
</html>

疑似要素 (::before, ::after など)

疑似要素はHTMLにない要素を「疑似的」に作成するセレクタです。

.quote::before {
  content: "“";
  font-size: 24px;
  color: gray;
}

.quote::after {
  content: "”";
  font-size: 24px;
  color: gray;
}
  • ::before や ::after を使って、補足的なデザインを追加
  • HTMLには 存在しない要素 を、CSSだけで作れる
  • アイコンや装飾の追加に便利！
コードを書いてみよう

次のHTMLに対して、::before 疑似要素を使い、すべての <p> の前に「 📢注意: 」というテキストを追加するCSS を記述してください。
（content プロパティを使いましょう。）

<!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>
    <p>もう一つのメッセージです。</p>
</body>
</html>

次の章では、HTMLの階層構想について詳しく解説していきます。

参考資料

この記事の続きの内容は以下の通りです。有益な内容をどこよりも安く提供していますので、是非ご購入頂き、学習を進めてください。

  • ７種類のセレクタの完全ガイド（学習済み）
  • HTMLの階層構造の解説（会員向け）
  • セレクタの優先順位（会員向け）
記事URLをコピーしました