HTMLのコメントアウトの書き方

HTMLのコメントアウトは<!-- -->で囲んで書きます。1行でも複数行でも書き方は同じで、囲んだ部分はブラウザに表示されません。

HTMLのコメントアウトとは

HTMLのコメントアウトとは、ソースコード内にブラウザへ表示されないメモ(注釈)を残したり、コードの一部を一時的に無効化したりする仕組みです。<!--から-->までの範囲がコメントとして扱われます。

英語ではHTML commentと呼ばれ、コードを無効化する操作をコメントアウト(comment out)と呼びます。主な用途は次の3つです。

• 作業メモや注釈を残す
• コードを一時的に無効化する
• セクションの区切りを示す目印にする

注意点として、コメントは画面に表示されないだけで、公開後のページのソースコードには残ります。閲覧者が「ページのソースを表示」を開けば誰でも読めるため、パスワードや内部情報は書かないでください。

書き方（1行・複数行）

1行でも複数行でも、コメントアウトしたい範囲を<!--と-->で囲むだけです。まずは1行のコメント行の例から見てみましょう。

<p>この文章は表示されます。</p>
<!-- この行はコメントです。画面には表示されません -->

実行すると、コメント行を除いた1行目の文章だけが表示されます。複数行の場合も、開始と終了の記号で全体を囲めばまとめてコメントアウトできます。

<h1>見出しは表示されます</h1>
<!--
<p>この段落は一時的に無効化しています。</p>
<p>複数行をまとめて1つのコメントにできます。</p>
-->

タグの途中で区切らなければ、何行でも1つのコメントにまとめられます。修正前のコードを残しながら新しいコードを試すときに便利です。

入れ子コメントの注意

コメントの中にコメントを入れる入れ子(ネスト)はできません。最初に現れた-->でコメント全体が終了するため、内側の終了記号より後ろが画面に表示されてしまいます。

<!-- 外側のコメント
<!-- 内側のコメント -->
ここから後ろは表示されてしまいます -->

上のコードを実行すると、3行目のテキストがそのまま画面に出てしまいます。コメントを含む範囲を無効化したいときは、内側のコメントをいったん解除するか、範囲を分けて囲んでください。

エディタでのショートカット

VS Codeでは、コメントアウトしたい行にカーソルを置いてCtrl+/(Macはcommand+/)を押すと、その行が<!-- -->で囲まれます。もう一度押すと解除されるトグル式です。

複数行を選択してから押せば、選択範囲全体を一括でコメントアウトできます。任意の選択範囲だけを囲みたい場合はShift+Alt+A(MacはShift+Option+A)も使えます。

手入力より速く、閉じ忘れによる表示崩れも防げるため、ショートカットでの操作を習慣にするのがおすすめです。VS CodeやSublime Text、サクラエディタなど多くのエディタではCtrl+/(Macはcommand+/)が標準ですが、エディタによって異なる場合はキーボードショートカット設定で確認できます。