コメントの書き方

このレッスンでは、HTMLとCSSにおけるコメントの書き方を学び、あとから読み返しても分かりやすいコードを書けるようになることを目標にします。「HTML コメントアウト 書き方」で調べている方向けです。

コメントは、ページの表示には影響しない「人間向けのメモ書き」です。HTMLでは<!-- -->、CSSでは/* */で囲むとコメントになります。あとで見返す自分や、一緒に作業する仲間への説明として役立ちます。

サンプルコードでは、HTMLのコメントでセクションの区切りを示し、CSSのコメントでスタイルの意図を書いています。コメントアウトされた<p>タグが実際には表示されていない様子から、コメントが処理をスキップさせる仕組みであることも確認できます。

初心者がよくつまずくのが、HTMLとCSSでコメントの書き方が違う点です。HTMLの<!-- -->をCSSの中で使ったり、逆にCSSの/* */をHTMLの中で使ったりすると、正しくコメントとして認識されません。それぞれの言語に応じた書き方を覚えておく必要があります。

「このセクションは何のためにあるか」「このスタイルはなぜこの値なのか」を書き残しておくと、コードが長くなっても迷わず把握できます。一時的にコードを無効化したいとき(コメントアウト)にも使われる、実務でも欠かせない書き方です。