【CSS】コメントアウトの書き方


CSSのソースコードの中に、コメントを書き込んでおくことができます。

これを『コメントアウト』といい、ソースコード内に説明や注釈を入れておきたい場合や、表示指定を一時的に無効にしたいときなどに利用できます

コメントアウトとは?

コメントアウトとは、プログラム中に書き込める注釈やメモのこと。単に「コメント」ともいいます。

コメントアウトは、単なる説明文なので、プログラムの実行には、一切影響を与えません。

以下で、コメントアウトの書き方をご説明します。

スポンサーリンク

コメントアウトの書き方

CSSでは、『/*(スラッシュ+アスタリスク)』と『*/(アスタリスク+スラッシュ)』で囲った範囲がコメントとなります。

「/*」の後ろに半角も不要ですし、また「*(アスタリスク)」の数は、多くても問題ありません。

/* コメント */

/*
コメント
*/

/*コメントコメント
コメントコメント*/

/********** コメント **********/

/**********
コメント
**********/

コメントアウトの利用例

CSSのコメントアウトは、色んな使い方ができます。特にオススメなのが次の2つ。

  • 見出し
  • 一時的な無効

スタイルシートの見出し

CSSのコメントアウトがよく使われるのが、見出し

CSSを記述する「スタイルシート」には、非常に多くのセレクタやプロパティが書かれます。

CSSの書き換えが必要な場合、何がどこにあるのか分からなくなってしまいます。

そこで使われるのが『コメントアウト』。

コメントアウトを”見出し”として使うことで、CSSをジャンルにまとめて整理できるため、CSSの追加や変更が非常に楽になります。

以下は、見出しの使用例。

/**********
ヘッダー内のCSS
**********/
#header{…}


/*ヘッダー内の画像*/
#header img{…}

/**********
メインコンテンツ内のCSS
**********/
#main{…}

CSSを一時的に無効にする

Webデザインを変えるため、CSSを考える際、複数のデザイン案に悩むことがあります。

そのような場合にも、このコメントアウトが使えます。

以下の例は、2つのデザイン案で悩んでいて、一旦、下の案をコメントアウトさせている状態です。下の案のCSSは読み込まれません。

h2{
  background-color:#ff0000;
  border:5px solid #cccccc;

/*background-color:#0000ff;
  border-bottom:3px dotted #999999;*/
}
スポンサーリンク
ページ先頭へ