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;の行がコメントアウトされているため、ブラウザには反映されません。

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

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