ITエンジニア/デザイナ向けにオープンソースを毎日紹介

スマートフォンのWebサイトを作ったり、HTMLと合わせたネイティブアプリ、いわゆるハイブリッドアプリを作る上でネイティブに似たUIのWebコンポーネントは欠かせません。デザインフレームワークもたくさん出ています。

その差別化になるのは、とにかく様々なコンポーネントが存在することで多彩なニーズに応えられるか否かになります。そこで今回はスマートフォン向けのUIフレームワークOnsen UI向けのCSSコンポーネント、Onsen CSS Componentsを紹介します。

Onsen CSS Componentsの使い方

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

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

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

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

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

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

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

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

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

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

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

Onsen CSS Components

OnsenUI/onsen-css-components

 

MOONGIFTの関連記事

コメント

  • MOONGIFTプレミアム
  • Mobile Touch