HTMLでのコメントアウトの書き方：複数行コメントの効果的な活用法

HTMLコーディングにおいて、コメントアウトは重要なテクニックの一つです。

コメントアウトを活用することで、コードの一部を一時的に無効化したり、メモや説明を追加したりすることができます。

すーさん

本記事では、特に複数行のコメントアウトに焦点を当て、その使い方と効果的な活用法について詳しく解説します。

CSSをHTMLに読み込む方法に関しては【初心者用】CSSをHTMLに読み込む方法は3つ。それぞれわかりやすく解説します。で詳しく解説していますので、ぜひチェックしてみてください。

あわせて読みたい

【初心者用】CSSをHTMLに読み込む方法は3つ！それぞれについて徹底解説！

HTMLのコメントアウトとは

まず最初に、HTMLのコメントアウトについて。コメントアウトとは、ブラウザが無視する特殊な記述法であり、コードの一部を非表示にすることができます。コメントアウトされた部分は、ブラウザに表示されず、コードの解析や実行の対象外となります。

HTMLのコメントアウトは、コード内の特定の部分を非表示にするための記述方法です。<!--で始まり、-->で終わる形式で記述します。コメントアウトは、コードの意図や説明を追加したり、一時的にコードの一部を無効化したりするために使用されます。コメントアウトしたコードを元に戻すには、コメントアウトタグを削除します。

HTMLのコメントアウトを使う理由

HTMLのコメントアウトはただ単にコメントのみに使うだけではなく、いくつかの使用用途があります。以下がその代表例です。

コードの一時的な無効化

コメントアウトを使用することで、コードの一部を一時的に無効化することができます。開発中に特定のコードが問題を引き起こしている場合や、テスト中に一部のコードを無効化したい場合に有用です。コメントアウトされた部分は、ブラウザがそれを無視するため、実行されなくなります。

コードのデバッグ

コメントアウトを活用して、デバッグの目的でコードを無効化したり、一時的に修正したりすることができます。特定のコードブロックや条件分岐をコメントアウトすることで、その部分の動作をテストしたり、問題の特定や修正に役立てることができます。

ドキュメンテーションと説明

コメントアウトを使用して、コード内にメモや説明を追加することができます。コードの目的や機能を説明したり、他の開発者や自身が後で理解しやすくするためにコメントを追加することができます。コメントアウトは、コードの意図や背景を明確にするのに役立ちます。

コードのバージョン管理

コメントアウトを活用して、コードのバージョン管理を補助することもできます。特定のバージョンのコードをコメントアウトすることで、異なるバージョン間の比較や変更点の確認を可視化ことができます。

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

コメントの適切な長さ

コメントアウトに使用するコメントの長さは、適切な範囲に保つ必要があります。コメントが長すぎる場合、コードの可読性が低下し、他の開発者や自身がコードを理解しづらくなってしまう場合があります。短く簡潔なコメントを使用し、必要な情報を明確に伝えるようにしましょう。

不要なコメントの削除

コメントアウトしたコードは、ブラウザが無視するため実行されませんが、コードファイル自体には残ります。開発が進むにつれ、不要なコメントアウトが蓄積されることがあります。本番環境に不要なコメントが残っていると、ファイルサイズが増大しパフォーマンスに悪影響を及ぼす可能性があります。定期的にコメントアウトされたコードの見直しを行い、不要なコメントを削除することが重要です。

コメントアウトの適切な使用時期

コメントアウトは一時的なコードの無効化やデバッグ目的で使用されるのが理想的です。特に本番環境においては、不要なコメントアウトが残っているとコードの可読性を損なうだけでなく、不要な処理が実行される可能性もあります。開発が完了したコードや本番環境で必要のないコードについては、適切な削除やコメントアウトの解除を行いましょう。

コメントアウトの説明

コメントアウトは他の開発者や自身がコードを理解するためのオプションです。コメントアウトした部分には、その理由や目的を説明するコメントを追加することが重要です。これにより、他の人がコードを読んだ際に理解しやすくなります。コメントが何を意味しているか、なぜコメントアウトされたのかを明確に伝えるようにしましょう。

コメントアウトはコード内で重要な役割を果たすため、適切に使用することが重要です。コメントアウトの使い方やコメントの長さ、不要なコメントの削除に留意し、コードの可読性を高めましょう。また、コメントアウトを追加する際は、他の開発者や自身が理解しやすいコメントを記述するように心掛けましょう。

HTMLのコメントアウトの記述例

