このページの本文へ

注目フレームワークでスマホサイト制作を始めよう!

10分でわかる! jQuery Mobileのキホン

2012年02月03日 11時46分更新

西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

 スマートフォンサイトの制作でいま注目を浴びているのが「jQuery Mobile」です。jQuery Mobileを利用すると、CSSやJavaScriptの知識がない人でも簡単に本格的なスマートフォンサイトを作成できます。そんな“jQuery Mobileのキホン”が10分でわかるように、要点をギュッと絞って解説しましょう。

※本記事は、jQuery Mobile 1.0をもとに執筆しています。

0分目:
jQuery Mobileのダウンロードと利用方法

 jQuery Mobileは、HTMLのhead要素で、(1)jQueryのスクリプトファイル、(2)jQuery Mobileのスクリプトファイル、(3)jQuery MobileのCSSファイルを読み込むだけで利用できます。

 それぞれのファイルはjQueryのサーバーから呼び出せるようになっているので、わざわざ手元にダウンロードしなくても以下のように記述するだけですぐに利用できます。


<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

1分目:
まずはページの雛形を作成しよう

 jQuery Mobileを使ったWebページは、HTML5で作成します。HTML5といっても特に新しい要素を利用する必要はなく、jQuery Mobileのルールに沿って記述すればいいだけです。HTML5の知識は必須ではありません。

 HTML5では、次のようにDOCTYPE宣言が非常に短く、metaタグも最小限で済みます。


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>10分で分かるjQuery Mobileのキホン</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">  ……【1】
  </head>
  <body>
    (中略)
  </body>
</html>

 通常のPCサイトと異なるのは、【1】に記述しているViewportの設定でしょう。Viewportを設定することで、スマートフォン用の解像度(一般的には横幅320px)で表示される「スマートフォンサイト」になります。

3分目:
ページの内容を記述する

 次に、ページの中身を書いていきましょう。jQuery Mobileでは、data-role属性「page」を指定したdiv要素の内側にページの中身を記述します。data-role「page」の内側に書くのは、「ヘッダー」「コンテンツ」「フッター」の3つ。ヘッダーはdata-role属性「header」、コンテンツはdata-role属性「content」、フッターはdata-role属性「footer」を、指定したdiv要素でそれぞれ作成できます。

サンプル1(HTML)


<div data-role="page" id="index">
  <div data-role="header">
    <h1>ASCII.jp</h1>
  </div>
  <div data-role="content">
    <p>コンテンツの内容</p>
  </div>
  <div data-role="footer">
    <h4>&copy; 2012 ASCII </h4>
  </div>
</div>

 jQuery Mobileでは、このように「data-◯◯="☓☓☓"」といった属性が多く登場します。これは、属性名を自由に設定できる「カスタムデータ属性」で、HTML5で定義されている機能です。jQuery Mobileではカスタムデータ属性を利用してさまざまな設定を記述すると、その設定をjQuery Mobileが読み取って必要な機能や装飾を施したページを生成してくれます。

 ここまでの結果をブラウザーで確認してみましょう。

<画象>01.png
jQuery Mobileを利用したサイト

 ヘッダー/コンテンツ/フッターの3つの領域が定義され、最小構成のスマートフォンサイトができました。

 これだけだと内容が寂しいので、コンテンツを追加していきましょう。

■Amazon.co.jpで購入
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング