Onsen UIとFont Awesomeで劇的にカッコイイUIを実現【デザインいらず】

こんにちは。なべっちです。
今回はOnsen UIとFont Awesomeをご紹介します。
これらを組み合わせると…　簡単なのに美しいモバイルサイトが作れます！
 

Onsen UIとは・・・

WebアプリにネイティブのようなUI、UXを実装させることができるフレームワークです。

Font Awesomeとは・・・

Webサイトに使うアイコンをWebフォントとして扱えるようにしたものです。

導入してみよう。

今回はどちらも負担が少なく、メンテナンスも楽にできるCDNを利用するやり方で進めます。

Onsen UIの導入

head部分に以下のコードを追記。

 
以下はCSSコンポーネントです。
https://ja.onsen.io/v2/api/css.html

Font Awesomeの導入

head部分に以下のコードを追記。

 
最新のコードはこちらから
https://www.bootstrapcdn.com/fontawesome/
 
使えるアイコンはこちらから
http://fontawesome.io/icons/
 

Onsen UIとFont Awesomeで実際に作ってみた

アイコンは全てFont Awesomeを利用しています。
 
デモ
http://blitzgate.co.jp/blog_demo/659/
 

まとめ

この2つのツールを組み合わせることで、効率よくモバイルデザインができます。
皆さんもツールを上手く使いこなして、スマートにWebサイトを作りましょう！