CSS、JavaScript で使える見出しコメント まとめ

2020/08/05

CSS、JavaScript をコーディングしていくとき、読みやすいように各ブロックごとに見出しのコメントを記述するかと思います。

「大見出し」「中見出し」「補足事項」をどのように装飾すればいいか結構悩みませんか?

今回は、CSSやJavaScriptでの見出しコメントの装飾についてエントリーします。

CSSでは 「//」 はコメントアウトとして機能しません。この書き方で見出しコメントができるのは JavaScriptPHP になります。

PHPでの見出しコメントの書き方は以下をご参照ください。

 

見出しコメント

見出しの装飾は人によっていろいろありますが、個人的におススメなのが以下のような感じ。


/*---------------------------------

 大見出し

 ---------------------------------*/


/*
 中見出し
———————————————*/


/* 補足事項 */

1つ1つのクラス・IDに見出しコメントをつけるとわかりやすいですが、その分手間もかかります。

クラス名やID名で、どこに使っているかある程度わかる場合は、セクションごとにつける「大見出し」だけでもいいかもしれません。

 

実例

/*---------------------------------

ヘッダー

---------------------------------*/

/*
 ロゴ
———————————————*/
#logo{
                 :
}

/*
 グローバルメニュー
———————————————*/
#g-navi{
                :
  margin: auto; /*上下左右中央寄せ(補足事項)*/
}

「どんな目的で書いてあるのか」わかりにくいものは補足事項のコメントを書いてあげると、他の人がスムーズに手を加えることができます。

 

セクションごとの目次をつける

CSSファイルは普通のWebサイト制作なら1000行以上になります。

そのため、今度は見出しを探すのに苦労したりします。

この対策として、CSSファイルの上部にコメントアウトで「目次」を書く人も多いです。


/*====================================

 0.header

 1.contents
   1.1 メインビジュアル
   1.2 更新履歴
   1.3 商品説明

 2.footer
 ====================================*/

 
以上です。

本庄マサノリ

仕事で Laravel を使っています。気づいたことや新しい発見など情報を発信していきます。問い合わせはこちら

>> Twitter をフォローする

 

-周辺知識