MENU
  1. ホーム
  2. HTML&CSS
  3. 【HTML】コメントの書き方：1行・複数行・ショートカット・入れ子の使い方

【HTML】コメントの書き方：1行・複数行・ショートカット・入れ子の使い方

HTML&CSS
html-comment

HTMLのコメントアウトは、コード内にメモを残したり、一部の要素を一時的に非表示にしたりする機能です。

本記事では、1行・複数行の書き方から、写真者が注意すべき「入れ子」やセキュリティ上の留意点を解説します。

また、HTMLタグをゼロから学びたい人は「【初心者のHTML入門】基本構造の書き方とタグの使い方【タグ一覧表あり】」を一読ください。

HTMLにおける基本構造の書き方とタグの使い方【タグ一覧表あり】
目次

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

Webページを作成する際、ブラウザの画面上には表示させたくないがソースコード内にメモや説明を残したい場合があります。

この仕組みを「コメント」や「コメントアウト」と呼びます。

専用の「html コメント タグ（“）」で囲んだ部分はブラウザが読み飛ばすため、画面には出力されません。

HTMLコメントの書き方
  • 1行だけコメントアウトする方法
  • 複数行をまとめてコメントアウトする方法

1行だけコメントアウトする方法

<!– コメント –>

短いメモを残したり、特定の1行だけ非表示にしたい場合、消したいテキストやコードブロックを<!-- コメント -->で囲みます。

初心者がやりがちなミスがコメントを目立たせるために、ハイフン（-）を連続して使った装飾をしてしまうことです。

HTMLの厳密な仕様において、コメント内に連続する2つのハイフン（--）を含めることは禁止されています。

ブラウザによってはそこでコメントが終了したと勘違いし、隠したはずのコードやメモが画面上にそのまま露出してしまう原因になります。

ここは通常のテキストです。

【非公開予定】明日からセール開始！

この下のテキストも表示されます。

ここは通常のテキストです。

<!– <p>【非公開予定】明日からセール開始！</p> –>

この下のテキストも表示されます。

※2行目がブラウザに無視され、非表示になりました。

ここは通常のテキストです。

<!– ———————
<p>【非公開予定】明日からセール開始！</p>
–>

–>

この下のテキストも表示されます。

※ハイフン連打によりコメントが途中で千切れ、隠したはずの閉じタグやコードが画面に漏れ出します。
HTMLコード表示
<div class="hcom1-wrapper">
  <input type="radio" name="hcom1-state" id="hcom1-normal" class="hcom1-radio" checked>
  <input type="radio" name="hcom1-state" id="hcom1-comment" class="hcom1-radio">
  <input type="radio" name="hcom1-state" id="hcom1-error" class="hcom1-radio">

  <div class="hcom1-controls">
    <label for="hcom1-normal" class="hcom1-btn">通常表示</label>
    <label for="hcom1-comment" class="hcom1-btn">⭕️ 正しくコメントアウト</label>
    <label for="hcom1-error" class="hcom1-btn">❌ ハイフンの罠 (エラー)</label>
  </div>

  <div class="hcom1-demo-area">
    
    <div class="hcom1-box target-normal-hcom1">
      <p>ここは通常のテキストです。</p>
      <p class="hcom1-target-text">【非公開予定】明日からセール開始！</p>
      <p>この下のテキストも表示されます。</p>
    </div>

    <div class="hcom1-box target-comment-hcom1">
      <p>ここは通常のテキストです。</p>
      <div class="hcom1-code-preview">
        <!-- <p>【非公開予定】明日からセール開始！</p> -->
      </div>
      <p>この下のテキストも表示されます。</p>
      <span class="hcom1-note">※2行目がブラウザに無視され、非表示になりました。</span>
    </div>

    <div class="hcom1-box target-error-hcom1">
      <p>ここは通常のテキストです。</p>
      <div class="hcom1-code-preview-error">
        <!-- ---------------------<br>
        <p>【非公開予定】明日からセール開始！</p><br>
        -->
      </div>
      <p class="hcom1-error-text">--> </p>
      <p>この下のテキストも表示されます。</p>
      <span class="hcom1-note">※ハイフン連打によりコメントが途中で千切れ、隠したはずの閉じタグやコードが画面に漏れ出します。</span>
    </div>

  </div>
