今回は、HTMLの「コメント」について解説します。
そもそもコメントとは何かから、必要性、書き方まで全部解説します。
そもそもコメントって何？
HTMLの「コメント」は、画面には表示されない、プログラマー用のメモのようなものです。
システムには何も影響がないけど、ソースコードの中にメモが残せるイメージになります。
コードの中に自分用のメモや、他の人への説明を書き残すときに便利です。
コメントの基本の書き方
<!-- ここがコメントです --><!--で始めて、-->で終わります。- この中に書いた内容は、ブラウザ上には表示されません。
コメントの活用方法
1. コードの説明を書く
将来の自分のために、コードに対してメモを残しておくのに使えます。
（自分で書いたコードなのに、意外と何を書いたか思い出せなくなります…）
<!-- このボタンは「送信」用です -->
<button>送信</button>ポイント：どの部分のコードなのかをわかりやすくするために、ボタンの用途をメモとして残しています。
2. 一時的にコードを無効化する
コードを消したくはないけど、無効にしたいときにも使えます。
<!-- <p>この文章は一時的に非表示にしています。</p> -->
<p>こちらの文章は表示されます。</p>ポイント：テストや確認のために、特定のコードを一時的に無効にすることができます。
3. TODOリストを残す
<!-- TODO: ここに新しいバナー画像を追加する予定 -->ポイント：後で作業する内容を忘れないようにメモしておくのに便利です。
4. チーム作業でのメモとして活用する
チームでコードを書く場合、コメントは他のメンバーが理解しやすいように説明を書くのに役立ちます。
<!-- この部分はAPIから取得したデータを表示しています。変更する場合はbackendチームと確認してください -->
<div id="data-container"></div>ポイント：チームで作業する際、なぜこのコードが必要なのか、注意すべきポイントなどをコメントに残すことで、スムーズなコミュニケーションが可能になります。
注意点
- コメントの中に
--を使うのは避けましょう。HTMLのルールとして正しく動作しないことがあります。 - コメントの書きすぎでコードが読みにくくならないよう、必要な場所だけに絞ると良いでしょう。
コピペで試してみよう！
最後に、実際にコメントを使ったHTMLコードを紹介します。
コピーして貼り付けるだけで、どんな風に表示されるか確認できます！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>コメントのサンプル</title>
</head>
<body>
<!-- ヘッダー部分 -->
<h1>私のウェブサイトへようこそ！</h1>
<!-- ここは自己紹介のセクションです -->
<p>こんにちは！これはサンプルページです。</p>
<!-- TODO: ここに新しいセクションを追加予定 -->
<!-- 一時的に非表示中のコード -->
<!-- <p>この文章は表示されません。</p> -->
<!-- このボタンは「お問い合わせ」用です -->
<button>お問い合わせ</button>
</body>
</html>ポイント：自分でコメントを書き換えてみたり、新しく追加してみたりすると、より理解が深まります！
確認問題
Q1. HTMLのコメントとして正しい書き方はどれ？
/* これはコメントです */# これはコメントです<!-- これはコメントです -->
正解は… 3です！
Q2. コメントの主な使い方として正しくないのは？
- コードの説明を書く
- コードを一時的に無効化する
- ブラウザ上で特別なデザインを表示する
正解は… 1と2です！
まとめ
- コメントはコードのメモ書きや説明に便利！
<!-- コメント内容 -->で囲んで書く。- コードの説明、一時的な無効化、TODOメモ、チーム作業での情報共有に活用しよう。
- 適切な場所で簡潔に書くことで、コードが見やすくなります。
コメントを残す