<!--(コメント)-->:ソースコードの中に画面には表示されないコメントを挿入する要素・HTMLタグの解説

取り扱い 標準仕様
カテゴリー なし
親にできる要素 なし
子にできる要素 なし
対応ブラウザ

<!--(コメント)-->の説明

<!-- -->は、ソースコード中に画面には直接表示されないコメントを残したり、一時的に隠しておきたい部分を非表示にする際に使用します。後者に関しては「コメントアウト」と呼ばれることもあります。

このタグはブラウザのレンダリングに影響を与えないので、<head><body>どちらの間でも使う事ができます。<!--を開始すると-->で終了するまで全ての文字列がコメントとして扱われます。改行やスペースをいくら記述しても構いませんが、閉じ忘れには気をつけましょう。

基本的には、ウェブページの閲覧者に対してではなくソースコードを読むエンジニアにとって有益な情報を管理することが目的となります。稀に、遊び心で本番環境にアスキーアートを残す文化も見られます

<!--(コメント)-->タグの特徴

  • この要素はブラウザのレンダリングに一切影響しません。
  • 画面には映りませんがソースコードを開けば誰でも見られる状態で表示されます。公開してはいけない情報をコメントで隠す行為は避けましょう。
  • 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。

<!--(コメント)-->要素に指定できる属性

なし
特にありません。

<!--(コメント)-->要素の使い方とサンプルコード

この要素の最も基本的な書き方は以下の通りです。コメントの開始位置と終了位置を含む全ての内容は、画面には表示されません。ただし、ソースコードとしては誰でも読める状態にあるので、公開したくない内容は書かないようにしましょう。


<!-- Comment -->

編集しやすいように目印を付けておく

ウェブページを作っている最中に後から編集を加えようとすると、意外と苦労する事があります。そのような場所にコメントを残しておくと更新が楽に行えます。


<div class="sample-block">
	<section class="section-1">
		<h2>Section 1</h2>
		<p>Body text text text.</p>
	</section>
	<!--/=== .section-1 ===-->

	<section class="section-2">
		<h2>Section 2</h2>
		<p>Body text text text.</p>
	</section>
	<!--/=== .section-2 ===-->
</div>

第三者向けに情報を埋め込む

オープンソースやブログテンプレートなど開発者に対する配慮で見かける手法です。ソースコードの扱い方や補足事項など、直接プログラムを触るであろう相手に対して有益な情報を与えます。稀に公開されたウェブページの中に、イースターエッグ(隠し要素)的なノリで面白いコメントが書かれていることもあります。


<article>
	<h1><!-- タイトルを入力して下さい --></h1>
	<p><!-- 投稿内容を挿入して下さい。 --></p>
	<p><!-- 必要な数だけ段落を追加できます。 --></p>
</div>

一時的に表示を隠しておく

例えば、翌日以降に告知する情報を事前に用意しておき、コメントアウトしておけば、更新時に<!-- -->を外すだけで、公開作業を終えることができます。ただしソースコードを見られても問題ない情報にのみ使える手段です。


<div>
	<h5>最新情報</h5>
	<ul>
		<!-- ▼ 公開済み ▼ -->
		<li>06/01:上半期ベスト10発表!</li>
		<li>05/15:商品追加しました</li>
		<li>05/01:一部値下げのお知らせ</li>
		<!-- ▼ 次回の更新内容 ▼ -->
		<!-- <li>06/05:セールの対象商品について</li> -->
		<!-- <li>06/08:スーパーセールの告知</li> -->
	</ul>
</div>

<comment>に関連するHTMLタグ

コメント・コメントアウト
<!-- --> ソースコードの中に画面には表示されないコメントを挿入する