サーチ…


前書き

他のプログラミング、マークアップ、およびマークダウン言語と同様に、HTMLのコメントは、ユーザーインターフェイスに影響を与えることなく、開発者固有の情報を他の開発者に提供します。ただし、他の言語とは異なり、HTMLコメントは、Internet Explorer専用のHTML要素を指定するために使用できます。このトピックでは、HTMLコメントとその機能アプリケーションを記述する方法について説明します。

構文

  • <!-- Comment text -->

備考

<!--で始まり、 -->終わるものはコメントです。コメントに隣接する2つのダッシュ( -- )を含めることはできません。また、正確に2つのダッシュで終わらなければなりません(つまり、 --->が間違っています)。

コメントはウェブページには表示されず、CSSでスタイル設定することはできません。ページの開発者は、HTML内に注釈をつけることや、開発中に特定のコンテンツを隠すために使用することができます。

ダイナミックまたはインタラクティブなページの場合、コンテンツを非表示にして表示するには、HTMLコメントではなくJavaScriptとCSSを使用します。

JavaScriptを使用してHTMLコメントノードのコンテンツを取得することができ、これらのノードをドキュメントから動的に作成、追加、削除できますが、ページの表示方法には影響しません。

HTMLコメントはページのソースコードの一部であるため、残りのページと共にブラウザにダウンロードされます。ソースコードは、通常、ウェブブラウザのメニューオプション「ソースの表示」または「ページソースの表示」を使用して表示できます。

コメントの作成

HTMLコメントを使用して、自分自身や他の開発者に、コード内の特定のポイントについてノートを残すことができます。 <!--で始まり、 -->で終わることができます:

<!-- I'm an HTML comment! -->

それらは他のコンテンツ内にインラインで組み込むことができます:

<h1>This part will be displayed <!-- while this will not be displayed -->.</h1>

また、複数の行にまたがって詳細情報を提供することもできます。

<!-- This is a multiline HTML comment.
  Whatever is in here will not be rendered by the browser.
  You can "comment out" entire sections of HTML code.
-->

ただし、次のように別のHTMLタグ内に表示することはできません

<h1 <!-- testAttribute="something" -->>This will not work</h1>

これは、無効なHTMLが生成さなど全体<h1 <!-- testAttribute="something" -->ブロックは、単一の開始タグと考えられるh1シングルに続いて、その中に含まれる他のいくつかの無効な情報、と>何もしない閉じ括弧。

XMLまたはSGMLとHTMLを解析しようとするツールとの互換性のために、あなたのコメントのボディは、2つのダッシュを含めることはできません--

Internet Explorerの条件付きコメント

条件付きコメントは、異なるバージョンのMicrosoft Internet Explorerのコードをカスタマイズするために使用できます。たとえば、異なるHTMLクラス、スクリプトタグ、またはスタイルシートを提供することができます。条件付きコメントは、Internet Explorerバージョン5から9でサポートされています。Internet Explorerの以前のバージョンと新しいバージョン、およびIE以外のすべてのブラウザは、「下位レベル」とみなされ、条件付きコメントを通常のHTMLコメントとして扱います。

下レベル隠し

下位レベルで隠されたコメントは、通常のHTMLコメントのように見えるコンテンツ全体をカプセル化することによって機能します。 IE5から9まではそれを条件付きコメントとして読んで、それに応じてコンテンツを非表示または表示します。他のブラウザでは、コンテンツは非表示になります。

<!--[if IE]>
  Revealed in IE 5 through 9. Commented out and hidden in all other browsers.
<![endif]-->

<!--[if lt IE 8]>
  Revealed only in specified versions of IE 5-9 (here, IE less than 8).
<![endif]-->

<!--[if !IE]>
  Revealed in no browsers. Equivalent to a regular HTML comment.
<![endif]-->

<!--
  For purposes of comparison, this is a regular HTML comment.
-->

下レベルにさらされた

これらは下位レベルの非表示のコメントとは若干異なります。通常のコメント構文内には条件付きコメントのみが含まれています。条件付きコメントをサポートしていないブラウザは、単にそれらを無視し、それらの間の残りのコンテンツを表示します。

<!--[if IE]>-->
  The HTML inside this comment is revealed in IE 5-9, and in all other browsers.
<!--<![endif]-->

<!--[if IE 9]>-->
  This is revealed in specified versions of IE 5-9, and in all other browsers.
<!--<![endif]-->

<!--[if !IE]>-->
  This is not revealed in IE 5-9. It's still revealed in other browsers.
<!--<![endif]-->

インライン要素間の空白をコメントアウトする

インライン表示要素(通常はspanaなど)は、ドキュメント内に前後に1つの空白文字を含みます。マークアップ(読みにくい)や意図しない空白(書式に影響する)の非常に長い行を避けるために、空白をコメントアウトすることができます。

<!-- Use an HTML comment to nullify the newline character below: -->
<a href="#">I hope there will be no extra whitespace after this!</a><!--
--><button>Foo</button>

インライン要素の間にコメントを入れずに試してみると、それらの間にスペースが1つあります。時には、スペース文字をピックアップすることが望まれる。

コード例:

<!-- Use an HTML comment to nullify the newline character below: -->
<a href="#">I hope there will be no extra whitespace after this!</a><!--
--><button>Foo</button>
<hr>
<!-- Without it, you can notice a small formatting difference: -->
<a href="#">I hope there will be no extra whitespace after this!</a>
<button>Foo</button>

出力:

ここに画像の説明を入力



Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow