HTMLのコメントアウトの書き方を具体例も使って紹介！

webサイトやwebサービスは、作って終わりではなく、改善を繰り返したり、追加のページや機能を入れることもよくあります。そんな時に、以前書いたコードにコメントがあると、『あれ？これなんだっけ？』と迷うようなことも少なくなります。

この記事では、HTMLのコメントアウトの書き方を具体例も使って紹介します。

CSSのコメントアウトの書き方については、下記の記事をご覧ください。

CSSのコメントアウトの書き方を具体例も使って紹介！

👇 メンターやってます 👇

模写修行やこのメディアを作ったメンバー中心に、Web制作業界を目指す方のための学習支援サービス 『Hello Mentor』 を運営しています。

• 基礎学習後にやるべきことがわからない...
• スクール卒だけど実力不足だと感じている...
• 自分のコードが正しい書き方かわからない...
• 未経験から1人で転職できる気がしない...
• 独立するためのノウハウがない...

特に上記のような方は、ぜひ下記のリンクからサービス詳細をご覧ください。

Hello MentorのLINEを登録すると、過去ウェビナーの一部をプレゼントしています。また、今後開催するウェビナーや講義にも無料で参加できるチャンスがあります。

👆 無料でプレゼント 👆

コメントアウトとは？

コメントアウトとはコード上に残すメモです。プログラム・ブラウザ上の表示・SEOには、影響を与えません。

制作をしていると、自分が書いたコードでも、しばらく期間を空けて見ると、『なんだっけ、これ？』と思うことはよくあります。そんな時に、コメントとして、コードの説明があれば、理解の手助けになります。

複数人で制作するときにも、他の人にもわかるように、コメントを入れることはスムーズに制作を進める上で大切です。

• 制作の効率化(可読性アップ)
• 保守性アップ

これらの点において、コメントはとても有効です。

HTMLのコメントアウトの書き方

• 1行のコメントアウト
• 複数行のコメントアウト

これら2つのパターンに分けて、コメントアウトの書き方を紹介します。

1行のコメントアウト

<!-- <p>親譲りの無鉄砲で小供の時から損ばかりしている。</p> -->

1行コメントも複数行のコメントも、上のように<!--と-->で囲います。

<!-- 親譲りの無鉄砲で小供の時から損ばかりしている。 -->

このようにタグなしのテキストだけもコメントに出来ます。

複数行のコメントアウト

<!--
    <p>親譲りの無鉄砲で...</p>
    <p>親譲りの無鉄砲で...</p>
-->

<!--
    親譲りの無鉄砲で小供の時から
    損ばかりしている。
-->

複数行のコメントはこのように書きます。コメント内で改行しても問題ありません。

基礎学習後...迷子になっていませんか？

Web制作業界を目指す方の多くが、基礎学習後にやるべきことがわからず、迷子状態になっています。あなたも下記のように感じていませんか？

• 基礎学習後にやるべきことがわからない...
• スクール卒だけど実力不足だと感じている...
• 自分のコードが正しい書き方かわからない...
• 未経験から1人で転職できる気がしない...
• 独立するためのノウハウがない...

そんな悩みを解決するために、模写修行やこのメディアを作ったエンジニア・デザイナー中心に、学習支援サービス 『Hello Mentor』 を運営しています。

転職成功者や副業・フリーランスデビューした方も出ています。

Hello MentorのLINEを登録すると、過去ウェビナーの一部をプレゼントしています。また、今後開催するウェビナーや講義にも無料で参加できるチャンスがあります。

👆 無料でプレゼント 👆

HTMLのコメントアウトは具体的にどんな時に使う？

実際にどんな時にコメントアウトを使うか紹介します。

終了タグをわかりやすくする

<div class="hoge01">
    <div class="hoge02">
        <div class="hoge03">
            <p>親譲りの無鉄砲で...</p>
            ...
        </div><!-- /.hoge03 -->
    </div><!-- /.hoge02 -->
</div><!-- /.hoge01 -->

デザインによっては、上のコードのようにdivが入れ子になります。この時、開始タグに対応する、終了タグが分かりやすいようにコメントを入れると良いです。

---

<!-- service -->
<section class="service">
    ...
</section>
<!-- end service -->

セクションなど大きなブロックごとに、開始と終了がわかりやすいようにしても良いです。

注意書きを残す

<!-- 広告バナーエリア -->
<div class="banner">
    <img src="" alt="">
</div>

例えば、必ず広告のバナーが入るエリアには上のようなコメントを入れておいても良いです。

制作時のメモを残す

