コードカキタイ
コーディング
HTML
HTMLのコメントアウトの書き方は？具体的な方法や注意すべき3つのポイントを解説

HTML

最終更新日: 2024.01.11 (公開: 2024.01.11)

HTMLのコメントアウトの書き方は？具体的な方法や注意すべき3つのポイントを解説

本記事では、プログラミングでメモを残しておける便利な機能であるコメントを表示させないためのコメントアウトの書き方や、コメントアウトの具体的な方法や注意点を解説します。

プログラミングにおけるコメントは、メモを残せる大切な要素です。コメントはソースコードにおいて実行しない部分であるため、Webブラウザに表示させるための言語である「HTML」にてコメントをする際はコメントアウトさせるかたちで「コードではない」記述の仕方が必要です。「HTML」においてコメントアウトができていないと、コメントがWebブラウザに表示されてしまいます。本記事では、「HTML」のコメントアウトの書き方や具体的な方法、注意点を解説します。

HTMLのコメントアウトとは？
HTMLのコメントアウトを活用する3つのメリット
HTMLのコメントアウトの書き方は？
HTMLのコメントアウトを書くときの4つの注意点
HTMLのコメントアウトを削除する方法
- コメントタグを削除する方法
- Dreamweaverで一括削除する方法
HTMLのコメントアウトを使い、可読性の高いコードを書こう

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

コメントとは、プログラミングにおいてメモを残せる便利な要素です。プログラムには影響が出ない方法で、ソースコードの中にメモや解説を記述してタグや構成をわかりやすくしたり、注意事項や連絡事項を残しておいたりできます。

「HTML」のコメントアウトとは、プログラムでWebブラウザ常に表示させたくない部分をコメント内に記述して無効化させることです。

HTMLのコメントアウトを活用する3つのメリット

コメントアウトした「HTML」の記述は、ブラウザには表示されません。そのため、Webブラウザに表示させなければ「ソースコードを書くのに無駄では？」と、感じる方もいます。しかしコメントアウトには、重要な役割があるのです。

HTMLのコメントアウトを活用すると、主に以下のようなメリットが得られます。

制作物の保守性を向上させる
コードの可読性を向上させる
特定の要素を非表示にできる

それぞれ詳しく解説します。

制作物の保守性を向上させる

プログラミングを複数人でおこなう場合、どのエンジニアがどのプログラムを編集・更新したのかわからなくなることがあります。さらに、プログラムの役割や更新日時が把握できないこともあるため、場合によっては削除・変更されてしまうリスクもあるでしょう。

しかし、プログラムにコメントとして「プログラムの役割」「記述した人物」「更新日時」などの情報を記述しておけば、誰でも瞬時に把握できます。その結果、ソースコードの更新や管理がしやすくなり、チーム作業でも制作物の保守性を向上できるのです。

コードの可読性を向上させる

「HTML」を使用してWebページを制作する場合、「ネスト構造」という複雑に何段ものコードが重なり合う状態になることがあります。

複雑な構造のソースコードは、修正をおこなうための作業やコードを探す作業が困難になりやすく、編集や更新作業に必要以上の時間がかかる可能性があります。さらに、担当者以外のメンバーが修正をおこなう場合、自分が担当していないソースコードは一般的に読みにくく、修正したいコードにたどり着くことが難しくなるのです。

そこで、誰が見ても「どのような処理をしているのか」がわかるようにコメントを使うことにより、複雑なコードでも区切りや注意点を記述しておけます。また、担当者ではないメンバーがソースコードを見たときにも、編集・更新がやりやすくなるでしょう。コードの可読性を向上させるために、コメントは重要な役割をはたします。

特定の要素を非表示にできる

コメントには、特定の要素をWebブラウザ上で非表示にできます。コメントアウトは、記述にあたって文字数や行数・コメントの記述方法にルールや制限がないため、特定の要素をすべてコメントアウトすれば、その要素を非表示にできるのです。

再度表示させたい場合は、要素のコメントアウトを外すだけで再表示できるためさまざまな場面で活用できます。たとえば、まだ公開できない要素を事前に記述しておきたい場合にコメントアウトを活用すれば、Webブラウザ上には表示させずに残せるため、作業効率の向上につながります。

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

HTMLのコメントアウトの書き方は、主に4つです。

