2017年6月30日シェアツイートシェアブックマークHTMLを書いている時に、メモを残したいと思ったことはありませんか?もしくは、一度書いて消してしまったコードをもう一度使いたいと思ったことがある方も多いのではないでしょうか?そんな時に役立つのが、コメントアウトです。今回は、HTMLでコメントを書く方法を紹介していきます。No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアですCodeCampとは?(受講生体験記)「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。目次HTMLのコメントとは?コメントの書き方まとめHTMLのコメントとは?HTMLのコメントとは、プログラミングを書いている時に残すメモのこと。コメントを使うことで、コード以外にもHTMLファイルに情報が書き込むことができるのです。HTMLファイルに書かれたコードは、基本的に全てブラウザに読み込まれてしまいます。そこで、コードとは別にコメントとして別に仕分けることで、ブラウザに表示させないようにするのです。コメントを使う時といえば、例えばこんな場面が想定されます。複数人で同じファイルを編集する際コードだけ書いてあると、他の人がコードを理解するのに時間がかかってしまいます。ファイルの中にコメントが書いてあれば、そのコードを素早く理解するのに役立つでしょう。一度書いたコードを、後日編集するといった場面もよくあります。自分が書いたコードとはいえコメントがないと、なぜそのように記述したのか、わからなくなってしまうことも。してそのコードを書いたのかだけではなく、コード自体をみやすくコメントで区切っておくと、後から振り返る時に便利です。コードを残しておきたい場合コードを書いたり消したりすることもよくあります。コードを消してしまうと、そのコードはまた書かなければなりません。コメントに参照としてコードを残しておけば、後でそのコードをまた使うことも可能。初心者の時は、コードを書く際も試行錯誤の繰り返しになるので、できる限り自分が書いたコードは残しておくことがお勧めです。このように、コメントは、複数人でコードを書く時や、自分のコードの覚え書きとして、頻繁に使われます。【関連記事】:Webデザインを学ぶなら参考にしたいITスクール15選Webデザインを学ぶなら参考にしたいITスクール15選Webサイト制作の2本の柱とも言えるのが、プログラミングとWebデザイン。プログラミングの知識だけでもホームページを制作する事ができますが、ホームページ制作を仕事にしようと考えているならきちんとしたデザインの知識が必要になってくると思います。いえ、Webデザインってどこでどう学んだらいいの?と悩んでしまうかもしれませんね。そこで今回はWebデザインが学べるスクールをご紹介します!スクールの中にはオンラインで学べたり時間の調整ができるものもあるので、社会人の方もぜひ参考にしていただければと思います。コメントの書き方コメントの重要性がわかっていただけたのではないでしょうか?それでは、肝心なコメントの書き方を紹介していきますね。コメントアウトの仕方はとても簡単。-->というタグで閉じます。サンプルは、下記の通り。囲まれた文章は、コメントとして認識され、ブラウザには読み込まれません。本当に読み込まれないのか、みてみましょう。</html>コメントを、<!--と-->で囲みました。他の箇所は、通常通りに記述します。例:ブラウザでの表示ブラウザを開いてみると、pタグで囲んだ「サンプルです」という文だけ表示されていますね。ブラウザにコメントは表示されていません。コメントは、複数行にわたっても大丈夫です。囲んである限り、コメントとして認識されます。文章だけではなく、通常のコードもコメントアウトすることができます。<!--<p>サンプルです</p>-->上記のコードはコメントアウトされているので、ブラウザには読み込まれません。この方法を使って、コードをHTMLファイルに残しておくことができます。CSSやJavaScriptのコメントアウトと、HTMLのコメントアウトの方法は違うので、この方法はHTMLの方法として覚えておいてくださいね。HTMLには、他にも書き方のルールがあります。記事を参考にしてみてください。自宅で副業を目指したい、手に職をつけてスキルアップしたいあなた、Web系の仕事が気になっていませんか?とはいえ、仕事につけるほどの知識を独学で身につけるのはなかなか難しく、また、スクールに通える時間もないと、一歩が踏み出せないでいる方も多いと思います。日々忙しいあなたでも、オンライン講座なら、会社への通勤途中や子どもが昼寝をしている間など、移動時間や隙間時間でも学習ができますよ。今回は、人気のWebデザインを、独学で勉強できる通信(オンライン)講座をまとめてみました。チャレンジしてみてくださいね!CodeCamp提供のデザインマスターコース当メディアを運営しているCodeCampではデザインマスターコースを現役エンジニアのマンツーマンレッスンという形で提供しています。このコースの特徴はデザインからコーディングまでWebデザイナーに必要なスキルを獲得できるWebデザイナーとして転職・フリーランスも可能になる実際にWebサイトを作るのでポートフォリオとしても使用できる無料レッスン受講後の申し込みで10,000円クーポンをプレゼントしています!ぜひお試しください。\一流デザイナーのスキルが身に付く/CodeCampの無料体験はこちら▶︎無料体験レッスンの申し込みはスマフォで1分で完了!まとめコードを書く際に、コメントを残すことはとても重要です。家事も仕事もプログラミングも。【2020年版】社会人でも通いやすいプログラミング教室5選|選び方の基準も解説プログラミング学習プログラミングスクール・サービス「エンジニアは女性のキャリアとして魅力的」モノづくり好き理系女子がWebエンジニアへ転職するまで受講生インタビュープログラミング未経験で介護師からエンジニアへ。家事も仕事もプログラミングも。受講生インタビュープログラミング習得後、フリーランスに転身。受講生インタビューフリーランス塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。学習ガイドtwitterLINE。