レスポンシブの表示も完璧に定義できる優れもの!スタイルガイドを作成するのに役立つテンプレート -Styleguide
Post on:2016年5月19日
スタイルガイドとして見やすくて使いやすく、そして作成・編集も簡単に行え、モジュール式でカスタマイズ性にも優れたスタイルガイドを作成できるnode.jsベースのテンプレートを紹介します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051901.png)
Living Styleguide Made Easy
Styleguide -GitHub
先日「デザイン要素の定義や見せ方が勉強になる最近のスタイルガイドのまとめ」を紹介しましたが、このStyleguideもかなりの優れものです。
Styleguideの特徴
もう見た目がかっこいい! もちろん見た目はサイトのデザインに合わせて、カスタマイズが可能です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051902.png)
Styleguideはブラウザベースで利用できるスタイルガイドを作成できるMITライセンスのテンプレートです。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051909.png)
スタイルを定義して共有することができ、作成・編集・削除も簡単、各エレメントは異なるスクリーンサイズでの表示にも対応しています。
Styleguideのデモ
デモページでは、そんな優れもので見た目も素晴らしいスタイルガイドをチェックできます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051903.png)
スタイルはカテゴリに分けて管理することもできます。
まずは、ナビゲーション。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051904.gif)
上部のプルダウンやエレメントの左右にあるバーで、サイズを変更することができます。
右上の「Show code」で実装用のコードが表示され、補足情報などを記載するエリアも用意されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051905.png)
デモ: ナビゲーション: コードを表示
デモでは、6つのカテゴリが用意されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051906.gif)
表示サイズに合わせて、サイズだけが変わるのか、レイアウトも変わるのか、といったことも定義できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051907.gif)
ページでよく使うエレメントはモジュールに納められており、ロゴをはじめ、2カラムや3カラム、フルサイズのコンテンツなどが定義されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201602/2016051908.gif)
インストール方法や使い方は、下記ページをご覧ください。
sponsors