MENU

HTMLのコメントアウト!有効的な使い方とは

2021 2/13
HTMLのコメントアウト!有効的な使い方とは

初学者の方にぜひ覚えてほしい、コメントアウトについて解説します。基本的な使い方から便利な活用方法まで、詳しく説明します。

目次

コメントアウトとは?

コメントアウトとはブラウザには表示されないものです。今回はかの有名なコカ・コーラのサイトと、そのソースコードです。

Coca-Cola(Japan)Company
No Image
コカ・コーラ ジャーニーコカ・コーラ ジャーニーは、日本コカ・コーラの製品情報や企業情報だけでなく、ソーシャルメディアで発信した情報をキュレーションし、コカ・コーラにまつわるストーリー...

右クリック→「ページのソースを表示する」で見ることができます。

ブラウザ表示
ソースコード

ソースコードを見るとコカ・コーラの文字が書かれたAA(アスキーアート/文字だけで図などを描くこと)が書かれていますが、もちろんコカ・コーラのwebサイトにはこのAAは表示されていませんよね。

コメントアウト:ソースコードでは見えるけど、ブラウザには表示させたくないことを書く

今回は遊び心あるコメントアウトをご紹介しましたが、本来はコードを書く際に備忘録としてメモ書きのように書くのが基本的な使い方です。

コメントアウトの書き方

それでは、コメントアウトの書き方を説明したいと思います。

<!-- ここにコメントを書く -->

コメントアウトは<!–- 内容 –->と書きます。

かもめ かもめ

今まで学んできたタグの書き方とは違うので違和感があるかもしれませんが、HTMLのタグになぞって<!--… 開始タグ、--> …終了タグと覚えると役割が分かりやすいですよ !

コメントアウト:1行

まずは1行のコメントアウトの書き方です。

<p>これは1行目です</p>

<!-- これは2行目です -->

<p>これは3行目です</p>

1行目と3行目をpタグで囲っていますが、2行目はコメントアウトさせています。

この状態で、ブラウザ表示はどうなるでしょうか。

これは1行目です

これは3行目です

結果はこうなります。

コードを書く時にコメントアウトさせた部分は、ブラウザに反映されていないですね。

コメントアウトの上限は1つ!……という決まりはありませんので。1つのHTMLにいくつも書くことができます。

コメントアウト:タグ

続いて、タグをコメントアウトさせるとどうなるかを見てみましょう。

<p>これは1行目です</p>

<!-- <p>これは2行目です</p> -->

<p>これは3行目です</p>

続いて、先ほどのコードの2行目にもpタグを書きました。

これは1行目です

これは3行目です

結果はこうなります。pタグは反映されていないですね。

このように、コメント内にタグを書いたとしても、ブラウザには反映されません

コメントアウト:複数行

実は、複数行のコードをまとめてコメントアウトすることもできちゃいます!

<p>これは1行目です</p>

<!--
<p>これは2行目です</p>
<p>これは3行目です</p>
-->

pタグで書かれた2行目、3行目を囲うようにコメントアウトをします。

これは1行目です

結果はこうなります。2行目・3行目は反映されていませんね。

このように、複数行をまとめてコメントアウトすることが可能です!

CSSのコメントアウトは?

<!-- コメントアウトの内容 -->という書き方はあくまでHTMLでのコメントアウトの書き方です。

かもめ かもめ

HTMLだけではなく、CSSやJavaScript、PHPなど、様々なプログラミング言語でコメントアウトの書き方があります

/*メインビジュアル*/
.mv{
  color: #333;
}

CSSでのコメントアウトは/*内容*/という書き方をします。

あわせて読みたい
CSSのコメントアウトの書き方!可愛いサンプルもご紹介!
CSSのコメントアウトの書き方!可愛いサンプルもご紹介!CSSのコードの可読性をあげるために欠かせないコメントアウトの解説です。基本的な書き方に加え、実務でのサンプルもご紹介します!【コメントアウトとは?】コメントア...

コメントアウトの使い方

コメントアウトの基本的な使い方は何となくお分かりいただけたでしょうか。続いて、実務ではどのようにコメントアウトが使われているのかご紹介します。

