Webデザイン

【PR】を含みます。

【HTML】複数行のコメントアウトを入れ子にする方法2選

HTML 複数行のコメントアウトを入れ子にする方法2選

HTMLのコメントアウトは入れ子にすることができませんが、scriptタグやstyleタグを使用することで疑似的にコメントアウトすることができます。

scriptタグやstyleタグ内でHTMLをコメントアウトする方法は正しく動作しますが、HTMLコードを含む形式でコメントしているため、読みやすさや保守性の観点からは注意が必要です。

HTMLのコメントアウトは入れ子不可

以下のようにコメントアウトが入れ子になっている場合、<!--から<!-- コンテント1始まり -->の-->までがコメントアウトの対象にります。

HTML
Copy
  1. <!--
  2. <div class="article">
  3.   <!-- コンテント1始まり -->
  4.   <div class="content1">
  5.     <p>テキスト</p>
  6.   </div>
  7.   <!-- コンテント1終わり -->
  8.   <!-- コンテント2始まり -->
  9.   <div class="content2">
  10.     <p>テキスト</p>
  11.   </div>
  12.   <!-- コンテント2終わり -->
  13. </div>
  14. -->

scriptタグで囲って疑似的にコメントアウト

HTML
Copy
  1. <script>
  2. /*
  3. <div class="article">
  4.   <!-- コンテント1始まり -->
  5.   <div class="content1">
  6.     <p>テキスト</p>
  7.   </div>
  8.   <!-- コンテント1終わり -->
  9.   <!-- コンテント2始まり -->
  10.   <div class="content2">
  11.     <p>テキスト</p>
  12.   </div>
  13.   <!-- コンテント2終わり -->
  14. </div>
  15. */
  16. </script>

styleタグで囲って疑似的にコメントアウト

HTML
Copy
  1. <style>
  2. /*
  3. <div class="article">
  4.   <!-- コンテント1始まり -->
  5.   <div class="content1">
  6.     <p>テキスト</p>
  7.   </div>
  8.   <!-- コンテント1終わり -->
  9.   <!-- コンテント2始まり -->
  10.   <div class="content2">
  11.     <p>テキスト</p>
  12.   </div>
  13.   <!-- コンテント2終わり -->
  14. </div>
  15. */
  16. </style>

HTML・CSS入門におすすめの1冊

アイコン画像

もみじ

Web製作未経験でも読みやすい構成で、初学者でも安心して学習することができます。

実践的な内容を学ぶことができ解説も丁寧で分かりやすく、基礎的な内容はこの1冊で学ぶことができます。

-Webデザイン
-