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

生徒

「CSSで複数のタグに同じスタイルを一気に指定する方法ってありますか？」

先生

「はい、複数セレクタを使えば、同じデザインをまとめて設定できますよ。」

生徒

「その“複数セレクタ”って、どうやって使うんですか？」

先生

「では、初心者の方でもわかるように、基本から応用まで丁寧に解説していきましょう！」

1. 複数セレクタとは？CSSで複数の要素に同じスタイルを適用する方法

CSS（シーエスエス）は、HTMLで作られたページの見た目を整えるための言語です。文字色・サイズ・余白・背景色などを指定できます。

「複数セレクタ」は、複数の要素に同じデザインを一度に適用するための書き方です。どの要素に当てるかを示す目印（=セレクタ）を、カンマ（,）で区切って並べるだけで、ひとつのルールブロック { ... } を共有できます。

たとえば、<strong> と <em> の両方を同じ色と背景にしたい場合は次のように書きます。


<style>
  strong, em {
    color: blue;
    background-color: #eef;
  }
</style>

<p>これは <strong>重要な文字</strong> と <em>強調したい文字</em> の例です。</p>

ブラウザ表示

ポイントは、strong, em のように対象をカンマで列挙すること。カンマの前後にスペースがあってもなくても動作は同じです。長くなる場合は改行して可読性を上げてもOK。まずは「カンマでまとめる＝同じスタイルを共有する」というイメージを掴みましょう。

2. 複数セレクタの基本的な使い方（カンマ区切り）

まずは一番シンプルな例から。<h1> と <p> の両方に同じ色を当てたいときは、カンマ（,）で区切って並べるだけです。複数の要素がひとつのルールを共有できるのがポイントです。


<style>
  h1, p {
    color: red;
  }
</style>

<h1>見出しです</h1>
<p>これは段落です。</p>

ブラウザ表示

もう一歩だけ実践。共通の見た目はまとめて指定し、一部だけ変えたい場合は後から個別に上書きします。これもカンマ区切りの基本的な使い方です。


<style>
  /* 共通のスタイルをひとまとめに */
  h1, h2, p {
    margin: 0;
    color: #333;
  }
  /* h1 だけを後から強調（上書き） */
  h1 {
    color: crimson;
  }
</style>

<h1>サイトのタイトル</h1>
<h2>小見出し</h2>
<p>本文テキストです。</p>

ブラウザ表示

コツは、h1, h2, p のように対象を列挙して「共通化」→必要なら個別のセレクタで「微調整」。カンマの前後のスペースはあってもOK、読みやすさ優先で書けば大丈夫です。

3. クラス名やID名でも複数セレクタは使える

HTMLでは、特定の要素に名前をつけることができます。「クラス名（class）」や「ID名（id）」といいます。

これらも複数セレクタに使えます。クラスは「.（ドット）」、IDは「#（シャープ）」を使って指定します。


<style>
    .title, .note {
        font-weight: bold;
    }
</style>

<p class="title">これはタイトルです</p>
<p class="note">これは補足の説明です</p>

ブラウザ表示

.titleと.noteという2つのクラスに対して、同じCSS「文字を太くする（font-weight: bold）」を指定しています。

4. HTMLタグとクラス名を組み合わせた複数セレクタ

タグとクラスを組み合わせて指定することもできます。


<style>
    h2, .important {
        background-color: yellow;
    }
</style>

<h2>注意書き</h2>
<p class="important">この部分は特に重要です。</p>

ブラウザ表示

h2タグと.importantクラスの両方に、背景色を黄色にするスタイルが適用されています。

5. 応用テクニック：見た目を統一するための複数セレクタ

ホームページ全体で、リンクや見出しなどに共通のデザインを設定したいとき、複数セレクタがとても便利です。

次の例では、h1とaタグの文字色と下線を一括で変更しています。


<style>
    h1, a {
        color: navy;
        text-decoration: none;
    }
</style>

<h1>ホームページのタイトル</h1>
<a href="#">リンクはこちら</a>

ブラウザ表示

このようにすると、見出しとリンクに同じ色や装飾を与えることができて、見た目に統一感が生まれます。

