【CSSの基本】コメントを誰でも簡単にする方法を解説

CSSのコメントアウトとは？

HTMLを学習していると、わかりやすくするためにも、CSSを別のファイルに記述したりまとめて記述することが必要になってきますね。しかし、どんどん記述が増えてくると、「あれ？これはどこに指定したCSSだったっけ？」「間違えて、必要なところまで消してしまった！」なんてことが起こってきます。間違いを防止するために、また、あとで見たときにもわかりやすいように整理するために、コメントはとても大切なのです。

どんな時に使うか

慣例的に、以下のような場合にコメントが使用されます。

• CSSの目次として
  スタイルシートが長く（ファイルが大きく）なってくると、どこに何が書いてあるかわからなくなります。そこで、CSSファイルの冒頭に目次をつけると、ファイルを開いた時にすぐ、何が書いてあるのかわかり、便利です。
• 更新履歴として
  複数人でCSSを変更する場合、だれがいつ修正を加えたのかわからない場合があります。まちがえて、他の人の修正や追加を消してしまわないように、更新した履歴を残すと便利です。ただし、最近はバージョン管理システムを個人でも安価で導入できるようになったため、更新履歴を記述しない方も多いですね。
• 記述をいったん消したいとき
  試しに色やサイズをちょっと変えてみたいけど、すぐに元に戻せるようにしておきたい時や、一時的に変更を加えたい時があります。そんな時は、もとの記述をコメントで残したまま新しい記述をします。失敗してもすぐに元どおりにできますね。
• 見出しとして
  このCSSはこのページに使うもの、この部品に使うもの、という見出しを記述しておきます。すると、確認や修正の時にすぐに見つけることができるので便利です。目次と併用すると良いですね。
• 用途の説明として
  イレギュラーな記述をしている時など、なぜこれを書いたかを記録しておきます。あとで見た時や他の人が修正する時にも困らなくてすみますね。

構文

「/」 「/」で挟むと、CSSは「これは反映してほしい記述ではなく、コメントだな」と認識してくれます。 *とコメント本文の間に半角スペースが必要ですので、忘れないでくださいね。

CSSでコメントを書く方法

具体的に、どのように書くのか、使用例を見ていきましょう。

目次

/* --------------------------- */
    [1] Topページ用
    [2] 共通メニュー用
    [3] ヘッダー用
/* --------------------------- */

間の「----------」は、目次がめだつように入れています。好きな文字で、なんでもかまいません。

更新履歴

/* ======================================
    2017/04/01 M.Y 新規作成
    2017/04/10 N.S Topページにアイコン追加
    2017/04/30 N.N リンクの色変更
======================================== */

複数人で作成した場合、名前を入れる場合もあります。 Webサイトに適用されるCSSは誰でも閲覧できてしまうので、あまり個人の情報は書き込まない方が良いかもしれませんね。

いったん消しておく時

.boxtest {
    padding: 20px;
/*  background-color: #FFFFFF; */
    background-color: #FFCCFF;
}

ひとつめの background-color の指定はコメントになっているので、無視されます。背景色を一時的に変更したかったようですね。気が変わったらすぐに元に戻せます。

見出し

/* **************************
  [1] TopMenu
************************** */
：
：
/* **************************
  [3] Header
************************** */
：
：

指定が多くなっても、ざっと見て概要がつかめるように、見出しを記載しておくと見つけやすくなります。

用途

.boxtest {
    padding: 20px;
    background-color: #FFCCFF;
/*  border: solid 2px; */   
    border: solid 10px; /* X月まで目立つように線を太くしています */
}

他と違う指定をしているところなど、後で見てわかりにくそうなところにはコメントをつけておくと親切ですね。

Tips (ステップアップの小ワザ)

HTMLのコメントとは書き方が違います

<!-- HTMLコメントです -->

HTMLのコメントは、「<!-- 」「 -->」で囲んで記述します。

Tips (ステップアップの小ワザ)

Webサイトの作成にとても役立つコメントアウト、ぜひ覚えて使ってみてくださいね。

まとめ