スマートフォンのWebサイトを作ったり、HTMLと合わせたネイティブアプリ、いわゆるハイブリッドアプリを作る上でネイティブに似たUIのWebコンポーネントは欠かせません。デザインフレームワークもたくさん出ています。 その差別化になるのは、とにかく様々なコンポーネントが存在することで多彩なニーズに応えられるか否かになります。そこで今回はスマートフォン向けのUIフレームワークOnsen UI向けのCSSコンポーネント、Onsen CSS Componentsを紹介します。

Onsen CSS Componentsの使い方

Onsen CSS Componentsを使うとどのようなスマートフォンサイト、ハイブリッドアプリができるのか。それはやはりデモを見るのが一番です。

ログイン/グリッドメニュー/タイムライン。

プロフィール/ニュースフィード/イメージビュー。

登録、検索系も用意されています。

リストもアイコンや画像付きなど多彩です。

ボタンもアイコン付きが使えます。

フォーム系のコンポーネントも多数用意されています。

HTMLを確認できるのですぐに適用できそうですね。

カラーテーマを変更することで全体のイメージをがらっと変えられます。

Onsen UIを使えばネイティブ並のスマートフォンアプリをWeb技術で開発できます。さらにOnsen CSS Componentsを組み合わせることでネイティブ並のフラットなデザインコンポーネントを自在に組み合わせられるようになるでしょう。

Onsen CSS ComponentsはCSS製、Apache License 2.0のオープンソース・ソフトウェアです。

Onsen CSS Components OnsenUI/onsen-css-components