Modern UI(旧:Metro)デザインのボタンやフォームを簡単に実装できるライブラリ -CSS3 Microsoft Modern Buttons
Post on:2012年10月24日
週末に発売予定のWindows8で採用されているModern UIの大きな特徴であるボタンやフォームを超軽量の外部スタイルシートファイルと簡単なclass指定で実装できるCSS3のライブラリを紹介します。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012102405.png)
Modern Buttons
CSS3 Microsoft Modern Buttons -GitHub
※キャプチャはWindows8のModern UI
Modern Buttonsの特徴
Modern Buttonsは、ボタンやフォームをCSS3で美しくスタイルした軽量(5.5KB gzipped)で使いやすいCSS/JavaScriptのライブラリです。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012102406.png)
- クロスブラウザ対応
- IE8をはじめ、最新のChrome, Firefox,など全てのモダンブラウザに対応。
- Bootstrap対応
- HTML/CSSのフレームワーク「Bootstrap2.0+」対応で、簡単に組み込めます。
- 制作者用にLESS, SASS
- ウェブ制作者用に、LESS, SASSのファイルも完備。
- LESS, SASSは、dsl-branchから。
- 商用利用、複製、頒布、OK
- ライセンスはCC 3.0で、商用利用、複製、頒布などOKです。
Modern Buttonsのデモ:ボタン
数多くあるボタンのデモから、いくつか紹介します。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012102407-01.png)
左から、a要素、input要素、button要素を使ったシンプルなボタン
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012102407-02.png)
ボタンのカラーはclassを変更するだけです。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012102407-03.png)
サイズもclassを変更するだけで、サイズなど他のバリエーションと組み合わせもOK。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012102407-04.png)
角丸やストライプもclassを変更するだけです。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012102407-05.png)
ボタンのグループ化やツールバーのように分けて配置することもできます。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012102407-06.png)
アイコンを配置するとかなりModern UIのようなデザインになります。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012102407-07.png)
jQueryを使って、リスト要素でドロップダウン型のボタンも作成できます。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012102407-08.png)
ドロップダウン型のボタンにもMorder UIのスタイルをあてることができます。
Modern Buttonsのデモ:フォーム
Modern Buttonsではボタンだけでなく、フォームのエレメントも数多く揃っています。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012102408-01.png)
シンプルながら利便性を考慮したテキストエリア・ボックス、チェックボックス・ラジオボタン。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012102408-02.png)
select要素を使ったドロップダウンやリスト。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012102408-03.png)
入力エリアの前後にアイテムを設置することもできます。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012102408-04.png)
フォームのエレメントのサイズも簡単に変更できます。
sponsors