Posted at

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