サイトアイコン ITC Media

【単純明快】HTMLのコメントアウト｜そのやり方や注意点を徹底解説

ITC運営

（最終更新月：2023年6月）

✔以下の疑問をお持ちの方へ向けた記事です

「HTMLのコメントアウトとは何で、どのように使うのだろうか？」
「HTMLのコメントアウトの書き方を学びたい」
「HTMLのコメントアウトの具体的な使用例を見て理解したい」

✔この記事を読むことで得られる知識

この記事では、HTMLのコメントアウトの基本的な使い方から、その応用法まで、具体例付きで詳しく説明します。

ぜひ最後までお読みください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック
created by Rinker

HTMLとは何か

こちらでは、「HTML」についてお伝えしていきます。

HTMLの基本的な概要とその構成について説明します。

HTMLの概要

HTMLは、Hypertext Markup Languageの略で、ウェブページを作成するためのマークアップ言語のひとつです。

HTMLでは、文章の構造を表現するための様々なタグを使用します。

例えば、「p」タグはパラグラフ（段落）を表し、「h1」から「h6」までのタグは見出しを表します。

HTMLの基本的な構成

HTMLの文書は、「<html>」タグで始まり、「</html>」タグで終わります。

htmlタグ内のタグは、大きく以下の2つです。

コメントとは何か

次に、「コメント」について詳しくお伝えします。

コード内のコメントの役割やその重要性について考えることで、コメントの適切な使い方について理解を深められるでしょう。

コード内のコメントの役割

コメントは、プログラムのソースコード内に直接記述される補足説明です。

ユーザー側に表示するのではなく、プログラマーやチーム内で、プログラムの動作やコードが何をおこなっているのかを説明します。

コメントはコンピュータによっては無視されるので、人へ向けたメッセージとして使えるのです。

コメントの重要性とベストプラクティス

コメントがなぜ重要かという理由は以下の通り。

しかし、コメントは適切に使用することが重要であり、無駄なコメントは避けるべきです。

良いコメントは明確かつ簡潔で、そのコード部分が何を行っているのか、なぜそのように行っているのかを説明します。

HTMLでのコメントアウトの方法

HTMLにおける「コメントアウト」の基本事項をお伝えします。

最低限こちらの内容を覚えておけば、使えるようになるでしょう。

HTMLにおけるコメントアウトの基本的な方法

HTMLでは、コメントアウトを行うために「<!– –>」のタグを使用します。

これらのタグの間に記述された内容は、ブラウザに表示されず、コード内のメモや一時的にコードを無効化するために使用されます。

<!-- This is a comment -->

このように書けばブラウザには表示されず、コメントとして開発者のみ確認できるのです。

HTMLでのショートカットキーの利用

一部のテキストエディタやIDE（統合開発環境）では、ショートカットキーを使用して簡単にコメントアウトが可能です。

例えば、Visual Studio Codeでは、選択したコードをコメントアウトするには以下のキーを押します。

コメントアウトの具体的な使用例

「コメントアウト」の具体的な使用例について紹介します。

単行のコメントアウト、複数行のコメントアウト、特定のツールを利用した操作の例を見ていきましょう。

単行のコメントアウトの例

1行だけをコメントアウトする場合、その行の始めと終わりにそれぞれ「<!– –>」をつけます。

例えば、以下のようになります。

<!-- <p>This paragraph will not be displayed.</p> -->

複数行のコメントアウトの例

複数行をコメントアウトする場合も、コメントアウトする範囲の始めと終わりにそれぞれ「<!– –>」をつけます。

例えば、以下のようになります。

<!--
<p>This paragraph will not be displayed.</p>
<p>This one won't be either.</p>
-->

特定のツールを利用した操作の例

特定のツール、例えばテキストエディタやIDEを利用すると、複数行のコメントアウトも一度に行えます。

選択した行全てをショートカットキーで一度にコメントアウトすることが可能です。

コメントアウトの活用法

「コメントアウト」をどのように活用するか、具体的な使用例と共に説明します。

コメントアウトを使用してコードを一時的に無効化したり、説明やメモを書いたりする方法、さらにポートフォリオでの活用法についても触れていきます。

コメントアウトを使用してコードを一時的に無効化する

コメントアウトは、コードを一時的に無効化するときに使えます。

そのコードをコメントアウトすることで実現できます。

必要がなくなったら、タグを外すだけで元の状態に戻せるのも、コメントアウトの特徴です。

コメントアウトを使用してコードの説明やメモを書く

コードを書くとき、そのコードが何をするのか、なぜそのようなコードになっているのかを説明するためにコメントアウトを使用することがあります。

このコメントは、開発期間だけでなく、プログラムの修正をおこなうときにとても便利です。

自分で書いたものでも、あとあとすべて覚えているとは限りません。

ポートフォリオでのコメントアウトの利用

プログラミングのポートフォリオを作成するときにも、コメントアウトは使えます。

なぜならコメントアウトを用いれば、コードに説明を加えられるからです。

自分が何を考え、どのように実装したのかを説明することで、ほかの人があなたのコードを理解しやすくなるでしょう。

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

HTMLでの「コメントアウト」を行う際には、いくつかの注意点があります。

それらを理解し、適切なコメントアウトを心掛けましょう。

HTMLでのコメントアウト時の一般的なルールと注意点

HTMLのコメントアウトは「<!– –>」で行いますが、コメントの中に再度これらの記号を入れることはできません。

また、大量のコメントアウトはコードを読む際に混乱を招く可能性があるので、必要な部分だけをコメントアウトしましょう。

重要な情報を含めないことの重要性

コメントはコード内で見ることができますが、ブラウザの開発者ツールを使えば誰でも見えてしまいます。

以下のような非公開にすべき情報を含むことは避けましょう。

このような情報が第三者に見られてしまうと、セキュリティ上の問題を引き起こす可能性があります。

入れ子（ネスト）についての注意点

HTMLでは、コメント内に別のコメント（ネストされたコメント）を入れることはできません。

ネストされたコメントを作成しようとすると、外側のコメントが終了したと見なされてしまい、意図しない結果になる可能性があります。

ハイフンの使用に関する注意点

コメント内部にハイフン二つを含めると予期せぬ問題を引き起こす可能性があります。

なぜならHTMLのコメントは、ハイフン二つ「–」で開始され終了するからです。

コメント内部でハイフンを使用する場合は、ひとつだけにするか、またはスペースを挟むなどの工夫を加えましょう。

コメントアウトの削除方法

「コメントアウト」の削除方法について説明します。

HTMLでのコメントアウトの削除方法と、Dreamweaverを使用した一括削除の方法について見ていきましょう。

HTMLでのコメントアウトの削除方法

HTMLでコメントアウトを削除するには、単純にコメントアウトのタグ「<!– –>」を取り除くだけです。

これにより、コメントアウトしていたコードが再び実行されるようになります。

Dreamweaverを使用した一括削除の方法

Adobe Dreamweaverなどのエディタを使用すると、一括でコメントアウトを削除することも可能です。

手順は以下のとおり。

  1. 「Find and Replace」機能を使う
  2. 「Find」にコメントアウトの開始タグ「<!–」を指定する
  3. 「Replace」を空欄にするし、実行する

一括でコメントアウトを削除可能です。

まとめ：HTMLコメントアウトの理解と活用

この記事では、以下のことを学びました。

ここで学んだことを活用して、自分自身のコードを書いてみましょう。

また、他の開発者が書いたコードを読み、そのコメントアウトがどのように使用されているかを見てみると、新たな発見があるかもしれません。

さらなる学習のためには、実際に手を動かし、自身で試すことが重要です。

モバイルバージョンを終了