2021-02-05

CSS: コメントの記述方法

CSSでは「/*」と「*/」で囲った部分がコメントになります。次の例では、緑色の部分がコメントとみなされます。


/* p 要素設定 */
p {
    color: blue;      /* 文字色 青 */
    font-size: 15px;
}

コメントの入れ子とは？

CSSのコメントは入れ子にすることが出来ません。コメントの入れ子とはどういう事かを説明します。

次の例をみてください。 p 要素の文字色（color）とフォントサイズ（font-size）を指定する設定があるとします。 color 指定の後ろにコメント「/* 文字色青 */」があります。


p {
    color: blue;      /* 文字色 青 */
    font-size: 15px;
}

このp 要素のCSS設定をコメントアウトしたいと思って、次のように p 要素のCSS設定の前後に「/*」と「*/」を入れてみます。


/*
p {
    color: blue;      /* 文字色 青 */
    font-size: 15px;
}
*/

p 要素全体を囲む「/*」と「*/」の中に「/* 文字色青 */」のコメントがあります。つまり、コメントの中にコメントがあります。これがコメントの入れ子です。

下の緑色の部分がコメントとして解釈される部分です。「/* 文字色青 */」の「*/」がコメントの終了を意味しますので、ここでコメントが終了します。それ以降が中途半端な状態となってしまい、正常に解釈されません。

ですから、CSSではコメントの入れ子はできません。


/*
p {
color: blue;    /* 文字色 青 */
    font-size: 15px;
}
*/

JavaScript言語では、「/* */」と「//」の２通りのコメントがあります。 JavaScriptの「//」ように行単位のコメントがあれば入れ子にできるのですが、 CSS では「/* */」しかないのでコメントの入れ子はできません。