過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li>HTML のコメントは <strong><!--</strong> と <strong>--></strong> で囲んだ部分</li><li>コメントは<strong>ブラウザの画面には表示されない</strong>が、<strong>HTML ソースには残る</strong>ため秘密情報を書いてはいけない</li><li><strong>入れ子は不可</strong>。コメント内に <code>--</code> を含めると意図しない終端になり HTML が崩れる</li><li>IE 専用の<strong>条件付きコメント</strong>（<code><!--[if IE]></code>）はモダンブラウザでは無視され、IE 廃止により役目を終えた</li><li>コメントは<strong>SEO に影響しない</strong>が、過剰なコメントはファイル容量を増やすため本番では minify するのが一般的</li></ul></td></tr></table>
<h2>HTML コメントとは</h2>

<p><strong>コメント</strong>は HTML ソース上のメモ書きで、<strong>ブラウザの表示には現れません</strong>。<code><!--</code> で始まり、<code>--></code> で終わります。コード内の説明や、一時的に無効化したい部分を残しておくのに使います。</p>

<h2>基本構文</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- これは 1 行のコメント -->

<!--
  複数行のコメントもOK。
  ブラウザ上には表示されません。
-->

<p>本文</p>
<!-- TODO: 後でリンクを直す -->
<a href="#">テキスト</a></code></pre>
<h2>ブラウザでの扱い</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>場所</th><th>コメントは見えるか</th></tr></thead>
<tbody>
<tr><td>ブラウザの描画画面</td><td>見えない</td></tr>
<tr><td>「ページのソースを表示」（Ctrl+U）</td><td>見える</td></tr>
<tr><td>デベロッパーツールの Elements パネル</td><td>見える</td></tr>
<tr><td>検索エンジンのインデックス</td><td>クロールされるが、ランキング要素にはほぼ無関係</td></tr>
</tbody>
</table>

<p><strong>重要</strong>: コメントはユーザーに見える可能性があるため、<strong>API キー / パスワード / 内部 URL などを書いてはいけません</strong>。よく <code><!-- TODO: パスワードを後で本番のものに差し替え --></code> のような書き方で漏洩する事例があります。</p>

<h2>入れ子の罠 &mdash; HTML コメントは入れ子にできない</h2>

<p>HTML のコメントは<strong>入れ子にできません</strong>。コメント内に <code>--</code> が含まれるとそこで終端と見なされ、表示が崩れます。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- 外側のコメント
  <!-- 内側のコメント -->
  ここ以降は意図せず本文扱いになる！
--></code></pre>
<p>大きなブロックを一時的に無効化したいときは<strong>外側に <code><script type="text/x-suspend"></code> を巻く</strong>か、HTML を別ファイルに退避させるなど別の手段を使うのが安全です。</p>

<h2>条件付きコメント（過去の話）</h2>

<p>IE 10 までは<strong>条件付きコメント</strong>という独自仕様で、IE のバージョン別に HTML を切り替えられました。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!--[if IE 8]>
  <link rel="stylesheet" href="ie8.css">
<![endif]-->

<!--[if !IE]><!-->
  <link rel="stylesheet" href="modern.css">
<!--<![endif]--></code></pre>
<p>これは IE の独自拡張。IE 11 から条件付きコメントは廃止され、現在は IE 自体がサポート切れのため、<strong>ほぼレガシーコードでしか見ない</strong>記法になりました。新規コードでは使う必要はありません。</p>

<h2>SEO とコメント</h2>

<p>検索エンジンはコメント内のテキストを<strong>ランキング要素として扱いません</strong>。ただしクローラーはコメントを読み取ってログに残すため、内部システムの URL や開発メモが漏洩しないようにしましょう。本番デプロイ時に minify ツール（HTMLMinifier 等）で<strong>コメントを除去</strong>するのがプロフェッショナルな実装パターンです。</p>

<h2>JavaScript / CSS のコメントとの違い</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>言語</th><th>1 行コメント</th><th>複数行コメント</th></tr></thead>
<tbody>
<tr><td>HTML</td><td>なし</td><td><code><!-- ... --></code></td></tr>
<tr><td>CSS</td><td>なし</td><td><code>/* ... */</code></td></tr>
<tr><td>JavaScript</td><td><code>// ...</code></td><td><code>/* ... */</code></td></tr>
</tbody>
</table>

<p><code><style></code> や <code><script></code> タグの内部では、<strong>その言語のコメント記法</strong>を使うのが正しい書き方です。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><style>
  /* CSS のコメントはここ */
  .x { color: red; }
</style>

<script>
  // JS の 1 行コメント
  /* JS の複数行コメント */
  console.log(&apos;hi&apos;);
</script></code></pre>
<h2>実践: ブロックの無効化</h2>

<p>テスト中に一部のマークアップを一時的に消したい場合、コメントで囲むのが手軽です。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!--
<div class="banner">
  <p>キャンペーン中！</p>
</div>
--></code></pre>
<p>ただし<strong>コメント化したコードを長期間残すのはアンチパターン</strong>。Git で履歴管理してから消す方が、ソース全体が読みやすくなります。</p>

<h2>セキュリティに関する注意点</h2>

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

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

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

<h2>テンプレートエンジンのコメントとの違い</h2>

<p>EJS / Blade / Twig などのテンプレートエンジンには、<strong>サーバ側でのみ消えるコメント</strong>があります。これらは出力 HTML にも残らないため、機密情報を書いても漏洩しません（ただしソースコードに残ることは要注意）。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-twig">{# Twig: 出力されないコメント。安全 #}
<!-- HTML コメント: ブラウザのソースに残る --></code></pre>
<h2>FAQ</h2>

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

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

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

<h2>関連</h2>

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