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

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト