コーディング

2016.8.31 2016.9.8

参考にしたい!見やすくわかりやすいコーディングに欠かせないcssのコメントアウトまとめ

タグ:, ,

PAK86_smonitatocode20140517_TP_V

こんにちは!
サビラのWEB制作担当のayaです。

HTMLやCSSなどでよく使われる「コメントアウト」。
見やすくわかりやすいコーディングには欠かせないですよね。
今回はCSSでどんな種類の「コメントアウト」があるのかを調べてみました。

コメントアウトについて

おそらくこの記事を読んでいるだいたいの人が分かるかと思いますが、、
ここで少しコメントアウトについて簡単に紹介します。

コメントアウトって何?

コメントアウトとは、ソースコードで一時的に表示・機能させないようにするための記述のことです。
この記述を削除すれば、また元どおりに、表示・機能させることができます。

使用する場面としては、

  • 消したくないけど念のため残しておきたい
  • 一時的に出したくない情報
  • 見出し
  • 注意書き
  • このコードが何を表すのか
  • 目次

など、さまざまな使い方があり、HTMLやCSS、PHPなどといったプログラムのソースコードでそれぞれ違った記述の仕方をします。

使い方

使い方は基本的にどのプログラムのソースコードでも同じです。
(例ではCSSのコメントアウト)

1行で書いたり、複数行にわたって書くこともできるので、文章や目次に使ったりもできます。

注意点は、コメントアウトの中にコメントアウト(コメントアウトの入れ子)を書かないことです。
コメントアウトしている部分が表示されてしまったり、それ以外の部分が表示されなかったりします。

また、HTMLでのコメントアウトに関してですが、ハイフン(-)の連続使用も避けましょう。

HTML4.0だと「ハイフンの連続使用は避けること」と書かれているので、できるだけハイフンの連続使用は避けたほうが無難です。
HTMLだとコメントアウトではハイフンを使用しますので、連続でハイフンを使用すると誤認識されてしまう可能性があります。

目立たせるためにどうしても、、という場合は、ハイフンの横にイコールを使用したりします。

以下から本題のコメントアウトの紹介です!
今回はCSSのコメントアウトをご紹介します。

1行コメントアウト

今回はCSSのみのコメントアウトの紹介なのでCSSのものしかありませんが、1行だけのコメントアウトはHTMLなどでもよく見られますね。
1行コメントアウトだけでも、アスタリスク(*)を使ったものや、ハイフン(-)、コロン(:)、イコール(=)、あまり見かけないですがスラッシュ(/)を使ったコメントアウトがあります。

このコードが何なのか忘れないようにちょっとしたメモとして使ったり、長めにとって見出しとして使ったりと色々な使い方があります。
1行だけのシンプルなコメントアウトですが、長めにとるとズラッと書かれているCSSの中でも見つけやすいです。

2行コメントアウト

CSSで使われていることが多い2行コメントアウト。
選んだ例が1行コメントアウトよりもシンプルであまり種類がないです。。
アスタリスク(*)だけや、ハイフン(-)だけを使用しているものが多く行もそんなにとりませんが、どこが区切りなのかがわかりやすく目立ちやすいので見出しとして使用しているサイトが多いです。

3行コメントアウト

3行使ったコメントアウトもCSSでよく見られます。
3行コメントアウトから一気に目立ち度が高くなりました!
ハイフン(-)やイコール(=)、アスタリスク(*)を多めに使ったものなど、いろいろな種類があります。
行数も3行使っていろんな記号で装飾がされている分、2行コメントアウトよりも目立ちやすくなっています。

4行、5行コメントアウト

最後に4行、5行使ったコメントアウト。
4行コメントアウトは少ないんでしょうか。。
あまり見つけられなかったですが、5行コメントアウトはいくつか種類がありました。

他の3行コメントアウトとかに比べると、5行使ったコメントアウトは改行も一緒に使用していてかなり目立ちます。
見出しとしてはもちろん、ちょっとした文章や目次としても使用できます。
サンプルでダウンロードしたファイルでよくライセンス情報を書いていたりもします。

終わりに・・・

いかがでしたか?
探してみると結構たくさんのコメントアウトの種類があるんだなーと思いました。
1行コメントアウトを大見出しとして使っているサイトがあったり、小見出しとしているサイトがあったり、コメントが左側、真ん中、右側だったり…とかなりいろいろな種類がありましたね。
中でも5行コメントアウトの目立ち度はピカイチです!

その他にも、ちょっとした会話として使用したり、コメントアウト内にアスキーアートを書いて少しインパクトのあるコメントなども書いているところがあったりします。
ページのソースを表示すると、もしかしたらユニークなコメントアウトが見つかるかもしれません。
興味がある方はぜひ探してみてくださいね!

コメントアウトの注意点として、ハイフンを連続使用しない(HTML)、コメントアウトの入れ子はしないといったものがありますが、そこらへんに注意すればかなりいろいろなところで使える記述なので、コメントアウトを上手に活用して見やすくきれいなコーディングを目指しましょう!