catch-img

HTMLのコメントアウトはどう書く?書き方の具体例や注意点を解説

ソースコードの中で特殊記号を使い、実行させたくないコードを書くことをコメントアウトといいます。コメントアウトで記述されたものがコメントです。HTMLにおけるコメントアウトの重要性や書き方、気を付けるべきポイントを紹介します。

目次[非表示]

  1. 1.コメント・コメントアウトの役割
    1. 1.1.注意書きや連絡を他の人に伝達する
    2. 1.2.タグや構成を分かりやすくする
  2. 2.コメントアウトの書き方
    1. 2.1.1行コメントの書き方
    2. 2.2.複数行コメントの書き方
    3. 2.3.コメントの中にタグを入れる方法
  3. 3.コメントアウトを書く際の注意点
    1. 3.1.コメントの中にコメントは入れられない
    2. 3.2.ハイフンをコメントの中で使わない
    3. 3.3.ソースコードからコメントが見られてしまう
  4. 4.コメントアウトは連絡や備忘録に

コメント・コメントアウトの役割

コメントはブラウザ上に表示されず、ソースコードのみで確認できる便利な機能です。コメントアウトには、主に以下のような二つの役割があります。

注意書きや連絡を他の人に伝達する

コメントは、プログラムの中で、他の人に向けた注意書きや連絡を伝達する手段として使われます。

プログラム内の特別なコードなどは、自分以外の人にとって理解しにくいこともあるでしょう。このような場合にメモ書きとして残せば便利です。

特に、複数人で作業する場合に、情報共有の手段として役立ちます。頻繁に書き換えを行うような部分にも、更新日時や担当者名などを残せます。

タグや構成を分かりやすくする

HTMLで構築するシステムやWebサイトが大きくなればなるほど、ソースコードの量も増えていき、タグや構成が分かりにくくなります。

例えば、HTMLはいくつもの入れ子構造で成り立っていますが、いずれかの終了タグが足りないだけで、ブラウザ表示が大きく崩れてしまうこともあるでしょう。

しかし、開始と終了の位置にコメントアウトを書いておけば、入れ子構造が分かりやすくなるため、表示エラーの回避にもつながります。

他のプログラム言語と一緒にソースコードを書いている場合も、コメントアウトを残しておけば構成を理解しやすくなるでしょう。

フロントエンド(HTML・CSS・JavaScript)入門5日-株式会社ジョブサポート

コメントアウトの書き方

ソースコードにコメントアウトを書く場合は、残したい内容を開始タグ<!--と終了タグ-->で囲むのが基本です。具体的な書き方をいくつかのパターンに分けて解説します。

1行コメントの書き方

1行のみ書く場合は、以下のように記述します。

<html>
 <head>
  <title>サプリメントで健康を手に入れよう</title>
 </head>
 <body>
  <!-- ここにはトップバナーを貼る -->
  <p>ほどよい量のサプリメントは健康維持に効果的</p>
 </body>
</html>

残したい内容を、そのまま<!--と-->で囲めばOKです。

複数行コメントの書き方

残したい内容が複数行にわたる場合は、以下のように記述します。

<body>
 <!-- ここには無料サンプル紹介ページの画像を貼る どの商品を扱うかは検討中 リンクULRも保留 -->
 <p>↑おすすめのお試しサプリはコチラ↑</p> </body>

ブラウザ上に表示させるわけではないため、改行タグ<br>は不要です。ソースコードに残したい形のまま、<!--と-->で囲みましょう。

開始タグ直後と終了タグ直前の改行はなくても構いませんが、例文のように<!--と-->を独立させることで、より見やすくなります。

コメントの中にタグを入れる方法

コメント内に別のタグを入れる必要がある場合も、以下のように丸ごと<!--と-->で囲みます。 <!-- 商品説明を書き、購入は下のバナー<img src="supplement.jpg" alt="サプリメント">から案内する --> <!--と-->で囲っておけば、どのような種類のタグもブラウザ上には表示されません。

オンライン・リモート講座(入門5日・基礎10日)-株式会社ジョブサポート

コメントアウトを書く際の注意点

複数のコメントを入れ子構造にしたり、コメント内にハイフン(-)を多用したりすると、ブラウザ上の表示が崩れる可能性があります。コメントアウトはソースコードから誰でも閲覧可能であることにも注意しましょう。

コメントの中にコメントは入れられない

コメントを入れ子構造にし、さらにコメントを挿入することは不可能です。

コメント内にコメントを書こうとする、<!--と-->をそれぞれ二つずつ書くことになりますが、ブラウザの種類によっては一つめの-->でコメントが終了したと見なされることがあり、以降の部分が全てブラウザ上に表示されてしまいます。

どうしてもコメントの中にコメントを入れたい場合は、scriptタグやstyleタグを使うことで対応できる場合があります。

ハイフンをコメントの中で使わない

コメントタグには、<!--と-->のどちらにもハイフンが使われています。残したいコメント内でむやみにハイフンを使うと、-->と解釈されてしまい、予想していない部分でコメントが終了する可能性があります。

連続してハイフンを使う場合は、エラーが発生する確率がさらに高まるでしょう。区切り線としてハイフンを連続させるなど、コメント内ではハイフンを多用しないことが重要です。

ソースコードからコメントが見られてしまう

コメントアウトはブラウザ上には表示されませんが、ソースコードからは閲覧できます。ネット上に公開されている以上、ソースコード自体を閲覧不可にすることは不可能です。

不特定多数の人にコメントアウトを見られたくない場合は、改行を取り除いたりJavaScriptの外部ファイルを使ったりすれば、見にくくすることは可能です。

しかし、どのような方法を用いても完全には隠せないため、個人情報・公開前情報・会社の機密情報などは書かないようにしましょう。

Java短期講座(入門5日・基礎10日)-株式会社ジョブサポート

コメントアウトは連絡や備忘録に

ソースコードにコメントアウトを記しておけば、他の人に伝えたいことを連絡したり、後から見返す際の備忘録にしたりできます。

ハイフンを用いないなど使い方に注意しながら、コメントアウトをうまく利用しましょう。

資料請求はこちらから

職場で使用されているアドレスをご記入下さい。

アップロードしています。少々お待ちください。