1行コメントを書く方法
複数行のコメントを書く方法
ショートカットキーを使ってコメントアウトする方法
コメントの中にdivタグなどHTML要素を加えられる

プログラミングの作業効率やソースコードの保守性・可読性を向上させるためにも、積極的に「HTML」のコメントアウトを活用していくことがおすすめです。

ここからは、「HTML」のコメントアウトの書き方をそれぞれ解説します。

1行コメントを書く方法

「HTML」のコメントアウトで1行コメントを書く方法は、「<!−−」と「−−>」で囲みます。

<!−− コメントアウト −−>

実際にソースコードに1行のコメントアウトを追加すると、以下のようになります。


    <head>
      <title>タイトル</title>
    </head>
    <body>
      <!−− コメントアウト −−>
      <p>キャッチコピー</p>
    </body>
  </html>

コメントアウトを記載すると、Webブラウザではコメントアウト下の「キャッチコピー」しか表示されません。

実際に、上記のコードを参考に記述してみてください。

複数行のコメントを書く方法

「HTML」のコメントアウトは、複数行のコメントを書くことも可能です。複数行のコメントを書く場合でも、1行コメントを書く場合と同じく「<!−−」と「−−>」で囲みます。


    <!−− 
    コメントアウト 
    コメントアウト
    −−>

実際にソースコードに複数行のコメントアウトを追加すると、以下のようになります。


    <head>
      <title>タイトル</title>
    </head>
    <body>
        <!−− 
        コメントアウト 
        コメントアウト
        −−>
        <p>キャッチコピー</p>
    </body>
  </html>

また複数行コメントも1行コメント同様に「<!−−」と「−−>」で囲っているため、Webブラウザに表示されません。そのため、メモすることが多い場合でも問題なく記述できます。

ショートカットキーを使ってコメントアウトする方法

頻繁にコメントアウトする場合は、ショートカットキーを使って記述することで、作業効率の向上ができます。

1行コメントをする場合のショートカットキーは、以下の通りです。

Windows　「Ctrl」＋「/」
Mac　　　「command」＋「/」

複数行コメントをする場合のショートカットキーは、以下の通りです。

Windows　「Ctrl」＋「Shift」＋「/」
Mac　　　「command」＋「/」もしくは「command」＋「option」＋「/」

「HTML」のコメントアウトを頻繁に使う場合は、ショートカットキーの使用をおすすめします。

コメントの中にdivタグなどHTML要素を加えられる

「HTML」のコメントアウトでは、コメントの中にメモだけではなくdivタグなどの「HTML」要素を加えられます。


  <html>
    <head>
      <title>タイトル</title>
    </head>
    <body>
        <!−− ここはキャッチコピーを書く 。
            <img src=" challenge.gif" alt="タイトルについて">から紹介する。−−>
        <p>キャッチコピー</p>
    </body>
  </html>

このように、コメントに加えて「HTML」要素を追加して記述しても「<!−−」と「−−>」で囲っているため、問題なくコメントアウトできます。記述した「HTML」要素もコメントと同様に、Webブラウザ常には表示されません。

HTMLのコメントアウトを書くときの4つの注意点

「HTML」のコメントアウトを活用するうえで、さまざまなメリットを得られますが注意点もあります。とくに以下の4つのポイントはくれぐれも注意して、「HTML」のコメントアウトを使用してください。

ユーザーに見られてはいけない情報はコメントアウトしない
コメントに「-」を使わないようにする
コメントの中にコメントを入れない
WordPressのテキストエディタで使用する際の注意点

ここからは、「HTML」のコメントアウトを書くときの4つの注意点を解説します。

ユーザーに見られてはいけない情報はコメントアウトしない

コメントは、さまざまなメモを残せるうえに、Webブラウザ上には表示されないため非常に便利です。ただし、ユーザーに見られてはいけない情報は、コメントアウトしてはいけません。

コメントアウトは、Webブラウザ上では表示されないだけでソースコードには残っているからです。ソースコードに関しては誰でもWebサイトから参照できるため、機密事項やその他重要事項をコメントアウトで残してしまうと、情報漏洩につながります。

コメントアウトを使用する場合は、機密事項やユーザーに見られてはいけない情報をコメントアウトしないように注意してください。

