HTMLコメントアウトの正しい書き方と注意点｜複数行やショートカットキーも紹介

Webサイトのソースコードを記述する際、プログラムの動作には影響を与えず、制約なくメモを残せる機能が「コメントアウト」です。

HTMLを記述する中で、特定の箇所がどのような役割を持っているのか、あるいは一時的に特定の要素を非表示にしたいといった場面で非常に重宝します。

しかし、単純な機能ゆえに「正しい書き方」や「セキュリティ上の注意点」を疎かにしてしまうと、予期せぬ表示崩れや情報の漏洩を招くリスクもあります。

本記事では、HTMLにおけるコメントアウトの基本から、効率を上げるショートカットキー、そして実務で役立つ注意点までを詳しく解説します。

HTMLコメントアウトの基本的な書き方

HTMLでコメントを記述するには、特定の記号でテキストを囲みます。

ブラウザはこの記号に囲まれた部分を無視するため、画面上に表示されることはありません。

基本的な文法

HTMLのコメントアウトは、開始タグである<!--と、終了タグである-->を使用します。

<!-- ここにコメントの内容を記述します -->
<p>このテキストはブラウザに表示されます。</p>

このように記述することで、「ここにコメントの内容を記述します」という部分は無視され、その後の<p>タグの内容だけがユーザーの画面に描画されます。

複数行のコメントアウト

コメントアウトは1行だけでなく、複数行にわたって記述することも可能です。

開始タグと終了タグの間に改行が含まれていても、ブラウザはそれらをすべてコメントとして処理します。

<!--
    このセクションはメインコンテンツエリアです。
    更新日：2026年5月3日
    担当者：田中
-->
<main>
    <p>コンテンツの内容</p>
</main>

複数行で記述する場合は、後からコードを見返したときにどこまでがコメントなのかを判別しやすくするため、インデントを揃えるなどの工夫をすると可読性が高まります。

コメントアウトの活用シーン

コメントアウトは単なるメモ書き以外にも、開発現場でさまざまな用途に活用されます。

コードの構造を分かりやすくする

大規模なWebサイトになると、HTMLのソースコードは数百行から数千行に及ぶことがあります。

どこからどこまでが「ヘッダー」で、どこからが「サイドバー」なのかを明示することで、自分以外の開発者がコードを見た際や、数ヶ月後の自分が修正を行う際のメンテナンス性が劇的に向上します。

<!-- Header Start -->
<header>
    <h1>サイトタイトル</h1>
</header>
<!-- Header End -->

<!-- Main Content Area -->
<article>
    <!-- 記事の本文 -->
</article>

一時的な要素の非表示（デバッグ）

特定のパーツを一時的に消してデザインを確認したい場合や、開発中の新機能を一時的に隠しておきたい場合にもコメントアウトが有効です。

要素を削除してしまうと、元に戻したい時に再度記述し直す手間が発生しますが、コメントアウトであれば記号を外すだけで即座に復元できます。

<!-- 
<div class="campaign-banner">
    <p>期間限定キャンペーン実施中！</p>
</div>
-->

このように記述しておけば、キャンペーン期間外はコメントアウトしておき、期間中だけコメントアウトを解除するといった運用が可能になります。

効率を上げるショートカットキー

手動で<!--と-->を入力するのは手間がかかります。

モダンなエディタ（VS Codeなど）を使用している場合は、ショートカットキーを活用することで一瞬でコメントアウトが可能です。

使い方は非常に簡単です。

コメントアウトしたい行にカーソルを置くか、範囲を選択した状態で上記のキーを押すだけです。

もう一度同じキーを押すと、コメントアウトが解除（アンコメント）されます。

この操作はHTMLだけでなく、CSSやJavaScriptでも同様に使えるため、必ず覚えておきたいテクニックです。

HTMLコメントアウトの注意点とNGな書き方

コメントアウトは便利ですが、Web開発において注意しなければならないルールがいくつか存在します。

