CSSのコメント表記について

CSSにメッセージを記述したり、ソースコードを無効化することができるコメントの書き方について解説します。

この記事のポイント

CSSのコメントの記載方法が分かる

CSSにコメントを記述する

CSSにはプログラミング言語のようにソース中にコメントを記述することができます。

用途は主に2つで、メッセージを残すか、記述されたCSSを一時的に無効にする（コメントアウトと呼ばれます）際に使用されます。

コメントは「/*」と「*/」で囲みます。

コード例

<style>
/* 1行のコメント */

/*
複数行に渡るコメントも自由に記載することができます。

2018.07.26
****のためCSS追記

このようにCSSにメッセージを残すことができます。
*/

section p {
	/* margin-bottom: 15px; <- CSSを一時的に無効にするときにも使われます。 */
	color: #333;
	font-weight: bold;
}

/* もちろん、1行のみでなくまとまった単位でCSSを無効化する用途でも使われます。
section div p {
	font-weight: bold;
	color: green;
}
*/

/*
/* コメントの入れ子はできない */
*/
</style>

1行コメント、複数行コメントのいずれも同じ形式で記述できます。
ただし、入れ子はできないので注意してください。

コメントはメンテナンス性を考慮する

コメントは後からソースを見直しても内容が分かるようにしましょう。

他の人が読んでも分かるように書く
必要以上に長いコメントは避ける

一時的なコメントアウトをずっと残さない

特定のCSSを一時的に無効にすることができますが、頻繁に使いすぎると後で読み返した時に「どうして無効にしたのかが分からない」ということになります。
ソースが不必要に煩雑になってしまうため、本当に必要なときに、必要な箇所だけ使うようにしてください。