• HTML

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

投稿日:2020年12月07日（最終更新日:2023年01月10日）

コメントアウトとは？

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

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

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

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

CSSのコメントアウトの書き方についてはこちらのページをご覧ください。

CSSのコメントアウトを書き方

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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