HTML・CSS広告を含む記事です

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

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

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

HTMLファイルの場合、正しく使わないとコメントがユーザーに見えてしまったり、逆に表示しておきたいコンテンツを非表示にしてしまう等のトラブルに繋がります。

サイト制作やサイト運営ではHTMLのタグの使い方以外にも、こういったコメントの使い方も重要になります。

そこでこの記事では、HTMLのコメントアウトの書き方や注意点を解説していきます。

  • HTMLのコメントアウトとは
  • HTMLでコメントアウトする理由
  • HTMLのコメントアウトの書き方

また、HTMLのコメントアウトは、1行だけでなく複数行を一括で書く事も出来ます。便利な使い方も参考にして下さいね。

HTMLのコメントアウトとは

HTMLコメントアウトとは、プラウザには表示させない状態にしてソースコードの中にプログラムの簡単な説明や更新情報など、メモや注意事項を書き込む事ができる機能です。

これは自分自身も含め、複数の人で同じHTMLファイルを管理したりページを更新する際の備忘録として役立ちます。
また、何かしらの理由で一時的にコンテンツをコメントアウトで非表示にさせておく時にも使います。

コメントアウトの反対はアンコメント。意味は「コメントを外す事」で、大抵は普通に「コメント削除」と言っています。

コメントアウトしたものはブラウザには反映されませんが、HTMLファイルはソースコードを表示させる事で、誰でもコメントを覗き見る事が出来てしまいます。

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

サイト制作やサイト運営で、コメントアウトを使う状況やコメントアウトする理由には次の様なものがあります。

  1. イベントの告知など定期的に更新する箇所をメモで残す
  2. プログラムの動作確認の為

時にはプログラムに対して非表示を行う事もあり、誤解を恐れずに言うと、コメントアウトは誰かに見せない為だけでなく「無効にする」ものとも言えます。

ウェブサイトは基本的に運用・更新されるもの。自分以外にも他の制作メンバーが同じHTMLファイルを編集する事も有ります。
つまり、情報共有や備忘録としてメモをコメントアウトで残すわけです。

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

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

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

① 定期更新する箇所をメモで残す

サイト運営では、定期的に開催するイベントの告知や臨時のお知らせメッセージを掲載する事がよくあります。

何かイベントがある度に毎回同じHTMLタグを一から記述するのは手間が掛かります。また、HTMLやCSSに不慣れな人がファイルを触るかも知れません。

こういった際にメモとして編集箇所や掲載時の注意事項をコメントアウトで残しておけば、ミスや手間を減らせるので便利です。

逆に、イベント告知が終わりHTMLが不要になった際、HTMLタグを削除せずにコメントアウトで非表示にしておきます。
次回必要になった際はコメントアウトの記述を削除するだけで再表示されます。

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ファイル内でCSSを書くには<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ファイルの編集でよく使われるエディタでのコメントアウトのショートカットキーをお伝えします。

共通するのは、コメントアウトしたいエリアをドラッグで選択し、該当のショートカットキーを押せすだけ。同様に、コメントアウトを解除したい時はもう一度同じショートカットキーを押します。

Visual Studio Codeのコメントアウトショートカット

WindowsCtrl + /
MacCommand + /
WindowsとMacのコメントショートカットキー

vscodeのコメントアウトショートカットです。vscodeはフリーで使える高機能なエディタで、HTMLやCSSを書くコーダーだけでなく、プログラムを書く人全般的に人気があります。

コメントアウトは意外と使う機会があるので、ショートカットでサクッと済ませたいですよね。

画像：Visual Studio Code（VSCode）のインストールから日本語化までの手順を解説
関連記事VSCodeインストールと日本語化までの手順を解説

Dreamweaverのコメントアウトショートカット

Windows Ctrl + Shift + /
MacCommand + Shift + /
WindowsとMacのコメントショートカットキー

デザインなどアドビ系のアプリを使っているデザイナーならDreamweaverを使っている人も多いはず。

デザインとコーディングを兼務している人の場合、コメントアウトするのにショートカットキーは使っていないかもしれませんが、知っておくと便利です。

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

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

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

[AD]

[AD]