スマホサイトを作るなら、
スマホらしい動きのあるサイトにしたい！
けれどもjsはガリガリ書けない・・。
そんなデザイナーでもhtmlを書くだけで簡単にスマートフォンUIが作れてしまうフレームワーク「jQuery Mobile」を使ってみました。
 

jQuery Mobileをダウンロード



下記サイトから
http://jquerymobile.com/download/
jsファイルとcssファイルをダウンロードし
jQuery、jQuery Mobile、cssを読み込ませます。


jQuery Mobileの構造

jQuery Mobileでは、「deta-role="page"」を指定したdivを1ページと考えます。

サンプル

  
  

    会社概要
    事業内容
  

  

    事業内容
    アクセス
  

  

    アクセス
    HOME

ソースはHTML5でコーディングします。
ページ遷移にはページ内リンクを利用します。

基本はこれだけで簡単にスマートフォンUIが作れてしまいますが、問題点もいくつかありました。
・別ファイルへ遷移すると、遷移先のhtmlファイルを勝手に書き換えてしまう。
・デザインの自由度は無く、カスタマイズしにくくサンプルと同じようにしか作れない。


てことで、工数をかけず簡単にスマホサイトを作りたい場合は有効かもしれません。