5分目:
スマホらしいトップページをあっという間に
コンテンツ領域(<div data-role="content">~</div>内)に次のようなHTMLを記述しましょう。
<ul data-role="listview" data-inset="true">
<li><a href="#book8">jQuery Mobile スマートフォンサイト デザイン入門</a></li>
<li><a href="#book7">標準HTML5タグリファレンス</a></li>
<li><a href="#book6">リスティング広告 プロの思考回路</a></li>
<li><a href="#book5">iPhone+Android スマートフォンサイト制作入門</a></li>
<li><a href="#book4">HTML5+JavaScript アイデア&実践サンプル</a></li>
<li><a href="#book3">プロが教えるデジカメ撮影テクニック</a></li>
<li><a href="#book2">Web制作の現場で使う jQueryデザイン入門</a></li>
<li><a href="#book1">現場でプロが培った Google Analyticsの使い方</a></li>
</ul>
ul要素に設定しているdata-role属性「listview」はリストをスマートフォン用に最適化して表示する設定で、data-inset属性「true」はリストの周りに余白を付けて角丸にする設定です。この2つの設定を加えることで、jQuery Mobileではスマートフォンらしいリスト型のメニュー画面を作成できます。
8分目:
詳細ページを記述して完成!
次に、メニューからリンクして移動する先の詳細ページを作成しましょう。詳細ページのHTMLは以下のようになります。
<div data-role="page" id="book8"> ……【1】
<div data-role="header">
<a href="#index" data-direction="reverse">T0P</a></a> ……【2】
<h1>ASCII.jp</h1>
</div>
<div data-role="content">
<h2>jQuery Mobile スマートフォンサイト デザイン入門</h2>
<p>もうスマホサイトで手間取らない! モバイルフレームワーク「jQuery Mobile」を使ったサイト制作の基本から、高度なカスタマイズまで、jQuery本売り上げNo.1の著者らが徹底解説。</p>
<p><a href="http://amazon.co.jp/o/ASIN/4048706691" ><img src="http://images.amazon.com/images/P/4048706691.09._OU09_SCMZZZZZZZ_.jpg" alt="jQuery Mobile スマートフォンサイト デザイン入門" /></a></p>
</div>
<div data-role="footer">
<h4>© 2012 ASCII </h4>
</div>
</div>
通常のWebサイトでは、「1ページ=1つのHTMLファイル」ですが、jQuery Mobileでは<div data-role="page">~</div>が1ページです。1つのHTMLファイルに複数のページを記述できるのです。
詳細ページもトップページと同じHTML内に記述し、data-role属性「page」の要素に、メニューのリンク(href属性)に指定したid名を指定します【1】。すると、メニューのリンクがクリックされると、詳細ページにスライドしてページが遷移するようになります。
詳細ページのヘッダーには、トップページへ戻るボタンを設定します【2】。data-direction属性「reverse」を指定すると、トップ→詳細ページの遷移とは逆向きにスライドしてページが切り替わります。
最後に、詳細ページを必要なページの数だけ記述したら完成です。
このように、jQuery Mobileを利用すると、スマートフォンサイトをとても簡単に作成できます。jQuery Mobileで、スマートフォンサイトの制作を始めてみてはいかがでしょうか。
実務でもjQuery Mobileを使いたい方へ
「jQuery Mobile スマートフォンサイト デザイン入門」
好評発売中!
jQuery Mobileを使ったスマートフォンサイトの制作方法を解説した書籍「jQuery Mobile スマートフォンサイト デザイン入門」(西畑一馬、鍋坂理恵 著)が、アスキー・メディアワークスから発売中です。
Image from Amazon.co.jp |
jQuery Mobile スマートフォンサイト デザイン入門 |
本書は、jQuery Mobileによるスマートフォンサイトの作り方を、チュートリアルとリファレンスで詳しく解説した本。Webデザイナーやマークアップエンジニアの方が、実際の制作案件で利用することを想定して、後半ではCSS3を使った高度なカスタマイズテクニックも紹介しました(APIなど、アプリケーション開発に必要な機能については取り上げていません)。
jQuery Mobileに初めて触れる方から、スマホサイト制作案件で本格的に使いたい方まで、おすすめの1冊です。