HTMLのコーディング中、「この部分を一時的に非表示にしたい」「後から見返すためにメモを残したい」と思ったことはありませんか？そんな時に役立つのが「コメントアウト」です。
特に、長いコードをまとめて非表示にしたい場合、1行ずつコメントアウトするのは大変ですよね。
この記事では、HTMLで複数行をまとめてコメントアウトする簡単な方法から、作業効率が格段にアップするショートカットキー、そして意外と知らない注意点まで、初心者の方にも分かりやすく解説します。
【本記事の信頼性】
- 執筆者は元エンジニア
- 大手プログラミングスクールのWebディレクター兼ライターを経験
- 自らも地元密着型のプログラミングスクールを運営
プログラミングスクール
| ■Webエンジニアの育成に特化 ■自社開発企業への転職成功率がダントツ ■ハイスキルを求める人に最適 |
|
| ■サポートは半永久的 ■単価80万円以上の講師陣 ■AWSやJavaに強い |
|
| ■受講料完全無料 ■最短1か月で卒業 ■教室への通学も可能 |
HTMLのコメントアウトとは？
HTMLのコメントアウトとは、ブラウザの画面上には表示させずに、HTMLファイル内にだけテキストやコードを記述しておくための機能です。
コメントアウトされた部分は、ブラウザがHTMLファイルを読み込む際に「これは表示しなくていい部分だな」と無視してくれるため、Webページには一切表示されません。
しかし、HTMLファイル自体にはコードが残っているため、開発者はその内容を確認できます。
コーディングの際に非常に役立つ、基本的なテクニックの一つです。
HTMLでコメントアウトを使う理由
HTMLでコメントアウトが使われる理由は、いくつかあります。
ここでは、コメントアウトが使われる主な目的について解説していきます。
コードの可読性向上
コメントアウトの用途として最も多いのが、「開発者が自分で書いたコードの内容を忘れないため」です。
何をしているコードなのかを明確にするため、説明や注釈としてコメントに残すのです。
特に、複雑なレイアウトや機能を実装する際、後からコードを見返した時や他の開発者がコードを読む際に、コメントがあればその部分の目的や動作を理解しやすくなります。
一時的なコード無効化
開発中に、特定のHTMLタグやセクションを一時的に非表示にしたい場合があります。
削除してしまうとコードを失ってしまいますが、コメントアウトを使えば後で簡単に復活させることが可能です。
デバッグ作業の効率化
Webページに問題が発生した際、原因となっている可能性のある部分をコメントアウトすることで、問題の特定を効率的に行えます。
段階的にコメントアウトを解除しながら、どの部分が問題を引き起こしているかを特定する手法はよく使われています。
チーム開発での情報共有
複数人で開発を進める際、TODO項目や注意事項、修正予定の内容などをコメントとして残すことで、チーム間での情報共有がスムーズになります。
HTMLでのコメントアウトの書き方
この項目では、具体的なコメントアウトの書き方を解説します。
1行の場合も複数行の場合も、使う記号は同じなので、一度覚えてしまえば簡単です。
1行だけコメントアウトする時の書き方
1行のテキストをコメントアウトする場合は、<!--でコメントを開始し、-->でコメントを終了します。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプルページ</title>
</head>
<body>
<!-- この見出しは一時的に非表示にしています -->
<p>メインコンテンツはここから始まります。</p>
</body>
</html>この例では、「この見出しは一時的に非表示にしています」という文章がコメントアウトされており、ブラウザでは表示されません。
段落タグの内容のみがページに表示される形になります。
1行のコメントでも、開始タグと終了タグの両方が必要な点に注意してください。
他のプログラミング言語では//のような記号で1行コメントを表現することがありますが、HTMLではこの記法は使用できません。
複数行をまとめてコメントアウトする時の書き方
複数行にわたるコンテンツをまとめてコメントアウトする場合も、同じ<!--と-->の記法を使用します。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>商品紹介ページ</title>
</head>
<body>
<h1>新商品のご紹介</h1>
<!--
以下のセクションは準備中のため一時的にコメントアウト
<section>
<h2>商品詳細</h2>
<p>この商品は革新的な技術を使用して開発されました。</p>
<ul>
<li>特徴1: 高性能</li>
<li>特徴2: 省エネ</li>
<li>特徴3: コンパクト設計</li>
</ul>
</section>
-->
<p>詳細情報は後日公開予定です。</p>
</body>
</html>この例では、sectionタグとその中身すべてがコメントアウトされています。
複数のHTMLタグ、テキスト、リスト要素などが一括でコメント化されており、ブラウザでは「新商品のご紹介」という見出しと「詳細情報は後日公開予定です。」という段落のみが表示されます。
複数行のコメントアウトを行う際は、コメントの開始と終了がどこなのかを明確にするため、適切にインデントを使用することが推奨されます。
これにより、後からコードを見返した時にコメントアウトされている範囲を素早く把握できるでしょう。
ショートカットキーを使ってコメントアウトする時の書き方
多くのテキストエディタやIDE（統合開発環境）では、ショートカットキーを使って効率的にコメントアウトを行うことができます。
主要なエディタでのショートカットキーは以下の通りです。
Visual Studio Code（VS Code）
- Windows/Linux:
Ctrl + / - Mac:
Cmd + /
Sublime Text
- Windows/Linux:
Ctrl + / - Mac:
Cmd + /
Atom
- Windows/Linux:
Ctrl + / - Mac:
Cmd + /
WebStorm
- Windows/Linux:
Ctrl + / - Mac:
Cmd + /
実際の使用例を見てみましょう。
<!-- 元のコード -->
<div class="container">
<h2>タイトル</h2>
<p>本文内容</p>
</div>
<!-- ショートカットキーでコメントアウト後 -->
<!-- <div class="container"> -->
<!-- <h2>タイトル</h2> -->
<!-- <p>本文内容</p> -->
<!-- </div> -->ショートカットキーを使用する場合、多くのエディタでは選択した行数に応じて自動的に各行がコメントアウトされます。
単一行を選択した場合は1行のみ、複数行を選択した場合は選択された全ての行がコメントアウトされる仕組みです。
ただし、エディタによってはHTMLファイルでショートカットキーを使用した際、CSSやJavaScriptのコメント記法（/* */や//）が使用される場合があります。
HTMLファイルでは必ず<!--と-->の記法を使用する必要があるため、ショートカット使用後は正しいコメント記法になっているかを確認することが大切です。
HTMLでコメントアウトする時の注意点
HTMLでコメントアウトする際は、以下のような点について注意してください。
コメントアウトの入れ子（ネスト）はできない
HTMLのコメントアウトは、入れ子にすることができません。
これは重要な制限事項として覚えておく必要があります。
<!-- 正しくない例：コメントの入れ子 -->
<!-- 外側のコメント開始
<!-- 内側のコメント -->
この部分は予期しない動作をします
外側のコメント終了 -->
<!-- 正しい例：入れ子を避けた書き方 -->
<!-- セクション1のコメント -->
<!-- セクション2のコメント -->
<p>表示される内容</p>このようにコメントが入れ子になっていると、最初の-->でコメントアウトが終了してしまい、その後の内容が予期せずHTML として解釈される可能性があります。
これによりページレイアウトが崩れたり、意図しないコンテンツが表示されたりする問題が発生することがあります。
複雑な構造をコメントアウトしたい場合は、セクションごとに分割してコメント化するか、一つの大きなコメントブロックとして扱うようにしましょう。
コメント内にハイフンを含めない
HTMLコメント内では、連続するハイフン（--）の使用は避ける必要があります。
これはHTMLの仕様で定められた制限であり、連続するハイフンがコメントの終了と誤認される可能性があるためです。
<!-- 問題のある例 -->
<!-- これは--問題のある--コメントです -->
<!-- 推奨される例 -->
<!-- これは - 問題のない - コメントです -->
<!-- または「ハイフン」という文字で表現 -->特に日本語でコメントを書く際、強調や区切りとして「–」を使いたくなることがありますが、代わりに「-」（単一のハイフン）や「ー」（全角ダッシュ）、「※」などの記号を使用することを推奨します。
コメントは閲覧される可能性がある
HTMLのコメントはブラウザでの表示には影響しませんが、ページのソースコードを確認すれば誰でも閲覧することができます。
この点を理解した上でコメントを記述することが重要です。
したがって、機密情報や内部的な情報をコメントに含めることはやめましょう。
以下のような情報は特に注意が必要です。
- パスワードやAPIキー
- データベースの接続情報
- 社内の開発者名や連絡先
- 未公開の機能や計画に関する情報
- セキュリティに関わる実装詳細
まとめ
今回は、HTMLのコメントアウトについて、基本的な書き方から複数行をコメントにするやり方、便利なショートカットキーなどについて詳しく解説しました。
なお、HTMLを始めとする言語を体系的に学び、効率よくスキルを高めるには、プログラミングスクールを利用するのも有効です。
細かな疑問がすぐに解決するだけでなく、現役エンジニアが「質の高いポートフォリオ」を作成するための手助けをしてくれたり、エンジニア就職・転職のコツを教えてくれたりするなど、様々なメリットがありますので、独学に疲れた方は検討してみてはいかがでしょうか。
Follow me!
