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

2020/08/03 2021/12/13

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

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

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

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

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

PHP見出しコメントの書き方

見出しコメント

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


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

 大見出し

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


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


/* 補足事項 */

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

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

実例


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

ヘッダー

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

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

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

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

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

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

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

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


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

 0.header

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

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

以上です。

フロントエンドおススメ教材（by Udemy）

動画でプログラミング学習！ドットインストール、Schoo、Udemyのどれがいい？

Udemyを使ったLaravel学習方法