Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTML5
入門編

トップページ
HTML5入門編 - コメントアウトについて

コメントアウトについて

皆さま、いかがお過ごしでしょうか。

続きましてタグとはちょっと離れたところとなりますが『コメント』と『コメントアウト』というものについて解説していきます。

コメント機能はHTML以外でもほぼ全てのプログラミング言語に存在しており、ソースコード中にメモやメッセージを書いたり一時的にソースを無効化したりするのが主な『コメント』の使い方です。

そして『コメントアウト』とは任意の箇所をコメント化することを指します。

HTMLでは『』で囲まれた部分が『コメント』となります。『コメント』部分はブラウザに表示されずなかったものとして処理されます。

ではコメントを実際に記述していきたいと思いますので前回の記事の最後の基本的なHTMLソースを用意してください。以下のソースですね。ダウンロードしたい方はこちらからどぞ。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

</body>
</html>

まずはメモ書きとして使用してみます。以下のように記述してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<!-- メインコンテンツ ここから -->

<!-- メインコンテンツ ここまで -->

<!-- 追加分 ここから -->

<!-- 追加分 ここまで -->

</body>
</html>

記述が終わったらブラウザで開いて確認してみましょう。コメント以外の記述をbodyタグの中に記述していないので、真っ白なページが表示されていれば大成功です。上記の場合のコメント部分は以下になりますね。

<!-- メインコンテンツ ここから -->

<!-- メインコンテンツ ここまで -->

<!-- 追加分 ここから -->

<!-- 追加分 ここまで -->

コメントはブラウザで表示されませんので上記のようにメモやメッセージを残すことができます。自分以外の人にHTMLの構造などを分かりやすく伝えたり、更新するべき部分を指示したりと使い方は様々です。

ちなみにコメントは以下のように複数行にまたがっても問題ありません。

<!--
メインコンテンツ ここから
最終更新日 １２月７日
-->

その他の使い方として、まだブラウザに表示させたくはないがHTMLソースは先に記述しておきたい、といった時にもコメントが大活躍します。

以下の例をみてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<!-- <p>少年サッカー関東大会 「快挙!! 決勝進出しました!!ご声援誠にありがとうございます！今後とも変わらぬご声援をよろしくお願い申し上げます！」</p> -->
<!-- <p>少年サッカー関東大会 「結果は惜しくも３位となりました。たくさんのご声援、誠にありがとうございました！」</p> -->

</body>
</html>

このようにまだ結果が分からない状態でもHTMLソースだけ先に仕込むことができますね。結果が分かり次第、コメント部分を元に戻せば作業は完了となり前倒しで作業を進めることができます。ちなみに上記で使っている『<p>』と『</p>』はpタグというものです。これは段落を意味するタグで、先の記事で解説していきます。

このようにコメントはとても便利な機能です。使うことが非常に多いのでバッチリ覚えてしまいましょう。

では最後にコメント使用時の注意点について確認しておきます。

まずはコメントの中にコメントを入れないことですね。以下のような形になります。

<!-- <!-- コメントの中にコメント --> -->

このような場合でコメント部分がどのような扱いになるかは閲覧しているブラウザによって差異があります。全てがコメント扱いになる場合もあれば、最初の『-->』でコメントが終了とみなされ、残りの『-->』が表示されてしまったりと挙動が安定しません。

というわけでコメントの中にコメントを入れるのはちょっと危険なので避けるようにしましょう。

続いてコメントの中で『-』(ハイフン)を連続使用しないことです。

<!--------コメント------->

こういう形ですね、これは避けましょう。

HTML4.01の仕様書を確認してみると『コメントの中に連続したハイフンを使用してはいけません。』となっています。古いHTMLの仕様書でもコメント内での連続したハイフンは非推薦となっています。

現行のほとんどのブラウザでは問題なくコメント扱いになるようですが、危うきに近寄らずというわけで避けたほうが無難です。

それと、コメントアウトにしたところでその部分が絶対に閲覧されないというわけではありません。

現行の全てのブラウザでは表示しているウェブサイトのHTMLソースをコメント部分を含めてそのまま表示することが可能です。今閲覧しているブラウザでページを右クリックすると『ページのソースを表示』というような項目があると思います。それをクリックしてみてください。閲覧しているページのコメント部分を含めたHTMLソースが閲覧できると思います。

下記のように公開前の情報や社外秘の情報などをコメントで書かないように気をつけてください。このような事故は大手企業さんでもたまにやらかしています。

<p>更新情報</p>
<!-- ※エンジニアさんへ 以下は1/7に公開してください。 -->
<!-- <p>1/5 ドラゴンオブファンタジー12の発売日が3/5に決定しました！詳細はこちらから</p> -->
<p>12/7 スタッフ製作日記　更新しました。</p>
<p>11/16 キャラクター詳細　更新しました。</p>

というわけでコメントの使い方と注意点は以上となります。

基本的に注意点を守りつつ『』で囲えばいいだけなので技術的にそれほど難しくないかと思います。

次の記事ではウェブサイトの『タイトル』についてやっていきたいと思います。ちょっと前の記事でもちょろりとでてきましたね。というわけでこの辺で。またお会いしましょう。

この記事は桜舞が執筆致しました。