</div>
CSSコード表示
.hcom1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hcom1-radio {
  display: none;
}
.hcom1-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.hcom1-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}
#hcom1-normal:checked ~ .hcom1-controls [for="hcom1-normal"] {
  background-color: #6c757d;
  color: white;
}
#hcom1-comment:checked ~ .hcom1-controls [for="hcom1-comment"] {
  background-color: #198754;
  color: white;
}
#hcom1-error:checked ~ .hcom1-controls [for="hcom1-error"] {
  background-color: #dc3545;
  color: white;
}
.hcom1-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}
.hcom1-box {
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 20px;
  font-size: 14px;
  line-height: 1.6;
}
.hcom1-target-text {
  color: #dc3545;
  font-weight: bold;
  background-color: #f8d7da;
  padding: 5px;
  border-radius: 4px;
}
.hcom1-code-preview {
  background-color: #f1f3f5;
  color: #198754;
  font-family: monospace;
  padding: 10px;
  margin: 10px 0;
  border-left: 3px solid #198754;
  font-size: 13px;
}
.hcom1-code-preview-error {
  background-color: #f1f3f5;
  color: #6c757d;
  font-family: monospace;
  padding: 10px;
  margin: 10px 0 0 0;
  border-left: 3px solid #dc3545;
  font-size: 13px;
}
.hcom1-error-text {
  color: #333;
  margin: 0 0 10px 0;
}
.hcom1-note {
  display: block;
  margin-top: 15px;
  font-size: 12px;
  color: #666;
  border-top: 1px dashed #ccc;
  padding-top: 10px;
}

.target-comment-hcom1, .target-error-hcom1 { display: none; }
#hcom1-comment:checked ~ .hcom1-demo-area .target-normal-hcom1 { display: none; }
#hcom1-comment:checked ~ .hcom1-demo-area .target-comment-hcom1 { display: block; }
#hcom1-error:checked ~ .hcom1-demo-area .target-normal-hcom1 { display: none; }
#hcom1-error:checked ~ .hcom1-demo-area .target-error-hcom1 { display: block; }

複数行をまとめてコメントアウトする方法

<!–
<p>この部分はコメントアウトされるため、</p>
<p>ブラウザには表示されません。</p>
–>

HTMLにおけるコメントアウトは、開始タグ（<!--）で囲めば、その間に何十行、何百行あっても複数行まとめて無効化されます。

なお、PHPなどプログラム言語が混ざったファイル（拡張子が.phpのファイル）において、HTML部分を複数行コメントアウトしたい場合も、基本的には同様です。
（※PHPのプログラム処理自体を無効化する場合は/* */を使います。）

複数行をコメントアウトする際、頻発するトラブルが「コメントの入れ子」です。

過去に誰かが書いたコメントをさらにコメント化するため囲んで無効化しようとしたとします。

HTMLの仕様上、一番最初に見つけた終了タグ --> でコメントは終わったと判定されます。

そのため、内側にあったコメントの-->で外側のコメントも強制終了し、それ以降のコードが丸出しになってレイアウト崩れを引き起こします。

<!– ★ここからコメント化
<div class=”banner”>
  <img src=”camp.jpg”>
</div>
ここまでコメント化★ –>
（バナー領域は安全に非表示になっています）
<!– ★ここからコメント化
<div class=”banner”>
  <!– 画像は仮置き –> ←ここで終了と勘違いされる！
  <img src=”camp.jpg”>
</div>
ここまでコメント化★ –>
  <img src=”camp.jpg”>
