意外と情報を見つけにくい<!--...-->（以下、コメントアウト）ですが、コードの見易さや更新性の向上、困った時などに使えたりするので、有効活用できたら非常に便利です。
コメントアウトについて
まずはコメントアウトの仕様を見ていきましょう。
HTML syntax - HTML5 : 4.7. Comments
説明
コメントアウト内の文章はブラウザに表示さません。
仕様
コメントアウトの最初は「<!--」ではじまり、コメントアウトしたい文章が続き、最後に「-->」を書く。
コメントアウトする文章に多少の制約があります。
コメントアウトしたい文章は、
- 「>」で始まらないこと
- 「->」で始まらないこと
- 「--」を含まないこと
- 「-」で終わらないこと
サンプルコード
1 2 3 | <!-- この文は表示されません --><p>この文は表示されます</p><!-- この文は表示されません --> |
サンプルコードの結果
この文は表示されます
使用例
それでは、いろんなサイトで使われているコメントアウトをご紹介していきます。
メモを書くためのコメントアウト
要素の開始位置と終了位置にコメントを入れる事で、ソース上でどのパーツのコードかを分かり易くします。
この方法はパーツのひとかたまりを可視化するのに有効だと思います。
1 2 3 4 5 | <!-- サンプルブロック 開始 --><div class="sample1"><p>これはサンプルブロック1です。</p></div><!-- サンプルブロック 終了 --> |
サンプルコードの結果
これはサンプルブロック1です。
一時的にコンテンツを表示させないためのコメントアウト
サイトを運営していると、
- 一時的にコンテンツを表示させたくない
- 今後の運用のために残しておきたい
等が出てくると思います。そんな時はコメントアウトで隠してしまいます。
記述例がA、B、Cと3通りありますが、どれでもコメントアウトできます。
サンプル1
これはサンプルブロック2aでは、タグごとコメントアウトとしています。
一行のコメントアウトの時に向いている書き方です。
1 2 3 4 | <div class="sample2a"><p>これはサンプルブロック2aです。</p><!-- <p>一時的に表示させたくない箇所（コメントアウト1）。</p> --></div> |
サンプルコードの結果
これはサンプルブロック2aです。
サンプル2
サンプルブロック2bでは、2つのpタグをまとめてコメントアウトとしています。
複数行まとめてコメントアウトできるので便利です。
便利なのですが、コメントアウトしたい箇所に既にコメントアウトがされている場合は注意が必要です（後述のアンチパターン「コメントアウトの中にコメントアウト」に失敗例をあげているので失敗しないようにしてください）。
1 2 3 4 5 6 7 | <div class="sample2b"><p>これはサンプルブロック2bです。</p><!--<p>一時的に表示させてくない箇所（コメントアウト2）。</p><p>一時的に表示させてくない箇所（コメントアウト2）。</p>--></div> |
サンプルコードの結果
これはサンプルブロック2bです。
サンプル3
サンプルブロック2cの書き方はたまに見かけます。
こういうコメントアウトもできるんですね！
1 2 3 4 | <div class="sample2c"><p>これはサンプルブロック2cです。</p><!-- p>一時的に表示させたくない箇所（コメントアウト3）。</p --></div> |
サンプルコードの結果
これはサンプルブロック2cです。
対応する閉じタグを明示的にするためのコメントアウト
ソースコードが複雑になってくると対応する閉じタグが分かりにくくなってきます。閉じタグを分かり易く確認するためにもコメントアウトが使えます。
1 2 3 4 5 6 | <div class="sample3"><p>これはサンプルブロック3です。</p><!-- .sample3 --></div><div class="sample4"><p>これはサンプルブロック4です。</p></div><!-- .sample4 --> |
サンプルコードの結果
これはサンプルブロック3です。
これはサンプルブロック4です。
※sample4の書き方だとIE6で意図しない表示(バグ)となる可能性があるため、IE6が対象ブラウザに入っている場合はsample3の書き方でコメントアウトを統一したほうがいいと思います。
余分な隙間を隠すためのコメントアウト
ソースを見やすいように改行をつけてコーディングすると改行が隙間として表示されてしまう時があります。
改行を取れば余分な隙間なくなりますが、コードが非常に見にくくなってしまいます。
そんな時は問題のある箇所の改行をコメントアウトし、隙間を無くす事が出来ます。
隙間が出てしまう例
1 2 3 4 5 6 7 | <div class="sample5a"><p><label for="sample5a_1">選択肢1</label> <input type="radio" value="0" checked="checked" name="sample5" id="sample5a_1"> <label for="sample5a_2">選択肢2</label> <input type="radio" value="1" name="sample5" id="sample5a_2"></p></div> |
サンプルコードの結果
コメントアウトで対応した例
1 2 3 4 5 6 7 | <div class="sample5b"><p><label for="sample5b_1">選択肢1</label><!-- --><input type="radio" value="0" checked="checked" name="sample5" id="sample5b_1"><!-- --><label for="sample5b_2">選択肢2</label><!-- --><input type="radio" value="1" name="sample5" id="sample5b_2"></p></div> |
サンプルコードの結果
アンチパターン
コメントアウトの中にコメントアウト
コメントアウトを入れ子にすることはできません。
ブラウザでは最初の「<!--」から最初の「-->」までをコメントとしてしまうので次のように解釈されてしまいます。
1 2 3 4 5 6 | <!--<div class="sample6"><p>これはサンプルブロック6です。</p><!-- <p>これはサンプルブロック6です。</p> --></div>--> |
「</div>」と「-->」だけのソースとなってしまうので、構文エラーとなります。
<script>タグの内容を表示させないためのコメントアウト
1 2 3 4 5 | <script type="text/javascript"><!--alert('コメントアウト内のスクリプト');//--></script> |
1990年代、<script>タグを正しく解釈できないブラウザ（Netscape 1.0など）で<script>タグ内のスクリプトが表示されるため、コメントアウトで囲い、表示させないためのテクニックでしたが、現行のブラウザは<script>タグ内のスクリプトが表示されてしまう問題は無いので<script>タグ内のコメントアウトは不要です。
今でも<script>タグ内にコメントアウトを書いているサイトはNetscape 1.0まで対応しているのかな？苦笑
コメントアウトはメモをするための用途が多いと思いますが、CSSでは調節出来ない表示上の微調整にも使えたりするので是非とも活用してみてください。