ホームページの作成でHTMLやCSSのコードを書いているとき、「ここに閲覧者に見られないメモを残しておきたい」「このコードを一時的に非表示にしたい」と思ったときに役立つのが「コメントアウト」です。
コメントアウトを正しく使いこなせると、複数人でのチーム開発がスムーズになるだけでなく、数ヶ月後の自分がコードを見返したときのメンテナンス効率が劇的に上がります。
ただし、HTMLとCSSではコメントアウトの書き方が異なり、使い方を誤ると レイアウト崩れ や 意図しない情報の露出 といったトラブルにつながることもあります。
ここでは、HTMLとCSSにおけるコメントアウトの基本的な書き方の違いから、実務で役立つ効果的な使い方、そして絶対に避けたい注意点までを、初心者にも分かりやすく解説します。
コメントアウトを正しく使いこなし、読みやすく安全なコードを書けるようになりましょう。
コメントアウトの意味
コメントアウトとは、ソースコード内に記述したメモやコードを、ブラウザの画面に表示させない（実行させない）ようにするための仕組みです。ブラウザはコメントアウトされた部分を「無視」して処理するため、Webサイトのデザインや動作に影響を与えることなく、コード内に自由な記述を残すことができます。
特にHTMLやCSSでは、コード量が増えるほど構造が複雑になり、後から見返したときに「このコードは何のため？」と迷う場面が増えます。コメントアウトを適切に使うことで、コードの可読性が向上し、保守性やチーム開発の効率が大きく改善します。
コメントアウトが使われる主な8つの目的
・メモとして使用する
コードの意図や処理内容を説明し、後から見返したときに理解しやすくします。
・プログラミングの機能を一時的に停止させる
特定のコードを一時的に非表示・無効化し、動作確認や調整を行う際に便利です。
・開発メモや注意書きを残す
「後で修正する」「この部分は仮実装」など、TODOコメントとして活用できます。
・以前のコードを残したまま書き換える
修正前のコードをバックアップとして残し、いつでも元に戻せるようにします。
・機能や処理に関する説明を書く
複雑なレイアウトや処理の意図を説明し、他の人が理解しやすいようにします。
・チーム開発の情報共有
他のエンジニアへの申し送り、仕様変更の理由などをコード内に残すことができます。
・特定のブロックを表示・非表示にする
期間限定のバナーやキャンペーン要素を一時的に隠す際に便利です。
・デバッグ作業に使う
バグの原因と思われる箇所を一時的に無効化し、問題箇所を切り分けるために使用します。
HTMLのコメントアウトタグの書き方
HTMLでは、コメントにしたい部分を「<!--」（※1）と「-->」（※2）で囲みます。
※1：「<」+「!」+「-（半角ハイフン）」+「-（半角ハイフン）」。
※2：「-」+「-」+「>」。
「-」と「-」の間にスペースは設けず、連続して記載します。
この2つの記号で挟まれた内容は、ブラウザはこの範囲を完全に無視して処理するため、ブラウザには表示されません。デザインや動作に一切、影響を与えません。
◆ HTMLの1行コメントアウトの書き方
|
<!
--<p>1行のコメントアウトはこのように書きます</p> --><p>これはブラウザに表示されます。</p>
|
ブラウザでの表示結果
 |
◆ HTMLの複数行にまたがるコメントアウトの書き方
| <!– <p>複数行にまたがるコメントアウトも、<br> 同じ記号で挟むだけで自動的に適用されます。</p> –> <p>非表示にしたいブロック全体を囲むことも可能です。</p> |
ブラウザでの表示結果
 |
◆ HTMLのブロック全体のコメントアウトの書き方
|
<!
-- <div class=”sample-block”><h2>このブロック全体がコメントアウトされています</h2>
<p>ブラウザには一切表示されません。</p>
</div>
--><p>この文章は通常どおり表示されます。</p>
|
ブラウザでの表示結果
 |