</div>
ここまでコメント化★ –>
※内側の「–>」に反応してしまい、残りのコードがテキストとして画面に漏れ出してしまいました。
HTMLコード表示
<div class="hcom2-wrapper">
  <input type="radio" name="hcom2-state" id="hcom2-good" class="hcom2-radio" checked>
  <input type="radio" name="hcom2-state" id="hcom2-bad" class="hcom2-radio">

  <div class="hcom2-controls">
    <label for="hcom2-good" class="hcom2-btn">⭕️ 通常の複数行コメント</label>
    <label for="hcom2-bad" class="hcom2-btn">❌ コメントの入れ子 (罠)</label>
  </div>

  <div class="hcom2-demo-area">
    
    <div class="hcom2-box target-good-hcom2">
      <div class="hcom2-code-display">
        <span class="hcom2-comment-tag"><!-- ★ここからコメント化</span><br>
        <div class="banner"><br>
          <img src="camp.jpg"><br>
        </div><br>
        <span class="hcom2-comment-tag">ここまでコメント化★ --></span>
      </div>
      <div class="hcom2-result-ok">
        （バナー領域は安全に非表示になっています）
      </div>
    </div>

    <div class="hcom2-box target-bad-hcom2">
      <div class="hcom2-code-display">
        <span class="hcom2-comment-tag"><!-- ★ここからコメント化</span><br>
        <div class="banner"><br>
          <span class="hcom2-inner-comment"><!-- 画像は仮置き --></span> <span class="hcom2-alert">←ここで終了と勘違いされる！</span><br>
          <img src="camp.jpg"><br>
        </div><br>
        ここまでコメント化★ -->
      </div>
      <div class="hcom2-result-ng">
          <img src="camp.jpg"><br>
        </div><br>
        ここまでコメント化★ -->
      </div>
      <span class="hcom2-note">※内側の「-->」に反応してしまい、残りのコードがテキストとして画面に漏れ出してしまいました。</span>
    </div>

  </div>
</div>
CSSコード表示
.hcom2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hcom2-radio {
  display: none;
}
.hcom2-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.hcom2-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}
#hcom2-good:checked ~ .hcom2-controls [for="hcom2-good"] {
  background-color: #198754;
  color: white;
}
#hcom2-bad:checked ~ .hcom2-controls [for="hcom2-bad"] {
  background-color: #dc3545;
  color: white;
}
.hcom2-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}
.hcom2-box {
  width: 100%;
  max-width: 450px;
  background-color: #fff;
  border-radius: 4px;
}
.hcom2-code-display {
  background-color: #282c34;
  color: #abb2bf;
  font-family: monospace;
  padding: 15px;
  border-radius: 4px 4px 0 0;
  font-size: 13px;
  line-height: 1.6;
}
.hcom2-comment-tag {
  color: #7f848e;
  font-style: italic;
}
.hcom2-inner-comment {
  color: #e06c75;
  font-weight: bold;
}
.hcom2-alert {
  background-color: #dc3545;
  color: white;
  padding: 2px 4px;
  border-radius: 2px;
  font-size: 11px;
}

/* 実行結果エリア */
.hcom2-result-ok {
  background-color: #f8fff9;
  border: 1px solid #198754;
  border-top: none;
  padding: 15px;
  color: #198754;
  font-size: 13px;
  text-align: center;
  border-radius: 0 0 4px 4px;
}
.hcom2-result-ng {
  background-color: #fff;
  border: 1px solid #dc3545;
  border-top: none;
  padding: 15px;
  color: #333;
  font-family: monospace;
  font-size: 13px;
  border-radius: 0 0 4px 4px;
}
.hcom2-note {
  display: block;
  margin-top: 15px;
  font-size: 12px;
  color: #dc3545;
  font-weight: bold;
}

.target-bad-hcom2 { display: none; }
#hcom2-bad:checked ~ .hcom2-demo-area .target-good-hcom2 { display: none; }
#hcom2-bad:checked ~ .hcom2-demo-area .target-bad-hcom2 { display: block; }

コメントアウトを使う際の注意点・Tips

HTMLのコメントアウトは、コード内にメモを残したり、一時的に要素を非表示にしたりと便利な機能です。

しかし、使い方を誤るとレイアウトが大きく崩れたり、最悪の場合はセキュリティ上の重大な問題を引き起こす危険性があります。（重要な機能のコメントなど）

コメントアウトの注意点・Tips
  • コメントの入れ子（ネスト）はエラーになる
  • ブラウザのソース表示でコメントを見せない方法
  • チーム開発で役立つTODOコメントの書き方

コメントの入れ子（ネスト）はエラーになる

HTMLのコメントを書く際、やってはいけないのが「コメントの中にさらにコメントを書くこと」です。

HTMLの仕様では、コメントの開始タグまでをコメントとして処理します。

そのため、外側を大きくコメントアウトしようとした際、内側に元々書かれていたコメントの終了タグ-->に反応し、そこでコメント化が強制終了します。

実務で「すでにコメントが含まれている大きなブロック」をコメントアウトしたい場合は、エディタの置換機能などを使って内側のコメントタグを削除するか、全角（＜！ーー）に変換して無効化するのが確実な対処法です。