コメントに「-」を使わないようにする

コメントを残す際に、「-」を使わないようにしましょう。コメントアウトは「<!−−」と「−−>」で囲っているため、「-」を連続して使用するとブラウザが勝手にコメント終了と認識してしまいます。その結果、表示させないはずのコメントがWebブラウザ上に表示されてしまい、エラーが起こり得るのです。

複数行のコメントや長文コメントを残す場合に区切りをつけたい場合は、「-」ではなく「=」を使うといった対策をおすすめします。

コメントの中にコメントを入れない

コメントの中にコメントを入れると、Webブラウザ上に表示されてしまう可能性があるため注意が必要です。コメントは1行のみに限らず、複数行のコメントを記述したり「HTML」要素を加えたりできますが、コメントの中にコメントを入れることはできません。

コメントの中にコメントを入れてしまうと、以下のように「<!−−」と「−−>」が連続することになります。

<!−− コメントアウト <!−− コメントアウト2 −−> コメントアウト3−−>

そして、コメントの中にあるコメントの「−−>」が優先して認識され、それ以降のコメントがWebブラウザ上に表示されてしまうのです。コメントの中にコメントは入れないよう、注意してください。

WordPressのテキストエディタで使用する際の注意点

WordPressのテキストエディタで「HTML」のコメントアウトを使用すると、正常に認識されないことがあります。とくにWordPressのテーマによっては、デフォルトの設定で「-」が全角の「−」や「？」に自動で変換されてしまい、「HTML」のコメントとして認識されなくなってしまうのです。

これらの原因は事前に意識しておかなければ、なかなか気づくことが難しいため、WordPressのテキストエディタで「HTML」のコメントアウトを使用する際は、十分に注意しましょう。

以下のように「HTML」のcodeタグで囲むと、自動変換されずにコメントアウトできます。


    <code>
      <!−− コメントアウト −−>
    </code>

これからWordPressを使う方は、ぜひ参考にしてください。

HTMLのコメントアウトを削除する方法

「HTML」のコメントアウトの削除は、主に2つの方法でおこなえます。

コメントタグを削除する方法
Dreamweaverで一括削除する方法

1度記述した「HTML」のコメントアウトが不要になった場合は、ソースコードができるだけ見やすく誤解が生まれないように、削除しておくことが大切です。

ここでは、「HTML」のコメントアウトを削除する方法を解説します。

コメントタグを削除する方法

コメントタグを削除する手順は、以下の通りです。

コメントタグのあるWebブラウザを開く
「ツール」から「HTML最適化」をクリックする
「HTMLの最適化」ダイアログの「コメントの削除」を選択し、設定オプション内「その他のすべてのHTMLコメント」にチェックを入れる
「OK」と表示されたボタンをクリックする

ただし、複数個のコメントタグを削除したい場合は、以下の「Dreamweaverで一括削除する方法」を試してみてください。

Dreamweaverで一括削除する方法

Dreamweaverでコメントタグを一括削除する手順は、以下の通りです。

HTMLクリーンアップを使用する
置換機能を使用する

「HTML」クリーンアップは、「コマンド」「HTMLクリーンアップ」で削除したい項目を実行することにより、すべてのコメントタグを一括削除できる手法です。置換機能は一括削除に効果的な方法ですが、「HTML」のクリーンアップとは異なり、削除したら元に戻せなくなってしまうため、バックアップを取ったうえで実行することをおすすめします。

コメントタグは、そのまま削除するだけで解除が可能です。ただし、コメントを大量に記述している場合やソースコードが膨大で複雑な構造になっている場合などは、一つひとつ削除していくのに手間がかかります。そのため上記の方法を使って一括削除すれば効果的です。

HTMLのコメントアウトを使い、可読性の高いコードを書こう

「HTML」のコメントアウトは、プログラムをおこなう場合に非常に便利な要素です。複数人でプログラムをおこなう場合、コメントアウトを活用することで各エンジニアが「どのソースコードを記述したのか」「ソースコードの役割」「注意事項や区切り」などを、簡単に確認できます。つまり、コメントアウトを活用したソースコードは、可読性が高いということです。

今後、効率的かつ可読性の高い「HTML」のコードを書きたい場合は、本記事を参考に「HTML」のコメントアウトを活用してみてください。