不適切な書き方をすると、ブラウザがコードを誤認し、レイアウトが崩れる原因になります。

コメントの入れ子（ネスト）は禁止

HTMLのコメントアウトの中に、さらにコメントアウトを入れることはできません。

これを「入れ子（ネスト）」と呼びますが、HTMLの仕様上認められていません。

<!-- 
    外側のコメント
    <!-- 内側のコメント（これはNG） -->
-->

ブラウザは最初の-->を見つけた時点で「コメントが終了した」と判断します。

そのため、上記のような記述をすると、内側の終了タグの後に続くテキストや記号が画面上にそのまま露出してしまいます。

連続したハイフンを避ける

コメントの内容の中に--（連続したハイフン）を含めることは、一部の古いブラウザや解析エンジンにおいて予期せぬ動作を引き起こす原因となります。

HTML5以降では緩和されていますが、可読性や互換性の観点から、コメント内でのハイフンの多用は避けるのが無難です。

<!-- -------------------------- -->
<!-- このような装飾的な書き方は非推奨 -->
<!-- -------------------------- -->

区切り線を引きたい場合は、#や=などの記号を代用することを検討してください。

ユーザーに見られてはいけない情報を書かない

初心者が最も陥りやすい罠が、「コメントアウトした内容はユーザーには絶対に見えない」という誤解です。

コメントアウトされた内容は、ブラウザの画面上には表示されませんが、ブラウザの機能である「ソース表示」や「デベロッパーツール」を使用すれば、誰でも簡単に閲覧することが可能です。

以下の情報は絶対にコメントアウトとして残さないでください。

• 社内向けのメモや機密情報
• サーバーのログインIDやパスワード
• 開発者の個人名や連絡先
• 顧客への不満や個人的なメモ

Webサイトを公開する際は、外部に見られて困る記述が残っていないか必ずチェックしましょう。

モダンな開発現場におけるコメントの扱い

2026年現在のWeb開発シーンでは、ReactやVue.js、Next.jsといったフレームワークを用いた開発が主流です。

これらを使用する場合、HTMLコメントアウトの扱いに少し変化が生じています。

コンポーネント指向とコメント

部品ごとにコードを分割するコンポーネント指向の開発では、HTMLファイルが巨大化しにくいため、かつてのような「ここからヘッダー」といった長大なコメントの必要性は減っています。

代わりに、そのコンポーネントが「どのような役割を持つのか」を簡潔に記すことが求められます。

ビルドプロセスによる自動削除

商用環境（本番環境）のWebサイトでは、ページの読み込み速度を高速化するために、HTMLファイルから不要な改行やコメントを自動で削除する「Minify（縮小化）」という処理が行われるのが一般的です。

そのため、開発環境では丁寧にコメントを記述してメンテナンス性を高め、ユーザーが閲覧する本番環境ではコメントを削除してファイルサイズを軽量化するという使い分けが標準となっています。

他の言語（CSS/JavaScript）との違い

HTMLのコード内であっても、<style>タグの中や<script>タグの中では、HTMLのコメント記法は使えません。

JavaScriptの中で<!-- -->を使っても、ブラウザはそれをコメントとして認識せず、構文エラー（Syntax Error）が発生してプログラムが停止してしまいます。

記述している場所が「どの言語の領域なのか」を常に意識しましょう。

まとめ

HTMLのコメントアウトは、コードの可読性を高め、開発効率を向上させるために欠かせないツールです。

• 基本は<!--と-->で囲む。
• 複数行の記述も可能で、デバッグや構造の明確化に役立つ。
• ショートカットキー（Ctrl + /）を使いこなす。
• 入れ子（ネスト）は禁止されており、表示崩れの原因になる。
• ソースコードからは誰でも閲覧できるため、機密情報は絶対に記述しない。

これらのルールを守ることで、チーム開発でも個人の制作でも、清潔で管理しやすいソースコードを保つことができます。

正しいコメントアウトの書き方をマスターし、より質の高いWebサイト制作を目指しましょう。