CSSにコメントを入れる方法

CSSに記述した内容を、覚書として残したい時があります。

本ページでは、CSSにコメントを入れる方法を説明します。

コメントの記述方法

CSSのコメントは、以下で入れることができます。

【HTMLのコメント】
/* コメントです。 */

/*と、--*/で囲んだ範囲がコメントになります。1行の途中からコメントにすることもできます。

また、以下のように、複数行にまたがることもできます。

【CSSの複数行にまたがったコメント】
/*
コメントです。
2行目もコメントです。
*/

1つの宣言を囲ってコメントにできますし、ルールセット全体をコメントにすることもできます。

CSSのコメントは、入れ子(コメントの中にコメントを入れる)にはできません。

見出しのような使い方

コメントの使い方の1つは、見出しのように記述することです。以下は、例です。

【コメントを見出しとして使う例】
/* --- サイドバー --- */
#submenu {
  margin: 10px;
}

・・・

以降が、サイドバーに関連するスタイルというのがわかります。

覚書として使う

覚書としても使えます。以下は、例です。

【コメントを覚書として使う例】
#submenu {
  margin: 10px; /* 2020年10月1日:コンテナの幅を広げたため */
}

後で見ると疑問に思うかもしれない宣言について、コメントを入れておくと思い出しやすくなります。

コメントアウト

コメントは、一時的に削除したいけど元に戻す可能性もあるため消したくない、と言った時にも使えます。これを、コメントアウトと呼びます。以下は、例です。

【コメントアウトの例】
/*
#submenu {
  margin: 10px;
}
*/

もし、コメントにしてうまく表示されたのならそのまま消せますし、問題なければコメントを外せばすぐに元に戻せます。