CSSの基本構文を徹底解説！セレクタ・宣言・コメントの正しい書き方

CSSを使ってコードを書く前に、まずマスターしておきたいのが「構文（シンタックス）」です。構文という言葉は少し難しく聞こえるかもしれませんが、CSSでコードを記述する際に従うべきルールのことを指します。これらのルールは標準化されているため、他人が書いたコードも読みやすくなっています。

CSS構文の中でも特に重要なのが「セレクタ」と「宣言ブロック」の2つの要素です。セレクタは、Webページ上のどの要素にスタイルを適用するかを指定する役割を担い、宣言ブロックは、選択した要素に適用したいスタイルの内容を定義します。

この記事では、具体例を交えながらCSS構文の基礎とスタイルの構造について解説します。さらに、CSSでのコメントの書き方についても取り上げます。読み終える頃には、自分でCSSスタイルを記述できるだけの知識が身についているはずです。

CSSのスタイルルール

CSSでは、スタイルシートが一連のルールを保存し、Webサイトがユーザーの画面上でどのように表示されるかを決定します。たとえば、Webページのテキストの色や、特定の見出しに使うフォントサイズなどをスタイルシートで指定できます。

これらのルールは標準的な構造に従っており、「セレクタ」と「宣言」の2つの部分で構成されています。CSSにおけるスタイルルールは、全体として次のような形になります。

h1 {
	color: blue;
}

このスタイルは、Webページ上のすべての<h1>要素の文字色を青に設定するものです。それでは、このスタイルを2つの構成要素に分解して、仕組みを詳しく見ていきましょう。

CSSの宣言（Declaration）

CSSスタイルの最初の構成要素が「宣言」です。宣言とは、Webページ上の要素に適用したい個々のスタイルを指す言葉です。

1つのCSSスタイルルールには少なくとも1つの宣言が必要で、宣言はいくつでも含めることができます。たとえば、Webページ上のボックスの幅と高さを100pxに設定し、背景色を青にしたい場合も、まとめて宣言できます。

宣言は次の2つの部分で構成されます。

• プロパティ：要素に適用するスタイルの種類（例：color、background-color、width、heightなど）
• 値：プロパティをどのように表示するかをブラウザに伝える部分（例：ボックスの色を「green」や「red」に設定する）

CSS宣言の構文は以下の通りです。

property: value;

プロパティが先頭に来て、その後にコロン（:）で区切られている点に注目してください。コロンの後に、定義したプロパティに割り当てたい値を記述します。

各CSS宣言は必ずセミコロン（;）で終わる必要があります。

以下は、2つのCSS宣言の例です。

color: blue;
font-size: 16px;

1つ目の宣言はHTML要素の文字色を「blue」に設定し、2つ目の宣言は要素のフォントサイズを「16px」に設定しています。どちらの宣言もプロパティ名から始まり、コロンと値が続きます。

宣言は波括弧（{ }）の中に格納されます。

CSSのセレクタ（Selector）

前のセクションでは、宣言を使ってWeb要素にスタイルを適用する方法について説明しました。しかし、宣言はCSS構文の一部にすぎません。もう1つの重要な要素が「セレクタ」です。セレクタは、特定の宣言セットをどの要素に適用するかをブラウザに指示します。

CSSセレクタの構文は以下の通りです。

selector {
	// 宣言のリスト
}

セレクタは、どの要素にスタイルを適用するかをブラウザに指示します。たとえば、すべての<div>要素の幅を「500px」に設定したい場合は、次のようなルールを使用します。

div {
	width: 500px;
}

この場合、「div」がセレクタであり、CSSルールの先頭に配置されます。その後、波括弧の中に、先ほど説明した構文で宣言を定義します。このルールにより、Webページ上のすべての<div>要素の幅が「500px」に設定されます。

CSSセレクタについてさらに詳しく学びたい方は、CSSセレクタ入門ガイドもあわせてご覧ください。

宣言とセレクタが合わさって、1つのCSSスタイルルールが完成します。

CSSのコメント

ここまで、CSSでスタイルルールを書く方法を見てきました。しかし、スタイルシートに記述するテキストのすべてがスタイルルールというわけではありません。

CSSのスタイルシートには、コメントも保存できます。コメントとは、開発者がスタイルシート内のコードを理解しやすくするために書き込むテキストのことです。コメントはブラウザに無視されるため、好きなだけ追加できます。

コメントを書くことには、大きく分けて2つのメリットがあります。

まず、コメントを書くことで、コードを書きながら内容を整理でき、後でコードの意味を忘れてしまったときに参照できる記録として残ります。また、自分以外の開発者がそのコードを読んだときにも、コードの目的や意図を理解する大きな助けになります。

CSSのコメントは /* で始まり、*/ で終わります。

1行コメントと複数行コメント

CSSのコメントには、1行コメントと複数行コメントの2種類があります。

1行コメントとは、スタイルシート上で1行のみに収まるコメントのことです。以下は、スタイルルールの上に記述された1行コメントの例です。

/* このスタイルは、すべての<p>タグのフォントサイズを16pxに設定します */
p {
	font-size: 16px;
}

このコードでは、コメントが /* と */ の間に記述されています。コメントの下には、先ほど説明した構文を使ったスタイルルールが続いています。

複数行コメントとは、スタイルシート上で複数行にまたがるコメントのことです。以下は、CSSの複数行コメントの例です。

/* このスタイルは、すべての<p>タグのフォントサイズを16pxに設定し、
さらに文字色をグレーに設定します */
p {
	font-size: 16px;
	color: gray;
}

このコメントは2行にまたがり、CSSスタイルの内容を説明しています。

まとめ

他のプログラミング言語と同様に、CSSにもコードの書き方を定める基本的な構文が存在します。

CSSのスタイルルールは、「宣言」と「セレクタ」という2つの要素で構成されます。宣言は要素に適用したいスタイルそのものであり、セレクタは宣言を適用する対象となる要素を選択するために使われます。

さらに、CSSにはコメント機能があり、将来の参考のためにコードにメモを残すことができます。コメントはブラウザには無視されるため、自由に活用できます。

この記事では、CSS構文の基礎と、CSSスタイルシートへのコメントの書き方について解説しました。これであなたも、プロのWeb開発者のようにCSSのスタイルルールやコメントを自信を持って書けるようになっているはずです。