<!-- TODO: 現在サンプルテキスト使用。後日差し替え必要。 -->
<p>親譲りの無鉄砲で...</p>

<!-- FIXME: 表示崩れ。修正必要。 -->
<p>親譲りの無鉄砲で...</p>

制作時のメモを残すこともあります。後述しますが、このTODOやFIXMEを使ったコメントは、アノテーションコメントと呼ばれるものです。

一時的にコメントにする

<!-- service -->
<!-- <section class="service">
    ...
</section> -->
<!-- end service -->

一時的にコメントにすることもあります。例えば、そのコンテンツを消すか残すか検討中の場合など、一旦コメントにして、決まり次第対応するようなイメージです。

後で公開するものを予め作っておいてコメントにしているケースもありますが、公開時はなるべく不必要なコメントは残さない方が良いです。

HTMLのコメントアウトの注意点

コメントアウトする際の注意点を紹介します。

入れ子に出来ない

<!-- 🙅‍♂️ 入れ子に出来ない -->

<!-- <div class="hoge">
    <!-- <img src="" alt=""> -->
    <p>親譲りの無鉄砲で...</p>
</div> -->

コメントの中にコメントを入れる(入れ子にする)ことはできません。

ディベロッパーツールから見られてしまう

コメントはディベロッパーツールから見れてしまいます。HTMLのコメントは隠すことが出来ません。

パスワードなど重要な情報はコメントとして残さないことはもちろん、見られて恥ずかしいような内容なども残さないように注意が必要です。

コメントを書きすぎない

**コメントが多いと可読性が失われます。**分かりやすくするためにコメントで、逆に分かりにくくなってしまったら本末転倒です。

また、あまり気にしなくて良いことではありますが、コメントが多いと若干ファイルサイズは大きくなります。

サイト公開時に不必要なコメントは消す

下記はコメントを使う4つの場面です。

• 終了タグをわかりやすくする
• 注意書きを残す
• 制作時のメモを残す
• 一時的にコメントにする

このうち、後半2つはサイト公開時には消しておいた方が良いです。

アノテーションコメントを使うと便利！

アノテーションコメントを使うと、コメントにメタデータを付加できます。

<!-- TODO: 現在サンプルテキスト使用。後日差し替え必要。 -->
<p>親譲りの無鉄砲で...</p>

<!-- FIXME: 表示崩れ。修正必要。 -->
<p>親譲りの無鉄砲で...</p>

TODOやFIXMEがメタデータです。要はコメントを役割ごとに分類(カテゴリ分け)しているようなものです。

Visual Studio Codeではプラグインを入れることで、アノテーションコメントを一覧で見ることができるのでとても便利です。

TODOやFIXME以外にもいくつかあるので、参考サイトを載せておきます。

プログラミングではよく使いますが、コーディングで使っている方は、もしかしたら少ないかもしれません。個人的にはTODOをたまに使う程度です。

Visual Studio CodeのブラグインTodo Treeが便利！

Visual Studio CodeのブラグインTodo Treeを入れると、上のようにTODOやFIXMEをハイライトしてくれます。

また、左のメニューから一覧で見ることもできるので、対応漏れも防げます。

HTML以外の言語でも使えます。デフォルトでは、TODOとFIXMEしか対応していないので、カスタマイズする際は設定ファイルを修正する必要があります。興味がある方は調べてみてください。

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

コメントにしたい箇所をドラックして、上のショートカットキーを押すことでコメントアウト出来ます。

よく使うので絶対に覚えておきたいショートカットキーの1つです。

Emmetを使って効率よくコメントを入れる方法

Emmetとは、HTML・CSSを書く時に使える、入力補完機能です。Visual Studio Codeでは標準で備わっています。

例えば、ul>li*3>aと入力して、tabキーを押してみてください。下のように表示されたはずです。

<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

他にもたくさんできることがあるので、詳しくはCheat Sheetをご覧ください。

---

Emmetを使って効率的にコメントを入れることが出来ます。

section.hoge|cと入力して、tabキーを押してみてください。下のようにコメントとセットで表示されるはずです。

<section class="hoge"></section>
<!-- /.hoge -->

カスタマイズすることで、Emmetを使った時には必ずコメントが入るようにもできます。ただし必ず入るとコメントが多すぎて見にくくなる可能性もあるので注意してください。

また、cと入力して、tabキーを押すと、下のように空のコメントができます。

<!--  -->

(おまけ) コカ・コーラの遊び心があるコメント

最後におまけです。コカ・コーラはこんな遊び心があるコメントを残しています。

基礎学習後...迷子になっていませんか？