レスポンシブの確認もできる!UIコンポーネントのデザインや実装方法をまとめて管理できるスタイルガイド -Component Styleguide

Webサイトで実装するさまざまなUIエレメントやコンポーネントのデザインや実装方法をまとめて管理できるスタイルガイドを作成できるシンプルなフレームワークを紹介します。

必要に応じて、HTMLのテンプレート、CSSのスタイルシート、使用しているのであればJavaScriptもすべて利用できます。

レスポンシブ対応の確認もできるスタイルガイド

Component Styleguide -GitHub

Component Styleguideのデモページで、どんな感じのスタイルガイドが作成できるか確認できます。

スタイルガイドのキャプチャ

Component Styleguideのデモページ

スタイルガイドには、ボタン・見出し・テーブル・フォームなどのコンポーネントが定義されています。

スタイルガイドの操作は、上部のバーから。

スタイルガイドのキャプチャ

上部のバーで操作

デバイスのアイコンを選択すると、そのサイズで各コンポーネントが表示されます。

スタイルガイドのキャプチャ

スタイルガイドを幅: 320pxで表示

表示サイズの変更はかなり快適です。

スタイルガイドのキャプチャ

スタイルガイドを幅: 768pxで表示

バーの左のアイコンからは、表示するコンポーネントを選択できます。

スタイルガイドのキャプチャ

スタイルガイドの目次

各コンポーネントを実装するコードを表示するには、右のアイコンを選択します。

スタイルガイドのキャプチャ

各コンポーネントのコードを表示

top of page

©2017 coliss