【HTML】コメント（コメントアウト）の書き方｜使い道、入れ子にできない注意点、WordPressでの扱い

HTMLを書いていると、「ここにメモを残しておきたい」「この部分をしばらく表示しないようにしたい」ということがあります。そんなときに使うのが、HTMLの「コメント」です。C言語の /* */ や // と同じように、ブラウザに無視される部分を書けます。

この記事では、コメントの書き方と使い道、使うときの注意点をまとめます。

コメントの書き方

HTMLのコメントは、<!-- と --> で囲みます。囲んだ部分はブラウザの画面には表示されません。

<!-- ここにメモを書きます。画面には表示されません -->
<p>ここはブログの本文なので、画面に表示されます。</p>

<!-- ここにメモを書きます。画面には表示されません -->
<p>ここはブログの本文なので、画面に表示されます。</p>

• <!--：ここからコメントが始まる
• -->：ここでコメントが終わる

メモを書くことを「コメント」、コードの一部をコメントで囲んで無効にすることを「コメントアウト」と呼ぶことがあります。

VS Code などのエディタでは、行を選んで Ctrl＋/（Mac は Cmd＋/）を押すと、コメントにしたり、元に戻したりできます。記号を手で打つより速く、打ち間違いもありません。

コメントの使い道

① コードの区切りに目印を付ける

HTMLが長くなると、どこからどこまでが何の部分なのかが分かりにくくなります。コメントで始まりと終わりに目印を付けておくと、あとで読んだときに探しやすくなります。

<!-- 💡 おすすめ記事セクション 開始 -->
<div class="recommend-box">
    <h2>おすすめの記事</h2>
    <p>ここに記事のリストが入ります。</p>
</div>
<!-- 💡 おすすめ記事セクション 終了 -->

<!-- 💡 おすすめ記事セクション 開始 -->
<div class="recommend-box">
    <h2>おすすめの記事</h2>
    <p>ここに記事のリストが入ります。</p>
</div>
<!-- 💡 おすすめ記事セクション 終了 -->

② 消すのが不安なコードを一時的に隠す

「しばらく表示しないけれど、あとでまた使うかもしれない」という部分は、消す代わりにコメントで囲んでおきます。複数行でも、全体を <!-- と --> で囲むだけです。

<!-- 一時的に非表示
<p>期間限定のキャンペーン情報です！</p>
ここまで非表示 -->

<!-- 一時的に非表示
<p>期間限定のキャンペーン情報です！</p>
ここまで非表示 -->

コードを消していないので、囲みを外せばすぐに元に戻せます。

使うときの注意点

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

コメントを含んだ範囲を、さらにコメントで囲むことはできません。ブラウザは、最初に出てきた --> でコメントが終わったと考えるからです。

<!-- 一時的に非表示
<!-- 💡 おすすめ記事セクション 開始 -->
<div class="recommend-box">
    <h2>おすすめの記事</h2>
</div>
<!-- 💡 おすすめ記事セクション 終了 -->
ここまで非表示 -->

<!-- 一時的に非表示
<!-- 💡 おすすめ記事セクション 開始 -->
<div class="recommend-box">
    <h2>おすすめの記事</h2>
</div>
<!-- 💡 おすすめ記事セクション 終了 -->
ここまで非表示 -->

この場合、コメントは1行目の「開始 –>」で終わってしまい、その下の div は画面に表示されます。さらに最後の「ここまで非表示 –>」が、そのまま文字として画面に出てしまいます。C言語の /* */ が入れ子にできないのと同じです。中にコメントがある範囲を隠したいときは、中のコメントを先に外すか、小分けにコメントアウトします。

② コメントは誰でも読める

コメントは画面には表示されませんが、ページのHTMLの中にはそのまま入っています。ブラウザで右クリックして「ページのソースを表示」を選べば、誰でも読めます。パスワードや管理画面のURL、個人情報、公開したくないメモは書かないようにします。

「一時的に隠した」キャンペーン情報なども、ソースを見れば分かります。公開前の情報は、コメントアウトではなく、本文から外しておきます。

WordPressでの扱い

WordPressのブロックエディタで「コードエディター」に切り替えると、<!-- wp:paragraph --> のようなコメントがたくさん並んでいます。これはWordPressがブロックの区切りを覚えておくための印で、公開されるページには出ません。消したり書き換えたりするとブロックが崩れるので、そのままにしておきます。

一方、「カスタムHTML」ブロックに自分で書いたコメントは、公開されるページのHTMLにそのまま出ます。上の「誰でも読める」と同じ注意が必要です。

CSSとJavaScriptのコメント

HTMLの中に書くCSSやJavaScriptでは、コメントの書き方が違います。

style タグの中に <!-- を書いてもCSSのコメントにはならないので、書いている場所の言語に合わせます。HTML全体の基本は「HTMLの基本｜タグの書き方とよく使う5つのタグ」で紹介しています。

まとめ

• HTMLのコメントは <!-- と --> で囲む。エディタでは Ctrl＋/ で切り替えられることが多い
• 区切りの目印や、あとで使うかもしれないコードを一時的に隠すのに使う
• コメントは入れ子にできない。最初の --> で終わってしまう
• コメントはページのソースで誰でも読めるので、公開したくないことは書かない
• WordPressの <!-- wp:〜 --> はブロックの印なので触らない