【HTMLのテクニック】コメントアウトを覚えてコードを見やすくしよう

htmlを勉強する上で覚えたいテクニックの1つであるコメントアウトについて解説します。コメントアウトの基本的な使い方から場面別のコメントアウトの役割を説明します。有名なwebサイトがどのようにコメントアウトを使用しているかも紹介しています。

コメントアウトとは?

コメントアウトとは「ソースコード側に書いてもブラウザには表示されない項目」です。以下はレシピサイト最大手の「クックパッド」のホームページと、そのソースコードです。

ソースコード:webページのhtmlが書かれている側

ブラウザ側の表示

 クックパッドの公式サイト

ソースコード側の表示

 クックパッドのソースコード

ソースコード側を見ると「コック帽」と「cookpad」の文字が書かれたアスキーアート(文字を使ってイラストなどを表現すること)が書かれていますが、ブラウザ側にはこのアスキーアートは表示されていませんよね。

コメントアウトはこのようにhtmlを書いていく際に、「ソースコード側では見えるけど、ブラウザには表示させたくないこと」を書くときに利用するテクニックです。

ソースコードを見るには?

  • chrome:『Windows:Ctrl+U』 『Mac:⌘+Option+U』
  • firefox:『Windows:Ctrl+U』  『Mac:⌘+U』
  • その他:『右クリック→ソースを表示』

本記事ではコメントアウトの書き方〜web制作現場での実践的な使用法を3つ紹介していきます。

コメントアウトの書き方

それでは早速コメントアウトの書き方を説明していきます。

コメントアウトの書き方

コメントアウトは「<!– コメントアウトの内容 –>」というように書きます。

htmlのタグでたとえるなら「<!- -」 は 開始タグ「- ->」は終了タグのような役割ですね。

<p>これは表示されます</p>

<!-- これは表示されません -->

<p>これは表示されます</p>

 

これは表示されます

これは表示されます

実際にコメントアウトを書いてみるとこのようになります。htmlで「<!– ここは表示されません –>」と書かれている部分はブラザウには表示されていませんよね。

ちなみにコメントアウトはwebページ内にいくつも記述することができます。

コメントアウトでhtmlタグを非表示にする

コメントアウト通常のテキストだけでなく、htmlのタグも非表示にすることができます。

<p>これは表示されます</p>

<!-- <p>これは表示されません</p> -->

<p>これは表示されます</p>

 

これは表示されます

これは表示されます

コメントアウトを複数行書く

コメントアウトはいくつも書くことができますが、複数行のコードをまとめてコメントアウトすることもできます。

<p>これは表示されます</p>

<!--
<p>これは表示されません</p>

<p>これは表示されません</p>
-->

 

これは表示されます

コメントアウトができない時は?

コメントアウトができない時の理由とその対処法について解説します。

コメントアウトができない時は?

後ほどコメントアウトを書く時の注意点を解説しますが、すでにコメントアウトしてあるコードを含んでいるとコメントアウトは上手くできません。その場合は「すでにあるコメントアウトを消して、改めて全体をコメントアウトしなおすという方法」があります。

しかし、「すでにコメントアウトしてある部分を含めてコメントアウトしたい」という場合もあるのでそういった場合の対処法も紹介します。

cssのコメントアウトを利用する

「<!– 内容 –>」という形式はあくまでhtmlでのコメントアウトの形式です。コメントアウトはhtmlだけではなく、cssやjavascriptを含め、様々なプログラミング言語で用意されています。

cssのコメントアウトを利用すればすでにコメントアウトしてあってもOK

まず、htmlのstyleタグを記述します。<style>の中ではcssの記法を使うことができるため、cssのコメントアウトである「/*内容*/」という形式でコメントアウトすることができます。

cssでのコメントアウトで全体を囲うことで、すでにhtmlでのコメントアウトされているテキストが含まれていても問題なく適用することができます。

cssのコメントアウトの詳しい解説は以下の記事を参考にしてください。

関連記事

CSSのコメントアウトの書き方と制作現場での使用サンプルを紹介

コメントアウトの使い方3つ

コメントアウトの基本的な使い方をおさえたところで、実際の現場でどのようにコメントアウトが活用されているかを説明していきます。

覚え書きやメモとして使用する

コメントアウトは単純な覚え書きやメモに使われることがあります。

<!-- 果物のラインナップ -->
<div>
  <h2>ラインナップその1</h2>
  <ul>
    <li>りんご</li>
    <li>みかん</li>
    <li>ぶどう</li>
  </ul>
</div>

<!-- お肉のラインナップ -->
<div>
  <h2>ラインナップその2</h2>
  <ul>
    <li>豚肉</li>
    <li>牛肉</li>
    <li>鶏肉</li>
  </ul>
</div>

たとえば、このようにhtmlのソースコードがページ内のどのエリアなのかをパッと見て判断できるようにメモを残します。

それぞれの商品ラインナップの概要を「果物のラインナップ」「お肉のランナップ」とコメントアウトを入れることでパッと見てどこのソースコードなのかわかりますね。

