シェアする
CSS Comments - Japanese Only
さらっと飛び込み営業が出来る人を尊敬しています。
というわけでみなさまいかがお過ごしでしょうか。
さて、引き続きCSSでのコメントアウトの記述方法を勉強していきましょう。HTMLでもコメントアウトはありましたね。
※HTMLのコメントアウトについてはこちら
CSSでのコメントアウトもHTMLとほとんど使い方は変わりません。
HTMLでは『<!--』と『-->』をつかってコメントアウトしましたが、CSSでは『/*』と『*/』で挟まれた部分がコメントとなります。
/* ここがコメントだよ */
p {
font-size: 18px;
font-weight: bold;
}
使い方はHTMLとほとんど変わらないので問題はないかと思います。上記のCSSでfont-sizeプロパティのとこをコメントアウトで無効にしたい場合はこのようになりますね。
/* ここがコメントだよ */
p {
/* font-size: 18px; */
font-weight: bold;
}
そんでもって複数行のコメントアウトも記述可能です。
/*
コメントは複数行でも記述できるよ。
説明やメッセージとか残すことに使えるよ。
*/
style属性に記述した場合もstyle要素を使って記述した場合も同じようにコメントアウトできます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS 練習中！</title>
<style>
/* ここがコメントだよ */
p {
/* font-size: 18px; */
font-weight: bold;
}
</style>
</head>
<body>
<p style=" /* color: red; */">ここにスタイルを適用するよ</p>
</body>
</html>
CSSコメントアウト使用時の注意点としてコメントアウトにコメントアウトを入れ子にすることはできません。
/* これは /* ダメだよ */ */
この場合は最初に登場した『*/』でコメントが終了してしまいます。間違えて記述しないように気をつけましょう。
続いて昔からバグなのか仕様なのかよく分からない変な挙動が1つあります。コメントアウトの『*/』の手前に全角文字があるとなぜか閉じタグとして認識されない、という挙動です。これはブラウザの違いやバージョンによってかなり差があり症状が出たり出なかったりします。最近でも一部のandroid端末でこの症状が出たことがありましたので今後も避けたほうが無難です。
これについては結構忘れがちな部分であるうえに気づきにくいところなのでCSSでコメントアウトする際は最初から文頭と文末に半角スペースを1つ挟むようにすると良いかと思います。『/*』と『*/』ではなく半角スペースを追加して『/* 』と『 */』という形で書くようにするといった感じです。
というわけで以上がCSSのコメントアウトについての解説でした。
次の記事ではID属性とクラス属性について勉強していきましょう。ではー。
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
