【HTML入門】コメントアウトの書き方!注意点や便利な使い方解説

Webの世界では、<div>のようなHTMLタグを書いて、それをブラウザを通して見ています。しかし、このようなHTMLソースコードに情報を書いてあっても表示されない部分があります。

これが「コメント」と言われる部分です。コメントをソースコード上に記述することを「コメントアウト」と言います。「コメントアウトする」みたいに使われます。

ここでは、コメントの書き方や、書くときの注意点、コメントアウトするメリットや活用方法などを紹介していきます。

コメント・コメントアウトとは

コメントとは、ソースコード上に特殊な記号や文字を使って、ブラウザ上で表示や処理がされない部分のことを言います。
そして、今まで処理されていた部分をコメント化して、処理させないように書く事をコメントアウトといいます。

コメント部分はブラウザで非表示になるので、その特徴を生かして「注釈」「覚え書き」「タグの終わり」等を書くことに使われます。ソースコードの可読性を上げ、効率よくメンテナンスが出来るようにするには、欠かせない機能です。

HTML上で一緒に記述できる「CSS」「JavaScript」も同じようにコメントアウト出来るので、その方法も見ていきましょう!(コメントアウトする場所によっては、書き方が異なります)

HTMLでコメントアウトの書き方

HTMLソースコード上でコメントアウトするには、非表示にしたい部分を「<!--」と「-->」で囲みます。

コメントアウトする手順
  • <!–: コメント開始タグ
    コメントの開始タグ「<!--」の3文字はすべてスペースを開けずに書きます。
  • –>: コメント終了タグ
    コメント終了タグ「-->」の3文字はすべてスペースを開けずに書きます。

コメントは複数行に渡ってつかえるので、箇条書きのリストや書きかけのHTMLソースコードを1書きでコメントアウトすることが出来ます。

HTMLで一行だけコメントアウトする

HTMLで1行だけコメントアウトするには、下記のように「<!--」と「-->」で囲みます。

通常、<!--の後と-->には「スペース」を記述する事が多いです。

<!-- 1行コメント -->

HTMLで複数行コメントアウトする

複数行のときも「<!--」と「-->」で囲みます。その間に書いた部分が非表示になります。

<!--
複数行
コメント
-->

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

HTMLのコメントを扱うにあたって、注意点があるので見ていきましょう

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

コメントを使えば複数行を小円とアウトしてブラウザから見えなくすることが出来ますが、コメントをコメントアウトすることは出来ません。

下記のように、コメントを2重にした場合、内側のコメントの終了タグ「-->」でコメントが終わると解釈されてしまい、2回目の「-->」はコメントではなく、HTML中の普通の文章として認識されてしまいます。

<!--
複数行
コメント
<!-- コメントの中のコメント -->
-->

ハイフン「-」を使わない

コメント中で「-」を連続して使わないようにしましょう。

理由は、-を連続して書くとそれがコメントの終了だと誤解するブラウザがあるからです(ie6以前とか)。
意図しないところでコメントアウトが終了する可能性があるので、ハイフンを連続して書かないようにしましょう。

コメントの内容を書くために「-----」のようにのように、区切り線として使う人もいますが、代わりに「=====」を使うようにしましょう。

コメントが閲覧される(機密情報は絶対入れない)

コメントはブラウザ上から見えなくなりますが、ソースコード上では表示され、すべての人が簡単に閲覧出来る仕組みになっています。

今のブラウザは、HTMLをコメント部分を含めてそのまま閲覧することできます。

この閲覧方法は簡単です。まず、ブラウザ上で右クリックをします。「ページのソースを表示」というボタンがでるので、それをクリックします。すると、今見えいるWebページのコメント部分を含めたソースコードがすべて見れます。

ID・パスワード・API Keyなどを書くときには、不特定の人に見られてもいい内容のみを書きましょう。
社外秘の情報も、コメントには絶対に書かないように注意してください。

phpタグ内ではコメントアウトできない(WordPressでは注意)

phpとHTMLは併用して使われることの多い組み合わせです。複数の言語が混在して使われると、言語間の切り替わり位置がわかりにくくなり、見落としやすくなります。

phpの部分にHTMLのコメントアウトを使うことは出来ませんし、その逆ももちろん出来ません。

HTMLがコメントアウトしなかったり、PHP側でエラーが発生したときは、コメントアウトの位置が間違っていないか、確認しましょう。

wordpressのハイフン「-」がエンダッシュ「–」へ自動変換に注意

wordpressはデフォルト設定で、ハイフン「-」がエンダッシュ「–」へ自動変換されてしまうようになっています。エディタでコメントアウトを記述したら、そのとおりにならない場合、この自動変換が原因であることが考えられます。

その場合の解決方法として、コメントアウト専用のショートコードを用意するという方法があります。

function ignoreShortcode($attr, $content=null) {
  return null;
}
add_sortcode('ignore', ignoreShortcode);

この内容をfunction.phpに記述して、下記のように記事エディタから使うと、その部分をコメントアウト出来ます。

[ignore]
この部分がコメントです
[/ignore]

コメントアウト出来ないときは?

<!-- コメント -->」はHTMLで使うコメントの書き方ですが、この書き方では都合の悪い場合があります。そのようなときは、CSSやJavaScriptのコメントアウトを応用して、HTML上で表現することが出来ます。

<style>/*

このようにしてコメントを書きます

*/</style>

<style>タグの中身は、cssの書き方でコメントを記述出来るため、「/* コメント */」という形式を使うことが出来ます。

コメントアウトの活用方法3つ

ここまでで、HTML上でコメントアウトする方法が理解できたと思います。この章では、コメントを書く内容にフォーカスを当てて、現場ではどのような使い方がされているのかを3つ解説していきます。

