CSSのコメントアウトの書き方と使い方

コメントアウトとは？

cssのコメントアウトはコードの途中に”メモ”が書ける機能です。コードを書く側の人が、プログラムのどの部分に当たるソースコードなのか判別しやすくする為にコメントアウトしてメモを残します。

コメントアウトで書いたコメントは無効となりWebブラウザでは表示されません。cssファイル内で自分自身で分かりやすいようにちょっとしたメモを残しておきたいといったような時にコメントアウトの機能はとても便利です。

コメントアウトの書き方

cssのコメントの書き方は細かく分けると二種類あります。コメント内容を全角文字で書くか、半角文字で書くかでコメントアウトの書き方は変わります。それぞれ詳しく見ていきましょう。

1.コメント内容を全角文字で書く方法

2.コメント内容を半角文字で書く方法

3.コメントアウトを複数行で書く方法

コメントアウト活用方法

cssコメントアウトは”メモ”が書ける機能と説明しました。普段日常生活で使っているメモとは異なり、プログラミングの世界ではメモは様々な活用がされます。

使用する場面は？

ソースコードを読む際に参考となる情報を記しておくだけでなく、ソースコード自体をコメントアウトしてcssを適用しないように指定することも出来ます。一つ一つ使用する場面と活用例を見ていきましょう。

ソースコードの上部に概要を書く

ソースコード自体をコメントアウトする

コード一行毎にコメントアウトで概要説明

見やすいコメントアウトの書き方

cssコメントアウトは記号「=」「-」など使って、まとまり毎に区切りをつけて使うと見やすくなります。見やすいコメントアウトの例をご紹介していきます。

例1.「-」を使ったコメントアウト

 style.css
/*---------------------
トップページサイドバー
カテゴリー各項目
------------------------ */
 

例2.[=]を使ったコメントアウト

 style2.css
/*==================
トップページサイドバー
カテゴリー各項目
=================== */

コメントアウトのショートカットキー

エディターを開いている状態でコメントアウト[/*  */]をショートカットキーで簡単に入力する事が出来ます。windowsを使っている場合は「shiftキー」＋「？」で入力する事が出来ます。

macの場合は「command」+「?」で入力する事が出来ます。

CSSコメントアウトの注意点

コメントアウトをする際にはいくつかの注意点があります。コメントアウトは入れ子をする事はできません。全角文字でコメントを書いて「*/」の前にスペースを入れるのを忘れてしまうといった事でcssコードが正常に動作しなくなることがあります。

コメントアウトを使う際には気をつけましょう。

コメントアウトの入れ子はできない

 style3.css
/*
トップページサイドバー
/*
.sidebar{
color:red;
border:dotted;
}
*/
*/

全角文字のコメント後にスペース

 style4.css
/*サイドバーの装飾*/
.sidebar{
color:red;
border:dotted;
}

コメントが長いのは良くない

 style5.css
/*サイドバーの装飾
文字を赤くする。
枠線を点線に指定する。
*/
.sidebar{
color:red;
border:dotted;
}

まとめ

cssでコメントアウトする方法をご紹介しました。cssでコメントアウトする際は「/*」と「*/」でコメントを囲みます。コメントアウトを使う場面は、自分のメモ書きする場合やソースコードを無効にする場合などがあります。

コメントアウトを上手に使って快適にwebデザインを行なっていきましょう。