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

生徒

「CSSでタグやクラス、IDってよく聞くんですが、それぞれどう違うんですか？」

先生

「とても大切なポイントですね！この3つはCSSでデザインを指定する方法なんですよ。」

生徒

「どれを使えばいいのか迷っちゃいます…」

先生

「大丈夫！タグ名・クラス・IDの違いをしっかり理解すれば、迷わずにCSSが書けるようになりますよ。」

1. タグ名セレクタとは？

タグ名セレクタとは、HTMLのタグに対して直接スタイルを指定するCSSの書き方です。例えば、すべてのh1タグに同じスタイルを適用したいときに使います。

HTMLの「タグ」とは、<h1>や<p>のように、要素を表す記号のことです。見出しや段落などを指定します。

以下は、すべてのh1タグの文字色を青に変える例です。


<style>
h1 {
    color: blue;
}
</style>

<h1>これは見出しです</h1>
<h1>もう一つの見出しです</h1>

ブラウザ表示

このように、タグ名セレクタは同じタグを使ったすべての要素に一括でスタイルを適用できます。

2. クラスセレクタとは？

クラスセレクタは、HTMLの要素にクラス名をつけて、特定のグループだけにスタイルを当てる方法です。HTMLタグにclass="○○○"と書き、それにCSSでスタイルを指定します。

クラス名の前には、CSSではドット（.）をつけて書きます。クラスは同じページ内で何度でも使えるのが特徴です。

以下は、クラスhighlightを使って、赤い文字にする例です。


<style>
.highlight {
    color: red;
}
</style>

<p class="highlight">これは赤い文字の段落です。</p>
<p>これは普通の段落です。</p>
<p class="highlight">これも赤い文字になります。</p>

ブラウザ表示

クラスは、複数の要素に共通のスタイルを適用したいときに便利です。

3. IDセレクタとは？

IDセレクタは、ページ内で1つの要素だけにスタイルを指定したいときに使います。HTMLではid="○○○"と書き、CSSではシャープ（#）を使います。

注意点として、IDはページ内で1つだけに使うのがルールです。同じIDを2回以上使うのは避けましょう。

以下は、IDmain-titleに青色のスタイルをつける例です。


<style>
#main-title {
    color: blue;
}
</style>

<h2 id="main-title">ここがメインの見出しです</h2>
<h2>これは普通の見出しです</h2>

ブラウザ表示

IDセレクタは、他の要素と区別して特別なデザインをしたいときに使います。

4. タグ名・クラス・IDセレクタの違いをわかりやすく例えると？

ここで、例え話を使って整理してみましょう。

タグ名セレクタ：「先生」と呼びかけると、すべての先生が反応します（すべての同じタグにスタイルが当たる）。
クラスセレクタ：「バスケ部の人」と言えば、バスケ部に属する人全員が反応します（複数のタグに同じスタイルが可能）。
IDセレクタ：「山田太郎くん」と呼べば、その人だけが反応します（特定の一つだけにスタイル）。

このように、対象の範囲が広いのがタグ名、一部のグループがクラス、1人だけなのがIDというイメージです。

5. セレクタの優先順位（どれが強いの？）

CSSでは、複数のスタイルが同じ要素にあたることがあります。その場合、どのスタイルが優先されるかが重要になります。

基本的には次のような優先順位があります：

① IDセレクタ（一番強い）
② クラスセレクタ
③ タグ名セレクタ（一番弱い）

たとえば、ある要素にIDとクラスとタグがすべて当たっていても、IDで指定したスタイルが最も強く適用されます。

6. どれを使えばいい？初心者向けおすすめの使い分け方

では、実際にWebページを作るときにどれを使えばいいか迷いますよね。初心者の方は以下を参考にするとよいでしょう。

タグ名セレクタ： ページ全体で共通のデザインにしたいときに。
クラスセレクタ： 複数の場所で同じ見た目にしたいときに。
IDセレクタ： たった1つの要素に特別なデザインをしたいときに。

