【HTML】コメントアウトの書き方を覚えずに使いこなす

【HTML】コメントアウトの書き方を覚えずに使いこなす

こんにちは。
HTMLやCSS、JavaScriptやPHPなどを書いていて、「あれ?この言語はどうやってコメントアウトするんだっけ?」と調べたことはありませんか?
ここで紹介するある方法を知れば、もう書き方を覚える必要は無いし、これから調べる必要もなくなります。

そもそもコメントアウトとは?

コメントとは、ソースに記述するメモのことです。
ソースの中に、サイト作成をするエンジニア向けのメモとしてコメントを入れることができます。
ソース上にそのまま文字を書いてしまうと、ブラウザ上に表示されてしまいますが、コメントとして書くことでブラウザ上に表示されなくなります。

そして、ソースの一部をコメントにすることを「コメントアウト」と言います。
開発者以外が見ても意味がわかりやすいコードにするために、ソース上にコメントを書いたり、なぜこのようなコードを書いているかメモを残すためにコメントを書いたり、プログラムの動作を検証するために一部のソースをコメントアウトしてデバッグすることもあります。
プログラミングをするうえで、「コメント」「コメントアウト」の機能はかなり重要になってきます。

コメント機能はhtml,css,JavaScript,PHPなど、すべての言語で必ず存在します。

Sublime Textでコメントアウトのショートカットキーを使おう

まず結論として、Sublime Textなどのテキストエディタのショートカットキーを使えば、一瞬でコメントアウトできます。
そして、そのショートカットキーもかなり簡単です。

  • Windowsの場合 : [Ctrl] +  [/] (スラッシュ)
  • Macの場合 : [command] +  [/] (スラッシュ)

これだけです。

コメントアウトのショートカットキーを使ってみる

以下のようなHTMLがあります。
この1行目をコメントアウトしてみましょう。

1行目であればどこにカーソルを当てていても構いません。コメントアウトしたい部分を範囲指定する必要もありません。
1行目にカーソルが当たっている状態で、先ほど紹介したコメントアウトのショートカットキーを押してみましょう。

しっかりコメントアウトされましたね٩( ᐛ )و

 

もし、コメントアウトされなかった場合は、編集中のファイルの拡張子が「html」もしくは「php」になっているか確認してみてください。
もしなっていなければ、拡張子を正しく指定するか、シンタックス設定をしてください。
シンタックス設定についてよくわからなければ、以下の記事を参考にしてください。

複数行コメントアウトしたい場合

1行だけでなく、複数行コメントアウトしたい場合も、ショートカットキーは一緒ですが、カーソルの当て方が変わります。
コメントアウトしたい部分を以下のように、しっかり範囲指定しましょう。

 

この状態で、コメントアウトのショートカットキーを実行します。

しっかりコメントアウトされましたね٩( ᐛ )و

CSSやJavascriptなど、HTML以外でもコメントアウト可能

もちろん、HTML以外でもこのショートカットキーでコメントアウトできます。

[CSS]

[Javascript]

しっかりコメントアウトされましたね٩( ᐛ )و

もちろん、複数行のコメントアウトも可能です。
やり方はどの言語でも一緒です。

Atomでも同様のショートカットキーがある

ここではSublime Textを例にしましたが、他のテキストエディタでも同様のショートカットはあります。
しかも、Atomの場合、キーもまったく同様です。

  • Windowsの場合 : [Ctrl] +  [/] (スラッシュ)
  • Macの場合 : [command] +  [/] (スラッシュ)

このショートカットキーは様々なエディタで共通のようで、Chromeのデベロッパーツールでもこのショートカットキーは機能します。

結論:コメントアウトの書き方は覚えなくていい

どんな言語でも同じショートカットキーでコメントアウト可能で、複数行のコメントアウトも対応できますので、もう覚える必要はないでしょう。
コメントアウトの書き方を思い出すために手を止める必要もありません。

【作業効率アップ】地味だけど絶対役立つショートカットキー【ブラウザ編】