最近話題の「jQuery Mobile」を試してみました。
「jQuery Mobile」はスマートフォン向けサイトを容易に作成が可能となるjQueryのプラグインです。

基本的な使い方は、「jQuery Mobile」を読み込み、divタグにid属性を割り振ったり、「jQuery Mobile」に用意された「data-role」属性などを設定することでスマートフォン向けのGUIが容易に作成可能です。
※「jQuery Mobile」では、「data-***属性」などHTML5から利用可能なものを活用しているため、PCで確認される際は、HTML5対応ブラウザでお試し下さい。

では今回簡単な使い方を紹介していきたいと思います。

1.「jQuery Mobile」より、プラグインをダウンロードします。
2. 「jQuery Mobile」のスタイル、JavaScriptを読み込みます。

jQuery Mobile Test

3. メインとなるコンテンツにid、data-roleを設定する

Test

jQuery Mobileのテストを行っています。

こんなに簡単にスマートフォンサイトがつくれるのですね。

設定は以上になります。
ブラウザで確認してみると、、

非常に簡単に、スマートフォン向けサイトができます。
「jQuery Mobile」には様々な設定が用意されており、そららの設定を行うだけでGUIを簡単に変更が可能です。

[見た目を変えてみる]

[ボタン風に表示(アイコン付き)]

上へ

[複数のボタンを並べて表示]

あ
い
う
え
お

[フルスクリーン]

～省略～

今後サイトのスマートフォン対応は必須になってくるかと思います。
そんな時この「jQuery Mobile」を利用するとかなり効率よくサイト制作が進むかと思います。
この「FreeStyleVision」も時間を見つけ、スマートフォン対応してみたいと思います。