HTMLコメントアウトの方法まとめ！複数行での書き方・ショートカット・注意点を解説

HTMLのコメントアウトとは？

HTMLのコメントアウトとは、その機能を使って本来動作するコードを一時的に無効化することです。

これを利用してコメントを残し、自分や他の開発者に対してコードを読みやすくしたり、後から修正しやすくしたりするために使います。

▼コメントアウトの主な用途

• コードの区切りや説明
• 他の人への注意書きやメモ
• 一時的なコードの無効化

例：

<!-- ここからヘッダー部分 -->
<header>
  <h1>サイトタイトル</h1><!-- 250616変更済み -->
</header>
<!-- ここまでヘッダー部分 -->

コメントアウトの基本構文

HTMLのソースコードに影響しないようにコメントを残すには、<!-- と-->で囲みます。この間に書いた内容は、ブラウザには表示されません。
Web制作の業務では一時的に使わないコードを、非表示にするときにも使われます。

例：

<!-- ここがコメントです -->
<!-- <p>この段落は表示されません</p> -->

コメントアウト内に --（ダッシュ2つ）は使わない方が無難です。HTML仕様上、エラーの原因になることがあります。

複数行コメントアウトの書き方

HTMLでは、複数行にまたがるコメントアウトも、<!-- と -->で囲むだけで書くことができます。特別な書き方は不要ですが、長い説明やメモを残す際に便利です。

例：

<!--
この部分は
複数行にわたる
コメントです
-->
<!-- <p>
  この文章は
  表示されない
  ですよ？
</p> -->

上記のようにまとめてコメントアウトすることで、

• デザイン調整中に一部のコードを一時的に消したいとき
• テストや検証のために特定の要素を非表示にしたいとき
• チーム開発で「ここは後で修正予定」などのメモを残したいとき

にも柔軟に対応できます。

コメントアウトのショートカットキー

効率的にコメントアウトするには、エディタのショートカットキーを覚えると便利です。よく使われるエディタでのショートカットをまとめましたのでぜひ覚えていってください。
コメントアウトにしたい行や範囲を選択し、ショートカットを押すだけで自動的にで囲まれます。
コメントアウトにした範囲で再度このショートカットを使うとを外すことも出来ます。

エディタ	Windows	Mac
Visual Studio Code	Ctrl + /	Command + /
Sublime Text	Ctrl + /	Command + /
Atom	Ctrl + /	Command + /

既にコメントアウトになっている部分を含めて選択した状態でコメントアウトにするとエラーになります。

コメントアウトでよくあるエラーと注意点

コメントタグの入れ子（ネスト）はNG

HTMLでは、コメントアウトタグの中にさらにコメントアウトタグを入れる（入れ子）ことはできません。これは、HTMLの仕様上、正しく認識されず、思わぬ表示崩れやエラーの原因となります。

NG例：

<!--
  ここはコメント
  <!-- これは入れ子コメント（エラーになる） -->
-->

修正例：

<!-- ここはコメント -->
<!-- これは入れ子コメント -->

コメントアウトしたはずなのに表示される・意図しないコメントアウトが起こる

コメントアウトの書き間違いで、コメントアウト内の内容がそのまま表示されてしまうことがあります。
エディタの自動補完やコピー＆ペースト時に、タグが崩れていないか確認しましょう。
下記チェックリストを確認してみてください。

• 間違った場所で<!--や-->を使っていないか
• 終了タグ-->の書き忘れていないか
• コメントアウト内に–（ダッシュ2つ）が含まれていないか
• キャッシュが原因の場合もあるので、ブラウザのリロードやキャッシュクリアを試す

ソースを見たときにコメントが見えてしまう

HTMLのコメントアウトはブラウザに表示されませんが、右クリック→「ページのソースを表示」などで簡単に確認できてしまいます。公開したくない情報はコメントアウトで書かないようにしましょう。

また、PHPでもHTMLのコメントアウトのように、実際にはソースに出力されないコメントを作成することも可能です。

例：

<?php // ここはサーバー側のコメントなので、ソースには表示されません ?>
<?php /* ?>
<p>ここに書いてる文章も表示されません</p>
<?php */ ?>

このように、PHPの//（または /* */）によるコメントはクライアントに届かないため、HTMLのコメントとは異なりソースからは確認できません。
ただし、PHPを使うにはサーバー側でPHPが実行される環境が必要です（.phpファイルで保存し、サーバーにアップロードするなど）。

コメントアウトを活用するメリットとコツ

コードの可読性・保守性アップ

コメントを適切に使うことで、後から見返したときや他人と共同作業する際に、コードの意図が伝わりやすくなります。
セクションごとに説明を書いたり、不明な処理には「TODO」や「FIXME」を残すようにしましょう。
説明や注意書きをコメントで残しておくことで、引き継ぎや修正時のミスが減ります。

納品時のトラブル防止

コメントアウトをしてもソースではコメントアウトした内容が確認できてしまいます。
不要なコメントアウトは削除して納品・提出するようにしましょう。

コメントの書きすぎには注意

必要以上にコメントを入れると、かえって見づらくなることも。ポイントを絞って簡潔に書きましょう。

まとめ

HTMLコメントは、「コードのメモ」というシンプルな存在ですが、正しい使い方を知ることで、学習効率や作業効率が大きく向上します。特に初心者のうちは、コメントを積極的に活用し、「なぜこのコードを書いたのか」「どこを修正したのか」を自分や他人に伝える習慣をつけましょう。