<!-- --> HTMLでコメントアウト

catnose catnose · に最終更新

HTMLのコード内にコメントを書くときには<!-- ここにコメント -->という書き方をします。

<div class="example">
  <p>これは文章です</p>
  <!--これはコメントです-->
</div>

👆コメントが書かれた部分は、ブラウザには表示されません。
そのため後から自分や共同作業者が見返したときのヒントとなるような文章を書き残しておくことができます。

目次
このページの目次

複数行のコメントを書く

<p>これは文章です</p>
<!--
複数行のコメントを
書くこともできます
-->

👆複数行にしたい場合は、<!--と-->の中で単純に改行します。

タグごとコメントアウト

<p>これは文章です</p>
<!--
<div class="example">
  <p>これは文章です</p>
  <p>このタグを消す</p>
</div>
-->
👆HTMLタグを囲ってコメントにすることもできます。「一旦タグを消したいが、すぐに元に戻すかもしれない」という場合に便利です。 このようにコードが処理されないようにすることを「コメントアウト」と言います。

‍🙅コメントの入れ子はできない

<!--
コメントの中に<!--コメント-->を入れる
-->

👆コメントの中にコメントを入れることはできません。-->が出てきた時点でコメントが終わってしまうからです。

HTML内のインラインCSSではCSSのコメントの書き方を

HTMLファイルであってもstyleタグなどに書かれたCSSに対しては、HTMLのコメントアウトは使えません。CSSのコメントアウト/* */を使うようにしましょう。

関連するページを読む
CSSでコメントを書く
開く
example.html styleタグ内のコメント
<!DOCTYPE html>
<html>
  <head>
    <!--htmlのコメントアウト-->
    <meta charset="utf-8">
    <style>
      /* CSSのコメントアウト */
      h1 {
        color: blue;
      }
    </style>
  </head>
  <body>略</body>
</html>

HTMLのコメントはソースコードから見られる可能性がある

ソースコードの中のコメントをブラウザは無視するため、画面には表示されません。
しかし、ソースコード自体からコメントが消えるわけではないので、ある程度ウェブに詳しい人であれば簡単にコメントを見ることができます。[1]

コメントをソースコードに表示させないようにするには

HTMLファイルに書かれたコメントを完全に閲覧不可にすることは基本的にはできません。
ただし、PHPやRuby、Pythonなどのようにサーバーサイドで動く言語によりHTMLを生成しているのであれば、それらの言語でコメントアウトをすれば、見知らぬ誰かがコメントを見ることはできなくなります。

<p>文章</p>
<?php //この部分はソースコードにも表示されない ?>

コメントは簡潔に

HTMLのページデータはコメントも含めて、サーバーからユーザーが見る手元のパソコン（ブラウザ）に送られます。あまりにも長いコメントが書かれていると、その分送られるデータサイズが大きくなってしまいます。

また、長すぎるコメントはファイルの可読性を損なうため避けるべきです。

コメントアウトとSEOは関係ない

検索エンジンはコメントアウトを無視します。そのため、コメント内に重要なキーワードを入れても全く効果はありません。

コメントの便利な書き方

<div class="example1">
  <div class="example2">
    <div class="example3">
      Hello
    </div>
  </div>
</div><!-- /.example1 -->

デザインにこだわっているうちに、ついdivタグの数が増えてしまい、</div>がどこに対応するのか分かりづらくなってしまうことがあります。そんなときに「どのタグに対応する閉じタグなのか」をコメントで書いておくと分かりやすくなります。

書き方の例

  • <!-- /.example1 -->：class="example1"に対する閉じタグを表す
  • <!-- /#example1 -->：id="example1"に対する閉じタグを表す

コメントアウトのショートカットキー

コードを書くときには、コメントアウトを頻繁に行う方もいると思います。多くのエディターでは、以下のショートカットキーでコメントアウトしてくれます。

  • Windows：Ctrl + /
  • Mac：⌘ + /

コメントアウトしたい部分を選択したうえで行う。基本的にHTML、CSS、JavaScriptなどで共通。

  1. 例えばGoogle Chromeの場合、ページのどこかを右クリックして「ページのソースを表示」を選択するとソースコードが表示されます。
    ↩︎

HTMLの記事をもっと見る