- 更新日: 2018年10月11日
- 公開日: 2017年6月30日
HTMLで最も簡単にコメントを書く方法
HTMLを書いている時に、メモを残したいと思ったことはありませんか？もしくは、一度書いて消してしまったコードをもう一度使いたいと思ったことがある方も多いのではないでしょうか？
そんな時に役立つのが、コメントアウトです。今回は、HTMLでコメントを書く方法を紹介していきます。
HTMLのコメントとは？
HTMLのコメントとは、プログラミングを書いている時に残すメモのこと。コメントを使うことで、コード以外にもHTMLファイルに情報が書き込むことができるのです。
HTMLファイルに書かれたコードは、基本的に全てブラウザに読み込まれてしまいます。
そこで、コードとは別にコメントとして別に仕分けることで、ブラウザに表示させないようにするのです。コメントを使う時といえば、例えばこんな場面が想定されます。
- 複数人で同じファイルを編集する際
コードだけ書いてあると、他の人がコードを理解するのに時間がかかってしまいます。ファイルの中にコメントが書いてあれば、そのコードを素早く理解するのに役立つでしょう。
- メンテナンスする際
一度書いたコードを、後日編集するといった場面もよくあります。自分が書いたコードとはいえコメントがないと、なぜそのように記述したのか、わからなくなってしまうことも。
どうしてそのコードを書いたのかだけではなく、コード自体をみやすくコメントで区切っておくと、後から振り返る時に便利です。
- コードを残しておきたい場合
コードを書いたり消したりすることもよくあります。コードを消してしまうと、そのコードはまた書かなければなりません。
でも、コメントに参照としてコードを残しておけば、後でそのコードをまた使うことも可能。
特に、初心者の時は、コードを書く際も試行錯誤の繰り返しになるので、できる限り自分が書いたコードは残しておくことがお勧めです。
このように、コメントは、複数人でコードを書く時や、自分のコードの覚え書きとして、頻繁に使われます。
お探しの記事は見つかりませんでした
コメントの書き方
コメントの重要性がわかっていただけたのではないでしょうか？それでは、肝心なコメントの書き方を紹介していきますね。
コメントアウトの仕方はとても簡単。コメントの文章を、まず <!-- というタグで囲い、 -->というタグで閉じます。サンプルは、下記の通り。
<!-- サンプルです -->
これで、<!-- と --> で囲まれた文章は、コメントとして認識され、ブラウザには読み込まれません。本当に読み込まれないのか、みてみましょう。
例：index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- コメントはブラウザに表示されません -->
<p>サンプルです</p>
</body>
</html>
コメントを、<!--と-->で囲みました。他の箇所は、通常通りに記述します。
例：ブラウザでの表示
ブラウザを開いてみると、pタグで囲んだ「サンプルです」という文だけ表示されていますね。ブラウザにコメントは表示されていません。
コメントは、複数行にわたっても大丈夫です。
<!-- コメントです
コメントです
コメントです -->
<!-- と --> で囲んである限り、コメントとして認識されます。
また、文章だけではなく、通常のコードもコメントアウトすることができます。
<!--
<p>サンプルです</p>
-->
上記のコードはコメントアウトされているので、ブラウザには読み込まれません。この方法を使って、コードをHTMLファイルに残しておくことができます。
CSSやJavaScriptのコメントアウトと、HTMLのコメントアウトの方法は違うので、この方法はHTMLの方法として覚えておいてくださいね。
HTMLには、他にも書き方のルールがあります。
HTMLで改行する方法を学びたい場合は、HTMLの タグと
タグで改行する方法を詳しく解説
＼一流デザイナーのスキルが身に付く／
まとめ
コードを書く際に、コメントを残すことはとても重要です。今回紹介したコメントタグをうまく使って、他の人も、そして自分も見やすいHTMLファイルを作ってみてください！
- この記事を書いた人
- Ayumi
