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

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?

なるほどなるほど〜

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

参考 Commenting a commented markup (Nested comments)stack overflow

まとめ

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

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

  • styleタグと/*、*/で囲むことでコメントアウトを入れ子で書くことができる
  • scriptタグでも同様にコメントアウト可能

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

HTMLでルビ(ふりがな)を振る方法HTMLでルビ(ふりがな)を振る方法 【OneClickCSS】HTMLをもとにclass名cssなどを自動生成してくれる超便利ツール【OneClickCSS】HTMLをもとにclass名cssなどを自動生成してくれる超便利ツール

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です