【HTML】コメントアウトを使ってコメントを書き込む！
HTMLにはコメントアウトというソースコード内にコメントを書き込むことができる機能があります。
どのプログラミング言語にもコメントアウトの機能がありますが、コメントアウトをすることで、「今は使用しないけど、後で使うことになるかもしれないから念のために残しておく」というようなコードを記述することができたり、そのコードの意味などを記述することができたりして、自分または、第三者の人がコードを見たときにわかりやすくなります。
そのため、コードを書くときはコメントアウトを使ってメモを残すようにしましょう。
少し面倒かもしれませんが、覚えているうちにメモを残しておくと後からの編集が楽になります。
今回は、HTMLのコメントアウトを使ってメモやコードを残す方法について以下の内容で解説していきます。
⚫︎ コメントアウトのメリット
⚫︎ HTMLで1行ごとにコメントアウトを行う場合
⚫︎ HTMLで複数行にコメントアウトを行う場合
⚫︎ CSSでコメントアウトをする場合
目次
今回はコメントアウトについて説明していきます。
お願いします！
コメントアウトはどういった場合に使用したらよいのでしょうか？
コメントアウトは「コードの作成書のメモ書き」として使われることが多いです。
例えば、さとみさんがコードを作成し、数ヶ月時間が経ってから再びコードを修正しようとした場合、コードの内容を覚えていますか？
うーん…、そんなに覚えていないかもしれません…。
そうですよね、僕もそうかもしれません。
しかし、ソースファイル内に「このコードはタイトルを表示をするコードです。」のようなメモを残しておくと再び、コードを読み取るのに便利になります。
確かにそうですね！
コードを作成した時にメモを残しておくと、次に見た時、すぐに思い出せるようになるので便利ですよね！
ここでは一部だけ紹介しましたが、他にもコメントアウトを使用する目的がありますので、これから紹介していきますね。
はい、よろしくお願いします！
コメントアウトとは
コメントアウトとはHTML内にコメントを残すことができる機能となります。
このコメントはブラウザ上では表示されないので、作成中に気になったところや注意点などを伝えることができます。
要するに「作成者のメモ書き」のイメージになります。
また、コメント内にコードも書き込むことができるので一時的に一部のコード非表示にしたい場合にも使うことができます
コメントアウトの書き方
コメントアウトの書き方の書き方は下記となります。
|
1 |
<!-- ここがコメントアウトになる --> |
HTMLでソースコードをコメントアウトするには、非表示にしたい部分を「<!––」と「––>」で囲みます。
コメント開始タグの「<!––」は、スペースを空けずに続けて記述する必要があり、終了タグは「––>」のように、「––」と「>」の間に空白が入っても構いません。
また、文字列やメモのような複数行の文章の場合は、HTMLタグもまとめてコメントアウトできます。
コメントアウトのメリット
コードの作成中にコメントを残すのは面倒だと思いがちですが、コメントアウトをすることで様々なメリットがあります。
⚫︎ 複数のメンバーで編集する際に便利
Webサイトを制作・運用する際は、複数のメンバーで行うことが多く、メンバー間でさまざまな情報を共有する必要があり、HTMLのコードも複数人で更新することになります。
そのため、特に書き変えることが多い箇所については、「更新した日付、修正者名、更新した内容」などの「いつ誰がどのような修正をしたのか」というコメントを残しておくと便利です。
例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <!-- ここがページのタイトル --> <title>テスト</title> <meta name="description" content="テスト中"> </head> <body> <main> <!-- ここが見出しとなる --> <h1>ここが見出しになります。</h1> <!-- ここがh2の見出しとなる --> <h2>ここが本文になります。</h2> <!-- ここに本文を入力する --> <p>ここが本文になります。</p> </main> </body> </html> <!-- ***** 更新記録 ***** --> <!-- 作成者: 田中太郎 更新日時: 2020/09/28 更新内容: 15行目にコメント、16行目に<h2>を追加 --> |
このような情報をチーム内で書式を決めて残しておくと、テキストファイルの検索ツールを使用するだけで簡単に探しやすくなります。
また、何度も修正する部分を削除せずにコメントアウトしておけば、次に使う時にコメントアウトを外すだけで再利用できます。
⚫︎ 気になったコードをソースファイル上に残すことができる
使用しないコードは削除することが多いけど、もし、後から使用することになった場合にまた書かないといけなくなります。
しかし、「今は使用していないけれど、後で使うことになるかもしれない」というコードも、コメントアウトしておけばブラウザには表示されません。
例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <!-- ここがページのタイトル --> <title>テスト</title> <meta name="description" content="テスト中"> </head> <body> <main> <!-- ここが見出しとなる --> <h1>ここが見出しになります。</h1> <!-- ここがh2の見出しとなる --> <!-- <h2>ここが本文になります。</h2> --> <!-- ここに本文を入力する --> <!-- <p>ここが本文になります。</p> --> </main> </body> </html> <!-- ***** 更新記録 ***** --> <!-- 作成者: 田中太郎 更新日時: 2020/09/28 更新内容: 15行目にコメント、16行目に<h2>を追加 --> <!-- 作成者: 田中太郎 更新日時: 2020/09/28 更新内容: 16行目と18行目はまた使うかもしれない為、コメントアウト --> |
候補のコードが複数ある場合は、コメントアウトで残しておくと便利です。
また、参考にしたサイトのURLや覚書を残したり、修正した日付を残したりすることで、後で編集する際や、エラー発生時に修正箇所を探す際にも検索機能で引っかかるので探す手間が省けます。
HTMLでコメントアウトを残すサンプルコード
コメントアウトを残すサンプルコードを紹介します。
HTMLで1行ごとにコメントアウトを行う場合
1行ごとにコメントアウトを行う場合は、同じ行に「<!––」と「––>」で囲むように追記します。
sample.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <!-- ここがページのタイトル --> <title>テスト</title> <meta name="description" content="テスト中"> </head> <body> <main> <!-- ここが見出しとなる --> <h1>ここが見出しになります。</h1> <!-- ここに本文を入力する --> <p>ここが本文になります。</p> <!-- <p>ここが本文になります。</p> --> </main> </body> </html> |
出力結果
同じ行に「<!––」と「––>」を追記し、コメントアウトしているため、2番目のpタグの内容が非表示となっています。
また、タグの内容が分かりやすいようにコメントアウトに追記しています。
HTMLで複数行にコメントアウトを行う場合
複数行にコメントアウトを行う場合はコメントアウトしたい開始の行に「<!––」を終了の行に「––>」で囲むように追記します。
sample.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <!-- ここがページのタイトル --> <title>テスト</title> <meta name="description" content="テスト中"> </head> <body> <main> <h1>ここが見出しになります。</h1> <!-- ここに本文を入力する <p>ここが本文になります。</p> <p>ここが本文になります。</p> --> </main> </body> </html> |
出力結果
14行目に「<!––」、16行目に「––>」を追記し、複数の行をコメントアウトしているため、pタグの内容が非表示となっています。
CSSでコメントアウトをする場合
CSSでコメントアウトをする場合は「/*」と「*/」で囲むことでコメントアウトすることができます。
HTML同様に、CSSのコードで作成時のメモ書きや注意書きに使ったり、一時的にCSSを反映させないように利用したりすることができます。
sample.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <!-- ここがページのタイトル --> <title>テスト</title> <meta name="description" content="テスト中"> </head> <body> <main> <!-- ここが見出しとなる --> <h1>ここが見出しになります。</h1> <!-- ここに本文を入力する --> <p class= "a">ここが本文になります。</p> <!-- ここに本文を入力する --> <p>ここが本文になります。</p> </main> </body> </html> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
h1 { font-size: 40px; text-align: center; } p { text-align: center; font-size: 20px; } /*.a{ font-size: 100px; } */ |
出力結果
CSSでコメントアウトすることで、pタグに紐付けられているaクラスのCSSが反映されずに表示されています。
今回のポイント
今回は、HTMLのコメントアウトについて紹介しました。
ありがとうございました！
コメントアウトって実際あまり使ったことなかったのですが、作成者のメモとして残したり、「今は使用しないけど気になる」ようなコードもコメントアウトをすることで実行されずにソースファイル上に残すことができるのでとても役に立ちますね。
そうですね。
今は使用しないコードもコメントアウトして残しておけば、また、使用する機会が会ったときにコメントアウトを消すだけでで実行できるのでコードを再び書く手間が省けます。
また、一つのファイルを複数人で修正する場合も「誰がどのコードをいつ修正したのか」などを管理する際にもコメントアウトが使用されることも分かりました。
そうですね。
つまり、コメントアウトは第三者がコードを見ても分かりやすようにメモを残したり、複数人で一つのファイルを修正する際にコンフリクトが起きないようファイルのメンテナンスを行ったりするためにコメントアウトは使用されます。
コメントアウトでコメントを書き込む
⚫︎ コメントアウトとは作成中に気になったところや注意点などを伝えることができる作成者のメモ書き
のようなものである
⚫︎ コメントアウトを行うメリットとしては複数のメンバーで編集する際に便利であったり、気になったコードをソースファイル上に残すことができるなどがある
⚫︎ HTMLでコメントアウトを行う場合は「<!––」と「––>」で非表示にしたい部分を囲む
⚫︎ HTMLで1行ごとにコメントアウトを行う場合は、同じ行に「<!––」と「––>」で囲むように追記する
⚫︎ HTMLで複数行にコメントアウトを行う場合はコメントアウトしたい開始の行に<!––」を終了の行に「––>」で囲むように追記する
⚫︎ CSSでコメントアウトをする場合は「/*」と「*/」で囲むように追記する
ST
株式会社flyhawkのSTです。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語：swift、JS系(Node.js等)。好きなサーバー：AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。
