[CSS]デスクトップ・スマフォ・タブレット向けの美しいUIエレメントを簡単に実装できるスタイルシート -TopCoat
Post on:2013年4月18日
sponsors
クリーンなHTMLを使い、レスポンシブを念頭においたUIエレメントを簡単に実装できるオープンソースのライブラリを紹介します。
TopCoatのセットアップ
当スタイルシートを外部ファイルとして配置するだけです。
<link rel="stylesheet" type="text/css" href="css/topcoat-desktop-min.css">
TopCoatのスタイルシートは2種類あり、デスクトップ用（24KB）、スマフォ用（20KB）となっています。
それぞれのデモを見てみましょう。
TopCoat for Desktop
デスクトップ用のデモです。
デスクトップでご覧ください。
Color
TopCoatのベースのカラースキームです。ブラック・ホワイト・グレーがかっこいい。
Font
フォントと背景を組み合わせるとこんな感じです。
Button
シンプルなボタン。
Icon Label Button
アイコンとラベル付きのボタン。
Breadcrumbs
パンくず。
Drop-Down
ドロップダウン、ホバーでハイライトします。
Slide Switch
クリックでオン・オフ切替。
Text Field
フォーム関連も揃っています。
Approximate Slider
スライダー。
Spinner
アニメーションで動くスピナー。
TopCoat for Mobile
モバイル用のデモです、スマフォ・タブレットでご覧ください。
下記はiPadでのキャプチャです。
ヘッダのバー。
タブのバー。
ラベル付きのボタン。
リスト形式のボタン。
テキストや検索などの入力フォーム。
チェックボックスやスイッチ。
アニメーションで動くスピナーとプログレスバー。
カウントとプロフィール。
オーバーレイのモーダルウインドウ。
sponsors
