CSSの便利なセレクタテンプレート集｜初心者でも使えるサンプル付き

よく使うCSSセレクタの便利なテンプレート集

先生と生徒の会話形式で理解しよう

生徒

「CSSでよく使うセレクタをまとめて知りたいです。便利なテンプレートってありますか？」

先生

「もちろんありますよ。初心者の方がすぐ使えるように、よく使うCSSセレクタのテンプレートを紹介しますね。」

生徒

「初心者でも理解できるように、やさしく教えてください！」

先生

「それでは、CSSセレクタのテンプレートと具体例をひとつずつ見ていきましょう！」

1. ベーシックなタグセレクタのテンプレート集

タグセレクタはHTMLのタグ名そのものを指定する方法です。初心者向けに分かりやすく使える例を紹介します。


<style>
    h1 {
        font-size: 2em;
        color: navy;
    }
    p {
        line-height: 1.6;
        color: #333;
    }
</style>

<h1>見出し（h1）</h1>
<p>本文の段落です。</p>

ブラウザ表示

タグセレクタは簡単＆シンプルで、基本的な文字スタイルや見出しスタイルに便利です。

2. クラスセレクタのテンプレート集

クラスセレクタは「.class名」を使って、複数箇所に共通スタイルを当てたいときに便利です。


<style>
    .btn {
        padding: 8px 12px;
        background-color: teal;
        color: white;
        border-radius: 4px;
    }
    .alert {
        padding: 10px;
        background-color: pink;
        color: darkred;
    }
</style>

<button class="btn">ボタン（btn）</button>
<div class="alert">注意メッセージ（alert）</div>

ブラウザ表示

「.btn」「.alert」のように、役割が分かる名前を使うことで再利用しやすくなります。

3. 親子構造を意識したネストセレクタのテンプレート

親要素の中にある子要素だけにスタイルを当てたいときに使えるテンプレートです。


<style>
    .card .card__title {
        font-size: 18px;
        margin-bottom: 6px;
    }
    .card .card__text {
        font-size: 14px;
        color: #555;
    }
</style>

<div class="card">
  <div class="card__title">タイトル</div>
  <div class="card__text">本文テキスト</div>
</div>

ブラウザ表示

親子構造を意識すると、対象を限定してスタイルが当てられるので安全です。

4. 兄弟セレクタや隣接セレクタのテンプレート

隣り合う要素だけにスタイルを当てたいときに使えます。


<style>
    h2 + p {
        margin-top: 0;
        font-weight: bold;
    }
    li + li {
        margin-top: 4px;
    }
</style>

<h2>見出し（h2）</h2>
<p>見出し直後の段落（太字になります）</p>
<ul>
  <li>項目1</li>
  <li>項目2（少し上に余白）</li>
</ul>

ブラウザ表示

隣接セレクタで“前後の関係”を活かしたスタイルが簡単に書けます。

5. 状態に応じた擬似クラスセレクタのテンプレート

ボタンがホバーされたときやリンクがクリックされたときに使えるテンプレートです。


<style>
    a:hover {
        color: orange;
        text-decoration: underline;
    }
    button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
</style>

<a href="#">リンクにマウスを重ねてみてね</a><br>
<button disabled>無効なボタン</button>

ブラウザ表示

使うとボタンの状態やリンクの操作感がわかりやすくなります。