ウェブ制作の時間を大幅に短縮する、今時のUIコンポーネントが簡単に実装できる -Chico UI
Post on:2012年3月2日
HTML5+CSS3+JavaScriptで制作されたオープンソースのUIコンポーネントコレクションを紹介します。
![サイトのキャプチャ](/wp-content/uploads-2012/2012030209.png)
[ad#ad-2]
Chico UIの対応ブラウザは下記の通りです。
IE6には対応していませんが、十分でしょう。
- 対応ブラウザ
-
- Google Chrome
- Safari
- Firefox 4+
- Internet Explorer 7+
- Opera
Chico UIのウェブページに使用するさまざまなUIコンポーネントを紹介します。
と、その前にレイアウトとグリッドから。
![サイトのキャプチャ](/wp-content/uploads-2012/2012030210-18.png)
Mesh: Layout
可変・エラスティックのレイアウト。
![サイトのキャプチャ](/wp-content/uploads-2012/2012030210-19.png)
Mesh: Grid
グリッドのパターン。
続いて、スタイルシートのライブラリです。
シンプルなHTMLにclassを付与するだけで実装できます。
![サイトのキャプチャ](/wp-content/uploads-2012/2012030210-13.png)
CSS Library: Buttons
画像無し、スタイルシートで実装したボタン。
![サイトのキャプチャ](/wp-content/uploads-2012/2012030210-14.png)
CSS Library: Icons
各種アイコンも簡単なコードで実装可能。
![サイトのキャプチャ](/wp-content/uploads-2012/2012030210-15.png)
CSS Library: Message Boxes
メッセージボックスも多種用意。
![サイトのキャプチャ](/wp-content/uploads-2012/2012030210-16.png)
CSS Library: Pagination
ページネーション。
![サイトのキャプチャ](/wp-content/uploads-2012/2012030210-17.png)
Form
フォームもclass名を変更するだけで多種多様なスタイルで。
[ad#ad-2]
以下、最近のウェブサイトでよく見かけるUIコンポーネントです。
![サイトのキャプチャ](/wp-content/uploads-2012/2012030210-01.png)
Auto Complete
フォームの入力欄にヒントなどのテキストを表示します。
![サイトのキャプチャ](/wp-content/uploads-2012/2012030210-02.png)
Blink
カラーをアニメーションで変更します。
![サイトのキャプチャ](/wp-content/uploads-2012/2012030210-03.png)
Calendar
カレンダー(リードオンリー)。
![サイトのキャプチャ](/wp-content/uploads-2012/2012030210-04.png)
Carousel
コンテンツリストをアニメーションでスライドするカルーセル。
![サイトのキャプチャ](/wp-content/uploads-2012/2012030210-05.png)
CountDown
Twitterのように文字をカウントダウンします。
![サイトのキャプチャ](/wp-content/uploads-2012/2012030210-06.png)
Date Picker
日付入力を支援。
![サイトのキャプチャ](/wp-content/uploads-2012/2012030210-07.png)
Dropdown
ドロップダウン。
![サイトのキャプチャ](/wp-content/uploads-2012/2012030210-08.png)
Expando
アローをクリックするとインフォメーションが表示されます。
![サイトのキャプチャ](/wp-content/uploads-2012/2012030210-09.png)
menu
入れ子のリストをアニメーションで開閉するメニュー。
![サイトのキャプチャ](/wp-content/uploads-2012/2012030210-10.png)
Modal
モーダルウインドウを表示します。
![サイトのキャプチャ](/wp-content/uploads-2012/2012030210-11.png)
Tab Navigation
タブコンテンツ。
![サイトのキャプチャ](/wp-content/uploads-2012/2012030210-12.png)
Zoom
画像の一部を拡大表示します。
sponsors