CSS 構文：セレクター、プロパティ、値

JPKODA 編集部 May 6, 2026

前の章では、CSSとは何か、そしてなぜウェブを美しくするために不可欠なツールなのかを学びました。いよいよCSS言語そのもの、つまり「シンタックス（構文）」を深く掘り下げていきましょう。

あらゆる言語に文法規則があるように、CSSにもHTML要素にスタイルを適用するための特定のルールがあります。この基本構造（セレクター、プロパティ、値をどのように組み合わせるか）を理解することが、あなたのデザインの意図をブラウザに正確に伝え、効果的なレンダリングを実現するための鍵となります。

1. CSSルールセットの構造

CSSの根幹は、HTML要素にスタイルルールを適用することにあります。このスタイルの指示一つひとつを CSSルールセット (CSS Rule Set) と呼びます。

一つのルールセットは、主に セレクター (Selector)、プロパティ (Property)、値 (Value) の3つのパーツで構成されています。これらが連携して、「何に」「どの特徴を」「具体的にどう変えるか」をブラウザに伝えます。

基本構造を見てみましょう：

セレクター {
  プロパティ: 値;
  プロパティ: 値;
}

あなたが作成するすべてのCSSスタイルシートにおいて、このシンプルな構造が繰り返されます。

1.1 セレクター (Selectors)：HTML要素の特定

セレクターは、どのHTML要素にスタイルを適用したいかを指定するパーツです。スタイルのターゲットを「選択」するための手段と言えます。セレクターは、特定の単一の要素を狙い撃ちすることもあれば、ページ上の多くの要素を広範囲にターゲットにすることもあります。

例えば、すべての段落のテキストを赤くしたい場合は、すべての <p> 要素を選択します。すべての見出しを青くしたい場合は、すべての <h1> 要素を選択します。

特定のHTMLタグの全インスタンスをターゲットにする「要素セレクター」の例です：

p {
  /* これは要素セレクターです。ページ上のすべての <p>（段落）要素をターゲットにします。 */
}

後の章で、さまざまな種類のセレクターについて詳しく探索しますが、現時点では「セレクターは常にCSSルールの最初の部分にあり、波括弧の外側に位置し、スタイルを設定したいHTML要素を指し示す役割を持つ」と理解してください。

1.2 プロパティ (Properties)：変更したい特徴

HTML要素を選択したら、次にその要素のどの特徴を変更するかを決める必要があります。この「何を」を定義するのがプロパティです。CSSには膨大な数のプロパティが用意されており、色やサイズから配置、背景に至るまで、要素のあらゆる視覚的側面をコントロールできます。

よく使われるプロパティの例：

color：テキストの色をコントロール
font-size：テキストのサイズをコントロール
background-color：要素の背景色をコントロール
width：要素の幅をコントロール
margin：要素の外側の余白をコントロール

プロパティの後ろには必ず コロン (:) を記述します。

例を拡張してみましょう：

p {
  color: /* 'color' プロパティはテキストの色を変更します */;
  font-size: /* 'font-size' プロパティはテキストのサイズを変更します */;
}

各プロパティはCSSが理解できるキーワードであり、修正可能な特定の視覚属性を指します。

1.3 値 (Values)：どのように変更するか

値は、選択したプロパティに適用したい具体的な設定や特徴です。スタイル指示の「どのように」または「具体的な中身」にあたります。例えば、プロパティが color なら、値は red になります。プロパティが font-size なら、値は 16px になります。

値は常に、プロパティと値のペアの間にある コロン (:) の後、そして セミコロン (;) の前に配置されます。プロパティの種類によって、受け付ける値のタイプ（色の名前、ピクセル値、パーセンテージ、キーワードなど）は異なります。

例を続けます：

p {
  color: blue; /* 'blue' はプロパティ 'color' の値です */
  font-size: 16px; /* '16px' はプロパティ 'font-size' の値です */
}

1.4 セミコロン：宣言の終了

