スマホサイトを作るなら、
スマホらしい動きのあるサイトにしたい！
けれども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
    会社概要
  
  

    会社概要
    事業内容
  
  

    事業内容
    アクセス
  
  

    アクセス
    HOME
  

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

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


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