CSSのコードの可読性をあげるために欠かせないコメントアウトの解説です。基本的な書き方に加え、実務でのサンプルもご紹介します！
コメントアウトとは？
コメントアウトとは、エディタ（コード）に書くもので、ブラウザには表示されないメモのようなものです。
<p>この文字は青色です</p>/*これがコメントです*/
p{
color : blue;
}この文字は青色です
HTMLは今まで学んできた通りのものですが、CSSのコードには/*これがコメントです*/と書いていますね。その文章はブウラザには表示されていないのがお分かりいただけたでしょうか。
繰り返しになりますが、このようにコードに書いてもブラウザには表示されないものをコメントアウトといいます。
HTMLのコメントアウトの違いについて
コメントアウトは、どのプログラミング言語にもあります。HTML、CSS、JavaScript、PHP……上げ出したらキリがないですが、実はそれぞれ言語ごとでコメントアウトの書き方が異なります。
かもめHTMLとCSSでは、コメントアウトの書き方が全然違うんですよ！
HTMLのコメントアウトについてはこちらの記事で詳しく解説しています。最初のうちに覚えてしまった方がいい内容ですので、ぜひこの機会に学んでくださいね。
コメントアウトの書き方
それでは、CSSのコメントアウトの書き方を学んでいきましょう。実は書き方は２通りありますが、簡単ですのでこの機会に両方覚えてくださいね。
書き方：１行
まず、１行のコメントアウトを書く場合です。
/*ここにコメントの内容を書く*/先ほどのサンプルコードにも出てきましたが、１行に書く場合は/*○○*/と書きます。
書き方：複数行
次に、複数行のコメントアウトを書く場合です。
/*
ここにコメントの内容を書く
実は複数行の場合も同じ
*/１行で書いた場合と同様、/*と*/の間にコメントを書きます。
問題：どちらが正解でしょうか？
ここで、みなさんに質問です。次の複数行コメントの書き方のうち、どちらのほうが正しいでしょうか？
１つ目
/*
これは１行目です
これは２行目です
*/複数行の行頭が揃っていますが、その分４行必要になっているので、これが大量になってくると、縦にスクロールが伸びてしまいます。
２つ目
/*これは１行目です
これは２行目です*/一方こちらは、/*と*/を行頭と行末に書くことにより、全体的なコード量を削減していますね。
実はこれらのコメントアウト、どちらも正解です。CSSのコメントアウトには改行についてのルールはないため、どちらも正解というわけです。
かもめでは、より適切なもの、あるいは実務でよく使われているのはどちらでしょうか？
答えは一つ目です。理由は色々ありますが、文字の開始位置が揃っているのでパッと見たときに分かりやすいという点が大きいですね。
コメントアウトのサンプル
それでは、ここからは、現場でよくあるCSSコメントをご紹介します。
サンプル：見出しをつける
/*===============================
大見出し
================================*/
/* 小見出し =====================*/HTMLのh1～h6のように、見出しをつけると分かりやすくなります。
私は個人的なものを制作する際には=（イコール）で区切ったCSSコメントを愛用しています。
/*-------------------------------
大見出し
-------------------------------*/
/* 小見出し --------------------*/他にも、-（ハイフン）で区切る場合や
/*
*
* 大見出し
*
*/
/* 小見出し */区切らず、行数で見出しを作ることもできます。
サンプル：セクションごとの見出し
/*===============================
グローバルナビ
================================*/
/* リンク =======================*/
/*===============================
メインビジュアル
================================*/
/* 画像 =========================*/セクションごとに大見出しをつける方法です。よく見る形ですね。
パッと見たら誰でも分かるように書くことを意識して書いてみましょう。
サンプル：目次
/*== 目次 =======================
1.ヘッダー
1-1.グローバルナビ
1-2.問い合わせボタン
2.メインビジュアル
2-1.画像
2-2.テキスト
3.バナーリンク
3-1.画像
3-2.リンク
3-3.テキスト
================================*/大規模案件になってくるほど、CSSファイルが複数に分かれることがあります。
迷える子羊メインビジュアルのCSSを変えたいけど……どこにあるんだったっけ？
となってしまった時。
目次がCSSファイルの先頭にあれば、一目でどのCSSが書かれているか分かるため、大変分かりやすいです。
補足：一時的にCSSを無効にしたいとき
/*
.mv img {
background-color: #333;
}
*/
.mv img {
background-color: #b1b1b1;
}CSSを一時的に無効化したいとき、コメントアウトしてしまえば丸ごと無効化することができます！
かもめwebに詳しい人ならCSSファイルだってさくっと見れちゃいます。
コメントアウトで一時的に無効化した部分が残っているとちょっと格好悪いので、忘れず消すようにしましょうね
コメントアウトまとめ
- プログラミング言語ごとでコメントアウトの書き方が異なる
- 書き方：
/*と*/で囲う - CSSコードの可読性を上げるために使用する
- 厳密なルールがない分、実務ではコーディングルールに従う
- 見出しとして使用すると、CSSがより分かりやすくなる
- 一時的にCSSを無効化することにも使える
