More than 5 years have passed since last update.

HTMLで、コメントが含まれるかたまりを簡単にコメントアウトする方法

Posted at 2014-11-12

あるかたまりをいったんコメントアウトしておきたい場合に、かたまりの中にすでにコメントが含まれていると、うまくコメントアウトできず面倒です。

例えば以下のHTMLのhoge全体をコメントアウトしたい場合、

hoge.html

<body>
  <div class="hoge">
    hogehoge
    <!-- comment comment -->
    hogehoge
  </div>
</body>

普通にやると以下のようになってしまい、うまくコメントアウトできません。

hoge-comment-NG.html

<body>
  <!-- 
  <div class="hoge">
    hogehoge
    <!-- comment comment -->
    hogehoge
  </div>
   -->
</body>

そんな時は、styleタグのコメントアウトを利用した

hoge-comment-OK-style.html

<body>
  <style>/*
  <div class="hoge">
    hogehoge
    <!-- comment comment -->
    hogehoge
  </div>
  */</style>
</body>

もしくは、scriptタグを使った

hoge-comment-OK-script.html

<body>
  <script>/*
  <div class="hoge">
    hogehoge
    <!-- comment comment -->
    hogehoge
  </div>
  */</script>
</body>

で、比較的簡単にコメントアウトができます。