Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

  1. トップページ
  2. CSS入門編 - CSSのコメントアウト

CSSのコメントアウト

さらっと飛び込み営業が出来る人を尊敬しています。

というわけでみなさまいかがお過ごしでしょうか。

さて、引き続き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属性とクラス属性について勉強していきましょう。ではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類
桜舞 春人 Sakurama Haruto

ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。

シェア
このエントリーをはてなブックマークに追加