<!– ▼ここから非表示にしたい
<div class=”campaign”>
  <!– 終了日未定 –> ←ここで終了！
  <p>春のキャンペーン中！</p>
</div>
▲ここまで非表示にしたい –>
  <p>春のキャンペーン中！</p>
</div>
▲ここまで非表示にしたい –>

※内側のコメントタグが原因で、隠したかったはずの文字が画面に出てしまいます。

<!– ▼ここから非表示にしたい
<div class=”campaign”>
  ※メモ：終了日未定
  <p>春のキャンペーン中！</p>
</div>
▲ここまで非表示にしたい –>
（何も表示されません。安全にコメントアウトされました）

※内側の「<!– –>」を普通のテキスト（※メモ：〜）に書き換えたため、全体が正しく非表示になりました。

HTMLコード表示
<div class="hct1-wrapper">
  <input type="radio" name="hct1-state" id="hct1-bad" class="hct1-radio" checked>
  <input type="radio" name="hct1-state" id="hct1-good" class="hct1-radio">

  <div class="hct1-controls">
    <label for="hct1-bad" class="hct1-btn">❌ 入れ子にする (エラー)</label>
    <label for="hct1-good" class="hct1-btn">⭕️ 内側のタグを消す (安全)</label>
  </div>

  <div class="hct1-demo-area">
    <div class="hct1-box target-bad-hct1">
      <div class="hct1-code-editor">
        <span class="hct1-com"><!-- ▼ここから非表示にしたい</span><br>
        <div class="campaign"><br>
          <span class="hct1-err"><!-- 終了日未定 --></span> <span class="hct1-alert">←ここで終了！</span><br>
          <p>春のキャンペーン中！</p><br>
        </div><br>
        <span class="hct1-com">▲ここまで非表示にしたい --></span>
      </div>
      <div class="hct1-preview-bad">
          <p>春のキャンペーン中！</p><br>
        </div><br>
        ▲ここまで非表示にしたい -->
      </div>
      <p class="hct1-note">※内側のコメントタグが原因で、隠したかったはずの文字が画面に出てしまいます。</p>
    </div>

    <div class="hct1-box target-good-hct1">
      <div class="hct1-code-editor">
        <span class="hct1-com"><!-- ▼ここから非表示にしたい</span><br>
        <span class="hct1-com"><div class="campaign"></span><br>
        <span class="hct1-com">  ※メモ：終了日未定</span><br>
        <span class="hct1-com">  <p>春のキャンペーン中！</p></span><br>
        <span class="hct1-com"></div></span><br>
        <span class="hct1-com">▲ここまで非表示にしたい --></span>
      </div>
      <div class="hct1-preview-good">
        （何も表示されません。安全にコメントアウトされました）
      </div>
      <p class="hct1-note hct1-note-green">※内側の「<!-- -->」を普通のテキスト（※メモ：〜）に書き換えたため、全体が正しく非表示になりました。</p>
    </div>
  </div>
