CSS（カスケーディング・スタイル・シート）は、ウェブページのデザインやレイアウトを指定するために使用される言語で、HTMLやXMLドキュメントのスタイリングを担当します。CSSを利用することで、色、フォント、レイアウトなどを柔軟に制御できます。CSSの主要な要素である「セレクタ」、「プロパティ」、「値」を理解することは、ウェブデザインを効果的に行うための第一歩です。

この記事では、CSSにおける「タイプ」、「クラス」、「ID」のセレクタの使い方、そしてそれらを区別するための規則について完全かつ包括的に解説します。

1. CSSセレクタの基礎

CSSセレクタは、スタイルを適用するHTML要素を指定するために使われます。セレクタは、スタイルを適用する対象の要素を選び出すための「識別子」として機能します。CSSでは、主に以下の3種類のセレクタを使用します：

• タイプセレクタ（要素セレクタ）
• クラスセレクタ
• IDセレクタ

これらのセレクタを組み合わせて、より詳細で精密なスタイルの指定が可能になります。

2. タイプセレクタ（要素セレクタ）

タイプセレクタは、HTML要素のタグ名に基づいてスタイルを適用します。例えば、すべての

要素に対してスタイルを適用したい場合、次のように書きます。

css
CopyEdit
h1 {
  color: blue;
  font-size: 24px;
}

この例では、

タグを持つすべての要素に対して、文字色を青に、フォントサイズを24pxに設定するスタイルが適用されます。タイプセレクタはHTMLタグ名に基づいてスタイルを適用するため、非常に広範囲に適用される特徴があります。

利点：

• 特定のHTMLタグに一括でスタイルを適用できる。
• シンプルで直感的に理解しやすい。

注意点：

• HTMLタグが変更されると、スタイルが思わぬ場所に適用される可能性があるため、他のスタイルが影響を受けることがあります。

3. クラスセレクタ

クラスセレクタは、HTML要素にclass属性を付けて、特定のクラスを持つ要素にスタイルを適用します。クラスセレクタは、複数の要素に同じスタイルを適用したい場合に便利です。クラスセレクタはドット（.）を前置きして書きます。

html
CopyEdit
<p class="highlight">これは強調されたテキストです。p>
<p class="highlight">これも強調されたテキストです。p>

css
CopyEdit
.highlight {
  color: red;
  font-weight: bold;
}

この例では、class="highlight"を持つすべての

要素に対して、文字色が赤で太字になるスタイルが適用されます。

利点：

• 同じスタイルを複数の異なる要素に適用できる。
• より柔軟で再利用性が高い。

注意点：

• クラス名は他の要素でも使われる可能性があるため、スタイルの衝突を避けるためにユニークなクラス名を使うことが推奨されます。

4. IDセレクタ

IDセレクタは、HTML要素にid属性を付け、そのIDに対してスタイルを適用します。IDはページ内で一意であるべきで、IDセレクタは#記号を前置きして書きます。

html
CopyEdit
<div id="header">これはヘッダーです。div>

css
CopyEdit
#header {
  background-color: lightblue;
  font-size: 20px;
}

この例では、id="header"を持つ

css
CopyEdit
p {
  color: green;
}

#special {
  color: red;
}

html
CopyEdit
<p id="special">これは特別なテキストです。p>

css
CopyEdit
div.highlight {
  background-color: yellow;
}

css
CopyEdit
div > p {
  color: blue;
}