そもそもスタイルガイドとは

• サイトに定義されているスタイルの一覧やコーディング規約ドキュメント化したもの
• マークダウン記法でコメントを書くと、いい感じに自動生成してくれるツールがいくつかある。

スタイルガイドを作るメリット

• 「あれのクラス名なんだっけなー」とか「このサイト、他にどんなクラス作ってたっけな―」ってときにいちいちCSS全部読んだり探さなくていい。
• CSSの設計でイケてないところを発見できる。
  （命名規則のルールが崩壊してる、同じデザインなのに他の箇所で再利用ができないクラスの発見など）

スタイルガイドのツール

• KSS · Knyle Style Sheets
  Ruby上で動く。 Github 自体にも使わてるのがこれ。
  サーバーモード付き。
• StyleDocco
  node.jsが必要。敷居はKSSより低く、cd コマンドくらいを知っていれば、なんとかなる。
  ※ただ、最近（2014年4月現在）のChromeでみるとプレビュー機能がうまくきいてないみたい。詳しくは下記参照
  StyledoccoがChromeでiframe部分見えねーよ!という場合の当座の解決法
• Kalei Styleguide
  RubyとかNode.jsとかいらないので、環境を整えなくても結構だれでも使える。
  ただscssは対応していない(lessは対応)。

kaleiでスタイルガイドを作る

1.githubからファイルをゲットする。
2.サーバにあげて確認。うまく動いてたらOK
3.css/styles.css　をいじる。

styles.cssがスタイルガイドのトップ画面になる。

ファイル名変えたかったらjs/viws/config.js に書かれているstyle.cssの箇所を変更。

新しくCSSを追加したい場合は@importでファイルを読み込むだけで左メニューに追加される。
（ちなみに、相対パスで違う階層のやつを読み込むと左メニューのフォントが赤色になる。）

下記2つはスタイルガイドのデザイン用に必要。

@import url("theme.css");
@import url("highlight/styles/googlecode.css");

CSSはimportしてもいいしコメント外に直書きしてもOK
（何か理由が無い限りは、直書きするより開発用の環境にぶちこんで、該当のCSSを相対パスで設定した方がいいと思うけど）
ドキュメントはコメント内（/* ～ */）にマークダウン記法でかいていく。

仮画像を置きたい場合は PLACEHOLD.ITを使うと、サイズも分って便利。

例：

<img src="http://placehold.it/350x150">

body #main .nav li a {
　　color: #333;
}