【HTML入門】コメントアウトの書き方

HTMLでは文章をタグでマークアップし、ブラウザを通して表示しています。しかし、ソースに書いてあってもブラウザで表示されない部分があります。それがコメントです。
ここでは、コメントおよびコメントアウトとは何か、コメントはどう書くのかなどを説明します。

コメントとコメントアウトとは何か

コメントは、HTML文書のソース部分に記述する注意書きです。ソースの中に、サイト作成側の覚え書きや申し送りとしてコメントを入れることができます。コメント部分はブラウザからは無視されるので、ブラウザ上では表示されません。
コメント部分はブラウザに無視されるという特性を活かして、本来の注釈や覚え書きの範囲を超えて、いろいろな使われ方をしています。ソースの可読性を上げ、効率よくメンテナンスを行うために、なくてはならない機能です。
文書の一部をコメントにすることをコメントアウトと言います。コメントアウトはHTMLだけでなくJava、CSS、Cなど、他のプログラミング言語でも使われています。

何のためにコメントアウトを行うのか

コメントのいろいろな使い方をご紹介します。

注意書きを残す

本来の意味でのコメントです。ブラウザには表示したくない、ちょっとしたメモを残しておくのに使われます。付箋を貼るようなものです。
ここでは何の処理を行っているのか、その結果はどこで使われるのか、特定のブラウザ向けの対策をしている箇所などのメモを残しておくとメンテナンスの効率が良くなり、複数人で制作するサイトでは特に役に立ちます。

タグの構造やページ構成を分かりやすくする

HTMLでは、何段もの構造が重なり合っている部分がたくさんあります。一度作成すると、後からメンテナンスするときに目的の場所を探すのは大変です。
そこで、メンテナンスしやすいようにコメントで「ここからheader」「ここからメニュー」などの区切りを入れていくのです。そうすると自分で変更や修正を行うときにも簡単で、他の人が修正するときにもわかりやすくなります。
どの</div>タグがどの<div>と対応しているのか、どの部分を指すのかというコメントを入れることもあります。<div>のように開始と終了がセットになったタグは、片方だけ追加・削除すると表示が崩れてしまうので、注意が必要です。そこでコメントを利用します。
Webページ制作ソフトを使ってサイトを作成している場合でも、このコメントを追加していくと便利です。

あらかじめ修正や更新の予約をしておく

コメントアウトは一行である必要はありません。複数の行やタグの入った文もコメントアウトできます。そこで、更新作業の前倒しに利用できます。
まだ公開できないけれど近日公開するべき部分をあらかじめ作成してコメントアウトしておけば、更新作業が素早く出来ます。スポーツの試合結果など、素早く更新したいときにも便利です。
また一定期間後に削除する必要がある部分にも、コメントを入れておくと素早く作業できます。

資料としてこれまでのプロセスを保存しておく

今は使用していないけれどメモとしてソースを残しておきたい部分も、コメントアウトしておけばブラウザには表示されません。これを使えば、編集前に使用したメモなどを別なファイルに移しておく必要もありません。

コメントアウトの書き方

コメントアウトのルールは比較的単純です。
1.コメントアウトしたい部分をで囲みます。囲まれた部分はコメントになり、ブラウザには表示されません。
HTML上の表示

<html>
  <head>
    <title>プロスタ</title>
  </head>
  <body>
<!-- ここで初心者向けの気軽なサイトであることをアピールする -->
 プロスタはプログラミング初心者が自分に合った勉強法を見つけられるサイトです。
  </body>
</html>

ブラウザ上の表示

プロスタはプログラミング初心者が自分に合った勉強法を見つけられるサイトです。

2.コメントは、数文字でも複数行にまたがってもかまいません。タグの入った文章でもかまいません。
HTML上の表示

<html>
  <head>
    <title>プロスタ</title>
  </head>
  <body>
<!-- ここで初心者向けの気軽なサイトであることをアピールする
上級者向けの教室については、サイドのバナー
<img src=" advanced.gif" alt="上級者クラス">から案内する -->
 プロスタはプログラミング初心者が自分に合った勉強法を見つけられるサイトです。
  </body>
</html>

ブラウザ上の表示

プロスタはプログラミング初心者が自分に合った勉強法を見つけられるサイトです。

3.コメント開始の<!–は続けて記述する必要があります。終了の–と>の間には空白が入ってもかまいません。
HTML上の表示

<html>
  <head>
    <title>プロスタ</title>
  </head>
  <body>
<!-- ここで初心者向けの気軽なサイトであることをアピールする -- >
<! -- 上級者向けは別なページでアピールする -->
 プロスタはプログラミング初心者が自分に合った勉強法を見つけられるサイトです。
  </body>
</html>

ブラウザ上の表示

上級者向けは別なページでアピールする
プロスタはプログラミング初心者が自分に合った勉強法を見つけられるサイトです。

4.コメントをネスト構造(入れ子)にすることはできません。

コメントアウトの注意点

コメントアウトの記述は難しくはありません。ただし、いくつかの注意事項があります。

コメントの中にコメントを入れない

コメントには複数の行やタグを入れることはできますが、コメントを入れることはできません。正確にはコメントアウトできません。
コメントをネスト構造(入れ子)にした場合、どのように表示されるかはブラウザによって異なります。
記述する側が意図した通りすべてをコメントアウトするブラウザもあります。
しかし、最初の–>でコメントアウトが終了したものとみなされ、後半はすべて表示されるブラウザもあります。そのため、コメントアウトをネスト構造(入れ子)にすることはできません。
どうしてもすでにコメントが含まれている部分をコメントアウトしたい場合は、scriptタグかstyleタグを使うことになります。
HTML上の表示

<html>
  <head>
    <title>プロスタ</title>
  </head>
  <body>
<!-- ここで初心者向けの気軽なサイトであることをアピールする
<!--上級者向けの教室については、サイドのバナー<img src=" advanced.gif" alt="上級者クラス">から案内する -->
ここでは記述しない-->
 プロスタはプログラミング初心者が自分に合った勉強法を見つけられるサイトです。
  </body>
</html>

ブラウザ上の表示

ここでは記述しない
プロスタはプログラミング初心者が自分に合った勉強法を見つけられるサイトです。

コメントの中で『–』を使わない

コメントの中で「–」という文字列を使わない方がいいでしょう。「終了の–と>の間には空白が入ってもかまわない」と言うのは、-(ハイフン)を連続するとコメントの終了と解釈するブラウザがあるからです。そのため、記述する側が意図しないところでコメントアウトが終了する場合があります。
たとえば区切りに「————」という文字列を使う人がいますが、「=============」などに変えた方がいいでしょう。

最後に

記述には関係ありませんが、コメントアウトは「宣言」であり、タグではありません。
HTML文書はCSS文書と一緒に扱われることが多いですが、コメントアウトの記述方法が異なります。同時に編集していて混同することのないように注意が必要です。
コメントアウト部分はブラウザでは表示されませんが、ブラウザから「ソースを表示」すれば誰でも読むことができます。読まれてはいけない情報、社外秘にするべき情報などは入れてはいけません。手間はかかりますが、別なファイルやシステムで管理するべきです。