HTMLコメントアウトの書き方や注意点、削除方法まで完全ガイド【初心者向け】
コメントアウトとは？
コメントアウトは、ソースコードの中のメモ書き機能のようなものです。コメント部分は特殊な記号を用いることで、ブラウザ上では表示されません。コメントアウトはHTMLのほか、Java、CSS、Cなどのプログラミング言語でも使われています。
コメントアウトをするメリット
コメントアウトは、ブラウザ上には表示されません。なのに、なぜ記載する必要があるのでしょうか。コメントアウトするメリットを解説していきます。
タグ構成がわかりやすくなる
コメントアウトすると、タグ構成がわかりやすくなります。たとえば、「ここにページタイトル」「ここからページのメイン情報」などと入れておくと、変更や修正、メンテナンス時に探しやすくなり、他の人が修正するときもわかりやすくなります。
複数人での管理がしやすい
Webサイトの制作や運用は、複数人のチームを組んで行うケースがあります。情報を共有したり、更新したり、管理をするときに、書式や伝達事項などをコメントアウトしておくと、効率よく作業が行えます。
更新がやりやすい
コメントアウトは、複数行やタグ入りの文もできるため、近々更新する部分をコメントアウトで作っておくことで、更新作業を前倒しで行えます。また、一定期間後に削除する予定部分も、コメントアウトしておくと更新がスムーズです。
コードの覚書に使える
コードの覚書といて使えるのもメリットです。たとえば、後で使うことになるかもしれない部分や、別の候補のコードがある場合、参考にしたサイトのURLなどをコメントアウトで残しておくと、更新時やエラー発生時、修正箇所を探すときなどに便利です。
HTMLでのコメントアウト方法
ここでは、HTMLでのコメントアウト方法を解説します。比較的簡単にできるので、やってみましょう。
HTMLでソースコードをコメントアウトする方法は、非表示にしたい部分の最初に「<!–」を入力し、最後に「–>」と入れるだけです。「<!–」と「–>」に挟まれた文字は、ブラウザ上には表示されません。
コメントアウト部分が1行の場合は、以下のようになります。
<!– コメントアウト部分 –>
複数行のときは、以下のとおりです。
<!– コメントアウト部分 コメントアウト部分 コメントアウト部分 –>
HTMLでのコメントアウト記載例
ここでは、HTMLソースコードでのコメントアウト記載例をご紹介します。
例1：1行をコメントする
1行をコメントアウトする場合は、以下のとおりです。
<html> <head> <title>サイトタイトル</title> </head> <body> <!-- サイトのキャッチコピーを入れる --> <p>IT転職に役立つ情報が満載！エンジニアのための派遣仕事情報サイト</p> </body> </html>
例2：複数行をコメントする
複数行をコメントアウトする場合は、次のようになります。
<html> <head> <title>サイトタイトル</title> </head> <body> <!-- サイトのキャッチコピーを入れる サイトの詳細情報は別ページに説明文を入れる--> <p>IT転職に役立つ情報が満載！エンジニアのための派遣仕事情報サイト</p> </body> </html>
例3：タグ入りのコメントをする
コメントの中にタグを入れることもできます。
<p>見出し</p> <!-- <div class="example"> <p>見出し</p> <p>これはダミーの文章です。このタグを書き換えること</p> </div> -->
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コメントアウトの書き方や注意点、削除方法まで完全ガイド【初心者向け】のページです。ITエンジニア・移動体通信エンジニア（技術者）の派遣求人ならブレーンゲート。株式会社ブレーンネットはシステムエンジニアやネットワークエンジニア、プログラマーの派遣・転職をサポートいたします。