htmlコメントアウトの一番使いやすい(と思ってる)書き方

HTMLコメントの分かりやすい書き方

自分で書いたhtmlでも、他人が書いたhtmlでも助け舟になってくれるのがコメントアウトの存在。

「なんでこんな構造になってるんだっけ?」というときも、コメントアウトで思い出すなんてパターンはWebデザイナー・コーダーなら、あるあるネタではないでしょうか。

そんなコメントアウトですが、CSSコメントに続き、htmlのコメントアウトで自分が使いやすいと思っている形をご紹介します。(今回はかなり短いです!)

htmlコメントアウトのタグの書き方

まずは、通常のhtmlコメントアウトを載せておきます。<!– と–>に挟まれたテキストだけがブラウザ上で非表示となります。

See the Pen HTMLコメントアウト by takatuki (@takatuki) on CodePen.0

では、分かりやすいhtmlコメントアウトとはなんなのか

私の考える分かりやすいhtmlコメントアウトの条件は、こんな感じです。

  • 日本語である
  • 固まりがわかる
  • 見つけやすい

1つめは日本語であること

単純にそちらの方が見やすいんですよね。ただ、それだけではわかりにくい部分があるので、その直後のタグについているid名やclass名もあわせて書きます。

2つめは、固まりがわかること

コメントアウトが活躍する時にあるあるシーンとして、「一部の段落だけをがっつり選択したい時」ってありますよね。なので、その段落の固まりがわかるように、コメントアウトも上下ではさむように書くのが一番効率的かなーと思っています。

つまりは、「始まりのコメント」と「終わりのコメント」を毎回書くということですね。

3つめは、見つけやすいこと

これは、意外と盲点ではないかなと思います。特に何もしなくてもコメントアウトは分かるんですが、一工夫加えるということですね。

それはズバリ、記号を使うことです。
私のよく使う記号として、「▲」「▼」があります。なぜかというと記号の塗りの面積が広くて、パーっとhtmlソースを見渡した時に見つけやすいんですね。

ということで、以上の「私がわかりやすいと思っているコメントアウトのつけかた」は以下のような感じになります。

See the Pen VWzZQN by takatuki (@takatuki) on CodePen.0

htmlコメントで一番大切なことは、自分・他の人がコードを見た時に、すぐに理解できることだと思います。

「文字を少しでも短くしたい」だとか、「不格好」だとかという意見もあるかと思いますが、効率的でなければコメントアウトをつける必要がありませんからね。

このようなコメントアウトをつける人もいるんだなと、参考になれば幸いです^^