HTML・CSS

HTMLコメントアウトの書き方、複数行を一括、注意点も解説

画像：HTMLコメントアウトの書き方。注意点も解説。

HTMLファイルでのコメントアウトはサイトの運営・更新で役立つもの。メモ書きを残したり、一時的に公開したくない情報の非表示にも使われます。

コメントアウトはHTMLやCSS以外にも、JavaScriptと一緒に使う事がよくあります。

ですが、正しく使わないとコメントがユーザーに見えてしまったり、プログラムが動かないといったトラブルに繋がります。

HTMLコメントアウトは、1行だけでなく複数行を一括で書く事も出来ます。

そこでこの記事では以下を解説しています。

  • HTMLでのコメントアウト方法
  • CSSでのコメントアウト方法

HTMLでコメントアウトを書く際の注意点なども解説していますので、参考にして下さいね。

HTMLのコメントアウトとは

HTMLのコメントアウトとは、ブラウザ上で表示させたくない部分を非表示にする為のもの。サイト運用に必要なメモや一時的に伏せておきたいコンテンツなどに使います。

HTMLだけでなく、CSSやJavaScriptにもそれぞれの記述方法があります。

正しくコメントアウト出来ていないと、HTMLファイルのコメントはそのままブラウザで表示されてしまいます。

コメントアウトの反対はアンコメントと言い、意味は「コメントを外す」事。言葉としては「コメント削除」と言う人が多いです。

なぜHTMLでコメントアウトするのか？

HTMLでコメントアウトする理由は幾つかあります。

ウェブサイトは基本的に運用・更新されるもので、複数人が携わる事も多いです。自分用だけでなく、情報共有の為にメモをコメントアウトで残します。

具体的な内容や目的は次のような場合です。

  • 定期的に更新する箇所を分かり易くする為
  • 複数人で運用するソースコードの概要を共有する為
  • 一時的に、不要なHTMLタグやCSSを非表示にする為
  • プログラムの動作確認の為

この様に保守・管理を目的としてコメントアウトするのが一般的です。

HTMLの構造が複雑な時、コンテンツの始まりと終わりが分かり易い様にコメントを入れる人も多いです。

HTMLでコメントアウトする時の注意点

コメントアウトがブラウザで見えてしまうのは論外ですが、思いがけず見えてしまう可能性はあります。

実は、HTMLのコメントアウトはブラウザの表示機能で簡単に見えてしまいます。
公開前やすでに終了したキャンペーン情報をコメントアウトで残す場合は、万が一見られても問題無いか注意が必要です。

当然ですが、個人情報やパスワード等を入れてはいけません。

HTMLでコメントアウトの書き方

HTMLコメントアウトは複数行で一括したり、幾つかのコメントアウト方法があります。
そこで、目的に合わせたコメントアウトの方法を紹介します。

  • コメントアウトが一行の時
  • コメントアウトが複数行の時

コメントアウトが一行の時

<!--ここにコメントの説明を入れる-->
  <p>一行のコメントアウトの書き方</p>

<!--タグの中にコメントアウト-->
  <p>一行のコメント<!--アウト-->の書き方</p>

<!--HTMLタグごとコメントアウトする-->
  <!--<p>一行のコメントアウトの書き方</p>-->

備忘録としてコメントを残すには、「<!–」と「–>」でコメント内容を囲む事でコメントアウトになります。

HTMLタグで囲まれた一行全部をコメントアウトする事も出来ます。

コメントアウトが複数行の時

<!--複数行まとめてコメントアウト
  <div>
    <h1>複数行の書き方</h1>
    <p>複数行のコメントアウトの場合</p>
  </div>
-->

<!--コメントアウトの入れ子は出来ない
  <!--
    <p>ここは非表示になる</p>
  -->
    <p>ここは表示される</p>
-->

一時的に見せたくない文章やコンテンツも、複数行を一括でコメントアウトすれば非表示に出来ます。

コメントアウトの中でコメントアウトは？