このようにhtmlのソースコードのセクション(グループ)をわかりやすくする他にも

  • そのソースコードがブラウザの表示結果とどう関係しているか?
  • 誰がいつ記述したものなのか?

など、書いた本人にしかわからない内容をコメントアウトで記述することがあります。

タグの入れ子構造を見やすくする

コメントアウトは入れ子を見やすく管理するためにも活用します。

htmlのタグは入れ子構造になるため、入れ子が何重にもなると開始タグと対応している閉じタグがどれかわかりにくくなってしまいます。

タグの入れ子が複雑になると閉じタグの位置がわかりづらくなる

たとえば、この画像では入れ子が何重にもなっているため<div class="container">というタグの閉じタグがどれなのかわかりづらくなっています。

これではコードを追加・削除するときにどこから編集してよいのか判断しにくいですよね。

これを解決するために、対応している閉じタグにあらかじめ「閉じタグであるという意味のコメントアウトを記述」しておきましょう。

閉じタグにコメントがあることでパッと見て対応しているタグがわかる

<div class="container">の閉じタグの隣に「<!– /.container –>」と書いてあることでパッと見てとの閉じタグがどのタグと対応しているものなのか判断できますよね。

書き方に関しては様々ですが、私が利用するのは

  • classの場合:「<!– / .class名 –>
  • idの場合:「<!– / #id名 –>

という書き方です。特に正解があるわけではないので他のサイトなどを参考にわかりやすい書き方を身につけましょう。

修正前後のコードを保管しておく

コメントアウトを活用することで、修正前後のコードを保管しておくことができます。文章では説明がわかりにくいので実際の例を見てみましょう。

<div>
  
  <h3>コメントアウトの使い方</h3>
  <p>これは修正後の内容です</p>
  
  <!-- 
    <h3>コメントアウトの使い方</h3>
    <p>これは修正前の内容です</p>
  -->
  
</div>

たとえば左のコードのように完全に削除するかわからないコードをコメントアウトで残しておきます。

お客さんの要望で修正したものの「やっぱり修正前のものに戻してほしい」というパターンはよくあるので、完全に修正するのかわからない修正前のコードを、念のためコメントアウトで保存しておくというテクニックはよく使われます。

コメントアウトを使う時の注意点3つ

ここまで基本的な使い方〜応用的な使用方法までを紹介しましたが、合わせてコメントアウトを使用する際の注意点を3つ紹介します。

重要な情報は書かない

とても基本的な内容ですが、パスワードや会社の機密情報などの「重要な情報は絶対に書かない」ようにしましょう。

いくらブラウザには表示されないとはいってもwebに詳しい人やweb制作会社の人は参考にするためによくwebページのソースコードを見ていることがあります。

誤っても「自分のサイトは誰も見ないだろう」という気持ちで書かないように注意してください。

コメントアウトの中にコメントアウトを書かない

さきほど「コメントアウトが上手くできない」という部分で解説しましたが、コメントアウトの中にコメントアウトを書いてしまうと上手くコメントアウトできません。

コメントアウトができない時は?

連続したハイフンを書かない

コメントアウトの中に「- -」(連続したハイフン)を書くことも禁止です。こちらもコメントアウトが上手くできない原因になってしまいます。

コメントアウトのまとめ

最後に本記事で学習したコメントアウトの使い方について重要なポイントをまとめていきます。

  • コメントアウトはブラウザには表示されない
  • 書き方は『<!- –  内容  – ->』
  • コメントアウトは複数行書くことができる
  • コメントアウトされているものもコメントアウトしたいときはcssのコメントアウトを活用する
  • 利用方法は3つ、❶ソースを説明する、❷タグの入れ子をわかりやすくする、❸修正前後のコードの保管
  • コメントアウトには重要な情報は絶対に書かない
  • コメントアウトの中に「コメントアウト」または「連続したハイフン(–)」を書くと上手くいかない

コメントアウトは禁止されている書き方を除けばその使い方は様々です。

会社によってルールが違うよ

会社ごとや個々人ごとに、コメントアウトの書き方のルールを設けているところもあるよ。「htmlは一度書いたら終わり」ということはほとんどないからきちんとその環境のルールにしたがってかけるように心がけよう!

この記事を書いた人

web関連の勉強をしているみんなのために「とにかくわかりやすい記事」にこだわってwebスキルの情報を発信しています。フリーランスでデザイン・コーディング・webマーケティング(SEO)とweb全般のお仕事をしています。

この記事を読んだ人におすすめ

  • 【イラスト解説】divに付いているidとclassの意味と使い方

  • 【コピペOK】CSSだけで実装できるおしゃれテーブルデザイン10つ

  • HTMLの文字の強調・装飾|strong / em / b / i タグを理解しよう

  • 【HTML入門】パンくずリストとは?最適な作り方とSEOとの関係性

  • パンくずリストを構造化データでリッチスニペット対応する方法

  • 【HTMLのテクニック】インデントを覚えてコードを綺麗に見せよう

  • HTMLの見出しタグ|h1〜h6の使い方をイラストを使って解説

  • HTMLのtableでテーブルを作る方法と応用テクニックを解説

記事をもっと見る +

目次を開く