CSSのコメント書き方を完全ガイド！初心者でもわかるスタイルシートの注釈方法

新人と先輩の会話形式で理解しよう

新人

「CSSのコメントはどう書けばいいんですか？」

先輩

「CSSでは、コメントを書く方法があります。それを使うと、コード内にメモや説明を追加できますよ。」

新人

「コメントを書いた場合、コードの動作に影響はありますか？」

先輩

「コメントはコードの動作に影響を与えませんが、コードを理解しやすくするために重要です。それでは、コメントの書き方を見ていきましょう！」

1. コメントの基本的な書き方

CSSのコメントは、コードの中に説明を加えたり、メモを残したりするために使います。CSSでコメントを書くためには、次のように書きます：


/* これはCSSのコメントです */
p {
    color: blue;
}

このコードのように、コメントは/*で始まり、*/で終わります。この間に書かれた内容は、ブラウザに表示されません。

CSSでは複数行にわたるコメントを書くこともできます。その場合、コメントは開始と終了のタグで囲みます：


/* 
   このコメントは
   複数行に渡っています
   CSSのコードには影響しません
*/
h1 {
    color: green;
}

この例では、複数行にまたがるコメントを使用しています。コメントは、コードの実行には影響を与えませんが、コードを理解する上で役立ちます。

コメントを使用することで、コードを読みやすくしたり、他の開発者に説明を加えたりできます。たとえば、なぜ特定のスタイルを適用したのか、どういった目的でそのコードが使われているのかをコメントで説明できます。


/* ヘッダーのテキスト色を青に設定 */
h1 {
    color: blue;
}

この例では、h1タグの色を青に設定した理由をコメントで説明しています。

コメントは、特に以下の場面で有効です：

たとえば、特定のスタイルを一時的に無効にしたい場合、次のようにコメントアウトしてコードを無効化できます：


/* color: red; */
h1 {
    color: blue;
}

このコードでは、color: red;の行がコメントアウトされているため、ブラウザには反映されません。

コメントを書く際には、以下の点に注意することが重要です：

コメントは、コードが複雑な場合や、他の開発者と共同作業をする際に特に有用です。しかし、コメントを過剰に使いすぎるとコードが見づらくなることもあるので、適切に使いましょう。

CSSのコメントは手動で入力するだけでなく、エディタのショートカットキーを使うことで効率的に記述できます。多くのコードエディタでは、選択した行を簡単にコメントアウトできます。


/* ショートカットでコメントアウトされた例 */
p {
    /* color: red; */
    color: blue;
}

たとえば、VSCodeなどではショートカットキーを使うことで、複数行のコメントも一瞬で追加できます。作業効率を上げるためにも覚えておくと便利です。

コメントを書く際には、ただ説明を書くのではなく、誰が見ても理解しやすい内容にすることが重要です。特にチーム開発では、統一された書き方を意識しましょう。


/* ナビゲーションメニューの背景色を設定（デザインガイドに基づく） */
.nav {
    background-color: #333;
}

このように「なぜそのスタイルにしたのか」を明記することで、後から見返したときにも理解しやすくなります。

コメントはコードの補足説明として役立ちますが、バージョン管理ツールと併用することでさらに効果を発揮します。変更履歴と組み合わせることで、コードの意図がより明確になります。


/* 2026/03/01 ボタンの色をブランドカラーに変更 */
.button {
    background-color: #ff6600;
}

このように変更内容を簡潔に記録しておくことで、過去の修正理由を把握しやすくなります。保守性の高いCSSを書くためにも、コメントを適切に活用しましょう。