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>
ブラウザで表示します。
コメントの行は画面に影響なく、正常に表示されていることがわかりますね。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
コメントアウトのショートカットキー
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サイトを作ることが可能です。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
