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