• HOME > 
  • HTML > 
  • HTMLのコメントアウトの書き方【複数行に渡るときやキーボー...

HTMLのコメントアウトの書き方【複数行に渡るときやキーボードによるショートカットの方法】

投稿日:

コメントアウトとは?

コメントアウトとはHTMLやCSS・Javascriptのコードの中に補足や説明などを書き加えるための方法のことです。

コメントアウトを行わずにソースコード内にメモを記述してしまうと、コードの一部として認識されたり、コードの構成を崩してしまう恐れがあるため、コメントアウトは欠かせません。

また、ソースコード内で特定の要素を一時的に非表示したい時にもコメントアウトは利用されます。

このページでは、HTMLのソースコード中でコメントアウトを行う方法について説明します。

リンク先のサムネイル
CSSのコメントアウトを書き方

CSSでは「/*」と「*/」の間は全てコメントアウトとしてブラウザに認識されるので、スタイルなどサイトの表示に影響を及ぼしません。コードの中に補足や説明などを書き加えたいときや、コードの一部を一時的に無効化させたいときなどにコメントアウトをしようします...【もっと読む】

コメントアウトの記述方法

HTMLのコメントアウトは次のように記述します。

HTMLのコメントアウトの記述方法

「<!--」と「-->」の間は全てコメントアウトとしてブラウザに認識されるので、サイト上に表示されません。

ちなみに、ブラウザの開発者ツール(検証ツール・デベロッパーツール)を使ってソースコードを覗かれると、コメントアウトそのものも含めてすべて閲覧できてしまいますので、第三者に見られても問題のない内容や書き方をした方が良いでしょう。

コメントアウトを使う場面

冒頭で述べたように、コメントアウトはHTMLを記述していく中で次のような状況で使用します。

  • 補足などのメモをコードの中に付け加えたいとき
  • 特定の要素を一時的に非表示にしたいとき

コメントアウトを使って補足などのメモをコードの中に付け加える

後から修正が必要になったときのためにコメントアウトを使って補足や説明を残しておけば、どこを編集すれば良いかが一目でわかるので便利です。

またサイトを複数人で編集する場合では、誰でもわかるような補足を記述しておくと良いかもしれません。

HTML

<!-- 見出しタイトルをここに記載 -->
<h2>ダミーテキストダミーテキスト</h2>

特定の要素を一時的に非表示にする

記述してある要素を一時的に非表示にしたい場合は、削除ではなくコメントアウトを使うという方法もあります。

もとに戻すときはコメントアウトを消すだけなので簡単です。

下の例では、h2タグの要素全体をコメントアウトしてサイト上に表示されないようにしています。

HTML

<!-- <h2>ダミーテキストダミーテキスト</h2> -->

複数行に渡るコメントアウトの書き方

「<!--」と「-->」の間であれば、改行して複数行になっていてもコメントアウトになります。

HTMLにおいては、長文の説明を書いたり、複数の要素をまとめて非表示にさせることも出来ます。

下の例では、h2とpタグの2つの要素をまとめて非表示にしています。

HTML

<!-- 
    トップページの見出しタイトルと説明文は
    ここに記載します。
 -->
<!-- <h2>見出しタイトル</h2> 
    <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>-->

HTMLのコメントアウトは入れ子にできる?

HTMLでコメントアウトを使用する際の注意点として、コメントアウトは入れ子にすることができないという点があります。

下の例は、h2とpタグの要素をまとめてコメントアウトしようと前後にコメントアウトを付けていますが、元々あったh2タグのコメントアウトによって途中でコメントアウトが終了してしまっています。

HTML

<!--
<!-- <h2>見出しタイトル</h2> -->
    <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>←コメントアウトされない
-->←コメントアウトされない

このように、複数行に渡る要素をまとめて非表示にしようとしたときに、補足の為に記述していたコメントアウトが中に含まれているということが良くありますので注意が必要です。

キーボードによるショートカットの方法

VScodeなどメジャーなエディターでは、キーボードのショートカットでコメントアウトを挿入することができます。

記述の手間を大きく減らすことができるので、ショートカットを覚えて積極的に活用しましょう。

コメントアウトのショートカットキーは「Ctrl」を押しながら「/(スラッシュ)」です。

コメントアウトのキーボードショートカット

VScodeなどメジャーなエディターでは、このようにするだけでコメントアウトが挿入されるので入力の手間が少なくて済みます。

なお、カーソルがある行に記述が存在する場合、その行全体をコメントアウトしてくれます。

また、コメントアウトがある行で、もう一度「Ctrl」を押しながら「/(スラッシュ)」を押せば、コメントアウトを削除できるので便利です。

まとめ

以上がHTMLでコメントアウトを行う方法です。

コードを記述していく上では欠かせませんが、多用し過ぎると逆に見づらくなってわかりにくくなります。いくつかのルールを設けてそれに沿って使っていくのが良いのではないでしょうか?

関連する記事

サムネイル

HTMLのpタグ(段落)の使い方【改行タグbrとの違い】

2023年03月15日
pタグの「p」は段落・節を意味するParagraphの頭文字で、ひとかたまりの文章であることを指定するためのタグです。開始タグと終了タグからなる要素で、pタグを使用して段落を分けると前後の要素と改行されます。
サムネイル

Google Chromeのデベロッパーツールの使い方【画像……

2022年01月15日
最終更新日:2022年02月12日
デベロッパーツールとはWEBブラウザであるGoogle Chromeにはじめから備わっている機能の一つです。閲覧中のWEBサイトのページを構成しているHTMLやCSSといったソースコードを確認することができます
サムネイル

HTMLとCSSだけでアコーディオンメニューを作る方法【初心……

2020年12月18日
最終更新日:2022年07月05日
アコーディオンメニューとは、メニューの項目名をクリックすると非表示にされていたコンテンツが項目名の下に広がって表示される機能のことです。HTMLとCSSだけで簡単に実装することが可能です。
サムネイル

HTMLでスクロールバーを表示させる方法

2020年12月17日
最終更新日:2022年01月28日
HTMLで表示させるスクロールバーとは? HTMLとCSSを用いることでサイト内のコンテンツを一部だけ見えるようにし隠れた部分をスクロールして見るようにすること […]
サムネイル

HTMLにGoogle MAP(グーグルマップ)の埋め込みを……

2020年12月16日
最終更新日:2022年01月28日
Google MAPとは? 埋め込みとは? 自身のサイトのページの中に特定の場所を示したGoogle MAPを表示させることが出来ます。 簡単かつ無料なうえ、ペ […]
サムネイル

HTMLのtable(テーブル)タグの使い方

2020年12月15日
最終更新日:2022年01月27日
<table>タグとは? WEBサイトに表を表示させたい場合にHTMLの<table>(テーブル)タグを使用します。 単に表の作成に利用 […]
サムネイル

HTMLのformタグで入力フォームを作る方法

2020年12月14日
最終更新日:2022年01月28日
<form>タグとは? 「フォームで入力した内容を送信する」機能をもつHTMLタグです。 問い合わせフォームは、別に集計してメールを送る処理を記述し […]