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

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

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

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

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

目次

 

大石ゆかり

田島メンター!!

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

田島悠介

コメント機能は使っているかな?

何について指定しているかを書いておくだけでもだいぶ違うと思うよ。

大石ゆかり

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

田島悠介

ソース内の一部分を実行されない状態にする機能だよ。

これによって文字列などをメモとして残しておくことができるんだ。

 

コメントアウトとは

コメントアウトとは、ソースコード上に書いたメモや説明をソースコードとして認識させず、無効化することを指します。

プログラムを書いているとソースコードが長くなってしまい、それぞれのコードの動作がわかりづらくなります。

他の人が書いたプログラムであれば、余計に直感的に動作がイメージできないことが多いです。

それを防ぐために、ソースコード上にコメントを残しておくことで、そのソースコードの動作を記載しておくことができます。

コメントアウトで残したコメントは、プログラム上では無視されるため、いくら書いてもプログラムの動作には影響しません。

 

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

コメントアウトの書き方

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

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

 

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

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

 

田島悠介

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

大石ゆかり

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

田島悠介

そうだね。

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

 

実際に書いてみよう

それでは実際に書いて確認してみましょう。

「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」をキーワードにして検索することで、作業し忘れがないか、確認できます。

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

 

以上、コメントの書き方について解説しました。

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

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

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

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

ぜひ活用してみたいです。

ありがとうございました!

 

執筆してくれたメンター

メンターSSさん

文系・未経験でIT企業に就職して、9年目。

環境構築から開発・設計・テストまで何でも屋さんをやっていました。

テックアカデミーではJavaコースを担当しています。

 

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

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