3.5 コメント文

HTMLの記述が長くなってくると、ソースコードのどこで何を記述しているのか分かりづらくなったり、数日後に見直したときに何を記載した内容なのか忘れてしまうことがあります。このような場合に有効なのが、 コメントです。コメントとは、ソースコード内に書き込むことのできる解説文やメモ書きのことで、ブラウザの表示には影響しません。(コメントとして記載したことはブラウザには表示されません)コメントをつける方法の書き方について学習していきましょう。

コメント文の記述例

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

コメントは、「<!–」と「–>」の間に記述します。ここに記述したことはコメントとして扱われ、ブラウザには表示されません。また、コメントには小なり記号(<)や大なり記号(>)も使用できたり、複数行にまたがるコメントも残すことができます。

複数行コメント文の記述例

<!
--

コメントには<や>も使えます。
改行もできます。

--
>

コメント文

1. コメントを記述する

①ソース・フォルダー :webpage/ch03
②ファイル名     :comment.html

➢ comment.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>コメントの記述</title>
    </head>
    <body>
        <div class="container">
            <!-- ヘッダーここから -->
            <div id="header">
                <h1 id="logo">コメントの記述</h1>
                <ul>
                    <li>メニュー1</li>
                    <li>メニュー2</li>
                    <li>メニュー3</li>
                </ul>
            </div>
            <!-- ヘッダーここまで -->
            <!-- メインここから -->
            <div id="main">
                <p>メインの内容</p>
            </div>
            <!-- メインここまで -->
            <!-- フッターここから -->
            <div id="footer">
                <p>&copy; Copyright Comment.co All rights reserved.</p>
            </div>
            <!-- フッターここまで -->
        </div>
    </body>
</html>

2. ブラウザで確認する

ブラウザで表示を確認します。ソースコードに記述したコメント文が、ブラウザでは表示されていないことがわかります。

コメントを残す作業は、WEBページの作成においてとても重要です。最初のうちはシンプルなソースコードを書くことが多いので、コメントの記述を面倒に感じることもあると思いますが、できるだけコメントを残すようにしてください。ソースコードの内容が複雑になってきたり、他の人と共同でWEB制作を行う際などにはコメントがとても重要になります。