CSSでコメントアウトする方法と書き方を解説！
CSSでコメントアウトする方法と書き方を紹介していきます。CSSのコメントアウトの書き方はHTMLとは異なりますので注意が必要です。
CSSのコメントアウトとは？
みなさんはCSSを書く際にコメントアウトを書いていますでしょうか？
コメントアウトとは、CSSの記述の中でメモ書きや注意書きを残すことができる機能です。もちろん日本語でもコメントを残せますので、自分へのメモ書きや他の開発者へのメモ書きとしてとても使える機能です。
コメントアウトした箇所は処理の中で無視される
下記はCSSにコメントを記述した際の例になります。CSSでのコメントの書き方については次の章で解説しますが、日本語で書いたコメントはブラウザ上には全く表示されていないところがポイントです。
上記の例のindex.cssでは日本語で書かれている「こちらはコメント」という文章は特にエラーも起こさず、かつブラウザ上にも表示されていない状態です。
このように実際の動作には影響せずに、メモを残せる機能がコメントアウトです。
今は非表示にしたいが後で表示したい時のために一時的にコメントアウト
またコメントアウトは一時的に非表示にしたいスタイルがある場合にも使えます。例えば下記の例ではindex.cssの後者のスタイルは非表示になります。
このように一時的に非表示にしたいときの手段としてもコメントアウトは使えます。
CSSのコメントアウトの書き方
それではCSSでのコメントアウトの書き方を解説していきます。
まず知っておいてほしいのは、コメントアウトはCSSだけではなくHTMLにもJavaScriptにもありますが、それぞれ書き方が異なります。
しっかりと「CSSのコメントアウト」の書き方を今回身につけましょう。
コメントアウトが1行の場合
まずはコメントが短く1行で済む場合の書き方です。下記のように記載します。
コメントが1行
/* ヘッダーの背景色を青にする */
.header {
background-color: blue;
}上記の「ヘッダーの背景色を青にする」という日本語はコメントで、実際の処理では無視されます。
コメントは下記の形式で書きます。/*の記号と*/の記号の間に書かれた部分がコメントとなります。
コメントアウトの形式
/* ここにコメント */コメントアウトが複数行の場合
コメントアウトが複数行の場合でも同様の形式です。下記はコメントアウトが複数行にまたがっている例です。
複数行のコメント
/*
ヘッダーの背景色を青にする
複数行のコメント
*/
.header {
background-color: blue;
}複数行でも/*と*/の記号ではされれた箇所がコメントして扱われます。
見やすいコメントデザインを採用しよう
コメントは文法さえ守ればコメントのデザインは特に決まりはありません。下記の記事では見やすいコメントのデザインのパターンを紹介している記事です。
ぜひご自身で一番見やすいコメントのデザインを考えてみて下さい。
ショートカットでコメントアウトする方法を覚えよう
コメントアウトは各エディターでショートカットのコマンドが用意されていることが多いです。主要なエディターでのショートカットコマンドを紹介します。
ぜひ使いこなして、すぐにコメントアウトできるようにしておきましょう。
Sublime TextやAtomやCotEditorなど
コメントアウトのショートカット
行を選択orカーソルをあわせ下記ショートカットを実行
[Windows]
Ctrl + /
[Mac]
Command + /
