CSSでコメントアウトを書く方法【初心者向け】
初心者向けにCSSでコメントアウトを書く方法について解説しています。MacとWindowsのコメントを残すショートカットも紹介しています。複数人での作業の場合、よく使うものなので、書き方を理解しておきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSSでコメントアウトする方法について解説しています。
Cloud9のエディターなどでは、Macであれば「command」+「/」、Windowsであれば「Ctrl」+「/」でコメントアウトできるので、ショートカットも覚えておくと便利でしょう。
目次
田島メンター！！
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サイトを作ることが可能です。
