More than 3 years have passed since last update.

【初心者でもわかる】HTMLのコメントをコメントアウトする裏技

Last updated at 2021-04-30Posted at 2021-04-29

#どうも7noteです。HTMLのコメントをコメントアウトする方法

HTMLでのコメントの方法は以下の通りです。
前後にを書くことでコメントにできます。

<!-- ここにメモ書き -->

ではこれを使って複数のコメントをまとめてコメントアウトしようとすると・・・うまくいきません。

失敗.html

<!-- 
  <!-- 複数行をコメントアウト -->
  <!-- したいけどうまくいかない -->
-->

この方法では、一番最後の-->はコメントとして認識されません。
Qiitaでも文字が白くなっているのがわかると思います。白い文字の箇所は表示されてしまうところになります。

コメントをコメントアウトする裏技

成功.html

<!-- この方法なら複数行コメントアウトできます↓ -->
<style>
  /*
    <!-- 複数行をコメントアウト -->
    <!-- できる方法 -->
  */
</style>

成功.html

<!-- この方法でも複数行コメントアウトできます↓ -->
<script>
  /*
    <!-- 複数行をコメントアウト -->
    <!-- できる方法② -->
  */
</script>

この表記のままではコメントで入れ子構造を組むことはできません。
なのでをHTMLとして認識させないようにすることで、HTMLのコメントをstyleやscriptタグ内でコメントアウトすることができます。

phpが使えるファイルであれば、phpでもコメントアウトが可能です。

index.php

<?php
  /* 
    <!-- phpでもコメントをコメントアウトできます。 -->
  */
?>

コメントをコメントアウトできるとはいえ、あまり乱用するとソースがめちゃくちゃになってしまうので、
一時的にまるごとコメントアウトしておきたい、というようなケースでの使用のみにとどめて置くほうがよいと思います。

もし消し忘れてしまっていたらぐちゃぐちゃのソースが公開されてしまいますし、なにより他の人が見たときに見にくいソースになってしまうので、乱用は避けましょう。