CSSのコメントアウトタグの書き方
CSSでは、コメントにしたい部分を「/*」と「*/」で囲みます。
この記号で挟まれた部分はブラウザに読み込まれず、スタイルにも影響しません。
なお、CSSコメントが使える場所と使えない場所があります。
また、CSSでは HTMLの「<!--」「-->」は使えませんので注意が必要です。
◆ CSSコメントが使える場所
・外部CSSファイル
・HTMLの<head></hea>セクション内の<style></style>タグの中
◆ CSSコメントが非推奨な場所
・HTMLタグの style 属性（インラインCSS）
| <p style=”color: red; /* 文字を赤くする */ font-size: 16px;”> テキスト </p> |
これは 赤字＋16px で表示され、技術的には可能です。
 |
しかし、実務では推奨されていません。属性の中にコメントを書くとコードが横に長くなって非常に読みづらくなり、閉じ忘れによる表示崩れの原因にもなるからです。
◆ CSSの1行コメントアウトの書き方
・HTMLファイル（index.html）
|
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>CSSコメントアウト比較</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<h1>見出しタイトル</h1>
<p class=”active-text”>この文章は「コメントされていないCSS」が適用されます。</p>
<p class=”inactive-text”>この文章は「コメントアウトされたCSS」が適用されません。</p>
</body>
</html>
|
・CSSファイル（style.css）
|
/* これは有効なCSS（コメントアウトされていない） */
.active-text {
color: blue;
font-weight: bold;
}
/*
これはコメントアウトされているCSS。
そのため .inactive-text にはスタイルが適用されません。
.inactive-text {
color: red; font-weight: bold;
}
*/
|
ブラウザでの表示結果
 |
◆ CSSの複数行コメントアウトの書き方
・HTMLファイル（index.html）
|
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>CSS複数行コメントアウト比較</title>
<style>
/* これは有効なCSS（コメントアウトされていない） */
.active-box {
background: lightgreen;
padding: 20px;
font-weight: bold;
}
/*
これはコメントアウトされているCSS。
そのため .inactive-box にはスタイルが適用されません。
.inactive-box {
background: pink;
padding: 20px;
font-weight: bold;
}
*/
</style>
</head>
<body>
<h1>CSS複数行コメントアウト</h1>
<div class=”active-box”>
このボックスは「有効なCSS」が適用されて緑色になります。
</div>
<div class=”inactive-box”>
このボックスは「コメントアウトされたCSS」が適用されないため、デフォルトのままです。
</div>
</body>
</html>
|
ブラウザでの表示結果
 |
CSSコメントアウト削除後のブラウザでの表示結果
 |
