CSSの「誰に？」を正確に指定する

前回の記事で、CSSがWebサイトを装飾する魔法だと学びましたね。その魔法をかけるとき、「どの部分に魔法をかけるか？」を正確に指定する必要があります。

この「誰に？」を指定する役割を担うのが、セレクタです。

セレクタを使いこなせば、Webページ上の特定の要素だけをピンポイントで装飾できるようになります。今回は、特にWebサイトでよく使う3つのセレクタを、一緒に見ていきましょう。

3つの基本セレクタを理解する

タグセレクタは、指定したHTMLタグすべてにスタイルを適用します。

例えば、Webページにあるすべての<p>タグ（段落）の文字を、一括で赤色にしたいときに使います。

CSS

p {
  color: red; /* すべての段落の文字を赤色にする */
}

メリット：同じ種類の要素をまとめて装飾できるので、効率が良いです。

クラスセレクタは、class="...という属性を持つ要素にスタイルを適用します。

クラスは、自分で自由に名前を付けられる**「グループ名」**のようなものです。たとえば、class="highlight"という名前を付けた要素だけにスタイルを適用できます。

CSSでは、クラス名の前に「.」（ドット）をつけます。

HTML

<p class="highlight">この文章だけ目立たせる</p>
<p>この文章にはスタイルを適用しない</p>

CSS

.highlight {
  background-color: yellow; /* highlightクラスを持つ要素の背景を黄色にする */
}

メリット：同じ種類のタグでも、一部の要素だけを区別して装飾できます。

IDセレクタは、id="..."という属性を持つ、Webページ内でただ一つしかない特別な要素にスタイルを適用します。

IDは、**「世界に一つだけの名前」**のようなものです。Webサイトのヘッダーやフッターなど、特別な役割を持つ要素によく使われます。

CSSでは、ID名の前に「#」（シャープ）をつけます。

HTML

<div id="main-title">
  <h1>Webサイトのタイトル</h1>
</div>

CSS

#main-title {
  font-size: 48px; /* main-titleというIDを持つ要素の文字サイズを大きくする */
}

メリット：特定の要素を確実に指定してスタイルを適用したいときに便利です。

今回学んだ3つのセレクタは、CSSを学ぶ上で欠かせない基礎知識です。

これらを使い分けることで、あなたのWebデザインは格段に自由度が上がります。まずは、簡単なHTMLファイルにこれらのセレクタを書いてみて、どんな風に見た目が変わるか試してみてください。きっと、CSSの奥深さが楽しくなるはずです。