HTMLでコメントアウトを入れ子で書く方法【styleタグやscriptタグを使用】

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

コメントアウトしたいかたまりの中にすでにコメントアウトがあって、
うまくコメントアウトができなくて困っている

という方のお悩みを解決します！

この記事で紹介する「styleタグやscriptタグを使ってコメントアウトする方法」を実践すれば、入れ子状態のコメントアウトにも対応可能です！

それでは見て参りましょう〜！

一般的なコメントアウト

普段みなさんがコメントアウトする場合、以下のように書いていると思います。

index.html

<!-- コメント -->
<p>テキストテキスト</p>

小なり記号、エクスクラメーション記号、ハイフン、大なり記号の4つを使用しますね。

コメントアウトする方法も実に簡単で、Macの方は「command + /」で出来ます。

それが一般的なコメントアウトする方法です。

しかし今回、コメントアウトしたいかたまりは上述した方法ではうまくいきません。

以下のようなブロックをまとめてコメントアウトしたい場合。

index.html

<div>
  <!-- コメント -->
  <p>テキストテキスト</p>
  <!-- コメント -->
  <p>テキストテキスト</p>
</div>

divの中にコメントアウトとpタグがそれぞれありますね。

これを普通にcommand + /でコメントアウトしようとするとこうなります。

index.html

<!-- <div>
  <!-- コメント -->
  <p>テキストテキスト</p>
  <!-- コメント -->
  <p>テキストテキスト</p>
</div> -->

すでにコメントアウトしてある箇所が邪魔してうまくいかないのです。

そんな時に救世主となるのが、styleタグとscriptタグです！

使い方はいたってシンプル！

コメントアウトしたいかたまりを以下のようにタグで囲うだけ！

styleタグでコメントアウト

<style>/*
コメントアウトする内容
*/</style>

scriptタグでコメントアウトする場合も同様の方法でできますよ。

実際にどうコメントアウトするのかCodePenでサンプルを作ったのでご覧ください〜！

See the Pen
RwPMYbp by 石森裕也 (@yuyaphotograph)
on CodePen.

コメントアウトしたいかたまりの中にすでにコメントアウトがあって、
うまくコメントアウトができなくて困っている

このお悩みを英語で表現すると、どういった文章になるのか気になったのでstack overflowで探してみました！

同じ悩みを抱えている方がいたようで、その方は以下のように英語で質問していました。

How can I easily comment and uncomment a big chunk of HTML markup that that includes some comment?

なるほどなるほど〜

英語にすると一気にかっこよくなりますね笑

以上、コメントアウトを入れ子で書く方法を紹介しました。

最後にもう一度やり方を振り返りましょう。

他の記事も興味ある方はチェックしていってください〜！