[CSS]デスクトップ・スマフォ・タブレット向けの美しいUIエレメントを簡単に実装できるスタイルシート -TopCoat

クリーンなHTMLを使い、レスポンシブを念頭においたUIエレメントを簡単に実装できるオープンソースのライブラリを紹介します。

サイトのキャプチャ

TopCoat
TopCoat -GitHub

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でのキャプチャです。

デモのキャプチャ

ヘッダのバー。

デモのキャプチャ

タブのバー。

デモのキャプチャ

ラベル付きのボタン。

デモのキャプチャ

リスト形式のボタン。

デモのキャプチャ

テキストや検索などの入力フォーム。

デモのキャプチャ

チェックボックスやスイッチ。

デモのキャプチャ

アニメーションで動くスピナーとプログレスバー。

デモのキャプチャ

カウントとプロフィール。

デモのキャプチャ

オーバーレイのモーダルウインドウ。

top of page

©2017 coliss