ウェブ制作の時間を大幅に短縮する、今時のUIコンポーネントが簡単に実装できる -Chico UI

HTML5+CSS3+JavaScriptで制作されたオープンソースのUIコンポーネントコレクションを紹介します。

Chico UI

[ad#ad-2]

Chico UIの対応ブラウザは下記の通りです。
IE6には対応していませんが、十分でしょう。

対応ブラウザ

• Google Chrome
• Safari
• Firefox 4+
• Internet Explorer 7+
• Opera

Chico UIのウェブページに使用するさまざまなUIコンポーネントを紹介します。
と、その前にレイアウトとグリッドから。

Mesh: Layout
可変・エラスティックのレイアウト。

Mesh: Grid
グリッドのパターン。

続いて、スタイルシートのライブラリです。
シンプルなHTMLにclassを付与するだけで実装できます。

CSS Library: Buttons
画像無し、スタイルシートで実装したボタン。

CSS Library: Icons
各種アイコンも簡単なコードで実装可能。

CSS Library: Message Boxes
メッセージボックスも多種用意。

CSS Library: Pagination
ページネーション。

Form
フォームもclass名を変更するだけで多種多様なスタイルで。

[ad#ad-2]

以下、最近のウェブサイトでよく見かけるUIコンポーネントです。

Auto Complete
フォームの入力欄にヒントなどのテキストを表示します。

Blink
カラーをアニメーションで変更します。

Calendar
カレンダー（リードオンリー）。

Carousel
コンテンツリストをアニメーションでスライドするカルーセル。

CountDown
Twitterのように文字をカウントダウンします。

Date Picker
日付入力を支援。

Dropdown
ドロップダウン。

Expando
アローをクリックするとインフォメーションが表示されます。

menu
入れ子のリストをアニメーションで開閉するメニュー。

Modal
モーダルウインドウを表示します。

Tab Navigation
タブコンテンツ。

Zoom
画像の一部を拡大表示します。