HTMLでコードを書いていると、「ここにメモを残しておきたい」「一時的にこの部分を表示させないようにしたい」と思うことがあります。 そんな時に大活躍するのが「コメント（コメントアウト）」です。
今回は、コメントの基本的な書き方から、ブログ運営やサイト修正が劇的にラクになる実践的なTipsまでを分かりやすく解説します！
1. コメントとは？（画面に映らない「秘密のメモ」）
HTMLのコメントとは、「ブラウザの画面には表示されない、ソースコードの中だけのメモ書き」のことです。 コードの一部を一時的に無効化することを「コメントアウト」とも呼びます。
基本的な書き方
HTMLのコメントは、 <!-- と --> で囲みます。
<!-- ここにメモを書きます。画面には表示されません -->
<p>ここはブログの本文なので、画面に表示されます。</p>
<!--（開始記号）： ここからコメントが始まります。-->（終了記号）： ここでコメントが終わります。
💡<!– や –> をいちいち手入力してると手間ですが、「Ctrl＋/」を押すたびにコメント、コメント解除をトグルしますので、ラクチンです。
2. 知っておくと便利！コメントの使い道（Tips）
コメントは、ただのメモ以外にもさまざまな場面で役立ちます。ブログ運営で使える3つの重要Tipsをご紹介します。
💡 Tips 1：コードの「区切り」をわかりやすくする
ブログのカスタマイズを進めていくと、HTMLのコードが長くなってしまい「どこからどこまでが何の塊（要素）なのか」が分からなくなることがあります。 そんな時は、コメントで目印をつけておくと一目で構造が把握できます。
<!-- 💡 おすすめ記事セクション 開始 -->
<div class="recommend-box">
<h2>おすすめの記事</h2>
<p>ここに記事のリストが入ります。</p>
</div>
<!-- 💡 おすすめ記事セクション 終了 -->
💡 Tips 2：消すのが怖いコードを「一時的に隠す」
「この文章、やっぱり非表示にしたいけれど、後でまた使うかもしれないから消すのはもったいない…」という時にコメントアウトが便利です。
<!-- 一時的に非表示
<p>期間限定のキャンペーン情報です！</p>
ここまで非表示 -->
コードを削除せずに画面上からだけ消すことができるため、いつでも元に戻せて安心です。
💡 Tips 3：複数行まとめてコメントにする
1行だけでなく、複数行にわたる長い文章やコードの塊も、全体を <!-- と --> で囲むだけで丸ごとコメントにできます。
3. コメントを使うときの注意点（セキュリティ）
超重要なTipsとして、「ユーザーに見られて困る秘密の情報は絶対に書かない」というルールがあります。
コメントはブラウザの画面には表示されませんが、サイトを右クリックして「ページのソースを表示」を選択すると、誰でも中身を見ることができます。 パスワードや個人情報、他人の悪口などは絶対にコメントに書かないように注意しましょう。
まとめ
HTMLのコメント（<!-- -->）は、未来の自分や、一緒にサイトを運営する仲間に向けた「コード内の伝言板」です。
- セクションの区切りに目印をつける
- 消したくないコードを一時的に隠す
- 誰に見られても恥ずかしくない内容にする
この3つのポイントを意識して、後から見返しても迷わない、キレイで読みやすいコードを書いていきましょう！
コメント