コードを書いていると、「ここ何のためだっけ？」と後で自分でも忘れてしまうことがあります。そんなときのために、HTMLには画面に出ないメモを書く仕組みがあります。それがコメントです。
書いてみよう
<!-- ここからじこしょうかいエリア -->
<p>おえかきがすきな、しまちゃんです。</p>
<!-- ここまで -->このページをブラウザで開いても、見えるのは「おえかきがすきな、しまちゃんです。」だけ。<!-- --> で囲んだ部分は画面に出ません。でもコードを開けばちゃんと残っている——これがコメントです。
どんなときに使う？
コメントの出番は、たとえばこんなとき。
| 使いみち | どんなとき |
|---|---|
| メモを残す | 「ここは後で画像に差し替える」など、未来の自分へのひとこと |
| 区切りをつける | 「ここからヘッダー」のように、長いコードの目印にする |
| 一時的に消す | 消したくないけど今は表示したくないタグを、囲って“お休み”させる |
3つめの「お休みさせる」は便利です。
<!-- <p>じゅんびちゅうのメッセージ</p> -->タグごと <!-- --> で囲むと、消さずに非表示にできます。あとで囲みを外せば、また表示されます。このように「コメントで囲んで無効にする」ことを、プログラミングの世界ではコメントアウトと呼びます。「一回消してみたいけど、戻せなくなったらこわい」——そんなとき、削除のかわりにコメントアウトしておけば、いつでも元にもどせて安心です。
ショートカットで一発
コメントは、毎回 <!-- と --> を手で打たなくても大丈夫。VSCodeなら、コメントにしたい行を選んで Ctrl + /（Macは command + /）を押すだけで、行がまるごと <!-- --> で囲まれます。もう一度押せば、囲みが外れて元どおり。「お休みさせる↔もどす」の切り替えが一瞬でできるので、ぜひ覚えておきましょう。
このレッスンのまとめ
- コメントは
<!--と-->ではさむ - ブラウザには表示されない、コードの中のメモ
- 目印にしたり、タグを一時的にお休みさせたりできる
コメントは、未来の自分への手紙。ていねいに残しておくと、あとで自分がいちばん助かります。