ホームへ

CSSの1行や複数行でのコメントアウト

2021年11月03日

CSSのコメントアウト

CSSにおけるコメントアウトは「/*」と「*/」で囲みます。

CSS内で「/*」と「*/」の間に書いた文字はないものとして扱われます。これをコメントアウトと呼びます。

/*ここに自由に記載*/

このコメントアウトはメモやタイトルとして使ってもいいですし、CSSを一時的に効かなくさせるときにも使えます。

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

1行でも複数行でもコメントアウトは同じ

CSSのコメントアウトは1行でも複数行でも同じです。

div{
    /*margin:10px;*/
}

このような記述があったとき、divに「margin:10px」は効きません。

/*
div{
    margin:10px;
}
*/

上記のように複数行をコメントアウトすることもできます。

なお、htmlのコメントアウトは<!--コメントアウト-->であり、CSSのコメントアウトとは異なるため注意しましょう。

1行のコメントアウトは「//」?

PHPも複数行のコメントアウトは「/*」と「*/」で囲みますよね。

ということは、PHPの一行コメントアウトである「//」や「#」で、CSSも一行コメントアウトできるのでしょうか?

結論から言うとCSSは「//」や「#」ではコメントアウトできません

実際に「//」や「#」をつけてみると、CSSが効かなくなり一見コメントアウトできているように感じられますが、単にCSSが壊れて効いていないだけです。

その前後のCSSも効かなくなることがあるので絶対やめましょう。

CSSでは1行だけのコメントアウトでもしっかり「/*」と「*/」で囲みましょう。

正しいコメントアウト

div{
    /*margin:10px;*/
}

間違ったコメントアウト

div{
    //margin:10px;
}

まとめ

CSSのコメントアウトは1行でも複数行でも「/*」と「*/」で囲む。

以上、CSSの1行や複数行でのコメントアウトでした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