公開日: 2017年08月08日

【HTML初心者必見】コメントアウトを書く方法を詳しく解説

Webサイトの多くは、HTMLで書かれたコードをブラウザで表示しています。しかし、HTMLブラウザに表示されない文字があります。それがコメントアウトです。

本記事では、コメント、コメントアウトとは何か？

どう書くのか、実際のコードを交えて説明していきます。

HTMLのコメント、コメントアウトとは？
コメントアウトを使うメリット
説明や注意書きを残す
ページの構成を明確にする
特定のブロックを表示、非表示にする
コメントアウトを書く方法
コメントを書く際に気をつけたいこと
コメントが表示される時の対処法
まとめ

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

コメントとはブラウザ上には表示させない、開発担当者だけが読むことができる説明や注意書きなどをソースコードに残すことです。ちなみにHTML以外にも、プログラミング言語にはコメントの機能が備わっています。言語別に定められた文法に従えば、その箇所は処理されずにコメントをソースコードに残すことができます。

また、ソースコードにコメントをすることをコメントアウトといいます。

コメントアウトを使うメリット

実務においてコメントアウトはどのように使われているのでしょうか。コメントアウトの様々な活用方法を紹介します。

説明や注意書きを残す

先ほども挙げましたが、ソースコード上に説明や注意書きを残すといったコメントアウト本来の使い方です。特定のブラウザに向けた特別なコードや、JavaScriptを用いて表示が動的に切り替わるような箇所など、どのような処理が行われているのかをメモ書きとしてコメントアウトします、これによってソースの可読性、メンテナンス効率が向上し、複数人での作業の際や開発者自身が再度ソースコードを改修する際に役に立ちます。

ページの構成を明確にする

HTMLは様々なタグを用いてウェブページを構築します。求められるデザインによってはタグを幾重にも入れ子構造にしなければならず、出来上がったソースコードが複雑になることもあります。後々修正を行う際、ソースコードが複雑では該当の箇所を探し出すのも容易ではありません。

そこで、あらかじめページ構成をコメントアウトで記しておくことで明確にする方法が用いられます。具体的には「Start Header」「Start Menu」など、ページ構成の節目にコメントアウトで目印を残していきます。

また、HTMLタグには divタグのような開始と終了がセットになっているタグが存在しており、片方だけでは表示が崩れてしまいます。そこで「Start Article」「End Article」といったコメントアウトを残すことで、対応するタグがどこにあるのかを明確にすることもあります。

特定のブロックを表示、非表示にする

コメントアウトには特に文字制限はなく、一行である必要もありません。複数行に渡っていても、もしコメントにHTMLタグが混在していてもコメントアウトが可能です。この特性を利用すれば、特定のブロックを丸々コメントアウトすることで、ブラウザ上からは非表示にすることが可能となります。

例えば、更新予定の内容を前もって編集した上でコメントアウトしておけば、公開時はコメントアウトを外すだけで素早く表示されるようになります。逆に、表示させたくない情報を素早く消すにもコメントアウトは有用です。

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

では実際にコメントアウトを使ってみましょう。コメントアウトは指定の文法  で囲むだけで、囲まれた文字列がブラウザ上から表示さなくなります。

具体的なコメントアウトのソースコードはこのようになります。

<html>
    <body>
        <!-- ここにはキャッチコピーを入力します -->
        <p>プログラミング初心者/エンジニアを目指す人の応援メディア</p>
    </body>
</html>

これをブラウザで表示するとこのようにコメントアウトした文字列は表示されません。

プログラミング初心者/エンジニアを目指す人の応援メディア

前述したように複数行に渡っても、もしコメントにタグが混在してもコメントアウトすることが可能です。

<html>
    <body>
        <!-- ここにはキャッチコピーを入力します -->
        <p>プログラミング初心者/エンジニアを目指す人の応援メディア</p>

        <!-- xx月oo日公開のキャンペーン情報です
        <section>
            <h1>夏のキャンペーン実施中</h1>
            <img src='img/campaign.png' />
        </section>
        -->

        <!-- ここにはコピーライト -->
        <footer>© 2017 Tech 2 GO</footer>
    </body>
</html>

コメントアウトされた複数行が表示されていないことがわかります。

プログラミング初心者/エンジニアを目指す人の応援メディア

© 2017 Tech 2 GO

コメントを書く際に気をつけたいこと

コメントアウトは指定の文法で囲むだけなので決して難しくはありません。ですが、コメントアウトを扱う上で注意すべき点もあって、これを遵守しなければコメントがブラウザ上で表示されてしまう場合があります。

例えば下記のソースコードのように、コメントアウトの中にコメントアウトを書くことができません。

コメントアウトはタグとは違って宣言です。最初に現れた --> をコメントアウト終了の宣言とみなしてしまう為、それ以降のソースが表示されてしまいます。

<html>
    <body>
        <!-- ここにはキャッチコピーを入力します -->
        <p>プログラミング初心者/エンジニアを目指す人の応援メディア</p>

        <!-- xx月oo日公開のキャンペーン情報です
        <section>
            <h1>夏のキャンペーン実施中</h1>
            <!-- 説明文 -->
            <p>xx月oo日から夏のキャンペーンを開始します！この機会にライバルに差をつけよう</p>
        </section>
        -->

        <!-- ここにはコピーライト -->
        <footer>© 2017 Tech 2 GO</footer>
    </body>
</html>

このようなソースコードがあった場合、入れ子側の  の終了宣言の部分がコメントアウトを終了させてしまいます。結果、ブラウザで見ると下記のようになります。

プログラミング初心者/エンジニアを目指す人の応援メディア

xx月oo日から夏のキャンペーンを開始します！この機会にライバルに差をつけよう

-->

© 2017 Tech 2 GO

コメントが表示される時の対処法

コメントアウトしたはずの内容が意図せず表示されている場合、まずは前述のようにコメントアウトが入れ子になっていないか調べてみましょう。

次にコメントアウトの中で連続した - (ハイフン) があるか調べてみましょう。実は一部ブラウザでは、連続した - (ハイフン) が存在するだけでコメント終了の宣言とみなしてしまうものもあります。

＼一流デザイナーのスキルが身に付く／

無料カウンセリングはこちら

まとめ

コメントアウトの便利な活用方法を紹介させていただきました。

ですが、コメントアウトは実はあくまでブラウザ上に表示されないだけであって、ソースコードを読めば知られてしまいます。その為、社外秘の情報や読まれたくない内容はコメントアウトに残さないように留意しましょう。例えばキャンペーン情報などを事前にコメントアウトしてあれば、お客様や競合他社に知られるリスクを伴います。

便利なコメントアウトですが、利用には十分気をつけてください。