CSS コメント

Volardev 編集部 April 12, 2026

1. CSS コメントとは？

CSS コメントは、コードの説明を記述するために使用され、将来そのソースコードを修正する際の助けとなります。

コメントはブラウザによって無視されるため、実際のページ表示には一切影響を与えません。

CSS のコメントは、<style> 要素内に記述します。コメントの開始は /* で、終了は */ です。

/* これは 1 行のコメントです */
p {
  color: red;  /* 段落の文字色を赤に設定 */
}

コメントはコード内の任意の場所に配置することが可能です。要素の直後や、プロパティの横など、文脈に合わせて注釈を添えられます。

CSS では、1 行のコメントと同じ構文を使用して、複数行にわたる説明を記述することができます。

/* これは複数行の
コメントの例です。
複雑なロジックやスタイルの意図を詳しく
説明する際に非常に便利です。
*/
p {
  color: red;
}

コメントは、テスト目的で一時的に CSS のコードを無効化（コメントアウト）するためにも多用されます。

特定のプロパティやルールセットをコメントで囲むことで、ブラウザはそのコードの適用をスキップします。これにより、デザインの崩れを確認したり、新しいスタイルを試したりする際のデバッグがスムーズになります。

/* h1 {
  color: blue;
  text-align: center;
} 
*/

p {
  /* color: red; */
  font-size: 20px;
}

実務のフロントエンド開発では、以下のような目的でコメントを戦略的に使用します。

セクションの分割: 「ヘッダー」「メインコンテンツ」「フッター」など、スタイルシートの役割ごとに大きな見出しコメントを付けて構造化します。
メタ情報の記載: 作成者、最終更新日、依存しているライブラリの情報などをファイルの冒頭に記述します。
ハックの解説: 特定のブラウザ（レガシーブラウザ等）向けの特殊な記述を行う際、なぜそのコードが必要なのかを明記し、後のリファクタリング時に誤って消されないようにします。

適切なコメントを残すことは、プロジェクト全体のメンテナンスコストを下げるための重要なステップです。