「htmlコメントアウト」とは、htmlのソースコードの一部分を実効性の無いコメントとして扱うように指定するものです。その多くは、作成者の注釈などを書きとめておくメモのようなもので、ブラウザが画面表示する際に除外されます。
「htmlコメントアウト」のコード
開始位置に「<--!
」を、終了位置に「-->
」をそれぞれ記述します。
htmlには、<div>、<p>、<span>など、入れ子が可能なタグが多くありますが、「htmlコメントアウト」のコードの入れ子はできません。
● 入れ子ではない「htmlコメントアウト」のサンプル(1)
次の薄いグレーの背景のボックスがサンプル(1)です。テキストの(b)部分に「ここはコメント」を記述しています(非表示になります)。
(a)サンプルテキスト sample text サンプルテキスト sample text
(b)サンプルテキスト sample text サンプルテキスト sample text
(c)サンプルテキスト sample text サンプルテキスト sample text
サンプル(1)のソースコード
<p>
(a)サンプルテキスト sample text サンプルテキスト sample text<br>
(b)サンプルテキスト sample text<!-- ここはコメント --> サンプルテキスト sample text<br>
(c)サンプルテキスト sample text サンプルテキスト sample text
</p>
● 入れ子にした「htmlコメントアウト」のサンプル(2)
次の薄いグレーの背景のボックスがサンプル(2)です。サンプル(1)と同じコードを使い、更にpタグ内のすべてに対してコメントアウトを追加した入れ子状態にした結果です。
サンプルテキスト sample text
(c)サンプルテキスト sample text サンプルテキスト sample text -->
サンプル(2)のソースコード
<p>
<!-- (a)サンプルテキスト sample text サンプルテキスト sample text<br>
(b)サンプルテキスト sample text<!-- ここはコメント --> サンプルテキスト sample text<br>
(c)サンプルテキスト sample text サンプルテキスト sample text -->
</p>
● 入れ子にした今回のケースの結論
最初の開始コード「<--!
」は、最初に出会う終了コード「-->
」までの間にある重複した2番目の開始コードを無視するため、最初の終了コードで、コメントアウトを終了し、最初の終了コードの後ろは、2番目の終了コードも(テキストとして)含めてすべて表示されてしまいます。これがタグをまたいで起きた場合は、単なるレイアウト崩れに留まらず、文法エラーになるかもしれません。