jQuery Mobileを使ってみよう！ (5/5)

ここで、ちょっと面白い属性を追加してみましょう。先ほどのソースコードに記述したページタグを、以下のように修正してみてください。

<div id="home"
  data-role="page" data-theme="a">

わかりますね？　最後にdata-theme="a"という属性が追加になっています。これでページにアクセスすると、ページ全体が黒を基調とした表示に変わります。これは、GUIの「テーマ」を変更したためです。

テーマというのは、GUIのルック＆フィールを統一したデザインでまとめた、「GUIデザインのセット」のようなものです。jQuery Mobileには、あらかじめ５種類のテーマが用意されており、data-theme属性で指定することで簡単に設定することができます。用意されているテーマは以下のものです。

「a」――黒を基調としたテーマです。
「b」――青を基調としたテーマです。
「c」――グレーを基調としたテーマです。
「d」――白を基調としたテーマです。
「e」――黄色を基調としたテーマです。

これらのテーマをよくみると、デフォルトで表示されたテーマ？は見当たりませんね。実は、data-themeを指定しないでおくと、これらのテーマからそれぞれのGUIごとに適したものを集めたような表示になるのです（例えば、タイトルバーは黒だが、背景はグレー、ボタンを選択すると青、といった具合）。

このdata-themeがない状態のテーマ？が、jQuery Mobileのデフォルトテーマといってよいでしょう。全体にバランスよく作られていますので、とりあえずこれでサイトを作るとよいでしょう。ちなみに、libroのスマートフォンサイトも、このデフォルトテーマで作られています。

このdata-themeによるテーマの設定は、１つのHTML内に記述したタグそれぞれに指定することができます。例えば、「a」の黒いテーマからリンクして移動すると「e」の黄色いテーマのページが現れる、というようなことも簡単にできるのです。それぞれのページでテーマを設定して、表示の変化を見てみると面白いでしょう。


――さあ、とりあえずこれで「ページを幾つか用意し、リンクを使って表示を切り替えたりする」という、Webページのもっとも基本となる部分は作れるようになりました。とりあえず、これだけでも、ちょっとしたページの作成はできるようになりますね。

ここまでの説明で、何か気がついたことはないでしょうか。jQuery Mobileは、JavaScriptのライブラリです。が、今まで作成したソースコードには、JavaScriptのスクリプトは１行もないのです！

jQuery Mobileは、専門的な知識など使わず、あくまで「HTMLとスタイルシートだけでWebページのデザインを作成できる」ことを考えています。ですから、スクリプトがどうだ……といったことを考えずとも、簡単にスマートフォンらしいデザインのページが作れてしまうのです。スマートフォン向けのライブラリはいくつか登場していますが、jQuery Mobileが「本命」といわれるのは、この部分が大きいといえるでしょう。スクリプトなどの知識がないと使えないのでは、Webのデザイナが気軽に使うことはできません。jQueryもばいなら、HTMLの延長という感覚で使うことができるのです。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。