HTMLのコメントアウトの書き方を【具体例で解説】

htmlのコメントアウトの書き方【具体例で解説】HTML

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

  • コメントアウトの定番の使い方
  • WEB制作でよく使われるコメントアウトの例
  • 良くあるコメントアウトのミス

など、押さえておくべきポイントを初心者にも分かりやすく説明いたします。

htmlのコメントアウトの書き方

1行をコメントアウトする書き方

<!--<p>HTMLのコメントタグの書き方</p>-->

赤線の部分がHTMLのコメントアウトタグです。

コメントの開始ダグは

<!--

コメントの終了ダグは

-->

です。
開始タグ終了タグの中に書いたコードは、全てコメントとして扱われます。

複数行をコメントアウトする書き方

<!--
  <ul>
    <li>home</li>
    <li>about</li>
    <li>product</li>
    <li>content</li>
  </ul>
-->

複数行のコードでも、コメントタグの中のコードは全てコメントとして扱われます。

見やすいように、コメントタグの行に改行を入れていますが、改行なしでも変わらずコメントアウトされます。

WEB制作でよく使われるコメントアウトの書き方

Web制作の現場で、主に4つの用途として使われています。

  1. ソースコードを区分けして見やすくする
  2. 表示したくないソースコードを一時的に除外する
  3. コメントを残す
  4. どちらが良いか見比べる時

ひとつずつ具体例と共に解説していきます。

ソースコードを区分けして見やすくする

とてもシンプルな例ですが、各ブロックの前に「どういうセクション」なのか記載すると、コードの構造が見やすくなります。
これはコメントアウトというより、コメントとして残す感じですね。

ソースコードの見出しとして考えれば分かりやすいかと思います。

<!-- ヘッダー -->
<header>
  <h1>コメントアウトの書き方</h1>
  <ul>
    <li>about</li>
    <li>contact</li>
  </ul>
</header>

<!-- about -->
<article>
  コメントアウトの書き方を紹介する記事です<br>
  有効活用すると、ソースコードが見やすくなります。
</article>

<!-- フッター -->
<footer>
  <small>© 2020 Rico notes.</small>
</footer>

 

表示したくないソースコードを一時的に除外する

これは非常に良く使われるコメントアウトの使い方です。
下の例では、リストタグの3つ目の項目が非表示になります。
一時的に、表示させたくない箇所に使うと便利です。

<ul>
  <li>コメントの活用例</li>
  <li>コメントアウトタグ</li>
  <!--<li>間違った使い方</li>-->
  <li>まとめ</li>
</ul>

 

コメントを残す

自分や、共同作業をしているパートナーのタメにコメントを残す使い方です。
その中でも「 ToDo(やる事)」のメモとして利用すると、とても便利です。
「Todo」や「やる事」のように、コメントの頭に記載する自分なりのルールを作っておけば、後でその語句を検索すれば、すぐに見つかるので、作業漏れの防止にも繋がります。

<!-- ToDo: 原稿ができたら3つめの項目を表示させる -->
<ul>
  <li>コメントの活用例</li>
  <li>コメントアウトタグ</li>
  <!--<li>間違った使い方</li>-->
  <li>まとめ</li>
</ul>

 

表示を比較したい時

これも良く使います。
例えば、次のコードのように2種類のボタンで、どちらの方がデザインにマッチするかをパっと調べたい時などに有効です。

<button class="blue">お申し込み</button>

<!--<button class="green">お申し込み</button>-->

 

コメントアウトの注意点・失敗例

コメントアウトはとても便利ですが、使う際にいくつか注意する点があります。
失敗例も見ながら確認していきましょう。

コメントの中にコメントを書く

複数行をコメントアウトする時に、ついやってしまうミスです。
コメントタグの中にコメントタグは書けません。
一括で複数行をコメントアウトする際に、よくあるミスです。

<!-- 
<!-- 青いボタン -->
<button class="blue">お申し込み</button>
-->

実際にブラウザで見ると次のようになります。
たまに、このミスをしたままのWebサイトを見かける事があるので、十分注意しましょう。

コメントタグは入れ子に出来ない

wordpressのコメントアウトの注意点

wordpressのと書きましたが、PHPを含む場合の注意点と思って頂ければ。

例えば下記のコードです。
wordpressの記事のコンテンツを表示する定番のコード。例えば、丸っとそのままコメントアウトしたとします

<!--           
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_post_thumbnail('home-thum'); ?>
<h2><?php the_title(); ?></h2>
<div id="post_list_cat" class="cat_list"><?php the_category(); ?></div>
<p class="post_date">更新日時:<?php the_modified_date("Y年m月d日"); ?></p>

<div>
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php endif ;?>
-->

ブラウザに表示されなくなりますが、PHPの処理は走るので、見えないだけで不要な処理がされている状態です。
サイトの読み込みが重くなる原因にもなるので、PHPはPHPのコメントアウトタグを使ってコメントアウトしましょう。

まとめ

本日は、HTMLのコメントアウトについて具体例も交えつつ解説してきました。

コメントタグは、不要なコードを非表示にするだけでなく、HTMLを管理しやすくする用途として使われる事も一般的です。

うまく使う事で、コードが管理しやすくなり、また他社との共同作業や、引継ぎをする際にも大変便利です。

是非マスターして制作に活用していきましょう。

タイトルとURLをコピーしました