コメントアウトを上手く活用すると、自分のコードの可読性がグッと良くなり作業効率がアップします。
しかし
「コメントアウトの記述の仕方がわからない」
「コメントアウトを使うべきタイミングの判断がつかない」
このように悩む場合もあるのではないでしょうか。
この記事では
- CSSにおけるコメントアウトの書き方
- コメントアウトを手早く使えるショートカットキー（Windows、Mac対応）
- コメントアウトを利用するタイミング
- CSS以外のWeb制作に関わる言語でのコメントアウトの記述方法
について解説します。
- Web制作でコメントアウトを使う適切なタイミング
- コメントアウトを使用する方法
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
コメントアウトとは
コメントアウトとは、コードの中の一部分をコードとして無効にする処理のことです。コードと同じようにテキストエディター上に記述されていても、コメントアウトした部分はただのコメントとして処理され、実際のコードには影響がありません。
多くの場合、コーディングを効率的に進める上でのメモとして利用されています。
短いコードではあまり使用のメリットを感じられないかもしれません。しかしコードの量が増えてくると非常に重宝するので、使い方をしっかりと覚えておきましょう。
CSSでのコメントアウトの書き方
CSSでのコメントアウトの書き方や、ショートカットキーを使った記述の方法について解説します。
コメントアウトしたい箇所が１行の場合
コメントアウトしたい箇所が1行の場合は、「/*」と「*/」の間にコメントを記入します。
/* pタグの文字色を青に変更 */
p {
color:blue;
}このように「/*」と「*/」の間にコメントを残します。
<p>コメントアウトは簡単便利</p>ブラウザで見てみましょう。
pタグのスタイルに影響を与えることなく、テキストエディター上にメモを残すことができました。
コメントアウトしたい箇所が複数行にわたる場合
複数行にわたってコメントアウトする場合も、１行をコメントアウトするケースと方法は変わりません。
「/*」と「*/」の間にコメントアウトしたい内容を書きます。
それではpタグに当てているスタイルを無効にしてみましょう。
/*
p {
color:blue;
}
*/この状態でブラウザで確認してみます。
pタグに対して指定していたスタイル「color: blue;」をコメントアウトし無効にしたため、文字色がデフォルトの黒のままです。
コードを読みやすくするために、「/*」「コメントアウトする箇所」「*/」のそれぞれの間に、改行を入れておくとよいでしょう。（改行しなくてもコメントアウト自体は機能します）
コメントアウトのショートカットキー
多くのテキストエディターでは、ショートカットキーでコメントアウトが可能です。
| OS | ショートカットキー |
| Windows | Ctrl+/ |
| Mac | ⌘ + / |
コメントアウトしたい箇所を選択して、ショートカットキーを使用すると手早くコメントアウトすることができます。
コメント内で使用してはいけない文字
コメントアウトした記述の内部で、さらに「/*」と「*/」を用いることはできません。
/*
p {
/* color:blue; */
}
*/以上のコードのように「/*」と「*/」をコメントアウトの中で入れ子のようにして使うと、コメントアウトが上手く機能しなくなります。
CSSと他の言語とのコメントアウトの記述方法の違い
コメントアウトはCSSだけでなく他の言語でも使用しますが、記述の方法が異なります。
「Web制作」に使用する言語に絞って、記述方法を表にまとめました。
| 言語名 | １行のコメントアウトの方法 | 複数行コメントアウトの方法 |
| CSS | /*コメントアウトしたい内容*/ | /* コメントアウトしたい内容 */ |
| HTML | <!--コメントアウトしたい内容--> | <!-- コメントアウトしたい内容 --> |
| JavaScript, PHP | //コメントアウトしたい内容 | /* コメントアウトしたい内容 */ |
「JavaScript」「PHP」では１行のコメントアウトと、複数行のコメントアウトで記述方法が異なります。
CSSのコメントアウトを使用するタイミング
続いてコメントアウトが、どのようなタイミングで使われているのかについて解説します。
基本的には３つの使い方があります。
- CSSの処理を無効化したいとき
- セクションごとの区切りをいれたいとき
- 処理の内容をメモしておくとき
一つずつ解説します。
1. CSSの処理を無効化したいとき
CSSの処理を無効化したい時にコメントアウトを使用します。
例えば一つのセレクタに対して複数のスタイルが当たっている場合に便利です。それぞれのスタイルがどのような働きををしているのか、分けて検証したい場合などに活用します。
CSSの記述が複雑になればなるほど、コメントアウトを使用する頻度は増えるでしょう。
2. セクションごとの区切りをいれたいとき
Webサイトのコーディングにおいては通常、いくつかのセクションに分けてコーディングを行います。
「ヘッダー」や「フッター」などが代表的なセクションの例です。
セクションの切り替わるタイミングで、目印としてコメントアウトを挿入するとコードの見やすさが高まります。
3. 処理の内容をメモしておくとき
必要に応じて処理の内容をコメントアウトで記述しておくとよいでしょう。
例えば複雑な処理や使用頻度の低い部分については、後からコードを読み返したとき、自分で書いたコードであっても処理の内容をもういちど把握するのに時間がかかる場合があります。
「color」や「margin」など処理がシンプルだったり、よく使うプロパティにまでコメントを残す必要はないですが、後から見返した時に処理内容を忘れそうな箇所については、コメントアウトで「どんな処理なのか」を記述しておくとよいでしょう。
まとめ
この記事ではCSSにおけるコメントアウトの方法と使用するタイミングについて解説しました。
コメントアウトは使用方法がかんたんで、非常に便利なコーディングの技術です。コーディングの量が増え処理が複雑になればなるほど、活用の機会は増えていきます。
基礎的なコーディングをする段階から、導入するクセをつけておくとよいでしょう。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
