プログラミング
 Computer >> コンピューター >  >> プログラミング >> プログラミング

HTML、CSS、JavaScriptでコメントする方法

コードにコメントを追加すると、コードの機能を説明するメモを含めることができます。コメントアウトされたコードまたはその他のテキストは、ブラウザによって無視されます。

HTML、CSS、JavaScriptコードでコメントを作成する方法を確認するために読んでください!

HTMLでコメントを書く方法

単一行のHTMLコメント

HTMLの1行をコメント化するには、コメントするテキストまたはコードをコメントタグの間に配置します。<!-- -->

これがコードでどのように見えるかを次に示します。

<!-- The text in here will be invisible on the website -->
<div class="content">
  Here's some regular HTML content!
</div>

ウェブサイトを読み込むと、HTMLコメントはページ自体に表示されません:

HTML、CSS、JavaScriptでコメントする方法

ただし、ブラウザでWebサイトのコードを調べると、HTMLコメントテキストを引き続き表示できます。

HTML、CSS、JavaScriptでコメントする方法 複数行のHTMLコメント

複数行またはブロックHTMLコメントを作成する場合でも、コメントを使用します(<!-- --> )タグを付けますが、コメントに複数の行を含めることができます。タグの間にコメントテキストが含まれている限り、コメントに含まれます。

複数行のHTMLコメントの例を次に示します。

<!-- 
  The text in here will be invisible on the website!
  Here's another line of the comment.
  You can have as many lines as you want! 😁
-->
<div class="content">
  And here's that regular HTML content again.
</div>

ウェブサイトでの表示は次のとおりです。

HTML、CSS、JavaScriptでコメントする方法

そして、インスペクターでHTMLコメント全体を見ることができます:

HTML、CSS、JavaScriptでコメントする方法 CSSでコメントを書く方法 単一行のCSSコメント

1行のCSSコメントを作成するには、コメントテキストまたはコードを/* */の間に配置します タグ。

次に例を示します:

/* This text will be ignored by the browser! */
.description {
  font-size: 1rem;
  line-height: 1.25rem;
  color: #202020;
}
複数行のCSSコメント

複数行のCSSコメントを記述したり、CSSコメントをブロックしたりするには、同じ/* */を使用できます。 タグを付け、コメントの内容を複数行に配置します。

複数行のCSSコメントは次のようになります。

/* 
  This text will be ignored by the browser! 
  And this will also be included in the comment!
  One last line of comment for good measure 😁
*/
.description {
  font-size: 1rem;
  line-height: 1.25rem;
  color: #202020;
}

JavaScriptでコメントを書く方法

単一行のJavaScriptコメント

JavaScriptで1行コメントを作成するには、行を2つのスラッシュ(//)で始めます。 。

その例を次に示します。

// This text is a comment and will be ignored!

一部のコードと同じ行に1行のコメントを追加することもできます。コメントがその行の最後のコンテンツである限り、機能します。

表示される内容は次のとおりです。

console.log('Test code here!'); // This is a console log message
複数行のJavaScriptコメント

JavaScriptで複数行コメントまたはブロックコメントを作成する場合は、コメントテキストを/* */で囲みます。 タグ。 (これはCSSと同じ方法です。)

表示される内容は次のとおりです。

/* 
  Function: doSomeAwesomeThing()
  This does something awesome, but I don't know what! 
*/

function doSomeAwesomeThing(){
  console.log('Run awesome function');
}
締めくくり

HTML、CSS、JavaScriptでコードにコメントを追加すると、他の人があなたのコードが何であるかを理解するのに役立ちます。

開発中のプロジェクトに取り組んでいて、テスト中に一時的にコードをコメントアウトする必要がある場合にも役立ちます。ただし、本番コードにコメントを残さないように注意してください!


  1. CSSとJavaScriptでツリービューを作成するにはどうすればよいですか?

    CSSとJavaScriptを使用してツリービューを作成するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, V

  2. CSSとJavaScriptを使用してスクロール時にヘッダーを縮小するにはどうすればよいですか?

    CSSとJavaScriptを使用してスクロールのヘッダーを縮小するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Genev