HTMLでコメントアウトを複数行・入れ子で書く方法を解説!

HTMLでコメントアウトは複数行・入れ子で書くことはできませんが、少し工夫することで入れ子でコメントを残す事ができます。そのやり方・書き方をサンプルコード付きで紹介します。

コンテンツ [表示]

  1. 1HTMLでコメントアウトを複数行・入れ子で書きたい
  2. 1.1HTMLのコメントアウトは入れ子に出来ない
  3. 2HTMLでコメントアウトを複数行・入れ子で書く方法
  4. 2.1CSSのコメントアウト
  5. 2.2JavaScriptのコメントアウト
  6. 3まとめ

HTMLでコメントアウトを複数行・入れ子で書きたい

みなさんはHTMLでコメントアウトする際に、複数行かつ入れ子で書きたいけど上手く行かないといったケースはないでしょうか?

例えば下記のような例です。

「ここからメイン」という箇所から複数行でコメントアウトし、更にそのタグ内部の大見出しの箇所でコメントアウトするといったケースです。結果としてコメントアウトの閉じがプレビューに表示されちゃってますね。

HTMLのコメントアウトは入れ子に出来ない

HTMLのコメントアウトは基本的には入れ子にできません

しかし、HTML中の大きなブロック全体をコメントアウトする際に、そのブロック内部にすでにコメントがある場合など困りますよね。

そこで今回の記事ではHTMLのコメントアウトを複数行かつ入れ子で書く方法を紹介していきます。

HTMLでコメントアウトを複数行・入れ子で書く方法

HTMLでコメントアウトを複数行かつ入れ子にするにはHTMLのコメントアウトではなく、CSSやJavaScriptのコメントアウトの書き方を利用します。

CSSのコメントアウト

CSSのコメントアウトを利用した例です。

CSSのコメントアウトを利用した例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>入れ子でコメントを書きたい</title>
</head>
<body>
  <!-- ここからメイン
  <div class="main">
    <style>/* ここから大見出し
    <h1 class="heading">大見出し</h1>
    /+</style>
  </div>
  -->
</body>
</html>

上記の例ではHTMLのコメントアウト、CSSのコメントアウトが入れ子の形になっていますが、コメントアウトの種類がバッティングしないため、正常にコメントアウトされます。

JavaScriptのコメントアウト

またJavaScriptのコメントアウトでも可能です。

JavaScriptのコメントアウト

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>入れ子でコメントを書きたい</title>
</head>
<body>
  <!-- ここからメイン
  <div class="main">
    <script>/* ここから大見出し
    <h1 class="heading">大見出し</h1>
    /+</script>
  </div>
  -->
</body>
</html>

scriptタグでコメントアウトを記述することで、JavaScriptのコメントアウトとなり、HTMLのコメントアウトとはバッティングせずに、正常にコメントアウトされます。

まとめ

見てきたようにHTMLでのコメントアウトは入れ子にできませんが、少し工夫することでコメントアウトでも入れ子にすることが出来ます。

ぜひお試し下さいませ!

今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次