WEB制作を学んでいる方は「コメントアウト」といった言葉を聞いたことがあるでしょう。

今回は、WEBサイトを作る上で欠かせない言語であるHTMLでコメントアウトを書く方法を紹介します！

コメントアウトは制作の現場でも必ず使われるので、是非理解しておきましょう。

コメントアウトとは？

そもそも、コメントアウトとは何でしょうか？

コメントアウトとは、ソースコード上にコードの処理のメモや注意書きを残しておくことです。

コメントアウトがあることで、他の人が書いたソースコードを理解することが出来たり、チームメンバーにソースコードについて注意書きや共有ができます。

ちなみに、コメントアウトしたコードはブラウザで表示されることはありません。

コメントアウトを書く3つのメリット

コメントアウトを書くことには、大きく分けて3つのメリットがあります。

それでは具体的に解説していきます！

① チームで制作する際に便利なこと

WEBサイトを制作する際は、複数のメンバーで行うことが多いでしょう。

チーム開発をする際に、コメントアウトは便利です！

例えば、

などをコメントに残すことで、他のメンバーがコードを理解することができ、開発がスムーズに進みます。

② コードの役割についてメモできること

WEBサイトを制作や運用するに当たって、複雑なコードがある場合にコメントアウトを使うことで、コードの役割を分かりやすくメモしておくことができます。

コードについてコメントアウトを使ってメモ書きすることで、もし誰かに案件を引き継ぐ際もスムーズに引き継ぎができるのです！

③ ページ構成を明確にできること

HTMLで作られるWEBサイトは、headerやcontainer、footerなどいくつかのパーツによって構成されています。

そんな時にいくつかのパーツが一目でわかるようにコメントを入れてあげると、以下のようにHTMLの構成が見やすくなります。

<!-- header -->

<header>
    <p>headerに関する内容が入ります</p>
</header>

<!-- container -->

<div class="container">
    <p>containerに関する内容が入ります</p>
</div>

<!-- footer -->

<footer>
    <p>footerに関する内容が入ります</p>
</footer>

複雑でありチームで開発していくWEBサイトの場合は、他の人が理解しやすいように、パーツごとのコメントアウトを入れておくといいでしょう。

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

それでは、HTMLでコメントアウトを書く方法を紹介していきます！

コメントアウトのやり方は、コメントの最初に「<!– 」で最後に「–>」をつけるだけです。

<!-- ここにコメントを書きます -->

1行コメント

まずは1行のコメントです！

<!-- ここにコメントを書きます -->

<header>
    <p>headerに関する文章が入ります</p>
</header>

複数行のコメント

次は複数行のコメントです！

<!-- ここにコメントを書きます。
    ここにコメントを書きます。
-->

<header>
    <p>headerに関する文章が入ります</p>
</header>

コメントが長くなる場合は、2行に分けて見やすくするのもありですね。

コメントアウトの2つの注意点

コメントアウトはチーム開発などに使えて便利です。

しかし、2つほど注意点があります。

① コメントが閲覧されること

コメントアウトした部分はブラウザに表示されることはありません。

しかし、HTMLコードを見たいWEBサイトの上で「右クリック」をし、「ページのソースを表示」をクリックすると、コメントアウトを含んだHTMLコードを簡単に誰でも見ることが出来ます。

WEBサイトを一般公開した際には、必ず誰かにコメントアウトを見られるかもしれないので、社内機密など知られてはいけない情報はコメントに載せないようにしましょう！

② コメントの中にコメントを入れることは出来ないこと

コメントの中に、さらにコメントを入れ子構造にすることは出来ません。

See the Pen
Untitled by webis (@webis-co)
on CodePen.

上記のように、「–>」と変な表示がされます。

コメントアウトは入れ子構造することが出来ないので、注意してください！

まとめ

今回は「HTMLのコメントアウト」について紹介しました。

これからチーム開発をしていきたいと考えている人は、是非参考にしてください！