</div>
CSSコード表示
.hct1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hct1-radio { display: none; }
.hct1-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.hct1-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}
#hct1-bad:checked ~ .hct1-controls [for="hct1-bad"] {
  background-color: #dc3545;
  color: white;
}
#hct1-good:checked ~ .hct1-controls [for="hct1-good"] {
  background-color: #198754;
  color: white;
}
.hct1-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}
.hct1-box {
  width: 100%;
  max-width: 400px;
}
.hct1-code-editor {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px 4px 0 0;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.5;
}
.hct1-com { color: #5c6370; font-style: italic; }
.hct1-err { color: #e06c75; font-weight: bold; }
.hct1-alert { background: #dc3545; color: #fff; padding: 2px 4px; border-radius: 3px; font-size: 11px; }

.hct1-preview-bad {
  background-color: #fff;
  border: 1px solid #dc3545;
  border-top: none;
  padding: 15px;
  font-family: monospace;
  color: #333;
  border-radius: 0 0 4px 4px;
}
.hct1-preview-good {
  background-color: #f8fff9;
  border: 1px solid #198754;
  border-top: none;
  padding: 15px;
  color: #198754;
  text-align: center;
  font-size: 13px;
  border-radius: 0 0 4px 4px;
}
.hct1-note { margin-top: 15px; font-size: 12px; color: #dc3545; font-weight: bold; }
.hct1-note-green { color: #198754; }

.target-good-hct1 { display: none; }
#hct1-bad:checked ~ .hct1-demo-area .target-good-hct1 { display: none; }
#hct1-bad:checked ~ .hct1-demo-area .target-bad-hct1 { display: block; }
#hct1-good:checked ~ .hct1-demo-area .target-bad-hct1 { display: none; }
#hct1-good:checked ~ .hct1-demo-area .target-good-hct1 { display: block; }

ブラウザのソース表示でコメントを見せない方法

初心者が勘違いしがちなポイントは、「HTMLのコメントは、ブラウザの画面上で見えなくなるだけでソースコード上は残っている」ということです。

Webブラウザで右クリックして「ページのソースを表示」を押したり、開発者ツール（デベロッパーツール）を開いたりすると、コメントで囲んだ内容を誰でも簡単に読めます。

機密情報をHTMLコメントで書いてしまうと、悪意のあるユーザーに情報を盗まれ、重大なセキュリティインシデントに発展します。

ブラウザのソース表示から完全に隠したい場合は、HTMLコメントではなく、サーバー側で処理されるPHPなどのコメント機能（<?php /* 機密情報 */ ?>）を使用するのが実務におけるルールです。

サーバーサイド言語のコメントは、ブラウザにデータが送られる前にサーバー内で削除されるため、外部から見られることはありません。

ブラウザの画面表示
（何も表示されていません）
右クリック ＞ ページのソースを表示
<!– 社内用パスワード：12345 –>
▲誰でも見えてしまうため非常に危険！
ブラウザの画面表示
（何も表示されていません）
右クリック ＞ ページのソースを表示

▲サーバー内で消去されるため、ソースにも残らない！
HTMLコード表示
<div class="hct2-wrapper">
  <input type="radio" name="hct2-state" id="hct2-html" class="hct2-radio" checked>
  <input type="radio" name="hct2-state" id="hct2-php" class="hct2-radio">

  <div class="hct2-controls">
    <label for="hct2-html" class="hct2-btn">❌ HTMLコメント (丸見え)</label>
    <label for="hct2-php" class="hct2-btn">⭕️ PHPコメント (完全秘匿)</label>
  </div>

  <div class="hct2-demo-area">
    
    <div class="hct2-box target-html-hct2">
      <div class="hct2-browser-view">
        <div class="hct2-browser-header">ブラウザの画面表示</div>
        <div class="hct2-browser-content">（何も表示されていません）</div>
      </div>
      <div class="hct2-source-view">
        <div class="hct2-source-header">右クリック ＞ ページのソースを表示</div>
        <div class="hct2-source-content hct2-danger">
          <!-- 社内用パスワード：12345 --><br>
          <span class="hct2-alert-msg">▲誰でも見えてしまうため非常に危険！</span>
        </div>
      </div>
    </div>

    <div class="hct2-box target-php-hct2">
      <div class="hct2-browser-view">
        <div class="hct2-browser-header">ブラウザの画面表示</div>
        <div class="hct2-browser-content">（何も表示されていません）</div>
      </div>
      <div class="hct2-source-view">
        <div class="hct2-source-header">右クリック ＞ ページのソースを表示</div>
        <div class="hct2-source-content hct2-safe">
          <br>
          <span class="hct2-safe-msg">▲サーバー内で消去されるため、ソースにも残らない！</span>
        </div>
      </div>
    </div>

  </div>
</div>
CSSコード表示
.hct2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hct2-radio { display: none; }
.hct2-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.hct2-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}
#hct2-html:checked ~ .hct2-controls [for="hct2-html"] {
  background-color: #dc3545;
  color: white;
}
#hct2-php:checked ~ .hct2-controls [for="hct2-php"] {
  background-color: #198754;
  color: white;
}
.hct2-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}
.hct2-box {
  width: 100%;
  max-width: 400px;
}

.hct2-browser-view {
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 15px;
  overflow: hidden;
}
.hct2-browser-header {
  background: #f1f3f5;
  padding: 5px 10px;
  font-size: 12px;
  border-bottom: 1px solid #ccc;
  color: #555;
  font-weight: bold;
}
.hct2-browser-content {
  padding: 20px;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.hct2-source-view {
  border: 1px solid #333;
  border-radius: 4px;
  overflow: hidden;
}
.hct2-source-header {
  background: #333;
  color: #fff;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: bold;
}
.hct2-source-content {
  background: #282c34;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
}
.hct2-danger { color: #e06c75; }
.hct2-alert-msg { background: #dc3545; color: #fff; padding: 2px 4px; border-radius: 3px; font-size: 11px; }
.hct2-safe { color: #98c379; }
.hct2-safe-msg { color: #198754; font-weight: bold; }

.target-php-hct2 { display: none; }
#hct2-html:checked ~ .hct2-demo-area .target-php-hct2 { display: none; }
#hct2-html:checked ~ .hct2-demo-area .target-html-hct2 { display: block; }
#hct2-php:checked ~ .hct2-demo-area .target-html-hct2 { display: none; }
#hct2-php:checked ~ .hct2-demo-area .target-php-hct2 { display: block; }

チーム開発で役立つTODOコメントの書き方

実務の開発現場では、一人のエンジニアが全てのコードを書くわけではありません。

「後で修正する箇所」や「別の担当者に作業を引き継ぐ箇所」をマークするため、HTMLコメントを活用します。

ただし、抽象的なコメントは、「誰が、いつまでに、どう直すのか」がチームの他のメンバーに伝わりません。

チーム開発において、「TODO: [日付] [担当者名] 具体的なタスク内容」というフォーマットで記載するのがよいです。

また、「TODO」や「FIXME（修正必須）」といった特定のキーワードを含めると、VSCodeなどコードエディタの拡張機能（Todo Treeなど）が自動的に検知し、プロジェクト内の未完了タスクとして一覧表示できます。

<div class=”header-banner”>
  <!– あとでバナーを変える –>
  <img src=”dummy.jpg”>
</div>
【チームメンバーの反応】
「あとでっていつ？」「誰が変えるの？」「どの画像に変えるの？」と混乱を招き、結局放置されてバグの原因になります。
<div class=”header-banner”>
  <!– TODO: [2026/04/01 佐藤] 夏用キャンペーンのバナー(summer.jpg)に差し替える –>
  <img src=”dummy.jpg”>
</div>
【チームメンバーの反応】
キーワード（TODO）があるためエディタで検索しやすく、期日と担当者、具体的な作業内容が誰の目にも明らかになります。
HTMLコード表示
<div class="hct3-wrapper">
  <input type="radio" name="hct3-state" id="hct3-bad" class="hct3-radio" checked>
  <input type="radio" name="hct3-state" id="hct3-good" class="hct3-radio">

  <div class="hct3-controls">
    <label for="hct3-bad" class="hct3-btn">❌ 抽象的なメモ (NG)</label>
    <label for="hct3-good" class="hct3-btn">⭕️ フォーマット化されたTODO (OK)</label>
  </div>

  <div class="hct3-demo-area">
    
    <div class="hct3-box target-bad-hct3">
      <div class="hct3-code-panel">
        <span class="hct3-tag"><div class="header-banner"></span><br>
          <span class="hct3-com-bad"><!-- あとでバナーを変える --></span><br>
          <span class="hct3-tag"><img src="dummy.jpg"></span><br>
        <span class="hct3-tag"></div></span>
      </div>
      <div class="hct3-explanation-bad">
        <strong>【チームメンバーの反応】</strong><br>
        「あとでっていつ？」「誰が変えるの？」「どの画像に変えるの？」と混乱を招き、結局放置されてバグの原因になります。
      </div>
    </div>

    <div class="hct3-box target-good-hct3">
      <div class="hct3-code-panel">
        <span class="hct3-tag"><div class="header-banner"></span><br>
          <span class="hct3-com-good"><!-- TODO: [2026/04/01 佐藤] 夏用キャンペーンのバナー(summer.jpg)に差し替える --></span><br>
          <span class="hct3-tag"><img src="dummy.jpg"></span><br>
        <span class="hct3-tag"></div></span>
      </div>
      <div class="hct3-explanation-good">
        <strong>【チームメンバーの反応】</strong><br>
        キーワード（TODO）があるためエディタで検索しやすく、期日と担当者、具体的な作業内容が誰の目にも明らかになります。
      </div>
    </div>

  </div>
</div>
CSSコード表示
.hct3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hct3-radio { display: none; }
.hct3-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.hct3-btn {
  background-color: #e9ecef;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #495057;
  transition: 0.2s;
  font-size: 14px;
}
#hct3-bad:checked ~ .hct3-controls [for="hct3-bad"] {
  background-color: #dc3545;
  color: white;
}
#hct3-good:checked ~ .hct3-controls [for="hct3-good"] {
  background-color: #198754;
  color: white;
}
.hct3-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}
.hct3-box {
  width: 100%;
  max-width: 450px;
}
.hct3-code-panel {
  background-color: #282c34;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 15px;
}
.hct3-tag { color: #e5c07b; }
.hct3-com-bad { color: #5c6370; font-style: italic; }
/* TODOコメントはエディタ上で目立つようにハイライトされることが多い */
.hct3-com-good { color: #c678dd; font-style: italic; font-weight: bold; }

.hct3-explanation-bad {
  background-color: #f8d7da;
  border-left: 4px solid #dc3545;
  padding: 15px;
  color: #842029;
  font-size: 13px;
  border-radius: 2px;
}
.hct3-explanation-good {
  background-color: #d1e7dd;
  border-left: 4px solid #198754;
  padding: 15px;
  color: #0f5132;
  font-size: 13px;
  border-radius: 2px;
}

.target-good-hct3 { display: none; }
#hct3-bad:checked ~ .hct3-demo-area .target-good-hct3 { display: none; }
#hct3-bad:checked ~ .hct3-demo-area .target-bad-hct3 { display: block; }
#hct3-good:checked ~ .hct3-demo-area .target-bad-hct3 { display: none; }
#hct3-good:checked ~ .hct3-demo-area .target-good-hct3 { display: block; }

まとめ

分かりやすいようにまとめを記載します。

本記事のまとめ
  • 基本構文
    コメントで囲んだ範囲がブラウザの画面上で非表示になる。（1行・複数行共通）
  • 連続ハイフンの禁止
    コメント内に--（ハイフン2つ）を含めることはHTMLの仕様上禁止で表示崩れの原因となる。
  • 入れ子（ネスト）の禁止
    コメント内に別の-->が含まれると、そこで処理が強制終了し、以降のコードが画面に露出する。
  • ソースコードでの可視性
    HTMLコメントはブラウザの「ページのソースを表示」から誰でも閲覧可能である。
  • 機密情報の取り扱い
    パスワードや未公開URLなどの記述は厳禁。
    ソースコードから隠蔽する場合は、PHPなどのサーバーサイドコメントを使用する。
  • TODOの明記
    チーム開発におけるメモは、「TODO: [日付] [担当者] 具体的な内容」と定型化しタスクの放置を防ぐ。

よくある質問（FAQ）

HTMLでコメントアウト（メモ書き）をするにはどう書けばいいですか？

コメントにしたい部分を<!-- コメント -->で囲みます。

この記号で囲まれたテキストやコードは、ブラウザの画面上には表示されなくなります。

複数行をまとめてコメントアウトすることはできますか？

はい、可能です。

複数行であっても、始まりに<!--を記述すれば、その間に挟まれた数行〜数十行のコードを一括で無効化（非表示）できます。

エディタでコメントアウトするショートカットキーはありますか？

多くのコードエディタ（VSCodeなど）では、コメントアウトしたい行を選択した状態で、Windowsなら「Ctrl＋/」、Macなら「command＋/」を押すことで、コメントアウト（および解除）の切り替えができます。

コメントアウトした文字やコードが画面に表示されてしまうのはなぜですか？

主に2つの原因が考えられます。

1つ目は、コメント内に「--（ハイフン2つ）」を書いてしまっているケースです。（HTMLの仕様違反）

2つ目は、コメントの中に過去のコメントの終了タグ（-->）が含まれており、「コメントの入れ子」になってしまっているケースです。

この場合、最初の-->でコメントが終わったと判定されて残りが露出します。

コメントアウトした内容はサイトの閲覧者から完全に見えなくなりますか？

いいえ、完全には見えなくなりません。

ブラウザの画面上からは消えますが、右クリックから「ページのソースを表示」を選択すると、誰でもHTMLのコメントを読めます。

そのため、パスワードや公開前のURLなど、機密情報はHTMLコメントに書かないようにしてください。

HTML&CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次