CSSのスタイルルールとは？基本構文と3つの構成要素をわかりやすく解説

CSSのスタイルルールの仕組み

CSS（Cascading Style Sheets）は、ブラウザが解釈し、ドキュメント内の対応するHTML要素に適用する「スタイルルール」によって構成されています。スタイルルールを正しく理解することは、Webページのデザインを思い通りに制御するための第一歩です。

スタイルルールは、次の3つの部分から成り立っています。

1. セレクタ（Selector）

セレクタとは、スタイルを適用する対象となるHTMLタグのことです。<h1> や <table>、<p> など、任意のタグを指定できます。セレクタによって「どの要素に」スタイルを適用するかが決まります。

2. プロパティ（Property）

プロパティとは、HTMLタグが持つ属性の一種です。簡単に言えば、HTMLの属性はすべてCSSプロパティに置き換えて考えることができます。代表的なプロパティには color（文字色）や border（枠線）などがあります。

3. 値（Value）

値とは、プロパティに割り当てる具体的な設定内容のことです。たとえば、color プロパティには red のような色名や、#F1F1F1 のようなカラーコードを指定できます。

CSSスタイルルールの基本構文

これらの3つの要素を組み合わせると、CSSのスタイルルールは以下のように記述できます。

selector { property: value }

記述例

h1 {
  color: red;
}

この例では、セレクタとして h1 を指定し、color プロパティに red という値を設定しています。その結果、ページ内のすべての <h1> 要素の文字色が赤色で表示されます。

この「セレクタ・プロパティ・値」というシンプルな構造を覚えておけば、どんなに複雑なCSSも読み解く基礎となります。