コメントアウト活用方法3つ
  • 覚え書きやメモとして活用
    昔、どのような意図をもって書いたのか確認しやすくなります。複数人で編集するときはもちろん、個人で開発しているときにも役立ちます。
  • タグの入れ子構造を見やすくする
    HTMLのタグが沢山の入れ子になると、終了タグがどれかわかりにくくなります。
  • 修正前後のコードを一時保管しておく
    一時的にWebページで表示したくない!後で使う可能性がある!そんなときに役立ちます。

覚え書きやメモとして活用

コメントアウトは、単純に「覚え書きやメモ」として活用される事があります。

<!-- Webサイトを作れるまでのステップ -->
<ul>
<li>Photoshopを学ぶ</li>
<li>HTMLを学ぶ</li>
<li>CSSを学ぶ</li>
<li>サーバーを立ち上げてみる</li>
<li>公開してみる</li>
</ul>

このようなに、HTMLを見てその内容がすぐに分かるようにコメントにメモを残します。

これだけ見れば、すぐ下の内容がすぐに理解出来ていいですね!

  • 誰がいつ、なぜその要素を作ったか
  • 要素のまとまり(コンポーネント)にはどのような内容が書いてあるのか
  • 一定期間たった後に削除する部分をわかりやすく示しておく

このような理由でコメントを入れておくと、素早く作業が出来ます。

タグの入れ子構造を見やすくする

<section>
  <div class="container">
    <div class="row">
      <div class="col-sm">
        <div class="container">
          <div class="row">
            <div class="col-sm">
              One of three columns
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

このように、沢山のタグが入れ子になると、どれが終了タグがわかなくなって、バグを生んでしまう原因になります。

例えば、<section>ののすぐ後の<div class="container">を外そうとした場合、それに対応したHTML終了タグがどれか分かりづらい訳です。

これでは、コードを追加・削除等の修正するときに判断しにくくなってしまいます。

実際の現場のHTMLは、追加修正を繰り返してもっと複雑でごちゃごちゃしていきます。それがどんどん積み重なると、1つ修正したら何処かのスタイルが崩れるという悲惨なことになってしまいます。

<section>
  <div class="container">
    <div class="row">
      <div class="col-sm">
        <div class="container">
          <div class="row">
            <div class="col-sm">
              One of three columns
            </div><!-- /.col-sm -->
          </div><!-- /.row -->
        </div><!-- /.container -->
      </div><!-- /.col-sm -->
    </div><!-- /.row -->
  </div><!-- /.container -->
</section>

これを解決するために<!-- /.container -->のように、対応する終了タグがわかるようにします。

これなら、対応した終了タグが見やすくなりますね

今回は、classの基準にした終了タグの書き方例を紹介しています。idの場合は<!-- /#container -->のようにするとわかりやすいですよ。

注意

コメントを含めた文章はコメントアウト出来ない

コメントの中にコメントは入れられない!」でも解説したように、コメントを含めた文章はコメントアウト出来ません。

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div><!-- /.col-sm -->
  </div><!-- /.row -->
</div><!-- /.container -->

例えばこのように、一部をコメントアウトしている部分があったとします。この部分は今は使わないので、全体をコメントアウトしようとしても出来ないのです。

<!--
<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div><!-- /.col-sm -->
  </div><!-- /.row -->
</div><!-- /.container -->
-->

実際にコメントアウトしてみると、それが機能していないのがわかります。

このようなミスは、HTML中級者でもよくやりがちです。

修正前後のコードを一時保管しておく

コメントアウトを活用することで、ソースコードの内容を一時的に非表示で保管することが出来ます。

<div>
  <h2>タイトル1</h2>
  <p>修正後のコンテンツ</p>
  <!-- <h2>タイトル2</h2>
  <p>修正前のコンテンツ</p> -->
</div>
  • 今は表示したくない文章だけど、将来また使うかもしれない
  • デザインを追加したけど今は表示したくない

など、絶対使うとは言えないけど、また使う可能性があるものをコメントアウトしておく使い方出来ます。

公開時にコメントアウト部分を削除する方法

「コメントアウトはブラウザでどうせ表示されないのだから、容量削減のために予めコメントを排除したい!」と思うときはあると思います。

少ないコメントタグであれば手動でなんとか出来る場合もありますが、面倒ですし、コメントが大量にあるときは大変です。また、いちいちコメントを修正しなくてはいけないので、せっかくコメントを付けた意味がなくなってしまう場合もあります。

そういうときは「正規表現」という手法を用いてコメントアウトの部分を一括削除するという方法があります。

正規表現とは、文字列上のパターンを指定して、そのパターンに当てはまったときに特定の処理を行う方法です。

例えば、HTMLのコメントアウトな「<!--」から始まり「-->」で終わります。そしてその間には文字数のわからない文字列が入ります。
これを正規表現でパターン化すると、下記のようになります。

<!--\s(.+)\s-->

これに当てはまった部分だけを削除するプログラムを書けば、その部分を除いたHTMLが出力されるというわけです。

正規表現をつかってどのように処理部分を書くのかについては、それだけで記事が大きなボリュームになってしまうので、別のサイトを御覧ください。

コメントアウトを活用すれば業務の効率化を図れる!

HTMLでコメントアウトは必須の知識です。しかし、以外に活用出来ている人は少ないのです。

コメントアウトのスキルはHTMLのコーディングだけではなく、プログラミングやサーバー構築にも活かすことが出来ます。

複数人でスムーズに運営・管理が出来るために、コメントアウトをうまく活用しましょう。

\ 本気でWeb制作をマスターするなら「CodeCamp」が断然おすすめ! /

  • 東証一部上場企業での研修実績あり!
  • NHKや日経などのメディア掲載あり!
  • オンラインレッスン満足度 No.1!
  • コスパ No.1!