StyleDoccoはスタイルシート中に書いた設定をドキュメント化するソフトウェアです。

Webデザインにおいてスタイルシートは欠かせません。Webサイトのスタイルシート設定をドキュメントにしたい時に使いたいのがStyleDoccoです。

[![](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 10.12.31_thumb.1366623464.png)](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 10.12.31.1366623464.png)
インストールします。

[![](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 10.13.05_thumb.1366623466.png)](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 10.13.05.1366623466.png)
デモです。右側にスタイルシート、左側にその説明が表示されています。

[![](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 10.13.11_thumb.1366623469.png)](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 10.13.11.1366623469.png)
HTMLのコーディング方法と、その結果とかが上下に並んで表示されます。

[![](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 10.13.25_thumb.1366623471.png)](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 10.13.25.1366623471.png)
リスト表示などもあります。

[![](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 10.13.56_thumb.1366623472.png)](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 10.13.56.1366623472.png)
スマートフォンの幅に指定することもできます。

[![](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 10.14.04_thumb.1366623474.png)](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 10.14.04.1366623474.png)
レスポンシブWebデザインの場合は便利そうです。

[![](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 10.14.23_thumb.1366623476.png)](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 10.14.23.1366623476.png)
Bootstrapで作られたデモもあります。

[![](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 10.14.28_thumb.1366623478.png)](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 10.14.28.1366623478.png)
ボタンのデザイン。こうやって表示されると分かりやすいですね。

StyleDoccoを使うとCSSファイル中に書いた設定の使い方をそのままドキュメントにできるようになります。書き方と実際に適用した結果が分かれば、Webデザイナーの方も使いやすくなるでしょう。

StyleDoccoはnode.js/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

MOONGIFTはこう見る

プログラミングにおいてもソースコード中にドキュメントを書いて、コンバーターを使ってHTMLファイルにする類のライブラリが各言語向けに用意されています。StyleDoccoはそのスタイルシート版と言えるでしょう。

スタイルシートであれば、さらに見た目をWebブラウザ上で実現できるのがメリットになります。実際の設定とドキュメントが一つの場所にあれば、更新コストもぐっと下がることでしょう。

jacobrask/styledocco · GitHub

デモ:docs | StyleDocco

StyleDocco