ホーム(記事一覧)へ

html コメントアウトの書き方と応用と注意点

<!--○○-->

↑結論コレです。

 

お時間のあるかたはもう少しお付き合いください。

htmlでのコメントアウトの書き方と応用と注意点を説明します。

コメントアウトとは

コメントアウトとは「ソースにはあるが、ブラウザには表示されない状態にすること」です。

この記事ではhtmlでのコメントアウト方法を説明します。

css,javascript,phpなど言語が変わるとコメントアウト方法が変わりますので気を付けてください。

htmlのコメントアウト方法

コメントアウトしたい範囲を「<!--」と「-->」で挟みます。一行でも複数行でも方法は同じです。

例1.文字だけコメントアウト

コメントアウトは文章中にも使えます。

ソ-ス

<p>あい<!--うえおかきく-->けこ</p>

結果

あいけこ

例2.タグごとコメントアウト

htmlタグもコメントアウトできます。

ソ-ス

<p>前の文章</p>
<!--<p>あいうえおかきくけこ</p>-->
<p>後の文章</p>

結果

前の文章

後の文章

例3.タグごとコメントアウト(元のタグを利用)

タグごとコメントアウトするとき元のタグを利用して「!--」と「--」だけ記述することもできます。「<」「>」を書く手間を省いたりソースコードを少しでも簡略化することができます。

ソ-ス

<p>前の文章</p>
<!--p>あいうえおかきくけこ</p-->
<p>後の文章</p>

結果

前の文章

後の文章

例4.複数行コメントアウト

htmlのコメントアウトは複数行でも同じ方法です。

ソ-ス

<p>前の文章</p>
<!--div>
<div>あいうえおかきくけこ</div>
</div-->
<p>後の文章</p>

結果

前の文章

後の文章

コメントアウトの使用例(応用)

コメントアウトを使う場面は主に以下のような場合です。

メモとして

自分だけまたは開発チームだけわかるメモとして使うことがあります。

<!--ここからheader-->
<header>
略
</header>
<!--ここまでheader-->

バックアップとして

コメントアウトを使うことで一時的に削除と同じ扱いができます。一方でコメントアウトを外すことで簡単に元に戻すこともできます。

この特性を利用して、今は削除するが後で元に戻すもの(またはその可能性があるもの)に対しコメントアウトを使うことがあります。

開発時の調整で

ホームページの開発時・作成時、一応作ったがいらなくなったソースに対してや、htmlが崩れて試しにソースを削除するときなどにコメントアウトを使うことがあります。

コメントアウト注意点

開始タグと閉じタグを含める

タグごとコメントアウトをするときは開始タグと閉じタグを含むようにしましょう。

一方を含めないと崩れてしまうことがあります。

失敗例

<div>
     <!--div>テキスト</div>
</div-->

成功例

<!--div>
     <div>テキスト</div>
</div-->

コメントアウトの入れ子はできない

コメントアウトにコメントウトを含めることはできません。この場合「-->」のあとのソースが表示されてしまいます。

コメントアウトの前後でそれぞれコメントアウトする必要があります。

失敗例

<div>1のdiv</div>
<!--<div>2のdiv</div>
<!--メモ-->
<div>3のdiv</div>-->
<div>4のdiv</div>
1のdiv
3のdiv
-->
4のdiv

成功例

<div>1のdiv</div>
<!--<div>2のdiv</div>-->
<!--メモ-->
<!--<div>3のdiv</div>-->
<div>4のdiv</div>
1のdiv
4のdiv

ソースから見ることができる

コメントアウトされた内容は通常見ることはできませんが、ソース表示にすることで見ることができます。

ソース表示は「Ctrl+U」や右クリックから「ページのソースを表示」で見ることができます。※ブラウザによります。

つまり絶対にホームページに載せられない情報(公開前情報・個人情報など)はコメントアウトではなく、しっかり削除しましょう。

まとめ

htmlのコメントアウト方法

「<!--」と「-->」で挟みます。

コメントアウトの使用例

  • メモとして
  • バックアップとして
  • 開発時の調整で

コメントアウト注意点

  • 開始タグと閉じタグを含める
    崩れないように注意しましょう。
  • コメントアウトの入れ子はできない
    前後をそれぞれコメントアウトしましょう。
  • ソースから見ることができる
    重要な情報はコメントアウトではなくしっかり削除しましょう。

 

以上、htmlのコメントアウト書き方と応用と注意点でした。

関連記事