HTMLを書いていると、 「一時的にコードを無効化したい」 「メモを残したい」 「コードを削除せずに非表示にしたい」 と考える場面はありませんか？
そんなときに使うのが、HTMLのコメントアウトです。
コメントアウトを使うことで、コードをブラウザに表示させず、一時的に無効化できますが、書き方を間違えると、レイアウト崩れや表示エラーの原因になることもあります。
この記事では、HTMLコメントアウトの基本的な書き方から、1行・複数行コメントアウトの方法・ショートカットキー・VSCodeでの使い方・コメントアウト使用時の注意点・CSS・JavaScriptとの違いまで、初心者向けにわかりやすく解説します。
サンプルコード付きで紹介するので、HTML学習中の方はぜひ参考にしてください。
HTMLのコメントアウトとは？
HTMLのコメントアウトとは、HTMLファイル内にメモを残したり、一部のコードを一時的に無効化したりするための書き方です。
コメントアウトした内容は、通常ブラウザの画面上には表示されません。
コメントアウトの役割
コメントアウトには、主に「メモを残す」「コードを一時的に無効化する」という役割があります。たとえば、あとから見返したときにコードの意味がわかるように説明を残したり、修正中のコードを削除せずに一時的に非表示にしたりできます。
HTMLコメントアウトの基本構文
HTMLでコメントアウトする場合は、以下のように記述します。
<!-- ここにコメントを書きます -->
「<!–」から「–>」までの間に書いた内容がコメントとして扱われます。
コメント内には、コードの説明や作業メモなどを記述できます。
コメントアウトが使われる場面
コメントアウトは、HTMLの構造を整理したいときや、作業中のメモを残したいときによく使われます。
<!-- ヘッダー部分 -->
<header>
<h1>サイトタイトル</h1>
</header>
このように書いておくと、どの部分が何の役割を持つコードなのかがわかりやすくなります。
特にコード量が増えてきたときは、コメントアウトを活用することで、後から修正しやすいHTMLを書きやすくなります。
HTMLのコメントアウト方法
HTMLでは、特定のコードをコメントとして扱うことで、ブラウザ上に表示されない状態にできます。ここでは、1行コメントアウトと複数行コメントアウトの方法を解説します。
1行をコメントアウトする方法
1行だけコメントアウトしたい場合は、「<!–」と「–>」で囲みます。
<!-- <p>この文章は表示されません</p> -->
コメントアウトした部分はブラウザには表示されず、HTMLソース内だけに残ります。
一時的にコードを無効化したい場合によく使われる方法です。
なお、コメントアウトした内容はWebページ上には表示されませんが、ページのソースコードを確認すると見ることができます。公開したくない情報はコメント内に書かないようにしましょう。
複数行をコメントアウトする方法
HTMLのコメントアウトは、複数行にも対応しています。
<!--
<section>
<h2>見出し</h2>
<p>文章が入ります。</p>
</section>
-->
このように囲むことで、複数のHTMLコードをまとめてコメントアウトできます。
レイアウト確認や、不要になったコードを一時的に残しておきたい場合に便利です。
コメントアウト内にコメントは書けない
HTMLのコメントアウト内に、さらにコメントアウトを書くことはできません。
<!--
<!-- コメント -->
-->
このような書き方をすると、HTMLが正しく読み込まれない原因になる場合があります。
コメントアウトを使う際は、「<!–」と「–>」を重ねて書かないように注意しましょう。
HTMLコメントアウトのショートカット
HTMLのコメントアウトは手入力でも記述できますが、ショートカットキーを使うと効率良く作業できます。特にVisual Studio Code（VSCode）などのエディタでは、選択したコードをすぐにコメントアウトできるため便利です。
Windowsのショートカットキー
WindowsでHTMLをコメントアウトする場合は、以下のショートカットキーを使用します。
Ctrl + /
コメントアウトしたい行を選択した状態で実行すると、自動で「<!– –>」が挿入されます。
もう一度ショートカットを実行すると、コメントアウトを解除できます。
Macのショートカットキー
Macでは、以下のショートカットキーでコメントアウトできます。
Command + /
Windowsと同様に、選択したコードをまとめてコメントアウトできます。
複数行を一括でコメントアウトしたい場合にも便利です。
VSCodeでコメントアウトする方法
Visual Studio Code（VSCode）では、ショートカットキーを使うことで簡単にコメントアウトできます。まずはコメントアウトしたいコードを選択します。
<h1>タイトル</h1>
<p>文章が入ります。</p>
その後、ショートカットキーを実行すると、以下のように自動でコメントアウトされます。
<!--
<h1>タイトル</h1>
<p>文章が入ります。</p>
-->
VSCodeでは頻繁にコメントアウトを使用するため、ショートカットキーを覚えておくと作業効率が上がります。
コメントアウトを使う際の注意点
HTMLのコメントアウトは便利な機能ですが、使い方を間違えると管理しづらいコードになることがあります。ここでは、コメントアウトを使う際に知っておきたい注意点を紹介します。
コメントアウトはブラウザ上では非表示になる
コメントアウトした内容は、通常ブラウザ画面には表示されません。
<!-- <p>この文章は表示されません</p> -->
このように記述したコードは、HTMLファイル内には残りますが、Webページ上には表示されない状態になります。そのため、一時的にコードを無効化したい場合にも便利です。
ソースコードを見ると表示される
コメントアウトは画面上には表示されませんが、HTMLソースコードを見ると内容を確認できます。ブラウザの「ページのソースを表示」機能を使うと、コメントアウト部分も閲覧可能です。そのため、パスワードや個人情報など、公開したくない内容をコメントアウト内に記述しないよう注意しましょう。
不要なコメントは削除する
作業メモとして便利なコメントアウトですが、不要なコメントを大量に残すとHTMLが読みづらくなる原因になります。特に、古いコードや使わなくなったメモを残したままにすると、修正時に混乱しやすくなります。コメントアウトは必要な場面だけに使用し、不要になったものは整理・削除することが大切です。
HTML以外のコメントアウト方法
コメントアウトはHTMLだけでなく、CSSやJavaScriptでも使用できます。ただし、言語ごとに書き方が異なるため注意が必要です。
CSSのコメントアウト方法
CSSでは、「/*」と「*/」を使ってコメントアウトします。
/* 文字色を赤色に変更 */
p {
color: red;
}
「/*」から「*/」までの間がコメントとして扱われます。
CSSでは、デザインの説明や一時的なスタイル無効化によく使用されます。
JavaScriptのコメントアウト方法
JavaScriptでは、1行コメントと複数行コメントの2種類があります。
1行コメントは「//」を使用します。
// alert("Hello");
このように書くと、その行のJavaScriptコードは実行されません。
複数行コメントは、「/*」と「*/」で囲みます。
/*
alert("Hello");
console.log("確認用のコードです");
*/
JavaScriptでは、コードの説明を残したいときや、一時的に処理を無効化したいときにコメントアウトを使います。
HTMLとの書き方の違い
HTML・CSS・JavaScriptでは、それぞれコメントアウトの記述方法が異なります。
| 言語 | コメントアウトの書き方 |
| HTML | <!– コメント –> |
| CSS | /* コメント */ |
| JavaScript | // コメント /* コメント */ |
複数の言語を同時に学習する場合は、コメントアウトの書き方を混同しやすいため、それぞれの違いを覚えておきましょう。
HTMLを効率良く学ぶ方法
HTMLはWeb制作の基本となる言語です。ただし、タグや属性が多いため、「覚えることが多くて難しい」と感じる方も少なくありません。効率良く学習するためには、実際にコードを書きながら、HTMLとCSSをセットで学ぶことが大切です。
実際にコードを書きながら学習する
HTMLは、読むだけではなく実際にコードを書きながら学習することで理解しやすくなります。
たとえば、コメントアウトを実際に入力し、ブラウザ表示がどう変化するか確認することで、仕組みを理解しやすくなります。Visual Studio Code（VSCode）などのエディタを使いながら、少しずつ手を動かして学習していきましょう。
HTMLとCSSをセットで学ぶ
HTMLはWebページの構造を作り、CSSは見た目を整える役割があります。そのため、HTMLだけを学ぶのではなく、CSSも一緒に学習することで、Web制作全体の理解が深まります。実際のWeb制作ではHTMLとCSSを組み合わせて使用する場面が多いため、並行して学習するのがおすすめです。
独学が不安ならスクールもおすすめ
HTMLは比較的学びやすい言語ですが、エラー原因がわからず学習が止まってしまうこともあります。独学に不安がある場合は、質問できる環境があるプログラミングスクールを活用する方法もおすすめです。忍者CODEでは、HTMLやCSSの基礎から実践的なWeb制作まで学習できます。動画教材やチャットサポートを活用しながら、自分のペースで学習を進められるのが特徴です。
まとめ
本記事では、HTMLのコメントアウト方法について解説しました。
HTMLでは、「<!–」と「–>」を使うことで、コードをコメントアウトできます。コメントアウトを活用すると、メモを残したり、一時的にコードを無効化したりできるため、Web制作でよく使われます。また、VSCodeのショートカットキーを使えば、コメントアウト作業を効率良く行うことも可能です。ただし、コメントアウトはブラウザ上には表示されなくても、ソースコード内では確認できます。個人情報や公開したくない内容を記述しないよう注意しましょう。
HTMLの学習では、実際にコードを書きながら仕組みを理解することが大切です。ぜひ今回紹介したサンプルコードを使いながら、HTMLの基礎を身につけてみてください。
