スタイルシートでのコメントの書き方
スタイルシートのソース中にコメントを記述するには、コメントにしたい文字列を「 /* 」と「 */ 」で囲みます。（必ず半角文字で記述します。）
記述場所に制約はほとんどありません。 以下のどの記述も、正しく（コメントとして）無視されます。
※もちろん、ソースが読みにくくならないような位置にのみ書くようにすべきですが。
div.header /* セレクタの直後 */ {
color: #0000ff; /* 1つのスタイルの後 */
background: /* こんなところにも書ける */ #ffffcc;
/* コメントは、
複数行にわたることもできます。 */
}
ただし、コメントは入れ子（コメントの中にコメントを含む）にはできません。次のようには記述できませんので注意して下さい。
上記の例では、一見、「外側のコメント（赤色）」と「内側のコメント（青色）」で、正しく対応が取れているようにも感じられます。 しかし、HTMLのコメントと同様、スタイルシートのコメントも入れ子構造にはできません。 したがって、コメント開始を表す「 /* 」を何度記述しても、次に「 */ 」が出てきたところでコメントの範囲は終了します。 （つまり、「☆☆☆☆」の箇所はコメントの外側ということになってしまいます。）
スタイルシートのコメントはHTMLとは異なるので注意
スタイルシートのソース内では、「HTMLのコメント」は記述できません。 スタイルシートは、HTMLソース中にも記述することができるので混同しがちですから、注意して下さい。 次のようなコメントは書けません。
h1 { background-color: #ffffcc; }
h2 { color: red; }
<!--コメント-->
h3 { font-weight: normal; }
p { font-size: smaller; }
上記は、スタイルシート中に、HTMLの形式でコメントを記述してしまった例です。 これは記述方法として誤りです。このようなソースを書いてしまうと、コメントの直後にあるスタイル指定（上記の例では、h1要素とh3要素に対するスタイル）が、解釈されなくなってしまいます。(※)
スタイルシートでは、例えば、「div要素の直下(直接の内側)にあるp要素」に対してのみスタイルを適用したい場合、
また、スタイルシートではHTMLと同様に、改行に特別な意味はありません。
上記の2点から、さきほどのソースの1行目～2行目は、次のように解釈されると考えられます。
詳しくは長くなるので割愛しますが、コメントの書き方によっては文法エラーとならない別の解釈になる場合もあります。しかし、直後のスタイルが解釈されなくなることに変わりはありません。 （※コメント文字列とコメント終了を表す「-->」との間に空白があると、IEやOperaでは問題がなくなるようですが、Mozilla系ブラウザでは解決しません。）
上記のスタイルシートは、正しく記述し直すと、次のようになります。
h1 { background-color: #ffffcc; }
h2 { color: red; }
/* コメント！ */
h3 { font-weight: normal; }
p { font-size: smaller; }
間違えないよう、気を付けて下さい。
なお、昔は、スタイルシートを解釈できない古いブラウザが、スタイルシートのソースをそのまま画面上に表示してしまうのを防ぐために、 スタイルシート全体をHTMLのコメントとして囲む、以下のような書き方がよく使われていました。
<!--
h1 {
background-color: #ffffcc;
}
-->
</style>
このように、スタイルシートの最初から終わりまでをHTMLのコメントで囲むのは、問題ない記述方法です。 （※HTMLファイル中にstyle要素を使ってスタイルシートを記述する場合。）
ただ最近は、スタイルシートを解釈できない古いブラウザが利用されることがほとんどないと考えられるため、このように記述する必要性はあまりないといえます。
おわりに
今回は、スタイルシートのコメントを使って、ソースを見やすくする方法と、 コメントを使う上での注意点をご紹介致しました。
ぜひ、コメントをうまく活用して、後々でも読みやすいソースを記述して下さい。
