【プログラミング】HTMLでコメントアウトを書く３つの方法と注意点について解説

おはこんばんにちは！ノボルです。

HTMLでコメントアウトを書きたいんだけど、どうやってするの？

サクッと解説するね！

そこで今回は、HTMLでコメントアウトを書く３つの方法と注意点について解説します！

コメントアウトを書くメリットはたくさんあるので、コーディングする際はぜひ活用することをオススメします！

こんな人に読んでほしい

・HTMLでコメントアウトを書く方法を知りたい人

・HTMLのコメントアウトの役割を知りたい人

・HTMLでコメントアウトを書く際の注意点を知りたい人

HTMLのコメントアウトとは？
HTMLのコメントアウトの３つの書き方
HTMLのコメントアウトを書く際の注意点
最後に

HTMLのコメントアウトとは？

コメントアウトとは、特殊な記号を用いて、記述されたコードが処理されないようにすることを指します。

よって、コメントアウトされたコードはブラウザ上で表示されません。

HTMLのコメントアウトには、以下の役割があります。

HTMLでコメントアウトする理由

・メモや注意書きを残すことで、複数人での開発やメンテナンスが効率よく行える

・コード量が多くなりがちなHTMLの入れ子構造が、わかりやすくなる

・変更前後のコードを残すことで、必要に応じて修正前の状態に戻すことができる

HTMLのコメントアウトの３つの書き方

さっそく、HTMLでコメントアウトを書く方法を解説していきます！

HTMLでコメントアウトを書く方法

コードを「<！-- 〜 -->」で囲む

これだけです！笑

1行コメントアウトする

コメントアウトしたい1行を「<！– 〜 –>」で囲むだけです。

See the Pen povpxzX by ZeroRequiem126 (@zerorequiem126) on CodePen.

コメントアウトした部分が、Resultでは表示されていないのがわかりますね。

複数行コメントアウトする

複数行をコメントアウトしたい場合でも、「<！– 〜 –>」で囲めばOKです。

See the Pen vYEdBGp by ZeroRequiem126 (@zerorequiem126) on CodePen.

コメントアウトの中にタグを入れる

コメントアウトの中にタグを入れることもできます。

See the Pen OJPQLRo by ZeroRequiem126 (@zerorequiem126) on CodePen.

特殊タグで囲むだけでコメントアウトできるんだね！

HTMLのコメントアウトを書く際の注意点

コメントアウトはソースコードから閲覧できる

コメントアウトにした部分はブラウザに表示されませんが、HTMLソースから閲覧することができます。

Chromeのデベロッパーツールなどを使って、WEBページのHTMLのソースコードを確認してみてください。「<！– 〜 –>」で囲まれた部分があると思います。

【初心者向け】Chromeの検証機能(デベロッパーツール)の使い方【プログラミング】

おはこんばんにちは！ノボルです。Google Chromeには、Web制作で大活躍するデベロッパーツール(検証機能)という便利なツールが備わっています。僕も、ウェブサイトを作るときやカッコいいサイトを見つけたときに、コードを確認たり一時的に...

なので、個人情報や公開前の情報などをコメントアウトで書かないようにしてください。

コメントアウトの中にコメントアウトを入れない

複数行やタグでもコメントアウトできると説明しましたが、コメントアウトの中にコメントアウトを入れることはできません。

See the Pen PowEyEX by ZeroRequiem126 (@zerorequiem126) on CodePen.

コメントアウトの中でさらにコメントアウトを書いた場合、上の例のように、中に入れたコメントアウトの「-->」の部分でコメントアウトが終わってしまいます。

ハイフン(-)は使わない方がいい

コメントアウトの中でハイフン「-」を使うのはやめた方がいいです。

というのも、ハイフンが連続すると、コメントアウトが終了したとブラウザが解釈する可能性があるからです。その結果、意図せずコメントアウトが終了してしまい、不要な情報がブラウザに表示されることがあります。

なので、コメントアウトにハイフンを使うのは避けて、代わりに「=」などを使うようにしましょう。