CSSのコメントの書き方コレアレ

CSSもHTMLと同じように、ソース中にコメントを挿入することができます。

/*と*/で囲った文字列がコメントになりますが、入れ子にすることはできません。また、他のプログラムにあるような「#」や「//」といった単一行コメントはありません。

適切なコメントを挿入することで、複数人での作業するときや、時間がたってから編集するときなどにコードの見通しが良くなります。ブラウザ間の差異を埋めるための宣言やハックなんかも、適用させるブラウザ名や理由などをきちんとコメントで書いておきたいですね。

僕は、スタイルをグループに分けて記述するときなど、コメントを目立たせるために次のように記述しています。

/* ------------------------------
 Header
------------------------------ */
div#header {
}
.
.
/* ------------------------------
 Content
------------------------------ */
div#content {
}
.
.
/* ------------------------------
 Footer
------------------------------ */
div#footer {
}
.
.

hail2u.netのCSSを覗いたときにこの書き方を見て「いい」と感じてそれ以来真似しているのですが、他にどんな書き方があるのかなと気になりはじめたので、200サイトほど調べてみました。そのなかで見つけた他のパターンを以下紹介しあす。(かぶったものもあるんですが、巡回中、先に見つけたサイトを記しておきます。)

repeat none

/*////////////////////////////// Comment ///*/

チープカ

/*:Comment:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

鳥さんの独り言

/* Comment
----------------------------------------------- */

娘娘飯店しるきぃうぇぶ

/* --------------------------------------------
 *                 Comment
 * -------------------------------------------- */

Hatena Diary deltaテーマ

/*==========================================================*/
/* Commnet*/

HATENA TUBE

/*
---------------------------------------------------------------------
	COMMENT
---------------------------------------------------------------------
*/

JACK THREE FIVE

/*
########################################################
	Comment
########################################################
*/

fixture.jp

/*

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-



Comment



-=-=-=-=-=-=-=-=-=-=-=-=-=-=-


*/

The Web KANZAKI

/* =============================================== */
/** @Comment */
/* ----------------------------------------------- */

100SHIKI

/*************************
  COMMENT
*************************/

BLOG × WORLD ENDING

/* ================================================================================ */
/*      1.COMMENT                                                                   */  
/* ================================================================================ */

/* -------------------------------------------------------------------------------- */
/*      1-1.COMMENT                                                                 */  
/* -------------------------------------------------------------------------------- */

階層で表記を変えるのはイイですね！

CSS Mania

/* ---- COMMENT TITLE
Text
Text
Text
---- */

Ogawa::Memoranda

/*
 * Comment
 * Text
 * Text
 * Text
 */

Wikipedia

/*
** Comment
** Text
** Text
** Text
*/

hxxk.jp

/*------------------------------------------------------------------------------*/
/* Comment Title                                                                */
/*  Text                                                                        */
/*  Text                                                                        */
/*  Text                                                                        */
/*------------------------------------------------------------------------------*/

Lucky bag::blog

/*=======================Comment Title=======================*/
/*                                                           */
/*  Text                                                     */
/*  Text                                                     */
/*  Text                                                     */
/*                                                           */
/*=======================Comment Title END===================*/

C++の解説ページ (URI紛失)

/*============================================================*
* Comment Title
*  Text
*  Text
*  Text
*============================================================*/

CSS関連サイトを中心に見てみましたが、ほとんどは通常の/* comment */という書き方でした。

こうしてみると色々書き方があるんですね。面白いなぁ。もぅ。