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

なべっち なべっち
2017.12.08

こんにちは。なべっちです。
今回は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サイトを作りましょう!
 

スポンサーリンク

POPULAR

なべっち

なべっち

Frontend Engineer