- 2006年12月 2日 16:25
- XHTML 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 */という書き方でした。
こうしてみると色々書き方があるんですね。面白いなぁ。もぅ。
- Newer: Firefox アドオン はてなブックマークカウンタ
- Older: [改]mixiをXHTML+CSSで組みなおす
Comments:9
- wu 2006年12月 3日 17:54
あ、すいません。サイト名に「さん」つけようか迷ったんですけど、変かなーとおもって付けませんでした。怒らないで下さいね。
- rea 2006年12月 3日 23:40
コメントのバラエティの多さよりも、
200サイトも見て回ったwuさんに驚いてしまいました(笑)- wu 2006年12月 4日 00:44
ひょひょひょー。 探しているうちに珍しい書き方を見つけたくなってきちゃって、この記事書いた後も+100サイトぐらいみました。でもだいたいこのどれかとおんなじだったー。
何かアクセス多いと思ったらハテブ集めてたのね、もうすこしちゃんと書けばよかった。
- abu 2008年9月16日 20:49
こんにちわっす
いいね
-
wu
2008年9月16日 21:00
こんにちは。
いいでしょ- tomato 2009年7月30日 10:13
色々バリエーションがあるんですね。
すごく参考になりました。-
midorinz.openid.ne.jp
2009年8月 7日 09:25
CSSコメントについて勉強しようと思ったら、いきなりこの素敵なコレクションにやってきました。
- ivo 2010年2月 7日 18:20
かっこいい!
- HARUKI 2010年6月19日 08:49
はじめまして!
これはすごいですね。。。どれを使おうか迷ってしまうw
みなさんのお気に入りはどれですか?
Trackbacks:0
- TrackBack URL for this entry
- http://3ping.org/mt2/mt-tb.cgi/78
- Listed below are links to weblogs that reference
- CSSのコメントの書き方コレアレ from 3.5ping.org
