レスポンシブの確認もできる!UIコンポーネントのデザインや実装方法をまとめて管理できるスタイルガイド -Component Styleguide
Post on:2016年10月25日
Webサイトで実装するさまざまなUIエレメントやコンポーネントのデザインや実装方法をまとめて管理できるスタイルガイドを作成できるシンプルなフレームワークを紹介します。
必要に応じて、HTMLのテンプレート、CSSのスタイルシート、使用しているのであればJavaScriptもすべて利用できます。
![レスポンシブ対応の確認もできるスタイルガイド](http://coliss.com/wp-content/uploads-201604/2016102501.png)
Component Styleguideのデモページで、どんな感じのスタイルガイドが作成できるか確認できます。
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016102502-01.png)
スタイルガイドには、ボタン・見出し・テーブル・フォームなどのコンポーネントが定義されています。
スタイルガイドの操作は、上部のバーから。
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016102502-00.png)
上部のバーで操作
デバイスのアイコンを選択すると、そのサイズで各コンポーネントが表示されます。
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016102502-02.png)
スタイルガイドを幅: 320pxで表示
表示サイズの変更はかなり快適です。
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016102502-03.png)
スタイルガイドを幅: 768pxで表示
バーの左のアイコンからは、表示するコンポーネントを選択できます。
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016102502-04.png)
スタイルガイドの目次
各コンポーネントを実装するコードを表示するには、右のアイコンを選択します。
![スタイルガイドのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016102502-05.png)
各コンポーネントのコードを表示
sponsors