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

プログラミング

おはこんばんにちは!ノボル(@Veritas40835638)です。

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

サクッと解説するね!


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

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

こんな人に読んでほしい

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

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

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

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

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

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

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

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

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

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

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


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

さっそく、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のソースコードを確認してみてください。「<!– 〜 –>」で囲まれた部分があると思います。

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

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

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

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

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

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

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

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

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

最後に

今回の記事では、HTMLでコメントアウトを書く3つの方法と注意点について解説しました。

今日のおさらい

1. コメントアウト=記述されたコードが処理されないようにする

・複数人での開発やメンテナンスが効率よく行える

・HTMLの入れ子構造がわかりやすくなる

・必要に応じて修正前の状態に戻すことができる

2. コメントアウトできるのは「1行・複数行・タグ」

3. HTMLのコメントアウトを書く際の注意点は3つある

・ソースコードからコメントが閲覧できる

・コメントアウトの中にコメントアウトを入れるのはダメ

・ハイフンは使わない方がいい

使い方には注意しつつ、コメントアウトを上手に活用しましょう!

最後まで読んで頂き、ありがとうございました(o^^o)

コメント

タイトルとURLをコピーしました