HTMLでコメントを書く方法【初心者向け】

HTML初心者向けに、【コメントを書く(コメントアウトする)】する方法を解説した記事です。コメントアウトで書いた内容は出力結果に表示されることはありません。長いコードを書くときや、複数人でコードを書くときに便利です。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

HTMLについて今さら聞けない!という初心者のために、HTMLの基礎を紹介する記事です。

今回は、HTMLでコメントを書く(コメントアウトする)方法について解説します。

そもそも、HTMLの記述方法がわからない場合は、先に HTMLの書き方 の記事をご覧ください。

 

本記事は、TechAcademyのWebデザインオンラインブートキャンプのHTMLのカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

HTMLのコメントアウト

コメント(コメントアウト)とは、プログラミングなどでコードを読み返すときに内容をわかりやすくするための覚え書きです。コメントで囲まれた部分はプログラムではないとみなされ、コンピューター上で実行・反映されない部分となります。

 

たとえば、長いコードを書くときや複数人でコードを書くときに、コメントアウトで注意事項が添えられていれば、コードを探す手間が省けます。またプログラムの一部をコメントアウトすることによって、その動作をスキップさせることができるので、開発中にコードの確認を行いたいときにもよく使われます。

のちに自分でページをメンテナンスするときにも非常に有効になりますのでぜひ覚えておきましょう。

 

大石ゆかり

HTMLにコメントなんて必要なんですか?タグにわざわざコメントをつけたりしないですよね?

田島悠介

基本的にタグそのものにコメントを書くことはあまりないですね。

大石ゆかり

どんな時に使うんですか?

田島悠介

レイアウトのための段組みなど、複雑になりがちなところとかに使うんだよ。

大石ゆかり

なるほどー!

 

では実際に書いてみましょう。

HTMLにおけるコメントの書き方は下の通りです。

<!– ここにコメント –>

(※コメント前後の半角スペースはなくてもかまいません。)

html_comment

この例では、<!– ここにコメントを入れます –>といったコメント書いています。

この内容はWebブラウザで出力しても表示されないことがわかりますね。

書き方はこれだけなので、すぐに覚えてしまいましょう。

 

HTMLでコメントを書く場合の注意点

HTMLでコメントを書く場合、次のことに注意していただくと良いです。

次のどの場合も、HTML文法エラーになってしまいます。

1.コメントの中で-という記号を使用しない

コメントの中で-という記号を使用する習慣がついてしまうと、コメント中にもかかわらず、–>と記載するミスに繋がりかねません。

また、環境によっては、-が連続で記載されることを、コメント行の終了と認識してしまうこともあります。

2.コメントタグを記載した後、全角入力にする

コメントの内部では、全角日本語の入力を行うことが多いと思います。

そのため、コメントタグ自体も<!--という全角日本語入力した後、変換機能を利用して<!–という記載にされる方もいらっしゃいます。

しかし、<!–に変換し忘れた場合は、<!--という全角日本語のまま、HTML上に記載されることになります。

 

今回はHTMLでコメントを書く方法についてご紹介しました。

HTMLについてさらに学びたい場合は、HTMLでiframeを使う方法も合わせてご覧ください。

 

大石ゆかり

コメントの書き方はHTMLと仲間のCSSでも同じですか?

田島悠介

そういえば、HTMLだけコメントの書き方が違うね。

大石ゆかり

他ではどうなっていますか?

田島悠介

CSSは、/* */を使うね。他のプログラミング言語でも使えます。プログラミング言語の場合は、もうひとつ1行コメント専用の//もあります。

また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。

この記事を監修してくれた方

中本賢吾(なかもとけんご)
アジマッチ有限会社 代表取締役社長

開発実績:PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。

その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ!を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。