HTMLを学習していてこんなことでお困りではありませんか？

• HTMLを学習しているがコメントアウトって何？
• 聞いたことはあるけど何のために使うのかわからない

HTMLにおいてコメントアウトは基礎的なことではありますが、なんとなく使っていてしっかりと理解していない人もいるのではないでしょうか？

コメントアウトとは何なのか、なんのために使うのか、具体的な書き方はどうなのか、と言った疑問は今日解決してしまいましょう！

• そもそもHTMLのコメントアウトとは
• コメントアウトをいつ使うのか
• 実際の書き方

以上の項目に沿って説明します。

この記事を読めば初心者の方でも簡単にコメントアウトを使いこなせるようになります！

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

コメントアウトとは？

HTMLのコメントアウトとはそもそもなんなのでしょうか？
一言で言うならソースコード中のコードやコメントをブラウザで表示させないようにすることです。
コードの一部を<!-- -->で囲むと、ソースの中には残っているがブラウザで見た時は表示されていない、という状態になります。

ただし、ソースコードを確認するとみることができるので秘密にしたい内容などは削除する必要がある。

未経験でも確実にプログラミングスキルを身につけられる！
【DMM WEBCAMP】では、専属コーチが卒業まで伴走します！

✔短期間で効率的にプログラミングスキルを身につけたい
✔プログラミングを独学で進めていくのが不安
✔家での時間を有効に使ってスキルアップがしたい
といった方におすすめです！

＼実践的なスキルが身に付くカリキュラム／

コメントアウトを使うシーン

HTMLのコメントアウトについてざっくりとイメージが掴めましたか？
ではどんな時に、なんのためにコメントアウトを使うのでしょうか？
コメントアウトを使う事例をいくつか紹介します。

ソースコード中にコメントを残したいとき

コメントアウトを使うとソースコードのHTML上にコメントを残すことができます。例えば、

<div>   <p>記事記事記事記事記事記事</p>   <p>記事記事記事記事記事記事</p> </div> <!-- 以下更新内容 -->
 <div>   <p>更新更新更新更新更新更新</p>   <p>更新更新更新更新更新更新</p> </div>

のように書くと<!-- 以下更新内容 -->部分はブラウザでは表示されません。複数人で共同で編集を行う場合や、後で見た時に自分がわかりやすくしたい時などにコメントを残しておくと管理がしやすくなります。

一時的に表示させたくないコードがあるとき

HTMLのコメントアウトではコメントを残すだけでなくタグごと表示させなくすることも可能です。
一時的に表示したくない内容がある場合にコメントアウトを使えばソースコードを消さずに残しておくことができます。

例えばサイトの定期的なメンテナンス時にのみ表示したいメッセージがある場合、

<div>   <p>通常の記事通常の記事</p> </div>
 <!-- <p>ただいまメンテナンス中です</p> -->

としておけば平常時はメッセージを表示しない状態でソースに残しておくことができます。

ただし、コメントアウトした内容はソースコード上には残っているためデベロッパーツールなどでソースを確認した際には表示されてしまいます。あくまでもブラウザを通常に見ているユーザーには表示されていないだけですので秘密事項や未発表の内容などはソースに載せることのないようにしましょう。

コメントアウトの書き方

ではいよいよ具体的なコメントアウトのしかたについて解説していきます。

結論から言うとHTMLのコメントアウトは、コメントアウトしたい箇所を

<!-- コメント -->

で囲むだけです！とっても簡単ですね！

コメントのような文字列以外にタグごとコメントアウトすることもできますし複数行に適用することもできます。

<!--
    <p>文章1文章1文章1</p>
    <p>文章2文章2文章2</p>
-->

と言った具合で基本的に書き方は変わりません！

ちなみにコメントアウトという機能はHTML以外の言語にも存在しておりCSSなら

/* コメント */

のように言語によって書き方が異なるので興味があれば調べてみましょう！

また、多くのエディターでは補助機能としてコメントアウトしたい箇所を選択してWindowsならCtrl + /、Macならcommand + /で簡単にコメントアウトすることができます。よく使うショートカットキーなのでぜひ覚えておきましょう！

【DMM WEBCAMP】は受講生の97%が未経験からのスタート！
充実のサポート体制で、プログラミングスキルを確実に身につけられます！

✔一人ひとりに合わせた学習計画で進められるため、仕事や学校と両立できる
✔未経験者のために開発された実践的なカリキュラムを用意
✔︎専属コーチが卒業まで学習をサポート

＼目的別で選べる3つのコース／

まとめ

HTMLのコメントアウトとは<!-- コメント -->を使ってソースコードの一部をブラウザ上で非表示にすることでした。

コードを共同で管理する場合などに便利で、タグを非表示にしたり複数行をまとめてコメントアウトすることもできます。

一度覚えてしまえば書き方はとても簡単なのでぜひ今日から使いこなしてみてください！

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	12週間〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP