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

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

コメントアウトとは？

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

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

ブラウザ側の表示

ソースコード側の表示

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

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

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

コメントアウトの書き方

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

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

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を含め、様々なプログラミング言語で用意されています。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

重要な情報は書かない

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

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

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

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

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

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

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

コメントアウトのまとめ

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

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

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

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

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