6. なぜ複数セレクタを使うと便利なのか？

CSSで複数セレクタを使うことのメリットは、大きく3つあります。

同じスタイルを何度も書かなくてよい
コードがスッキリして読みやすくなる
デザインの修正が簡単になる

例えば、5つのタグに同じ色をつけたいとき、それぞれに個別で書くと5回書く必要があります。でも複数セレクタなら、1行にカンマでまとめて書くだけで済みます。

7. 複数セレクタを使うときの注意点

便利な複数セレクタですが、以下の点に注意しましょう。

カンマの後ろにスペースを入れると読みやすい（入れなくても動作はする）
間違ってセミコロン「;」で区切らないように注意
指定するセレクタの順番にルールはないが、整理すると見やすくなる

また、スタイルがうまく適用されない場合は、書き間違いやカンマの位置に注意して確認してみましょう。

まとめ

ここまで、CSSの複数セレクタを使う基本から、タグやクラスを組み合わせた応用まで、ゆっくり丁寧に見てきました。改めて振り返ると、複数セレクタとは「カンマで区切って複数の要素に同じスタイルを当てる書き方」のことでした。HTMLのタグが増えても、同じデザインをひとつずつ書かずに済むので、デザインの統一がとても楽になります。特に初心者の方は、HTMLやCSSに慣れていないと同じ指定を何回も書いてしまいがちですが、複数セレクタを使えば、スタイルの重複を減らし、すっきりしたCSSにすることができます。

また、クラス名やID名と組み合わせることで、ページの一部だけを共通デザインでまとめたい場合にも便利でした。見出しやリンク、注目してほしい文章などに同じ色や装飾をまとめて当てれば、読みやすく統一されたホームページが作れます。カンマ区切りは一見シンプルですが、使い方を知ることで、読みやすいデザイン設計の第一歩になります。長いスタイルシートを書くときほど、この仕組みは役に立ちます。

簡単なサンプルで再確認

最後に、複数セレクタでデザインをまとめる練習用の、とてもシンプルなサンプルを紹介します。タグが増えても、同じ書き方で拡張できます。


<style>
    h1, h2, p, a {
        color: #2b4c8a;
        font-weight: 600;
        text-decoration: none;
    }
</style>

<h1>見出しタイトル</h1>
<h2>小見出しのサンプル</h2>
<p>複数セレクタを使うとこうなります。</p>
<a href="#">リンクも同じ色になります</a>

ブラウザ表示

このように、ひとつずつ同じスタイルを書くよりも、カンマでまとめるだけで作業量がぐっと減ります。もし後から色を濃くしたい、文字を大きくしたいと考えたとき、同じルールをまとめて修正できるので効率的です。特に、見出しや本文、リンクの色をそろえたいときは、複数セレクタで統一しておくと、サイト全体にまとまりが生まれます。

さらに、複数セレクタは小さなページだけでなく、ブログや企業サイトのようにページ数が多い構成でも活躍します。同じ指定をまとめて書くことで、CSSファイル全体が短くまとまり、誰が見ても管理しやすいデザインになります。特定の部分だけ色を変えたい場合は、あとから単体のクラスを追加して上書きすればよいので、応用もしやすい書き方です。

複数セレクタの考え方になれてくると、「どのタグが同じ見た目になるべきか？」を自然と考えるようになり、デザイン設計の考え方そのものが整理されていきます。CSSの基本として覚えておくと、後のステップで役に立つ場面が必ず出てきます。

先生と生徒の振り返り会話

生徒

「先生、複数セレクタって思ったより難しくなかったです。カンマで区切るだけなんですね。」

先生

「そうなんです。最初は地味に見えますが、ページが大きくなると効果がよく分かります。同じスタイルをいろいろな場所に使うとき、とても便利ですよ。」

生徒

「あとから変更するときも、一か所直すだけで全部に反映されて、すごく効率が良さそうですね！」

先生

「その通りです。デザインを統一したいときや、文章やリンクの色をそろえたいときなど、すぐに役立ちますよ。次にCSSを書く時は、同じスタイルをまとめられないか考えながら書いてみましょう。」

生徒

「はい！もっと複雑なデザインでも試してみます！」