すでにコメントアウトされている箇所は、HTMLタグの様に入れ子にしても上手くコメントアウト出来ません。

コメントアウト終了である「–>」が最初に出てきた所でコメントアウトが終わったと判断されるからです。

厳密には中に入るコメントの閉じタグを外せばコメントアウトの入れ子になるのですが、ややこしく間違えやすいのでお勧めしません。

CSSでコメントアウトの書き方

HTMLと一緒に必ず使われるCSSですが、実はコメントアウトの書き方は違います。混同される事が多いCSSでのコメントアウトの書き方を紹介します。

/***** CSSでのコメントの書き方 *****/
.chat {
/*margin: 1em 0 1.3em;  コメントアウトで無効化*/
  font-size: 95%;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}

/* 全体を一括で囲む
.chat .icon {
  width: 12%;
  margin-right: 1em;
  min-width: 80px;
  text-align: center;
}
*/

CSSでコメントを残すには、「/*」と「*/」でコメント内容を囲む事でコメントアウトになります。

CSSはHTMLと比べて記述量が膨大になる事もよくあります。コメントアウトしてあれば何処に何が書いてあるか分かり易いです。

HTMLと同様に、コメントアウトする事でCSSを非表示・無効にする事も出来ます。

コメントが目立つ様にアスタリスクやハイフンを装飾として沢山書く人も居ます。

HTMLファイル内でCSSのコメントアウト

<style>
/*  
.header {
  background: #c3c3c3;
}
*/
</style>

CSSファイル側でのコメントアウトと同じように、HTMLファイルの方でCSSを使う時もコメントアウトのやり方は同じく「/*」と「*/」で囲みます。

HTMLファイル内では<style></style>で囲む必要があります。

CSSのコメントアウト 複数行の場合

/*
複数行のコメントの書き方
目次としてコメントを入れる事も。
*/

/*-------------------------
  ヘッダー　記述を分かり易く
-------------------------*/
.header {
  background: #c3c3c3;
}

/*-------------------------
  メインコンテンツ　記述を分かり易く
-------------------------*/
.main {
  width: 100%;
}

CSSの記述は数百～数千行になる事も多いです。CSSファイルの冒頭に複数行のコメントアウトで目次を入れておけば、複数人で作業する時に保守性がアップします。

他にも、可読性を高める為にセクションの始まりなどでコメントを入れる事もよくあります。

JavaScriptでコメントアウトの書き方

JavaScriptはHTMLとよく一緒に使われるプログラム。コメントの役割自体はHTMLやCSSと似ていますが、それに加えてソースコードの動作確認にも使われます。

自分で書いたソースコードだったとしても時間が経てば内容を忘れてしまう事も。コメントを残しておけば便利です。

コメントアウトが一行の時

// 一行コメントになる

スラッシュを2つ続けて書く事で、その後に続く内容がコメント扱いになります。

// for文

let str = '';

for (let i = 0; i < 9; i++) {
  str = str + i; //ここでもコメントが使えます
}

命令文の後ろに「//」をつけてコメントを入れる事も出来ます。

JavaScriptのコメントアウト 複数行の場合

/*
挟まれているすべてがコメント
*/

/* ソースコードを一括でコメントアウト
let str = '';

for (let i = 0; i < 9; i++) {
  str = str + i;
}
*/

ファイル内に何が書かれてあるか説明する時の様に、行が多い時は「/*」「*/」で囲みます。

ソースコードをコメントアウトすれば、プログラムの動作確認をする際のデバッグとして使えます。

削除ではなくコメントアウトで一時的に機能しないようにします。必要に応じてコメントアウトを解除すれば、わざわざソースコードを一から書き直さずに実行できます。

まとめ、HTMLコメントアウトの書き方

HTMLのコメントはウェブサイトの運営や更新でよく使う事が多いと思います。定期的に更新されるキャンペーン情報やバナーなど、運用の為にコメントを付けている事もあります。

複数人でソースコードを管理する際は運用・保守面でも役立つので、コメントアウトの書き方を参考にして頂ければ幸いです。