HTML: HTMLコメント
コメントは開発者のために書かれるテキストメモです。ブラウザはこれらを完全に無視します。コメントを上手に使うことで、コードの可読性が大幅に向上し、チームコラボレーションが促進されます。
1. コメントの構文
HTMLコメントは <!-- で始まり、--> で終わります。その間の内容はどんなテキストでも構いません。ブラウザはページ上に表示しません。
▶ サンプル
HTML
<!-- これはコメントです。ユーザーには見えません -->
<p>このテキストはユーザーに表示されます。</p>
<!-- ======= ナビゲーションセクション開始 ======= -->
<nav>
<a href="index.html">ホーム</a>
<a href="about.html">会社概要</a>
</nav>
<!-- ======= ナビゲーションセクション終了 ======= -->
📌 注意：コメントの内容はページ上には表示されませんが、HTMLソースコードには残ります ― 誰でもページのソースを表示すればコメントを見ることができます。パスワードや機密情報をコメントに含めないでください。
2. コメントの一般的な使い方
コメントは単なるメモ書きだけでなく、開発中やデバッグ時にも非常に役立ちます。
▶ サンプル
HTML
<!-- コードの一部を一時的にコメントアウト（デバッグ用） -->
<!--
<p>このコードは今は表示する必要がありません。</p>
<a href="old-page.html">古いリンク</a>
-->
<!-- TODO: 後でユーザーアバターを追加する必要があります -->
<!-- @John 2026-06-12: 公開前にここに書いてある内容を確認してください -->
💡 ベストプラクティス：コメントは「なぜそのように書いたのか」を説明するものであって、「どのように書いたか」を説明するものではありません。良いコードはそれ自体で説明可能であるべきです。コメントはコード自体が表現できないコンテキストを補足するだけにしましょう。また、公開前にはデバッグ用のコメントを削除することを忘れないでください。
❓ よくある質問
Q HTMLコメントはユーザーに見えますか？
A コメントはページには表示されませんが、誰でもページのソースを表示（右クリック→ページのソースを表示）すれば見ることができます。したがって、コメントにパスワード、APIキー、機密的なロジックを絶対に書いてはいけません。コメントは開発者のためのものであり、ユーザーのためのものではありません。公開前にデバッグ用のコメントを削除しましょう。
Q コメントをネスト（入れ子）にすることはできますか？
A いいえ。HTMLコメントのネストはサポートされていません。別のコメントの中に
<!-- -->を書くことはできません。試みると、ブラウザは最初の-->をコメントの終了と見なし、その後のすべての内容がページに露出してしまいます。コメントを含むブロックをコメントアウトする必要がある場合は、CSSのdisplay:noneやJavaScriptを使って表示を制御することを検討してください。Q コメントの中に何を書くことができますか？
A コメントには任意のテキスト、改行、スペースを含めることができますが、
--（二重ハイフン）はコメントの終了と誤解される可能性があるため使用できません。一般的な使用例：1）セクションマーカー（<!-- ナビゲーション開始 -->など）；2）TODOマーカー（<!-- TODO: 検索機能を追加 -->など）；3）コードの一時的な非表示（デバッグ用）；4）著者情報（<!-- @John 2026-06-12 -->など）。📖 まとめ
- コメントは
<!--で始まり-->で終わる。ブラウザは表示しない - コメントはコードブロックの説明、コードの一時的な非表示化、TODOマーカーの追加に使える
- コメント内の機密情報は誰にでも見える ― パスワードは絶対に書かない
- デプロイ前にデバッグ用コメントを削除し、ソースコードを整理する
📝 練習問題
- コードにコメントを追加する： ナビゲーションと本文コンテンツを持つシンプルなページを作成し、各ブロックの前後にセクションコメントマーカーを追加してください（例：
<!-- ナビゲーション開始 -->）。 - コメントを使ったデバッグ： 前のレッスンからコードをコピーし、コメントを使って特定のセクションを一時的に「非表示」にしてください。非表示にしたセクションが実際にページに表示されないことを確認しましょう。
