/*コメント*/ CSSでコメントアウト

CSSでコメントを書くときには/* ここにコメント */という書き方をします。コメントはブラウザに無視されるため、自分用のメモを書いておいたり、一部のCSSを無効にしたいときに役立ちます。

.example {
  color: red; /* 文字色は赤に */
}

/*と文の間の半角スペースは必須ではありませんが、見やすいように入れておくことをおすすめします。

複数行のコメントを書く

/* 
複数行
のコメント
を書く
*/
.example2 {
  display: block;
}
/* 1行のコメントを */
/* 並べてもOK */

👆/*から*/の間で単純に改行することで、複数行のコメントアウトにすることもできます。もちろん1行のコメントを並べてもOKです。

区切り線を使って見やすくする

/* -----------------------
見出し
----------------------- */
.heading {
  font-size: 20px;
}
/* -----------------------
レイアウト
----------------------- */
.wrapper {
  width: 1000px;
}
.sidebar {
  width: 200px;
}

👆/*から*/の間であれば記号を使うこともできます。-や=などと組み合わせれば、区切りを表現しやすくなります。「ここからここまではフォントの設定」というように区切りを分かりやすくしたいときに活用しましょう。

CSSのコードごとコメントアウト

.example {
  color: red;
}
/* 
.example2 {
  display: block;
}
*/

👆一時的に無視してほしいスタイルの指定がある場合には、無視してほしい部分を/*と*/ではさみましょう。

一部のプロパティのみコメントに

.example3 {
  display: block;
  color: #333;
  /* 
  text-decoration: none;
  font-size: 15px;
  */
}

👆一部のプロパティ: 値だけコメントアウトすることもできます（コメントアウトされた部分は、消したときと同じように無視されます）。

🙅‍コメントの入れ子はできない

.example3 {
  display: block;
  color: #333;
  /* ここからコメントアウト
  /* 
  text-decoration: none;
  font-size: 15px;
  */
  */
}

👆コメントの中にコメントを入れてはいけません。1つめの閉じ（*/）でコメントが終わってしまい、それ以降がコメントとみなされなくなってしまいます。つまり、CSSの中に無意味な文字列が入ってしまい、スタイルが崩れてしまうことがあります。

🙅コメントは長くしすぎない

CSSのデータは（事前に圧縮などの過程でコメントが除去されていない限り）コメントも含めて、サーバーからユーザーが見る手元のパソコン（ブラウザ）に送られます。あまりにも長いコメントが書かれていると、その分CSSのファイルサイズが大きくなってしまいます。

また、長すぎるコメントは可読性を損なうため避けるべきです。

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

コードを書くときには、コメントアウトを頻繁に行う方もいると思います。多くのエディターでは、以下のショートカットキーでコメントアウトしてくれます。

• Windows：Ctrl + /
• Mac：⌘ + /

SCSSのコメントの書き方

Sass(SCSS)とは、CSSをより効率に書くことができるメタ言語です。SCSSを使っている場合、/* */のほかに//でもコメントを書くことができます。

example.scss

.example3 {
  display: block; // コメントが簡単に
}