その1:メモ

コメントアウトは、単純なメモとして使われることがあります。

<!-- 和菓子 -->
<dl>
  <dt>かりんとう</dt>
  <dd>棒状の生地を蜜をからめて乾燥させたもの。</dd>
  <dt>和三盆</dt>
  <dd>四国東部で伝統的に生産されている砂糖の一種。</dd>
</dl>

<!-- 洋菓子 -->
<dl>
  <dt>ケーキ</dt>
  <dd>スポンジケーキにクリームを塗り果物を載せたもの</dd>
  <dt>プリン</dt>
  <dd>小麦粉、ラードなどを蒸して固めた料理。</dd>
</dl>

たとえば、HTMLのソースコードをパッと見て判断できるようにメモを残すことがあります。

どこからが和菓子でどこからが洋菓子なのか、ということが一目見ただけで分かりますよね。

このように、ソースコードの可読性を高めることができます!

ブラウザには表示されないとは言え、誰でも見ることができるのがソースコードです。パスワードや個人情報など重要な情報は書かないでくださいね。

その2:修正前の状態を残しておく

迷える子羊 迷える子羊

ここのコードを変えたいけど、後々また使うかもしれないな……

なんて時は、コメントアウトを利用して修正前のコードを残しておくことができます!

<ul>
  <li>かりんとう</li>
  <li>和三盆</li>
</ul>

<!-- 修正前
<dl>
  <dt>かりんとう</dt>
  <dd>棒状の生地を蜜をからめて乾燥させたもの。</dd>
  <dt>和三盆</dt>
  <dd>四国東部で伝統的に生産されている砂糖の一種。</dd>
</dl>
-->
  • 手探りで作っているとき
  • 修正前のものに戻す可能性があるとき

にこの方法を使うと便利です。

コメントアウトにはタグを丸ごと入れることができるんでしたね

その3:閉じタグを分かりやすくする

<section>
  <div class=wrapper>
    <div>
      <p>
      (数十行)
      </p>
    </div>
  </div><!-- .wrapper -->
</section>

数行程度の入れ子構造ならまだしも、数十行、あるいは数百行となってくると、対応する閉じタグを探すのにも一苦労ですよね。

そんなときに役に立つのがコメントアウトです。ネスト(階層)の深いものでも、一目見ただけで分かるようになります。

かもめのワンポイントアドバイス

コメントアウトの書き方に決まりはありませんが、閉じタグの指定のときは

クラス名.(ドット)クラス名
ID名#(シャープ)ID名

という風にすると、誰が見ても分かりやすいのでおすすめです。

また、実際の制作案件に関わっていくと分かることですが、あなたが作ったものを別の人が改修する、ということがあり得ます。(もちろん逆もしかりです)そんな時に役に立つのが今回ご紹介したコメントアウトで閉じタグを記載する方法です。

かもめ かもめ

自分一人だけが制作に携わるwebサイト場合、エディタの拡張機能で開始タグと閉じタグを分かりやすくする、という方法もあります!

あわせて読みたい
HTML/CSS/Sass編:VSCodeおすすめ拡張機能!
HTML/CSS/Sass編:VSCodeおすすめ拡張機能!Visual StudioCode(以下VSCode)の拡張機能は種類が多く、どれをインストールすればいいか分からなかったり、入れすぎると競合してしまったり……なんてことも。今回はHT...

コメントアウトまとめ

  • コメントアウトはブラウザには反映されず、ソースコードだけで見ることができる
  • 書き方:<!-- コメントアウトの内容 -->
  • 1ページ1つという決まりはないため、複数書くことができる
  • 複数行のコメントを書くこともできる
  • メモや修正前のコードを残すなど、備忘録としても使用できる
  • パスワードや個人情報など、重要な情報は絶対に書かない

この記事が気に入ったら
フォローしてね!

この記事を書いた人

都内勤務のフロントエンドエンジニア。初心者の方向けにブログを更新中。webに萌えてもっと楽しく、もっと素敵に!

目次
閉じる