効果的なコメントの使い方
実際の現場でプロが使っているコメントの書き方 を紹介します。
コードが読みやすくなり、保守性が大幅に向上します。
①コードの範囲・区切りを明確にする
どこからどこまでが何のブロックなのかを一目で分かるように区切る方法です。
効果
・コードの構造がひと目で分かる
・長いページでも迷子にならない
|
<!
-- ======= ヘッダーエリア開始 ======= --><header>
<h1>ロゴ</h1>
</header>
<!
-- ======= ヘッダーエリア終了 ======= --> |
②複雑な div の階層をわかりやすくする（閉じタグ迷子防止）
デザインにこだわると <div> が増え、「どの </div> がどこに対応しているのか」分からなくなります。
効果
・閉じタグの対応関係が明確
・大規模サイトで特に必須
|
<div id=”main-content”>
<div class=”article-box”>
<p>記事の本文が入ります。</p>
</div><!
-- /.article-box終了 --></div><!
-- /#main-content終了 --> |
③古いブラウザでの JavaScript 非表示対策（古典的手法）
このテクニックは、 「JavaScript（JS）に対応していない非常に古いブラウザ」 または 「ユーザーがブラウザ設定で JavaScript を意図的に無効にしている環境」 での挙動に関するものです。
昔のブラウザは、JavaScript を解釈できない場合、 <script> タグの中身を ただのテキストとして画面に表示してしまう ことがありました。
そのため、スクリプトを HTMLコメントで囲んで保護する手法が使われていました。
効果
・古いブラウザで <script> 内のコードが画面に出るのを防ぐ
|
<script>
<!
-- document.write(“JavaScriptが有効です”);
//
--></script>
|
④TODOコメントで修正予定を残す（実務でよく使う）
あとで修正すべき箇所を明確にするためのコメント。
効果
・エディタの検索で「TODO」を拾える
・修正漏れを防げる
|
<!
-- TODO: 2026年〇月〇日にイベントバナーに差し替え --> <img src=”normal-banner.jpg” alt=”通常バナー”>
|
コメントタグを使用する際の注意点・禁止事項
コメントはコードの理解を助ける便利な仕組みですが、使い方を誤ると逆にトラブルの原因になります。ここでは、実務で必ず押さえておくべき注意点・禁止事項 をまとめます。
①公開したくない秘密情報は絶対に書かない【重要】
コメントはあくまで補助。
本来は「コメントがなくても読めるコード」が理想です。
・コメントが多すぎると逆に可読性が下がる
・コードの修正時にコメントが古くなり、誤情報になる危険もある
②コメントの多用・依存をしすぎない
HTMLコメントは 誰でも「ソースを表示」で読めます。
そのため、下記のような機密情報は絶対に書いてはいけません。
・パスワード
・APIキー
・個人情報
・社外秘のメモ
・愚痴・内部事情
③コメント内に「連続したハイフン（–）」を書かない
HTMLコメントは <!-- ～ --> で囲みますが、 内部に --（連続ハイフン）を含めることは HTML仕様で禁止されています。
理由： -- があるとブラウザが コメント終了タグ --> と誤認 し、 レイアウト崩れやコメントの途中終了の原因になるためです。
④コメントアウトの「ネスト（入れ子）」はできない
HTMLコメントも CSSコメントも 入れ子にできません。
❌ NG例
|
<!
-- ここはコメント
<!
-- これは入れ子でエラー -->--> |
|
/* 外側のコメント開始
.box {
color: red;
}
/* 内側のコメント（ここでエラー） */
*/
|
⑤コメントタグの閉じ忘れに注意（ページ全体が消えるリスク）
閉じ忘れは 以降のHTMLが丸ごと非表示 になる危険があります。
|
<!
-- コメント開始<p>この下が全部消える</p>
|
⑥「?」などの特殊文字や「!」の位置のルール
ブラウザによって解釈が変わり、レイアウト崩れの原因になります。
❌ NG（構文に混ぜる）
|
<!
--? コメント --><!
--! コメント --> |
✔ OK（コメントの内容として使う）
|
<!
-- この部分は大丈夫? --><!
-- ここは重要！ --> |
⑦PHPファイルでHTMLを書くときのコメントの罠（WordPressを含むすべてのPHP環境）
PHPファイル（.php）では、HTMLとPHPが混在して記述されますが、このときHTMLコメント（<!-- ～ -->）でPHPコードを囲んでも、PHPの実行は止まりません。
この挙動は、WordPressを含むPHPファイルでHTMLを書いているすべての環境に共通する仕様です。
◆ なぜ HTMLコメントでは PHP の実行が止まらないのか？
PHPが実行される条件は次の2つだけです。
・ファイルが .php であること
・<?php ?> が存在すること
PHPはサーバー側で実行されますが、HTMLコメントはブラウザに対して「この部分を表示しない」と指示するだけの仕組みです。
つまり、
・PHPの実行はサーバー側の処理
・HTMLコメントはブラウザ側の表示制御
この2つはまったく別のレイヤーで動いているため、HTMLコメントでPHPを囲んでもPHP の実行は一切止まりません/strong>。
◆ 正しい対処法：PHPを無効化したいなら PHPコメントを使う
PHPコードを本当に無効化したい場合は、 PHPコメント（// または /* */）を使う必要があります。
<?php
// echo "これは実行されない";
?>
PHPタグごと削除する方法も一案です。
HTMLコメントで PHP を“消したつもり”にするのは完全に誤りで、実務では絶対に避けるべきです。
