コメントについて

By | 2016年8月3日

前回のおさらい

前回は自己紹介のページを完成させました。

HTMLソースがかなり複雑になってきたので、どこでどんな処理を行っているかが分かりにくいですね。

コメント」を使うと、HTMLソース内にメモ書きができるので、処理の説明などを書いてソースをわかりやすくできます。

コメントの書き方

コメントは <!-- 〜 --> と書きます。

<!----> の間に書いた部分はHTMLとして認識されないので、どんなことを書いても大丈夫です。複数行書くこともできます。

前回作った自己紹介ページにコメントを使って説明を入れる例を以下に示します。

  <!DOCTYPE html>
  <html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>自己紹介のページ</title>
  </head>
  <body>

    <h1>私の自己紹介</h1>

    <!--
    自己紹介の項目は
      1. プロフィール画像
      2. 基本情報
      3. 好きなもの・嫌いなもの
      4. 一言
    -->

    <h2>プロフィール画像</h2>
    <img src="images/profile.png">

    <h2>基本情報</h2>

    <!-- リストを作る -->
    <ul>
      <li>18歳</li>
      <li>男性</li>
      <li>東京在住</li>
    </ul>

    <h2>好きなもの・嫌いなもの</h2>

    <!-- 4行4列のテーブル -->
    <table>
      <tr>
        <th>項目</th><th>好き</th><th>嫌い</th>
      </tr>
      <tr>
        <td>生き物</td><td>金魚</td><td>ムカデ</td>
      </tr>
      <tr>
        <td>食べ物</td><td>ステーキ</td><td>なすび</td>
      </tr>
      <tr>
        <td>飲み物</td><td>リンゴジュース</td><td>青汁</td>
      </tr>
      <tr>
        <td>季節</td><td>夏</td><td>冬</td>
      </tr>
    </table>

    <h2>一言</h2>

    <!-- ここをもう少し内容を充実させたいかも -->

    <p>はじめまして!<br>
    私は家野ペイジと言います。<br>
    私のことをみなさんに知っていただきたかったので、<br>
    このホームページを作りました。</p>

    <p>これから色々な情報を発信していきたいと考えています。<br>よろしくお願いします!</p>
  </body>
  </html>

ブラウザで見ても、表示される内容に全く変化がないことがわかると思います。

コメントを使った小技

今は使わないけれど、あとで使うかもしれないので消したくないタグがある場合、コメントを使うことで、HTMLソース内からは消さずにタグを一時的に無効化できます。

例を以下に示します。

  <!DOCTYPE html>
  <html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>コメントテスト</title>
  </head>
  <body>

    <h1>テーブル</h1>

    <table>
      <tr>
        <th>項目</th><th>好き</th><th>嫌い</th>
      </tr>
      <tr>
        <td>生き物</td><td>金魚</td><td>ムカデ</td>
      </tr>
      <tr>
        <td>食べ物</td><td>ステーキ</td><td>なすび</td>
      </tr>
      <tr>
        <td>飲み物</td><td>リンゴジュース</td><td>青汁</td>
      </tr>
      <!-- この行は使わないかもしれない
      <tr>
        <td>季節</td><td>夏</td><td>冬</td>
      </tr>
      -->
    </table>
  </body>
  </html>

コメントの注意点

コメントの中にコメントを書くことはできません。以下のように書いても、途中でコメントが終わってしまいます。

  <!DOCTYPE html>
  <html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>コメントテスト</title>
  </head>
  <body>
  <!--
    <!-- コメントの中のコメント -->
    これは表示されてしまう!
  -->
  </body>
  </html>

おさらい

今回登場したタグについておさらいをしましょう。

  • コメント <!-- 〜 --> を使ってHTMLソース内にメモ書きができます。
  • タグをコメントで囲めば、一時的にそのタグを無効化できます。
  • コメントの中にコメントを書くことはできません。

次回は他のページに移動する「リンク」に関して説明します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です