HTML
CSS
JavaScript
jQuery

[HTML]コメントタグを含むコードをコメントアウトする方法(二重コメントアウト)

この記事で書くこと

HTMLのコメントタグ <!-- --> を含むコードをコメントアウトする方法

方法

<script>/* */</script> でコメントアウトしたい箇所を囲む。

コード例

sample.html
<html>
 <body>
  <!-- BOX1 -->
  <div id="BOX1">BOX1</div>

  <!-- BOX2 -->
  <div id="BOX2">BOX2</div>

  <!-- BOX3 -->
  <div id="BOX3">BOX3</div>

  <!-- BOX4 -->
  <div id="BOX4">BOX4</div>
 </body>
</html>
sample.css
div{
  width:100px;
  height:100px;
  border: 2px solid black;
  float: left;
  font-weight: bold;
  margin-right: 5px;
}

#BOX1{
  background-color: #3344CC;
}

#BOX2{
  background-color: #CC4433;
}

#BOX3{
  background-color: #33CC44;
}

#BOX4{
  background-color: #CCCCCC;
}

ブラウザで確認

スクリーンショット 2018-09-19 19.49.43.png

BOX2とBOX3をコメントアウト

sample.html
<html>
 <body>
  <!-- BOX1 -->
  <div id="BOX1">BOX1</div>

    <script>/*
  <!-- BOX2 -->
  <div id="BOX2">BOX2</div>

  <!-- BOX3 -->
  <div id="BOX3">BOX3</div>
  */</script>

  <!-- BOX4 -->
  <div id="BOX4">BOX4</div>
 </body>
</html>

改めてブラウザで確認

BOX2およびBOX3がコメントアウトされていることが確認できる。
スクリーンショット 2018-09-19 19.54.25.png

この記事を書くきっかけ

Javaを使った業務アプリを開発中に、コメントを含んだコードを削除するとどんな影響が出るか簡単に確認したいと思ったため。