初学者の方にぜひ覚えてほしい、コメントアウトについて解説します。基本的な使い方から便利な活用方法まで、詳しく説明します。
コメントアウトとは？
コメントアウトとはブラウザには表示されないものです。今回はかの有名なコカ・コーラのサイトと、そのソースコードです。
ソースコードを見るとコカ・コーラの文字が書かれたAA（アスキーアート/文字だけで図などを描くこと）が書かれていますが、もちろんコカ・コーラのwebサイトにはこのAAは表示されていませんよね。
コメントアウト：ソースコードでは見えるけど、ブラウザには表示させたくないことを書く
今回は遊び心あるコメントアウトをご紹介しましたが、本来はコードを書く際に備忘録としてメモ書きのように書くのが基本的な使い方です。
コメントアウトの書き方
それでは、コメントアウトの書き方を説明したいと思います。
<!-- ここにコメントを書く -->コメントアウトは<!–- 内容 –->と書きます。
かもめ今まで学んできたタグの書き方とは違うので違和感があるかもしれませんが、HTMLのタグになぞって<!--… 開始タグ、--> …終了タグと覚えると役割が分かりやすいですよ ！
コメントアウト：１行
まずは１行のコメントアウトの書き方です。
<p>これは１行目です</p>
<!-- これは２行目です -->
<p>これは３行目です</p>１行目と３行目をpタグで囲っていますが、２行目はコメントアウトさせています。
この状態で、ブラウザ表示はどうなるでしょうか。
これは１行目です
これは３行目です
結果はこうなります。
コードを書く時にコメントアウトさせた部分は、ブラウザに反映されていないですね。
コメントアウト：タグ
続いて、タグをコメントアウトさせるとどうなるかを見てみましょう。
<p>これは１行目です</p>
<!-- <p>これは２行目です</p> -->
<p>これは３行目です</p>続いて、先ほどのコードの２行目にもpタグを書きました。
これは１行目です
これは３行目です
結果はこうなります。pタグは反映されていないですね。
このように、コメント内にタグを書いたとしても、ブラウザには反映されません。
コメントアウト：複数行
実は、複数行のコードをまとめてコメントアウトすることもできちゃいます！
<p>これは１行目です</p>
<!--
<p>これは２行目です</p>
<p>これは３行目です</p>
-->pタグで書かれた２行目、３行目を囲うようにコメントアウトをします。
これは１行目です
結果はこうなります。２行目・３行目は反映されていませんね。
このように、複数行をまとめてコメントアウトすることが可能です！
<!-- コメントアウトの内容 -->という書き方はあくまでHTMLでのコメントアウトの書き方です。
かもめHTMLだけではなく、CSSやJavaScript、PHPなど、様々なプログラミング言語でコメントアウトの書き方があります
/*メインビジュアル*/
.mv{
color: #333;
}CSSでのコメントアウトは/*内容*/という書き方をします。
コメントアウトの使い方
コメントアウトの基本的な使い方は何となくお分かりいただけたでしょうか。続いて、実務ではどのようにコメントアウトが使われているのかご紹介します。
その１：メモ
コメントアウトは、単純なメモとして使われることがあります。
<!-- 和菓子 -->
<dl>
<dt>かりんとう</dt>
<dd>棒状の生地を蜜をからめて乾燥させたもの。</dd>
<dt>和三盆</dt>
<dd>四国東部で伝統的に生産されている砂糖の一種。</dd>
</dl>
<!-- 洋菓子 -->
<dl>
<dt>ケーキ</dt>
<dd>スポンジケーキにクリームを塗り果物を載せたもの</dd>
<dt>プリン</dt>
<dd>小麦粉、ラードなどを蒸して固めた料理。</dd>
</dl>たとえば、HTMLのソースコードをパッと見て判断できるようにメモを残すことがあります。
どこからが和菓子でどこからが洋菓子なのか、ということが一目見ただけで分かりますよね。
このように、ソースコードの可読性を高めることができます！
ブラウザには表示されないとは言え、誰でも見ることができるのがソースコードです。パスワードや個人情報など重要な情報は書かないでくださいね。
その２：修正前の状態を残しておく
迷える子羊ここのコードを変えたいけど、後々また使うかもしれないな……
なんて時は、コメントアウトを利用して修正前のコードを残しておくことができます！
<ul>
<li>かりんとう</li>
<li>和三盆</li>
</ul>
<!-- 修正前
<dl>
<dt>かりんとう</dt>
<dd>棒状の生地を蜜をからめて乾燥させたもの。</dd>
<dt>和三盆</dt>
<dd>四国東部で伝統的に生産されている砂糖の一種。</dd>
</dl>
-->- 手探りで作っているとき
- 修正前のものに戻す可能性があるとき
にこの方法を使うと便利です。
その３：閉じタグを分かりやすくする
<section>
<div class=wrapper>
<div>
<p>
（数十行）
</p>
</div>
</div><!-- .wrapper -->
</section>数行程度の入れ子構造ならまだしも、数十行、あるいは数百行となってくると、対応する閉じタグを探すのにも一苦労ですよね。
そんなときに役に立つのがコメントアウトです。ネスト（階層）の深いものでも、一目見ただけで分かるようになります。
コメントアウトの書き方に決まりはありませんが、閉じタグの指定のときは
| クラス名 | .（ドット）クラス名 |
| ID名 | #（シャープ）ID名 |
という風にすると、誰が見ても分かりやすいのでおすすめです。
また、実際の制作案件に関わっていくと分かることですが、あなたが作ったものを別の人が改修する、ということがあり得ます。（もちろん逆もしかりです）そんな時に役に立つのが今回ご紹介したコメントアウトで閉じタグを記載する方法です。
かもめ自分一人だけが制作に携わるwebサイト場合、エディタの拡張機能で開始タグと閉じタグを分かりやすくする、という方法もあります！
コメントアウトまとめ
- コメントアウトはブラウザには反映されず、ソースコードだけで見ることができる
- 書き方：
<!-- コメントアウトの内容 --> - １ページ１つという決まりはないため、複数書くことができる
- 複数行のコメントを書くこともできる
- メモや修正前のコードを残すなど、備忘録としても使用できる
- パスワードや個人情報など、重要な情報は絶対に書かない