Webデザインでは、クラスセレクタを中心に使うのが基本スタイルになります。

7. HTMLとCSSで実際に組み合わせてみよう

最後に、タグ名・クラス・IDセレクタをすべて使った実践的な例を見てみましょう。


<style>
h1 {
    color: green;
}
.title {
    font-size: 24px;
    color: orange;
}
#unique-message {
    font-weight: bold;
    color: purple;
}
</style>

<h1>全体の見出し（タグ名セレクタ）</h1>
<p class="title">この段落はクラスでオレンジ色に</p>
<p id="unique-message">この段落だけ紫で太字（IDセレクタ）</p>

ブラウザ表示

このように、タグ・クラス・IDを正しく使い分けることで、Webページ全体のデザインを整理して効率よく管理できます。

まとめ

タグ名・クラス・IDセレクタの理解を整理しよう

この記事では、CSSの基本でありながらとても重要な「タグ名セレクタ」「クラスセレクタ」「IDセレクタ」の違いと使い方について、初心者向けにやさしく解説してきました。CSSはWebページの見た目を整えるための言語ですが、どのHTML要素にスタイルを適用するかを決めるセレクタの理解ができていないと、思い通りのデザインになりません。タグ名・クラス・IDという三つの指定方法は、CSS学習の最初に必ず押さえておきたい基礎知識です。

タグ名セレクタは、HTMLタグそのものを指定するため、同じタグを使っているすべての要素にスタイルが適用されます。そのため、見出しや段落など、ページ全体で共通のデザインを設定したい場合に向いています。一方で、影響範囲が広いため、細かい調整には注意が必要です。

クラスセレクタは、複数の要素に同じデザインを適用したいときに非常に便利です。HTMLのタグの種類に関係なく使えるため、実際のWeb制作では最もよく使われます。クラス名を意味のある名前にすることで、CSSの可読性や保守性も高まります。初心者の方は「迷ったらクラスを使う」という意識を持つと、CSSが書きやすくなります。

IDセレクタは、ページ内で一つだけ存在する特別な要素にスタイルを当てたいときに使います。優先順位が高いため強力ですが、多用すると管理が難しくなります。そのため、メインタイトルや重要なメッセージなど、明確に一か所と決まっている要素に限定して使うのがポイントです。

使い分けを意識した総合サンプル

ここで、タグ名・クラス・IDセレクタの違いと役割を一度に確認できるサンプルを見てみましょう。HTMLとCSSを組み合わせることで、指定方法によってどのように見た目が変わるのかを理解できます。


<style>
h2 {
    color: #006400;
}
.text-box {
    padding: 10px;
    background-color: #f0f0f0;
}
#special-text {
    color: red;
    font-weight: bold;
}
</style>

<h2>見出しはタグ名セレクタで指定</h2>
<p class="text-box">この段落はクラスセレクタで背景を設定しています。</p>
<p id="special-text">この段落だけはIDセレクタで特別に装飾しています。</p>

ブラウザ表示

この例からも分かるように、タグ名セレクタは全体の基本デザイン、クラスセレクタは共通パーツ、IDセレクタは特別な要素という役割分担を意識すると、CSSの構造がとても整理されます。CSS初心者がレベルアップするためには、見た目を変えることだけでなく、「なぜこのセレクタを使うのか」を考えながら書くことが大切です。

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

生徒

「タグ名、クラス、IDの違いがだいぶ整理できました。最初は全部同じに見えて混乱していました。」

先生

「そう感じる人はとても多いですよ。でも役割を理解すると、CSSがぐっと書きやすくなります。」

生徒

「クラスセレクタを中心に使うのが基本で、IDは本当に特別なときだけ使うんですね。」

先生

「その通りです。最初から完璧を目指さなくて大丈夫なので、実際に書いて試しながら感覚をつかんでいきましょう。」

生徒

「これからCSSを書くときは、どのセレクタが一番適切か考えてから書いてみます。」

先生