HTMLを書いていると、コードの中にメモを残したい場面があります。たとえば「ここはあとで修正する」「この部分は一時的に非表示にする」「このブロックはヘッダーです」といったメモです。そんなときに使うのが、HTMLのコメントアウトです。
結論からいうと、HTMLコメントアウトとは、コード内には残るけれどブラウザ画面には表示されないメモを書くための仕組みです。便利な一方で、ソースコードを見れば読めてしまうため、パスワードや秘密情報を書くのは絶対に避けます。
まず見てください：HTMLコメントは画面には表示されない
HTMLコメントアウトは、コード上には存在しますが、ブラウザの通常表示には出ません。まずは、左側のソースコードと右側の表示結果を見比べて、「コードにはあるのに画面には見えない」という関係を押さえましょう。
この画像で見てほしいのは、左側にある <!-- このメモは画面には出ません --> が、右側のブラウザ表示には出ていない点です。ただし、コメントは「消える」のではなく「表示されない」だけです。HTMLファイルの中には残るため、作業メモには向いていますが、秘密を隠す場所ではありません。
HTMLコメントは「自分やチームへのメモ」です。利用者に見せない説明書きとして使います。
HTMLコメントアウトは <!-- と --> で囲む
HTMLでコメントを書くときは、コメントにしたい文字を <!-- と --> で囲みます。
<!-- ここにコメントを書きます -->
この部分はブラウザ画面には表示されません。HTMLの構造を整理したり、一時的にコードを無効にしたり、他の人に意図を伝えたりするときに使います。
HTMLコメントアウトの基本的な使い方
HTMLコメントは、1行だけでも複数行でも使えます。まずは、ページ構造の目印として使う例を見てみましょう。
<!-- ヘッダーここから --> <header> <h1>サイトタイトル</h1> </header> <!-- ヘッダーここまで -->
このように書くと、コードを読む人が「ここからここまでがヘッダー部分だ」と把握しやすくなります。特にHTMLが長くなったときや、複数人で編集するときには、コメントが道しるべになります。
複数行をまとめてコメントにすることもできます。
<!-- <section> <h2>一時的に非表示にしたい内容</h2> <p>あとで使う可能性がある説明文です。</p> </section> -->
ただし、長いコードをコメントアウトしたまま放置すると、あとから読みにくくなります。一時的な退避として使ったら、必要がなくなった時点で削除する運用にしたほうが安全です。
HTMLコメントアウトを使う場面
コメントアウトは、初心者の学習中にも実務にもよく出てきます。便利なのは、コードの意味や作業状況をHTML内に残せるところです。
| 使う場面 | 例 | 注意点 |
|---|---|---|
| 構造の目印 | ヘッダー、メイン、フッターの境目を書く | 書きすぎると逆に読みにくい |
| 作業メモ | あとで画像を差し替える、文言確認中など | 公開前に不要なメモは消す |
| 一時的な無効化 | 一部のHTMLを画面に出さない | 長期間放置しない |
| チームへの共有 | このブロックの意図を残す | 秘密情報は書かない |
たとえばLPや会社サイトのHTMLでは、セクションが長くなりがちです。コメントで「サービス紹介ここから」「料金表ここまで」と残しておくと、あとから修正する人が目的の場所を見つけやすくなります。
HTMLコメントアウトで秘密情報を隠してはいけない
HTMLコメントで一番大切な注意点は、秘密情報を絶対に書かないことです。コメントはブラウザの画面には出ませんが、HTMLソースには残ります。
<!-- NG例：公開ページに秘密情報を残さない --> <!-- 管理者パスワード: example123 -->
このような情報は、ユーザー画面に見えていなくても、ページのソースを確認すれば見えてしまう可能性があります。パスワード、APIキー、個人情報、社内メモ、未公開情報などは、HTMLコメントに残してはいけません。
CSSやJavaScriptのコメントとの違い
HTML、CSS、JavaScriptでは、コメントの書き方が違います。HTMLでは <!-- --> を使いますが、CSSやJavaScriptでは別の記号を使います。
| 種類 | コメントの書き方 | 例 |
|---|---|---|
| HTML | <!-- --> | <!-- メモ --> |
| CSS | /* */ | /* 色の指定 */ |
| JavaScript | // または /* */ | // 1行コメント |
HTMLファイルの中にCSSやJavaScriptを書く場合でも、どの場所に書いているかでコメント記号が変わります。HTMLの本文部分ではHTMLコメント、CSSの中ではCSSコメント、JavaScriptの中ではJavaScriptコメントを使います。
HTMLコメントアウトでよくあるミス
- コメントの閉じ忘れで、以降のHTMLが表示されなくなる
- 秘密情報や社内向けメモを公開HTMLに残してしまう
- 不要になった古いコードをコメントのまま放置する
- CSSやJavaScriptのコメント記号と混同する
- コメント内で複雑なハイフンの並びを書いて、意図しない解釈になりやすくする
特に閉じ忘れは初心者がつまずきやすいポイントです。<!-- を書いたら、必ず対応する --> があるか確認しましょう。エディタの色分けが急に広い範囲へ変わった場合は、コメントの閉じ忘れを疑うと見つけやすいです。
まとめ
HTMLコメントアウトは、コードの中にメモを残したり、一時的にHTMLを画面へ表示しないようにしたりするための仕組みです。書き方は <!-- コメント --> です。
- HTMLコメントはブラウザ画面には表示されない
- コード上には残るため、秘密情報を書いてはいけない
- 構造の目印、作業メモ、一時的な無効化に使える
- CSSやJavaScriptとはコメント記号が違う
HTMLの基本的な書き方を続けて整理したい場合は、HTMLの書き方の基本 や HTMLタグ一覧 も合わせて確認すると、コード全体の読み方がつかみやすくなります。