カテゴリー:HTML

記事本文

この記事をお勧めしたい方

このコードはなんだっけ?となりがちな方!




今日もお疲れです!
ビギナー中里です!


HTML中級編を進めるにあたり、まずはコメントの書き方を覚えたいと思います!


新しい事を覚えたばかりの頃は、1日しか経っていないのに
既に忘れかけている・・・なんてことが(私は)あります。
そんな時に少しのメモでも書いておけば、思い出すには十分な情報となります。

また、規模の大きなサイトを作るとなると、1度書いたソースコードを
1ヶ月後に見る、なんてこともあるでしょう。
他の人が書いたコードを見ることも、もちろんありますね。
そんな時のために、コメントを残しておくことは重要です。



本記事で得られるスキル

  • コメントの書き方
  • コメントの活用方法



前準備

コメントが問題なく書けているか、確認するためのHTMLファイルを用意しましょう。





それではいきます!










コメントの書き方
HTMLのコメントは

<!--
で始まり
-->
で終わります。

この記号の間に書いた文字列がコメントとして扱われます。
文字列の前後には半角スペースを入れましょう。


では、実際に書いてみます。


<p>この下の行はコメントです。</p>
<!-- この行はコメントです -->
<p>この上の行はブラウザでは表示されません。</p>


ブラウザで表示を確認してみましょう。


HTMLコメントの表示結果


このように、コメント部分はブラウザでは表示されません。









コメントの活用例
コメントは個人のメモとして使うことができますが、少し便利な使い方もできます。
いくつか例を挙げてみます。





タグの始まりと終わりを表す
下のようなコードがあったとします。


<div class="content">
<h1 class="head">見出し1</h1>
<div class="inner">
<h2 class="subHead">見出し2</h2>
<p class="text">
テキストです。
</p>
<ul class="list">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</div>
</div>


これにタグの開始と終了を表すコメントを入れてみます。


<!-- start content -->
<div class="content">
<h1 class="head">見出し1</h1>
<!-- start inner -->
<div class="inner">
<h2 class="subHead">見出し2</h2>
<p class="text">
テキストです。
</p>
<ul class="list">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</div>
<!-- end inner -->
</div>
<!-- end content -->


こうすることで、タグの開始と終わり、特に終わりの部分が
どれに対するものなのかが分かりやすくなります。

この例のコード量であればコメントはなくても問題ありませんが、コードが長く
更に同じ閉じタグが5個、6個と重なってくると、断然見やすくなるでしょう。





一時的にコードを控える
一度コードを書いたものの、別の書き方が良いかもしれない、となった時に
一時的にコードを控えるために使えます。


<!-- 
<div class="old">
<p>前のコード</p>
</div>
-->
<div class="new">
<p>新しいコード</p>
</div>


新たにコードを書いた結果、前のものが良ければコメント用コードを外す。
新たに書いたコードが良ければ、コメントごと古いコードを削除する。
といった使い方ができます。





後で処理するタスクを残す
コードを書いていく上では、迷ったり、後回しにせざるを得ないこともあるでしょう。
そんな時には、タスクの内容をコメントと決まったルールで残しておきます。


<!-- TODO: 内容再確認 -->
<p class="text">これでいいかな?</p>
<ul class="list">
<!-- TODO: リスト数洗い出し -->
</ul>


このHTMLファイル内で
TODO
と検索すると、残したタスクを
すぐに見つけ出すことが出来ます。

※タスクのコメントには
TODO
がよく使われます。










今回はここまで、お疲れ様でした!


今回覚えたコメントの書き方で、今後の学習で必要だと思ったことは
コードの中にメモをしていってください。

また、今後大きなサイトを作り、運営していくときにもコメントは必ず役立ちます。



次回はインライン要素とブロック要素についてです。
ではまた!