HTMLでコメントアウトを入れ子で書きたい
みなさんはHTMLでコメントアウトをする際にはコメントアウトの記号である<!-- コメント-->を使って、書いているかと思います。
しかし時にコメントアウトしているHTMLブロックを更にコメントアウトをして入れ子の形になる場合が少し厄介です。
例えば下記の例です。
コメントアウトが入れ子.html
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- コメント親
<div>
<!-- コメント子供 -->
<p>コメントアウトした段落</p>
</div>
-->
</body>
</html>結果
コメントアウトしているブロックの中に、更にコメントアウトしている行があると、コメントの閉じがおかしな位置にあることになり、コメントアウトした段落とコメントアウトの記号が結果のHTML上に表示されてしまいます。
今回の記事ではこのHTMLのコメントアウトの入れ子を実現するための方法をご紹介していきます。
HTMLでコメントアウトを入れ子で書く方法
styleタグを使った書き方
styleタグと、styleタグでのコメントアウト（CSSのコメントアウト）を使う事で、HTMLのコメントアウトが中にある場合でも、全体でコメントアウト出来ます。
styleタグでのコメントアウト
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<style>/*
<div>
<!-- コメント子供 -->
<p>コメントアウトした段落</p>
</div>
*/</style>
</body>
</html>結果
scriptタグを使ったコメントアウト
JavaScriptのコメントアウトを使った場合でもstyleタグでのコメントアウトと同様に、中にHTMLのコメントアウトがあろうと無かろうと、全体をコメントアウトすることが出来ます。
scriptタグを使ったコメントアウト.html
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>/*
<div>
<!-- コメント子供 -->
<p>コメントアウトした段落</p>
</div>
*/</script>
</body>
</html>結果