|
|---|
jQuery Mobileによるスマートフォンサイトの制作方法を解説する本連載。前回に続き、簡単な会社案内サイトを作成ながらjQuery Mobileの基本を学びましょう。今回は、jQuery MobileのフォームUIを使って、以下のような「お問い合わせ」ページ（#contact）を作成し、会社案内サイトを完成させます。
|
|---|
| 作成するサンプル。jQuery Mobileを利用するとスマートフォンに最適化されたフォームを手軽に作成できる |
フォームUIの課題とjQuery Mobileによる解決
スマートフォンのブラウザーに標準で用意されているフォーム部品はどれもサイズが小さく、そのままでは指による操作に適しません。スマートフォンサイトの制作ではフォームをスマートフォンに最適化することが重要です。
以下は、jQuery Mobileを使わずに作成したお問い合わせページをiPhone/Androidで表示したものです。
 |  | |
|---|---|---|
| iPhone（左）の標準フォームUIとAndroid（右）の標準フォームUI | ||
フォームUIの中でも、特にチェックボックスやラジオボタンはサイズが非常に小さく、タップ操作で正しく選択するのは困難です。しかもiPhoneの場合はlabel要素に対応していないので、label要素内のテキストをタップしてもチェックボックスやラジオボタンが選択されません（Androidはlabel要素に対応しています）。
jQuery Mobileを利用することで、使いづらいブラウザー標準のフォームUIをスマートフォンに最適化された使いやすいフォームUIに変更できます。
書籍では「jQuery Mobile 1.0」正式版に対応し、内容を全面的に改訂。新たなカスタマイズサンプルや書き下ろしコラムも多数追加し、制作現場ですぐに役立つ1冊になっています。ペーパープロトタイプができるUIカード付き。
jQuery Mobile
スマートフォンサイト デザイン入門
本体 2,380円＋税、B5変形判224ページ（オール4色刷）
ISBN：978-4-04-870669-8
ソーシャルリアクション
この連載の記事
- 第10回 jQuery MobileのCSSを変更してテーマをカスタマイズ
- 第9回 jQuery Mobileのアコーディオンでスマホサイトを制作
- 第8回 実例で学ぶjQuery MobileのCSSカスタマイズ
- 第7回 サンプルで学ぶjQuery Mobileまとめ（後編）
- 第6回 サンプルで学ぶjQuery Mobileまとめ（中編）
- 第5回 サンプルで学ぶjQuery Mobileまとめ（前編）
- 第3回 jQuery Mobileのマークアップの基本とCSSの変更
- 第2回 いまから始める、jQuery Mobileの基本
- 第1回 jQuery Mobileとは――スマホ時代の到来とWeb制作
- この連載の一覧へ