コメントアウトには一行のみと複数行にわたる場合の2通りの方法があります。以下、それぞれの方法に関して説明していきます。

一行コメントアウト

 <!– コメント内容 –>という形式で、特定の行にコメントを追加します。この方法は一行のコメントを追加するために使用されます。

1<!--　一行のコメントアウトの例です。-->

複数行コメントアウト

複数行のコメントアウトは、複数行にわたるコメントを一括して非表示にするための方法です。以下に、複数行のコメントアウトの方法について詳しく解説していきます。

複数行のコメントアウトを行うためには、以下の手順に従います：

• コメントアウトしたいコードやセクションの開始位置に「<!–」を追加します。この部分からコメントアウトが始まることを示します。
• コメントアウトしたいコードやセクションの終了位置に「–>」を追加します。この部分でコメントアウトが終了することを示します。
• 開始タグ「<!–」と終了タグ「–>」で囲まれた範囲が、コメントアウトされるコードやセクションとなります。

1<!--
2複数行のコメントアウトの例です。
3この部分のコードは非表示になります。
4ここにメモや説明を追加することができます。
5-->

上記の例では、複数行のコメントアウトが行われています。コメントアウトタグ「<!–」で始まり、「–>」で終了しています。この間にあるコードは、ブラウザ上では表示されず、無視されます。

複数行のコメントアウトは、大きなブロックやセクションを非表示にする際に便利です。例えば、テスト用のコードや一時的に無効化したいコードなど、複数の行にまたがる範囲を一括してコメントアウトすることができます。

ただし、注意点としては、コメントアウトしたコードやセクションはブラウザには表示されませんが、HTMLファイル内には残るため、ファイルサイズに影響を与える可能性があります。不要なコメントアウトが増えないよう、定期的に確認し、必要のない部分は削除するようにしましょう。

コメントアウトの入れ子

入れ子のコメントアウトは、HTMLでは正しく機能しません。以下のようにコメントの中にコメントを入れることはできません。

1<!-- 外側のコメント
2  <!-- 内側のコメント -->
3-->

このようにすると、最初の <!-- から最初の --> までがコメントとして解釈され、残りのテキスト（この場合、 -->）がページ上に表示されてしまいます。

入れ子にしたい場合は、コメントの中で追加のコメントマークを使わずに説明を追加するか、コメントを分割してください。たとえば:

1<!-- 外側のコメント開始 -->
2<!-- 内側のコメント -->
3<!-- 外側のコメント終了 -->

このようにすると、コードを読む人に対して、どこでコメントが開始してどこで終了するのかを明確に示すことができます。

ただし裏技的なやり方で入れ子でもコメントアウトが利用できます。以下に2通りのやり方を解説していきます。

CSSのコメントアウトを利用する

HTMLのコメントとCSSのコメントを組み合わせることで、コメントアウトの入れ子のような挙動を模倣することは可能です。

1<!-- 最初のコメントアウト
2  <div>
3    <style>
4      /* ここから2番目のコメントアウト
5      <p>サンプルテキスト</p>
6      ここまでここから2番目のコメントアウト */
7    </style>
8  </div>
9ここまで最初のコメントアウト -->

この方法によって、コメントアウトの中にコメントアウトすることができます。HTMLのコメントとCSSのコメントは異なるため、このような使い方ができるのです。

Javascriptのコメントアウトを利用する

Javascriptのscriptタグを利用する場合もコメントアウトの入れ子のような挙動を模倣することは可能です。以下具体例です。

1<!-- 最初のコメントアウト
2  <div>
3    <script>
4      /* ここから2番目のコメントアウト
5      <p>サンプルテキスト</p>
6      ここまでここから2番目のコメントアウト */
7    </script>
8  </div>
9ここまで最初のコメントアウト -->

これらの方法で入れ子のコメントアウトをすることができるはずです。

ただし、これらの方法には注意が必要です。上記のコードは、実際には正しいHTMLまたはCSSではないため、ブラウザによっては意図した通りに動作しない場合があります。特に、<style>タグの中にHTML要素を入れることは通常行わないため、予期せぬ動作を引き起こす可能性があります。

なるべくなら一行コメントを使用し、どうしても入れ子にしたい場合のみ、上記の方法を利用するなど、使い分けていくことが重要です。

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

CSSのコメントアウトは、スタイルシート内で一部のコードを無視させるために使用されます。コメントアウトされた部分は、ブラウザによって解釈されず、表示や動作に影響を与えません。コメントアウトは、コードの説明や、一時的に特定のスタイルを無効にする場合などに便利です。

