この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:4
ページ更新者:guest
更新日時:2026-06-11 07:07:02

タイトル: コメント
SEOタイトル: HTML コメントの書き方（<!-- --> / 入れ子の罠 / 条件付きコメント / SEO への影響 / セキュリティ）

この記事の要点
  • HTML のコメントは で囲んだ部分
  • コメントはブラウザの画面には表示されないが、HTML ソースには残るため秘密情報を書いてはいけない
  • 入れ子は不可。コメント内に -- を含めると意図しない終端になり HTML が崩れる
  • IE 専用の条件付きコメント（ で終わります。コード内の説明や、一時的に無効化したい部分を残しておくのに使います。

    基本構文

    




    本文
    

テキスト

    ブラウザでの扱い

    場所コメントは見えるか
    ブラウザの描画画面見えない
    「ページのソースを表示」（Ctrl+U）見える
    デベロッパーツールの Elements パネル見える
    検索エンジンのインデックスクロールされるが、ランキング要素にはほぼ無関係

    重要: コメントはユーザーに見える可能性があるため、API キー / パスワード / 内部 URL などを書いてはいけません。よく のような書き方で漏洩する事例があります。

    入れ子の罠 — HTML コメントは入れ子にできない

    HTML のコメントは入れ子にできません。コメント内に -- が含まれるとそこで終端と見なされ、表示が崩れます。

    
  ここ以降は意図せず本文扱いになる！
-->

    大きなブロックを一時的に無効化したいときは外側に

    実践: ブロックの無効化

    テスト中に一部のマークアップを一時的に消したい場合、コメントで囲むのが手軽です。

    ただしコメント化したコードを長期間残すのはアンチパターン。Git で履歴管理してから消す方が、ソース全体が読みやすくなります。

    セキュリティに関する注意点

    HTML コメントはブラウザ画面に出ないだけで、HTTP レスポンスには含まれて送信されている点が見落とされがちです。実際に過去に発生した情報漏洩事例:

    • 本番デプロイ時にデバッグ用 API キーをコメントに残したまま公開してしまい、悪用された
    • 「TODO: 後で本番DBに繋ぐ」のコメントから内部 DB ホスト名が漏洩
    • 古いプロモーションコードをコメントアウトして残していたら、ソース表示で発見されて利用された

    これらを防ぐためにも、本番ビルドではコメントを minify ツールで除去するのが標準的な運用です。Webpack / Vite / Next.js などのモダンビルドツールは既定でコメント除去が有効になっていることが多いですが、サーバサイドレンダリングの HTML 文字列内のコメントは別途対応が必要です。

    テンプレートエンジンのコメントとの違い

    EJS / Blade / Twig などのテンプレートエンジンには、サーバ側でのみ消えるコメントがあります。これらは出力 HTML にも残らないため、機密情報を書いても漏洩しません（ただしソースコードに残ることは要注意）。

    {# Twig: 出力されないコメント。安全 #}

    FAQ

    Q: コメントの中に HTML タグを書ける？
    A: 書けます。タグはコメント内では単なるテキストとして扱われます。ただし -- が含まれているとそこで終端扱いになる点に注意。

    Q: コメントは何文字まで書ける？
    A: HTML 仕様には文字数制限はありません。ただしファイルサイズが増えてダウンロードが遅くなるので、本番では minify するべきです。

    Q: ブラウザに表示しないだけで通信されるのでは？
    A: その通りです。コメントもサーバから送信される HTML の一部。「画面に出ないから安心」ではなく、ソースは誰でも見られる前提で書きましょう。

    関連

    • HTML — ハイパーテキストマークアップ言語
    • DOCTYPE 宣言 — ドキュメントタイプの宣言
    • script 要素 — JavaScript を埋め込む
    • style 要素 — CSS を埋め込む
    • HTML minify — コメントや空白を削減して軽量化