プロパティとその値の組み合わせを 宣言 (Declaration) と呼びます。CSSルールセット内の各宣言は、必ず セミコロン (;) で終わらせなければなりません。

このセミコロンは、一つの宣言がどこで終わり、次の宣言がどこから始まるかをブラウザに伝えます。セミコロンを忘れると（特にルールセット内の最後のプロパティでない場合）、ブラウザは後続の宣言を正しく解釈できず、スタイルが反映されない原因になります。

完全なルールセットの例です：

/* これは完全な CSS ルールセットです */
p { /* 'p' はセレクターで、すべての段落要素をターゲットにします */
  color: blue; /* 'color: blue;' は最初の宣言です。'color' がプロパティ、'blue' が値です */
  font-size: 16px; /* 'font-size: 16px;' は2番目の宣言です */
} /* 波括弧はこのセレクターに適用されるすべての宣言を囲みます */

1.5 波括弧 (Curly Braces)：宣言のグループ化

波括弧 ({ }) は、特定のセレクターに適用されるすべての宣言をグループ化するために不可欠です。波括弧の中にあるすべての内容は、そのセレクターに属します。

h1 { /* これは h1 セレクターの開始波括弧です */
  color: green;
  text-align: center;
} /* これは h1 セレクターの終了波括弧です */

波括弧がないと、ブラウザはどのスタイルがどの要素に適用されるべきかを判断できません。

2. 実践的な例とデモ

CSSシンタックスの理解を深めるために、いくつか具体的な例を見ていきましょう。

2.1 例1：段落のスタイル設定

いくつかの段落が含まれるHTMLドキュメントがあり、すべての段落をグレーにし、少し大きめのフォントにしたいとします。

HTMLは以下のようになります：

<body>
    <h1>私の素晴らしいウェブページ</h1>
    <p>これは最初の段落です。</p>
    <p>これは2番目の段落です。上の段落と同じスタイルになるはずです。</p>
</body>

適用するCSSは以下の通りです：

/* 段落のための CSS ルールセット */
p { /* すべての <p> 要素を選択 */
  color: #333333; /* 16進数を使用してテキストの色をダークグレーに設定 */
  font-size: 18px; /* フォントサイズを 18ピクセルに設定 */
  line-height: 1.6; /* テキストの行間を設定 */
}

解説：

p：セレクター。ページ上のすべての段落 (<p>) 要素をターゲットにします。
{ }：p セレクターのすべての宣言を囲む波括弧。
color: #333333;：最初の宣言。color はテキストの色を変更するプロパティ。#333333 はダークグレーを表す16進数コードの値。; は宣言を終了させるセミコロン。

2.2 例2：見出しのスタイル設定

すべての <h1> 見出しを緑色にし、中央揃えにしたい場合の例です。

/* h1 見出しのための CSS ルールセット */
h1 { /* すべての <h1> 要素を選択 */
  color: green; /* テキストの色を緑に設定 */
  text-align: center; /* テキストを水平方向に中央揃え */
  text-transform: uppercase; /* すべてのテキストを大文字に変換 */
}

2.3 例3：複数の要素のスタイルを組み合わせる

CSS内には多くのルールセットを記述でき、それぞれが異なる要素をターゲットにして異なるスタイルを適用します。

/* ページ全体のボディ（本体）のスタイル */
body { 
  font-family: Arial, sans-serif; /* 優先フォントと代替フォントを設定 */
  background-color: #f4f4f4; /* 薄いグレーの背景色を設定 */
}

/* h1 見出しのスタイル */
h1 { 
  color: #2c3e50; /* ダークブルーグレー */
  text-align: center; 
  margin-bottom: 20px; /* 見出しの下に余白を追加 */
}

/* p 段落のスタイル */
p { 
  color: #333333; 
  font-size: 1.1em; 
  line-height: 1.6; 
}

この総合的な例は、複数のCSSルールセットがどのように連携してHTMLドキュメントの異なる部分のスタイルを設定するかを示しています。各ルールセットは、まったく同じ セレクター { プロパティ: 値; } というシンタックスに従っています。