実行できるHTMLドキュメント: HTML コメント

Q: HTML でコメントはどう書きますか？

で終わります: 。2 つの記号の間にあるものは、タグも含めてブラウザに無視されるので、同じ書き方でコードをコメントアウトできます。

Q: HTML で複数行のコメントを書くには？

HTML のコメントの書き方は 1 種類だけで、何行にわたっても構いません。最初の行に を置きます。

Q: HTML でコメントアウトするショートカットは？

VS Code をはじめ多くのコードエディタでは、行を選択して Ctrl + / (Windows と Linux) または Cmd + / (Mac) を押します。エディタが選択範囲を で囲み、同じキーをもう一度押すと外れます。

Q: HTML コメントは入れ子にできますか？

できません。最初の --> でコメントが終わるので、 c --> では c --> の部分がページに表示されます。コメントを含むブロックをコメントアウトするときは、先に内側のコメントを削除するか書き換えます。

Q: HTML コメントは CSS や JavaScript の中でも使えますか？

使えません。 要素の中では / ... / を、 の中では // か / ... / を使います。style ブロックに HTML コメントを書いても、中の CSS ルールは無効になりません。

HTML でのコメントの書き方

HTML コメントは  で終わります。ブラウザは 2 つの記号の間をすべて無視するので、そのテキストはページに表示されません。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments</title>
</head>
<body>
  <!-- This comment is not displayed -->
  <h1>Visible heading</h1>

  <!--
    A comment can span several lines.
    Use it for notes to yourself or your team.
  -->
  <p>Visible paragraph.</p>
</body>
</html>

表示されるのは見出しと段落だけです。HTML のコメントの書き方は 1 種類で、1 行でも複数行でも同じように使えます。

VS Code や多くのエディタでのショートカット: 行を選択して Ctrl + / (Mac では Cmd + /) を押します。エディタが記号を追加し、同じキーで外せます。

コードをコメントアウトする

ブラウザはコメントの中のタグも無視するので、マークアップを  で囲むと、削除せずに非表示にできます。ある要素がない状態でページを試す、いちばん手早い方法です。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comment out</title>
  <style>
    .banner { background: #fef3c7; padding: 8px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <!-- <div class="banner">Sale ends Friday</div> -->
  <h1>Shop</h1>
  <!--
  <ul>
    <li>Old menu item</li>
    <li>Another old item</li>
  </ul>
  -->
  <p>Remove the comment markers around the banner to bring it back.</p>
</body>
</html>

バナーの行の  を消すと、バナーが元に戻ります。コメントアウトしたコードもページと一緒にダウンロードされるので、不要だと確信できたら削除しましょう。

コメントは入れ子にできない

コメントは必ず最初の --> で閉じます。コメントアウトするコードの中にすでにコメントがあると、外側のコメントが途中で終わり、残りがページにはみ出します。次の例は入れ子のコメントをブラウザのパーサーに渡し、実際に表示される部分を示します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested comments</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <pre id="out"></pre>
  <script>
    const html = '<!-- outer <!-- inner --> still meant to be hidden -->';
    const box = document.createElement('div');
    box.innerHTML = html;
    document.getElementById('out').textContent =
      'Source:  ' + html + '\nVisible: ' + box.textContent;
  </script>
</body>
</html>

still meant to be hidden --> がテキストとして表示されます。大きなブロックをコメントアウトする前に、その中のコメントを削除しましょう (または --> を書き換えて一致しないようにします)。

ほかにもルールがあります。コメントを  と同じようにコメントを閉じるので、どちらもコメントの本文に書かないでください。

コメントは公開されている

コメントはサーバーが送る HTML の一部なので、訪問者は誰でもソースの表示や開発者ツールで読めます。スクリプトで一覧にすることもできます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments are public</title>
  <style>
    li { font-family: monospace; }
  </style>
</head>
<body>
  <!-- TODO: fix the checkout button -->
  <p>This page has comments. Here they are:</p>
  <!-- admin password is hunter2 (never do this) -->
  <ul id="list"></ul>
  <script>
    const walker = document.createTreeWalker(document, NodeFilter.SHOW_COMMENT);
    while (walker.nextNode()) {
      const li = document.createElement('li');
      li.textContent = walker.currentNode.data.trim();
      document.getElementById('list').appendChild(li);
    }
  </script>
</body>
</html>

コメントにはコードに関するメモだけを書きましょう。パスワード、API キー、社内 URL、顧客データなどの非公開の情報は、コメントであってもなくても HTML に入れてはいけません。ビルドツールや minifier は通常、本番の HTML からコメントを取り除くので、数バイトの節約にもなります。

CSS と JavaScript のコメント

HTML コメントが使えるのは HTML の中だけです。<style> や <script> の中では、それぞれの言語のコメントの書き方を使います。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS and JS comments</title>
  <style>
    /* A CSS comment: this rule is disabled */
    /* p { color: #dc2626; } */

    <!-- h1 { color: #2563eb; } -->
  </style>
</head>
<body>
  <h1>This heading is blue</h1>
  <p id="msg">Paragraph</p>
  <script>
    // A JavaScript comment
    /* Block comments work in JavaScript too */
    document.getElementById('msg').textContent = 'Set by the script';
  </script>
</body>
</html>

見出しは青くなります。CSS は  の記号そのものを無視し、その間のルールを適用するからです。CSS を無効にできるのは /* ... */ だけです。書き方は CSS のコメントのページで解説しています。

条件付きコメント

古いコードには  が含まれていることがあります。これは Internet Explorer 9 以前向けの指示でした。現在のブラウザはすべて普通のコメントとして扱うので、中身は無視され、ブロックごと削除して構いません。

よくある間違い

コメントを入れ子にする。 内側の --> で外側のコメントが終わります。ブロックをコメントアウトする前に、内側のコメントを削除しましょう。
コメントに秘密の情報を書く。 コメントはすべての訪問者に送られます。
--> を書き忘れる。 <!-- からファイルの最後までがすべて消え、ページの半分がなくなったように見えます。
CSS で  を使う。 ルールは無効になりません。/* */ を使いましょう。
HTML で // を使う。 // note はテキストとして表示されます。HTML が理解するのは  だけです。

よくある質問

HTML でコメントはどう書きますか？

 で終わります: 。2 つの記号の間にあるものは、タグも含めてブラウザに無視されるので、同じ書き方でコードをコメントアウトできます。

HTML で複数行のコメントを書くには？

HTML のコメントの書き方は 1 種類だけで、何行にわたっても構いません。最初の行に  を置きます。

HTML でコメントアウトするショートカットは？

VS Code をはじめ多くのコードエディタでは、行を選択して Ctrl + / (Windows と Linux) または Cmd + / (Mac) を押します。エディタが選択範囲を  で囲み、同じキーをもう一度押すと外れます。

HTML コメントは入れ子にできますか？

できません。最初の --> でコメントが終わるので、 c --> では c --> の部分がページに表示されます。コメントを含むブロックをコメントアウトするときは、先に内側のコメントを削除するか書き換えます。

HTML コメントはユーザーに見えますか？

画面には表示されませんが、ページと一緒にブラウザへ送られます。ソースの表示や開発者ツールで誰でも読めるので、パスワード、キー、内部向けのメモは絶対に書かないでください。

HTML コメントは CSS や JavaScript の中でも使えますか？

使えません。<style> 要素の中では /* ... */ を、<script> の中では // か /* ... */ を使います。style ブロックに HTML コメントを書いても、中の CSS ルールは無効になりません。

HTML コメントの書き方: 複数行、コメントアウト、ショートカット