CSSでコメントアウトを書く方法【初心者向け】

初心者向けにCSSでコメントアウトを書く方法について解説しています。MacとWindowsのコメントを残すショートカットも紹介しています。複数人での作業の場合、よく使うものなので、書き方を理解しておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

CSSでコメントアウトする方法について解説しています。

Cloud9のエディターなどでは、Macであれば「command」+「/」、Windowsであれば「Ctrl」+「/」でコメントアウトできるので、ショートカットも覚えておくと便利でしょう。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

大石ゆかり

田島メンター!!CSSファイルで編集したいところがあるのですが、どれがどの部分だったか見つけるのが大変になってしまって……何かいい方法はありませんか〜?

田島悠介

コメント機能は使っているかな?何について指定しているかを書いておくだけでもだいぶ違うと思うよ。

大石ゆかり

コメントというのは何ですか〜?

田島悠介

ソース内の一部分を実行されない状態にする機能だよ。これによって文字列などをメモとして残しておくことができるんだ。

 

コメントアウトとは

コメントアウトとは、ソースコード上に注意書きやメモ書きを残しておくことのことです。プログラムを書いているとソースコードが長くなってしまい、それぞれの部分がどのような動きをしているかといったことがわかりづらくなります。

他の人が書いたプログラムであれば、余計に直感的にはわからないことが多いです。

それを防ぐために、ソースコード上にコメントを残しておくことで、そのソースコードがどのような働きをしているのかを記載しておくことができます。コメントアウトで残したコメントは、プログラム上では無視されるため、いくら書いてもプログラムの動作には影響しません。

 

コメントアウトの書き方

CSSファイル、またはHTMLファイルの<style>〜</style>タグの間のコメントアウトは /**/ の間に書きます。

/* この中に書かれたものがコメントになります。 */

/**/の間を改行して書くこともできます。

/*
改行しても
コメントに
なります。
*/

 

田島悠介

/*と*/の間に書かれた内容がコメントとして処理されるんだ。

大石ゆかり

コメントは複数行書いてもいいんですね。

田島悠介

そうだね。実際にコメントを入れてみて、画面に影響があるかどうか見てみよう。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際に書いてみよう

それでは実際に書いて確認してみましょう。「comment_out.html」というファイルを作成して以下の内容を記述します。

comment_out.html
-------------------------------------------------
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style>
      /* h1は少し赤っぽく */
      h1 {
        color: rgb(200, 92, 92);
      }

      /* h2は少し緑っぽく */
      h2 {
        color: rgb(92, 200, 92);
      }

      /*
      h3 は少し青っぽく。
      あと、少し周りに余白をつける。
      */
      h3 {
        color: rgb(92, 92, 200);
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <h1>コメントアウトの残し方</h1>
    <h2>コメントアウトの残し方</h2>
    <h3>コメントアウトの残し方</h3>
  </body>
</html>

-------------------------------------------------

ブラウザで表示します。

コメントの行は画面に影響なく、正常に表示されていることが分かりますね。

 

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

Cloud9のエディターなどでは、Macであれば「command」+「/」、Windowsであれば「Ctrl」+「/」でコメントアウトできます。

コメントアウトする場合は、以下のようにコメントアウトする行を選択し、Macであれば「command」+「/」、Windowsであれば「Ctrl」+「/」を押します。

逆にコメント行で、Macであれば「command」+「/」、Windowsであれば「Ctrl」+「/」を押すと、コメントが解除されます。

 

コメントの書き方について

コメントの書き方については、ちょっとしたコツがあります。いくつか例を見ていきましょう。

 

なぜそうなのかという観点で書く

単純な処理の場合、単に何をしているかのコメントはあまり必要ではありません。

/*
h3 は少し青っぽく。少し周りに余白をつける。
*/
h3 {
 color: rgb(92, 92, 200);
 padding: 20px;
}

なぜそうなのかという観点から、理由も含めて記載するようにしましょう。例えばこんな感じです。

/*
h3:見出し○○用:背景を見せるため、少し青っぽく、少し周りに余白を付ける
*/
h3 {
 color: rgb(92, 92, 200);
 padding: 20px;
}

複雑な処理や、特殊なコード、間違いやすいコードについても同様です。それらのコードについては、なぜそうしたのかという理由が存在するはずです。後で間違った変更を行わないためにも、なぜこのコードでなくてはならないのか、どのへんが間違いやすいのかなど、分かりやすいコメントを書くようにしましょう。

 

コメントのルールを決める

コメントを書く際、ある程度ルールを決めておいたほうが、見やすく、活用しやすいコメントとなります。

TODO:暫定処理のため、後で修正する

NG:○○の場合エラーになる(未解決)

例えば、「やることリストはTODOを付ける」というルールを決めた場合、ひととおりコードが完成した後で、「TODO」をキーワードにして検索することで、作業し忘れが無いか、確認することができます。

一人でプログラミングする場合でも有効ですが、チームで作業する場合、コメントのルールを決めておくと、情報共有しやすく、コメントを有効に活用できるでしょう。

 
以上、コメントの書き方について解説しました。「一時的に指定したCSSの記述を無くしたい」「他の人が見ても分かるようにメモとして書いておきたい」という時にコメントアウトは役立ちます。

一人で書いている分には必要ないかもしれませんが、実際の業務ではよく使うので、使いどころを知っておきましょう。

他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。

 

田島悠介

ソースの内容と、画面の状態を確認してみよう。

大石ゆかり

コメントの内容は見えませんね。

田島悠介

あとでスタイルを変更・修正するときどの箇所が何にあたるかというのを把握できるように、コメントを工夫してみよう。

大石ゆかり

ぜひ活用してみたいです。ありがとうございました!

 

TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを作ることが可能です。

独学に限界を感じている場合はご検討ください。