複数行の HTML コードにコメントを付ける

Shubham Vora 2023年6月20日
  1. <!- --> タグを使用して複数行の HTML コードをコメントアウトする
  2. キーボード ショートカットを使用して複数行の HTML コードをコメント アウトする
複数行の HTML コードにコメントを付ける

この記事では、ユーザーは HTML コードの複数行にコメントを一度に追加する方法を学習します。 HTML コメントを簡単に定義すると、ブラウザによってレンダリングまたは表示されないコードまたはステートメントです。

コードにコメントする必要があるシナリオは 2つあります。 最初のシナリオは、一部の HTML 要素をブラウザーへのレンダリングから非表示にすることです。もう 1つのシナリオは、仲間の開発者にコードを説明することです。

ユーザーは、コメントや説明のない数千行のコードを含む Web ページについて考えることができ、新しい開発者がそのコードを見たらどうなるかを考えることができます。 彼らは理解するでしょうか? いいえ!

そのため、HTML コードの 1 行または複数行をコメント アウトする必要があります。

<!- --> タグを使用して複数行の HTML コードをコメントアウトする

過去数十年間、HTML にはコードをコメント アウトするための <comment> タグが含まれていましたが、現在は推奨されていません。

現在、<!-- –> はコメント タグとして機能し、最新のすべてのブラウザーでサポートされています。 主に3部構成です。

最初の部分は <!-- です。 コメントを開始する必要がある場所から最初の行の前に配置する必要があります。

ここで、注目すべきは感嘆符です。 ユーザーはそれを追加することを忘れないでください。

2 番目の部分には、コメントの内容が含まれます。 コードの説明や HTML タグなど、ブラウザーでのレンダリングから隠す必要があるものであれば何でもかまいません。

3 番目の部分は、コメントを閉じる --> で、コメントの最後の行の後に配置する必要があります。

コード例:

<html>
    <head>
        <title>Multiple line comment Example.</title>
    </head>
    <body>
        <!--   This is the code explanation comment.
        <p>This will not be shown on the browser.</p>
        -->
        <p>Code to render.<p>
    </body>
</html>

上記の例では、2 行の HTML コードにコメントを追加しています。

1 行目はコードの説明、2 行目は <p> タグです。 そのため、例を挙げて HTML タグをコメントアウトすることも学びました。

キーボード ショートカットを使用して複数行の HTML コードをコメント アウトする

ユーザーはキーボード ショートカットを使用して、HTML コードの複数行をコメント アウトできます。

これを行うには、ユーザーはコメントアウトする HTML コードのすべての行を選択する必要があります。 その後、macOS ユーザーの場合は、Command+/ キーを同時に押します。 または、Windows または Linux ユーザーの場合は、ctrl+/ を押します。

ただし、この方法では、コメントする必要がある複数の行も <!-- --> タグの間に挿入されます。

また、ユーザーは <!-- –> を使用して HTML コードの 1 行にコメントすることもできます。

著者: Shubham Vora
Shubham Vora avatar Shubham Vora avatar

Shubham is a software developer interested in learning and writing about various technologies. He loves to help people by sharing vast knowledge about modern technologies via different platforms such as the DelftStack.com website.

LinkedIn GitHub

関連記事 - HTML Comment