CSSコメントの書き方：基本構文からコメントアウトの実践テクニックまで

CSSスタイルシートにコメントを書くことで、コードの意図や内容を簡潔に記録（説明）できます。これは自分自身のためだけでなく、チームメンバーがコードを理解する際にも大いに役立ちます。

CSSコメントの基本構文

CSSでコメントを書くには、次の構文（フォーマット）を使用します。

/* これはCSSのコメントです */

「/* */」という形式は、CSSでコメントを記述できる唯一の方法です。そのため、1行コメントにも複数行コメントにも、この同じ形式が使われます。

/* 
   これは複数行にわたる
   CSSコメントです。
   ブロックコメントとも呼ばれます。
*/

コメントアウトの実例

次に、コメント構文を使ってルールセット内のCSSコードを「コメントアウト」する例をいくつか紹介します。

.box {
  background-color: #000;
  padding: 1.5rem;
  /* border-radius: 4px; */
}

.box {
  background-color: #000;
  padding: 1.5rem; /*
  border-radius: 4px;
  box-shadow: 5px 10px #888888;
  */
}

実際の開発現場では、コメントはコードのドキュメント化だけでなく、テスト中に特定のスタイル宣言を一時的に無効化（コメントアウト）する目的でも頻繁に使われています。

CSSとJavaScriptのコメントの違いに注意

CSSのコメントとJavaScriptのコメントを混同しないようにしましょう。JavaScriptでは、複数行コメントに「/* */」（CSSと同じ形式）を使用し、1行コメントにはスラッシュ2つの「//」を使用します。

• 1行コメントは「インラインコメント」とも呼ばれます。
• 複数行コメントは「ブロックコメント」とも呼ばれます。

CSSのコードなのに「//」で1行コメントを書いているプロジェクトを見かけたことがあるかもしれません。よく観察してみると、それらのプロジェクトはSass/SCSSやLessといったCSSプリプロセッサを使用しています。これらの言語はJavaScriptと同様に1行コメントをサポートしています。一方、素のCSS（バニラCSS）では、残念ながら「/* */」しか使用できません。

CSSコードにコメントを書くべきか？

HTMLへのコメントの付け方に関するチュートリアルでも触れたように、このトピックについては開発者の間でも意見が分かれています。「コードは明示的で、それ自体が説明になるべきだ」と考える人もいます。

私にとって、この問題は白黒はっきりつけられるものではありません。すべてのコメントが等しく有用というわけではないからです。CSSスタイルシートを小説の執筆場所にしてはいけませんが、短く簡潔なコメントは、初心者やチームの新メンバーがコードの動きを理解するうえで大きな助けとなります。

私なら、どんな時でも「暗黙的」よりも「明示的」なコードを選びます。

また、コメントがファイル容量を圧迫してページの読み込み速度に悪影響を与えるのではないかと心配する必要もありません。パフォーマンスやページ読み込み速度の改善において、コメントなどのテキストは最優先で対処すべき項目ではありません。さらに、ポストプロセスの段階でコメントを自動的に削除してくれるツールも存在します。