jQuery Mobileを利用するとスマートフォンサイトを手軽に制作できますが、基本テンプレートをベースに制作すると「いかにもjQuery Mobileらしい」デザインになってしまい、他のサイトと似通ってしまいます。 そこで今回はjQuery Mobileのテンプレートをフルカスタマイズし、オリジナルデザインのスマートフォンサイトを作成する方法を解説します。サンプルとして、次のようなカタログサイトを制作します。 トップページには新着商品のサムネイル画像が3つ並び、その下にはアコーディオンパネルでニュースを掲載しています。新着商品のサムネイル画像を選択すると詳細ページに遷移し、詳細ページで画像をタップすると画像を拡大して表示します。 HTMLの作成 デザインカンプを元にHTMLを作成します。head要素内は次のように記述します。 ■サンプル1[HTML] <!DOCTYPE html> <
![実例で学ぶjQuery MobileのCSSカスタマイズ (1/3)](https://cdn-ak-scissors.b.st-hatena.com/image/square/c62d845628cfb24d6bb21d4b13cc83e39623a894/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2011%2F05%2F20%2F294578%2Fl%2Fec008d8b18c97ea6.jpg)