HTMLコメントアウトの書き方は？3つの注意点や具体例を解説！
HTMLコメントアウトとは？
HTMLコメントアウトとは、プラウザには表示されないようにして、ソースコードの中にテキストを書き込むことができる機能です。ソースコードの中にメモ書きや注意書きを書いていくための機能と考えるとわかりやすいでしょう。例えば、複数の人でHTMLを管理したり、更新する場合、ヘッダ部分にHTMLコメントアウトを使って更新者や更新日の情報を書き込んでおいたり、ページを記述するソースコードの中にページ構成に関する情報を書き込んでおいて、初めて作業をする人でもすぐにページ構成を理解できるようにしておくことができます。
ただし、HTMLコメントアウトしておくと、ブラウザには表示されませんが、ブラウザでソースコードを表示すると、内容は簡単に確認できます。重要な情報や内部に限定しておくべき情報などは、書き込まないようにします。
コメントアウトをするメリット
コメントアウトは、ブラウザ上には表示されません。なのに、なぜ記載する必要があるのでしょうか。コメントアウトするメリットを解説していきます。
タグ構成がわかりやすくなる
コメントアウトすると、タグ構成がわかりやすくなります。たとえば、「ここにページタイトル」「ここからページのメイン情報」などと入れておくと、変更や修正、メンテナンス時に探しやすくなり、他の人が修正するときもわかりやすくなります。
複数人での管理がしやすい
Webサイトの制作や運用は、複数人のチームを組んで行うケースがあります。情報を共有したり、更新したり、管理をするときに、書式や伝達事項などをコメントアウトしておくと、効率よく作業が行えます。
更新がやりやすい
コメントアウトは、複数行やタグ入りの文もできるため、近々更新する部分をコメントアウトで作っておくことで、更新作業を前倒しで行えます。また、一定期間後に削除する予定部分も、コメントアウトしておくと更新がスムーズです。
コードの覚書に使える
コードの覚書といて使えるのもメリットです。たとえば、後で使うことになるかもしれない部分や、別の候補のコードがある場合、参考にしたサイトのURLなどをコメントアウトで残しておくと、更新時やエラー発生時、修正箇所を探すときなどに便利です。
特定のブロックを非表示にする
HTMLコメントアウトは、１行だけコメントアウトすることはもちろん、複数行をコメントアウトすることができます。つまり、HTMLコメントアウトを使えば、特定のブロックを非表示にすることができます。
例えば、公開予定日時が決まっている内容をあらかじめ作成しておいて、コメントアウトしておき、公開予定日時にコメントアウトを外せば、すぐに公開することができます。逆に一時的に非表示にしたい内容などは、削除するのではなく、コメントアウトすれば、すぐにブラウザの表示から外すことができます。
HTMLコメントアウトをうまく活用すれば、ソースコードの運用を効率的に行うことが可能になります。
HTMLでのコメントアウト方法
ここでは、HTMLでのコメントアウト方法を解説します。比較的簡単にできるので、やってみましょう。
HTMLでソースコードをコメントアウトする方法は、非表示にしたい部分の最初に「<!–」を入力し、最後に「–>」と入れるだけです。「<!–」と「–>」に挟まれた文字は、ブラウザ上には表示されません。
コメントアウト部分が1行の場合は、以下のようになります。
<!– コメントアウト部分 –>
複数行のときは、以下のとおりです。
<!– コメントアウト部分 コメントアウト部分 コメントアウト部分 –>
HTMLでのコメントアウト記載例
ここでは、HTMLソースコードでのコメントアウト記載例をご紹介します。
例1：1行をコメントする
HTMLコメントアウトを使う場合は、ブラウザに表示させたくない内容を開始タグ「<!–」と終了タグ「–>」で囲みます。1行だけをコメントアウトする場合（下記の例では、「サイトのキャッチコピーを入れる」というテキストをコメントアウトして、ブラウザに表示させない場合）は、以下のようになります。
<html> <head> <title>サイトタイトル</title> </head> <body> <!-- サイトのキャッチコピーを入れる --> <p>IT転職に役立つ情報が満載！エンジニアのための派遣仕事情報サイト</p> </body> </html>
例2：複数行をコメントする
ブラウザに表示させたくない内容が複数行にわたっている場合も、HTMLコメントアウトを使うことができます。
<html> <head> <title>サイトタイトル</title> </head> <body> <!-- サイトのキャッチコピーを入れる サイトの詳細情報は別ページに説明文を入れる--> <p>IT転職に役立つ情報が満載！エンジニアのための派遣仕事情報サイト</p> </body> </html> ソースコードの記述方法には、それぞれプロジェクトごとのルールなどがありますが、例えば、可読性を優先して以下のように記述してもよいでしょう。 <!-- サイトのキャッチコピーを入れる サイトの詳細情報は別ページに説明文を入れる -->
例3：タグ入りのコメントをする
テキストだけでなく、タグを含めて、コメントアウトすることもできます。例えば、以下の例では <div class=”example”> から、</div> までがコメントアウトされます。
<p>見出し</p> <!-- <div class="example"> <p>見出し</p> <p>これはダミーの文章です。このタグを書き換えること</p> </div> -->
HTMLコメントアウトのショートカット
HTMLコメントアウトは、「<!–」と「–>」をタイピングする以外に、エディタの設定などにもよりますが、多くのエディタでは以下のショートカットキーを使って、簡単に記述できます。
Windowsの場合：Ctrl（コントロールキー）＋ /（スラッシュキー）
Macの場合：⌘（コマンドキー）＋/（スラッシュキー）
ショートカットキーを使うと、簡単にコメントアウトできますが、カーソルが置かれている行全体がコメントアウトされます。行全体ではなく、行の一部だけをコメントアウトする場合はショートカットではなく、直接タイプします。
HTMLのコメントアウトの注意
コメントアウトをする際には、注意したいことがいくつかあります。見ていきましょう。
注意1：重要な情報は記載しない
ソースコードは誰でも簡単に見ることができます。ですので、コメントアウトしてブラウザ上に表示されていないとしても、ソースコードを見ると、コメントアウトした部分は読めてしまうのです。コメントアウトした部分に、社外秘や読まれてはいけない情報などの重要な情報を記載しないように注意しましょう。
注意2：コメントの入れ子はできない
コメントの中にコメントを入れる「入れ子状態」にすることはできません。たとえば、以下のようなコードだと、
<!-- これは文章です。<!-- テキスト-->を記載 -->
表示されるのは
を記載-->
となってしまい、最初のコメント終了タグ「–>」までしかコメントアウトできません。最初のコメント終了タグ「–>」以降のコメントアウト部分がブラウザに表示されてしまいますので、気をつけてください。
注意3：-(ハイフン)は連続使用しない
ブラウザによっては、「-(ハイフン)」を連続使用するとコメントの終了と解釈することがあります。ハイフンは連続使用しないようにしてください。
HTMLコメントアウトの削除方法
HTMLコメントアウトの削除はどうすればよいのでしょうか。1つの行のコメントアウトの削除方法、一括削除する方法を説明します。
方法1：コメントタグを削除し、コメントアウトを解除
正規表現で、1つの行にあるコメントを削除するには、<!–.*–>で検索し、空白で置換えると、コメントタグを削除し、コメントアウトを解除できます。
方法2：Dreamweaverで一括削除する
コメントタグを一括削除する場合には、「Adobe Dreamweaver（アドビ ドリームウェーバー）」を活用するとよいでしょう。
コメントタグを一括削除する方法は2つあり、「HTMLのクリーンアップを使用する方法」「置換機能を使用する方法」があります。
●HTMLのクリーンアップを使用する方法の手順
HTMLのクリーンアップを使用する方法で削除できる範囲は1ページのみということを理解しておきましょう。
コマンド
↓
HTMLのクリーンアップ
↓
削除したい項目を実行
●置換機能を使用する方法の手順
置換機能を使用する方法は、サイト全体を一度に変換することができるのがメリットです。ただし、元に戻すことができないため、バックアップを取っておくことをおすすめします。
1 DreamWeaverで検索置換ウィンドウを開き、検索欄に
<!–\s(.+)\s–>
を入力して、コメントタグを検索します。
2 置換後の文字列を空白に設定し、「すべて置換」をクリックして実行します。
ポートフォリオでもわかりやすいようにコメントアウトを記載
ポートフォリオにおいても、コメントアウトが記載されていると、丁寧さやマメさといった印象を企業側にもたらす効果があります。ポイントは、わかりやすいコメントアウトを記載しておくことです。結果、良い評価につながる可能性があるでしょう。
コメントアウトを上手に活用しよう
コメントアウトは、自分への覚書やメモ、チームへの申し送りや注意事項を記載できる、複数のコードを保管できるなど、さまざまな使い方ができる便利な機能です。コメントアウトを上手に活用すると、業務効率もアップしますよ。
求人詳細ページへのリンク
- Java／通信企業向け業務プロセス開発対応
- JavaEE／リース会社向け動画解析サービスのシステム開発
- PHP／証券会社向け営業支援ツール開発、維持管理
- Java／大手企業向けJavaシステム開発
- 集金代行システムの移行
仕事カタログページへのリンク
カテゴリ
おすすめコラム
HTMLコメントアウトの書き方は？3つの注意点や具体例を解説！のページです。ITエンジニア・移動体通信エンジニア（技術者）の派遣求人ならブレーンゲート。株式会社ブレーンネットはシステムエンジニアやネットワークエンジニア、プログラマーの派遣・転職をサポートいたします。