CSSのコメントアウトは以下のように書かれます。

1/* このスタイルは全体の背景色を設定します */
2body {
3  background-color: #f0f0f0;
4}
5
6/* 以下のコードは一時的に無効にします
7.header {
8  font-size: 24px;
9  color: red;
10}
11*/

この例では、body要素に対するスタイルが適用される一方、.headerクラスに対するスタイルはコメントアウトされているため、ブラウザによって読み込まれません。

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

• CSSのコメントは /* で始まり、*/ で終わります。これらの記号の間にあるすべてのコードやテキストは無視されます。
• CSSコメントは、複数行にわたっても構いません。
• // はCSSのコメントとして使用することができません。
• CSSのコメントアウトの中で別のコメントアウトを閉じる*/を使用すると、コメントアウトが途中で終了してしまうため、注意が必要です。

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

JavaScriptのコメントアウトは、特定のコードを実行から一時的に除外するか、コード内にメモや説明を追加するために使用されます。コメントアウトされた部分は、ブラウザやJavaScriptエンジンによって解釈されず、プログラムの実行には影響を与えません。

JavaScriptには2種類のコメントがあります。

一行コメント

一行コメントは、コメントの後ろにある行の残りの部分をコメントアウトします。単行コメントは // で始まります。

1// これは単行コメントです
2var x = 5; // この行のこの部分もコメントです

複数行コメント

複数行コメントは、/* で始まり、*/ で終わります。これらの記号の間のすべてのコードやテキストはコメントアウトされます。

1/* これは複数行の
2コメントです */
3var y = 10;

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

• 複数行コメント内で */ を使用すると、コメントがそこで終了してしまうので注意が必要です。
• コメントはコードの説明やデバッグ、未来の自分や他の開発者へのメモなど、様々な目的で使用できます。
• コメントは実行時に無視されるため、プログラムの性能には影響しません。
• ただし、過度にコメントを使用すると、コードが読みにくくなることがあるので、バランスを取る必要があります。

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

多くのテキストエディタやコードエディタ、統合開発環境（IDE）には、コメントアウトのためのショートカットキーが用意されています。これにより、短いコマンドやキーコンビネーションを使用して簡単にコメントアウトを追加できます。

具体的なショートカットキーはエディタやIDEによって異なりますので、一般的に使用されているテキストエディタ別にショートカットキーをまとめました。

Visual Studio Code

一行コメントアウト

• Ctrl + / (Windows)
• Cmd + / (Mac)

複数行コメントアウト

選択した行をまとめてコメントアウトするには、

• Shift + Alt + A(Windows)
• Shift + Option + A (Mac) 

を使用します。

Sublime Text

一行コメントアウト

• Ctrl + / (Windows)
• Cmd + / (Mac)

複数行コメントアウト

選択した行をまとめてコメントアウトするには

• Ctrl + Shift + /(Windows)
• Cmd + Shift + / (Mac) 

を使用します。

Atom

一行コメントアウト

• Ctrl + / (Windows)
• Cmd + / (Mac)

複数行コメントアウト

選択した行をまとめてコメントアウトするには

• Ctrl + Shift + /(Windows)
• Cmd + Shift + / (Mac) 

を使用します。

コメントアウトのショートカットキーを使うことで、手動でコメントアウトタグを入力する手間を省くことができます。素早くコメントアウトを追加したい場合に便利です。エディタやIDEのショートカットキーを覚えて、効率的なコーディングを行いましょう。

あわせて読みたい

【無料】初心者におすすめのテキストエディタ6選！Visual Studio Code他

まとめ

HTMLのコメントアウトは、コーディングにおいて重要なテクニックです。

複数行のコメントアウトを効果的に活用することで、コードの可読性やメンテナンス性を向上させることができます。

適切なコメントアウトの使い方をマスターし、スムーズなコーディング作業に役立てましょう。

あわせて読みたい

【初心者用】フリーランスも目指せる！おすすめのプログラミングスクール16選

あわせて読みたい

【無料あり】ポートフォリオサイト作成におすすめ！レンタルサーバーの選び方

あわせて読みたい

【HTML5】最新のセマンティックウェブの書き方や使い方を徹底解説

すーさん

webデザイナー/webエンジニア

TwitterInstagramLINEContact

30代web業界未経験 →オーストラリアにIT留学 →現地インターンを1年半経験 →フリーランスwebデザイナー・エンジニアとして活動 →月収80万円達成！
ポートフォリオ： https://jp.wordwidewebdesigner.com