BLOG

Blitz Gateスタッフブログ

BLOG

簡単なのに美しい…!Onsen UIとFont Awesomeでモバイルサイトを実現

書いた人:

HTML , Web , 技術  

Onsen UIとFont Awesome

こんにちは。なべっちです。

今回は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サイトを作りましょう!
 

  • このエントリーをはてなブックマークに追加