Loading...
HTMLにコメントを書こう

HTMLにコメントを書こう

公開
2018.05.12
更新
2018.10.29
  • 講座

  • HTML

本講座ではHTMLコメントについて学んでいきます。

HTMLコメントとは

body要素内に記述してもブラウザに表示されない文字列をHTMLコメントと呼びます。 ※


※ 単に「コメント」と呼ぶことが多いのですが、CSSやその他の言語にも同様にコメントが存在するため、ここでは明示的にHTMLコメントと呼んでいきます

HTMLコメントの書き方

HTMLのコメントは<!-- なにかコメント -->と書きます。

HTMLタグと同じ様に<>で囲み、!----でコメントの開始と終了を示します。
どちらもハイフン2つは共通で、開始側には最初にビックリマークが入ります。

コメントの左右には半角スペースを入れており、これが慣習となっています。

1行コメント

HTMLに1行コメントをする場合は、基本の書き方の通り

<!-- なにかコメント -->

と書きます。

複数行コメント

HTMLに複数行コメントをする場合は

<!--
  ここから
  ここまでが
  コメントです
-->

というように、コメントの開始と終了の記述にそれぞれ改行を入れ、中にコメントを書きます。
インデントしておくと読みやすくなるでしょう。

HTMLコメントのメリット

HTMLにコメントを書くメリットとして、以下が挙げられます。

  • 目印になる
  • メモになる
  • テストに使える

目印になる

HTMLが長くなってくると、目的のコードを探すのに時間がかかるようになってきます。
そんなときには

<!-- Gieerについて START -->
<div>
  <p>ほにゃらら</p>
  <p>ほにゃらら</p>
    ・
    ・
    ・
</div>
<!-- Gieerについて END -->
<!-- イア(er)について START -->
<div>
  <p>ほにゃらら</p>
  <p>ほにゃらら</p>
    ・
    ・
    ・
</div>
<!-- イア(er)について END -->
<!-- nkztについて START -->
<div>
  <p>ほにゃらら</p>
  <p>ほにゃらら</p>
    ・
    ・
    ・
</div>
<!-- nkztについて END -->
<div>

と、大きな塊の開始位置や終了位置にコメントをしておくことで見つけやすくなることがあります。

"START"や"END"のようにルールを決めておくと、ファイル内検索などで更に見つけやすくなるかもしれません。

メモになる

コーディングを途中で終えるときには

<ul>
  <!-- TODO: ナビゲーション作る -->
</ul>

このようにTODOコメント(※)を残しておくことで、次回迷わずにコーディングを再開することができます。

自分以外がHTMLに触れることがある場合は、何かを共有するのにも使えますね。


※ 後々やらなければならないことを示すのにTODOという言葉がよく使われます

テストに使える

一時的に要素を消して表示テストをしてみたい場合などは、ソースコードをまるごとコメントアウトしてしまうのも1つの手です。

<!--
<div>
  <h2>キャンペーン第1弾</h2>
  <p>ほにゃらら</p>
    ・
    ・
    ・
</div>
-->

HTMLコメントを書こう

私たちのHTMLにもコメントを書いてみましょう!

index.htmlのフォームの部分に以下のように1行コメントを書いてみます。

<h2>ご意見フォーム</h2>
<!-- ダミーフォーム -->
<form action="./index.html" method="post">

今は送信しても何も処理されないフォームなので、””ダミーフォーム"とコメントしました。

それでは、表示を確認してみます。

ご意見フォーム表示例

見出しの"ご意見フォーム"の下には何も表示されません。

続いてbody開始タグのすぐ下に複数行コメントを書いてみます。

<body>
  <!--
    これはGieerの講座で作成したHTMLです。
    実サービスには使えません。
  -->
  <h1>はじめてのHTML</h1>

表示を確認してみます。

ご意見フォーム表示例

これも表示されません。

はい、完璧です!

まとめ

本講座では

  • HTMLコメントとは
  • HTMLコメントの書き方

について学びました。

適切なコメントは自分にとってもチームメンバーにとっても助けになりますので、積極的に使っていきましょう!

最終コード

  • index.html
<!doctype html>
<html lang="ja">
<head>
  <title>はじめてのHTML</title>
  <link rel="icon" href="./favicon.ico">
  <style>
  h1 {
    color: red;
    font-size: 20px;
  }
  .outsideLink {
    color: orange;
  }
  </style>
</head>
<body>
  <!--
    これはGieerの講座で作成したHTMLです。
    実サービスには使えません。
  -->
  <h1>はじめてのHTML</h1>
  <a href="./link.html">はじめてのリンク</a>
  <a href="./task.html">HTML入門課題</a>
  <a href="https://www.google.co.jp/" target="_blank" class="outsideLink">Googleへ</a>
  <h2>ご意見フォーム</h2>
  <!-- ダミーフォーム -->
  <form action="./index.html" method="post">
    <div>
      お名前:<input type="text" name="name" required>
    </div>
    <div>
      ご意見:
      <textarea name="opinion" required></textarea>
    </div>
    <div>
      回答:
      <input type="radio" name="lottery" value="need">希望する
      <input type="radio" name="lottery" value="notNeed" checked>希望しない
    </div>
    <div>
      メールアドレス(回答を希望する方のみ):<input type="text" name="email">
    </div>
    <div>
      <button type="submit">送信する</button>
    </div>
  </form>
</body>
</html>
  • link.html
<!doctype html>
<html lang="ja">
<head>
  <title>はじめてのリンク</title>
  <link rel="icon" href="./favicon.ico">
</head>
<body>
  <h1>はじめてのリンク</h1>
  <a href="./index.html">はじめてのHTML</a>
  <a href="./task.html">HTML入門課題</a>
</body>
</html>
  • task.html
<!doctype html>
<html lang="ja">
<head>
  <title>HTML入門課題</title>
  <link rel="icon" href="./favicon.ico">
</head>
<body>
  <h1>HTML入門課題</h1>
  <div>このファイルはHTML入門課題で作成したものです。</div>
  <h2>ファイルリスト</h2>
  <ul>
    <li>
      <a href="./index.html">はじめてのHTML</a>
    </li>
    <li>
      <a href="./link.html">はじめてのリンク</a>
    </li>
  </ul>
</body>
</html>

次の記事

これまでの記事

  • ふむふむ・・・

イア

イア(er)
独学する美少女エンジニア

当サイトのナビゲーターであり、あなたと一緒に勉強する同志でもあります。
今はナビゲーターとして未熟のため、ひたすら勉強をさせています。

隠します!