読者です 読者をやめる 読者になる 読者になる

シアトルコンサルティング サービス開発ブログ

シアトルコンサルティング株式会社プロダクトソリューション事業部の開発ブログです

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

こんにちは iijmyaです。

今回はスタイルガイドを作成できる「StyleDocco」をご紹介します。


1.スタイルガイドとは

ページの部品(ボタンなど)について実際にどのような見た目になるのかについて、一覧にまとめるものとなります。

2.StyleDoccoでスタイルガイドを作る

「StyleDocco」は、CSSファイルにコメント形式でコンポーネントの説明とHTMLを書き込むとスタイルガイドを生成してくれる、node.jsで実装されたスタイルガイドジェネレータです。

StyleDoccoのインストール

それでは早速、ターミナル上で以下のコマンドを打ち、StyleDoccoをインストールしましょう。
StyleDoccoをインストールするには、事前に「node.js」とパッケージ管理ツール「npm」がインストールされている必要があります。

$ sudo npm install -fg styledocco
StyleDoccoの対象ディレクトリを作成する

まずは任意の場所に、スタイルガイドを生成する対象のCSSファイルを置くディレクトリを作成しておきましょう。
今回は以下のようなディレクトリ構造にします。

styledocco
┗css
 ┗test.css
CSSファイルの作成

それでは実際にtest.cssファイルにCSSを書いてみましょう。

@charset "utf-8";
/*
# スタイルガイド
## 見出し
### 大見出し
 
大見出しは`div.headLine`をベースに、`.bigHl`を付与する。
 
```
<div class="headLine bigHl">
  <p>大見出し</p>
</div>
```

### 中見出し
中見出しは`div.headLine`をベースに、`.middleHl`を付与する。
```
<div class="headLine middleHl">
  <p>中見出し</p>
</div>
```

## ボタン
### 送信ボタン
送信ボタンは`input`に、`.sendBtn`を付与する。
```
<input class="sendBtn" type="submit" value="送  信" />
```
*/

.headLine {
	width: 100%;
	padding: 0;
	margin-bottom: 0;
}

.headLine p {
	font-weight: bold;
	margin: 5px;
}


.bigHl {
	border-left: 13px solid #FF9900;
	border-bottom: 3px solid #FF9900;
}

.bigHl p {
	color: #555;
	margin: 0;
	margin-left: 10px;
	font-size: 24px;
}

.middleHl p {
	color: #555;
	font-size: 20px;
}

.middleHl p:before {
	color: #FF9900;
	content: "■ ";
}

.sendBtn {
	width: 130px;
	height: 45px;
	font-size: 18px;
	border: 0;
	border-radius: 7px;
	padding: 7px 25px;
	background: #f08300;
	color: #fff;
	display: inline-block;
}

.sendBtn:hover {
	background-color: #ff8f1f;
}

.sendBtn:active {
	background-color: #e07300;
}

コメント内の「#」はスタイルガイド上の見出しを表します。
コメント内の「```」で囲まれたHTMLが、スタイルが反映されるコンポーネントになります。

スタイルガイドの生成

さて、CSSファイルが作成出来たので、いよいよスタイルガイドを生成しましょう。
ターミナル上で、先ほど作成したstyledoccoディレクトリに移動し、以下のコマンドを実行します。

$ styledocco -n "Style Guide" ./css/test.css
  • nオプションにはプロジェクト名を指定します。

上記コマンドを実行すると、styledoccoディレクトリ下にdocsディレクトリが生成され、以下のようなディレクトリ構造になっているはずです!

styledocco
┗css
 ┗test.css
┗docs
 ┗index.html
 ┗test.html
スタイルガイドの完成

docs内のtest.htmlを見てみると、以下のようなスタイルガイドになっていると思います。
f:id:seattleservice:20130822145935p:plain


以上のように、コメントとCSSだけで、一瞬でスタイルガイドが作れちゃうんです。便利ですね・・
これならスタイルガイドの更新も簡単ですし、CSSと一緒に実際の見栄えも確認できるので、共有もしやすいですね。