スマホサイト制作
http://simple-honesty.mods.jp/iphone/test2.html
jQuery Mobileは、HTMLのhead要素で、
（1）jQueryのスクリプトファイル
（2）jQuery Mobileのスクリプトファイル
（3）jQuery MobileのCSSファイル
を読み込むだけで利用できます。
<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>
CDN（Contents Delivery Network）
コンテンツデリバリネットワークとは、ファイルサイズの大きいデジタルコンテンツをネットワーク経由で配信するために最適化されたネットワークのこと
CDNを構築・運用し、企業などに有料で利用させるサービスをコンテンツデリバリサービス(CDS)という
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1">
Viewportは
iPhoneにおける仮想的なウィンドウサイズのことで、
このメタタグにより、ページを最初に開いた時の画面サイズ、拡大率などを指定。
iPhoneの画面サイズは横：320px 縦：480px。
iPhoneは横幅320pxなので、ここでは320pxに合わせる
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>iphone site</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,minimum-scale=1, maximum-scale=1"> </head> <body> <div data-role="page" id="index" data-theme="b"> <div data-role="header" data-theme="b"> <h1>AIUEO</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true" data-theme="c"> <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> </div> <div data-role="footer" data-theme="b"> <h4>© 2012 AIUEO </h4> </div> </div> <div data-role="page" id="book8"> <div data-role="header"> <a href="#index" data-direction="reverse">T0P</a> <h1>AIUEO</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 AIUEO </h4> </div> </div> <div data-role="page" id="book7"> <div data-role="header"> <a href="#index" data-direction="reverse">T0P</a> <h1>AIUEO</h1> </div> <div data-role="content"> <h2>標準HTML5タグリファレンス</h2> <p>制作現場での使い勝手にこだわった、新しいタグリファレンス！ 軽くて開きやすい造本、見やすいレイアウトで、sectionやarticleなど新要素の使いどころも徹底解説。スマホ用Webアプリ付き。</p> <p><a href="http://amazon.co.jp/o/ASIN/4048860631" ><img src="http://images.amazon.com/images/P/4048860631.09._OU09_SCMZZZZZZZ_.jpg" alt="標準HTML5タグリファレンス" /></a></p> </div> <div data-role="footer"> <h4>© 2012 AIUEO </h4> </div> </div> <div data-role="page" id="book6"> <div data-role="header"> <a href="#index" data-direction="reverse">T0P</a> <h1>AIUEO</h1> </div> <div data-role="content"> <h2>リスティング広告 プロの思考回路</h2> <p>Google AdWordsの元「インサイダー」を含む7名の著者が、リスティング広告、SEMの基本ノウハウ、実際の運用、将来展望までを解き明かした! Yahoo!リスティング広告の新管理画面にも対応。</p> <p><a href="http://amazon.co.jp/o/ASIN/4048703609" ><img src="http://images.amazon.com/images/P/4048703609.09._OU09_SCMZZZZZZZ_.jpg" alt="リスティング広告 プロの思考回路" /></a></p> </div> <div data-role="footer"> <h4>© 2012 AIUEO </h4> </div> </div> <div data-role="page" id="book5"> <div data-role="header"> <a href="#index" data-direction="reverse">T0P</a> <h1>AIUEO</h1> </div> <div data-role="content"> <h2>iPhone+Android スマートフォンサイト制作入門</h2> <p>「PCサイトでiPhone対応を求められた」「Andoridでも見やすいサイトを作りたい」そんなWeb制作者の声に応える本ができました。サイト設計からHTML5/CSS3による制作まで、実例で解説。画面設計に便利な特製ノート付き。</p> <p><a href="http://amazon.co.jp/o/ASIN/4048702181" ><img src="http://images.amazon.com/images/P/4048702181.09._OU09_SCMZZZZZZZ_.jpg" alt="iPhone+Android スマートフォンサイト制作入門" /></a></p> </div> <div data-role="footer"> <h4>© 2012 AIUEO </h4> </div> </div> <div data-role="page" id="book4"> <div data-role="header"> <a href="#index" data-direction="reverse">T0P</a> <h1>AIUEO</h1> </div> <div data-role="content"> <h2>HTML5+JavaScript アイデア&実践サンプル</h2> <p>遊べるサンプルで最新Web技術を身につける!GPSナビ、ピアノ演奏、字幕付き動画プレーヤーなど、今すぐ試せる豊富なサンプルでHTML5 APIとJavaScriptの具体的な使い方を解説。</p> <p><a href="http://amazon.co.jp/o/ASIN/4048704486" ><img src="http://images.amazon.com/images/P/4048704486.09._OU09_SCMZZZZZZZ_.jpg" alt="HTML5+JavaScript アイデア&実践サンプル" /></a></p> </div> <div data-role="footer"> <h4>© 2012 AIUEO </h4> </div> </div> <div data-role="page" id="book3"> <div data-role="header"> <a href="#index" data-direction="reverse">T0P</a> <h1>AIUEO</h1> </div> <div data-role="content"> <h2>プロが教えるデジカメ撮影テクニック</h2> <p>プロカメラマン三浦健司氏が30年に及ぶ活躍で得たさまざまな撮影テクニックを、文章だけでなくイラストや写真で図解しました。さらにプロカメラマンだけが使っていた便利な機材も多数紹介し、撮影を効率的に進め、被写体を魅力に見せるために必要な情報やテクニックをまとめました。</p> <p><a href="http://amazon.co.jp/o/ASIN/4048684167" ><img src="http://images.amazon.com/images/P/4048684167.09._OU09_SCMZZZZZZZ_.jpg" alt="プロが教えるデジカメ撮影テクニック" /></a></p> </div> <div data-role="footer"> <h4>© 2012 AIUEO </h4> </div> </div> <div data-role="page" id="book2"> <div data-role="header"> <a href="#index" data-direction="reverse">T0P</a> <h1>AIUEO</h1> </div> <div data-role="content"> <h2>Web制作の現場で使う jQueryデザイン入門</h2> <p>もうJavaScriptのコピペは卒業!そんなWebデザイナーに、初めてのjQuery本がついに誕生。すぐ使える実践サンプル(商用利用可)で、Web制作に必要なことだけを効率的に学習。特製チートシート付。</p> <p><a href="http://amazon.co.jp/o/ASIN/4048684116" ><img src="http://images.amazon.com/images/P/4048684116.09._OU09_SCMZZZZZZZ_.jpg" alt="Web制作の現場で使う jQueryデザイン入門" /></a></p> </div> <div data-role="footer"> <h4>© 2012 AIUEO </h4> </div> </div> <div data-role="page" id="book1"> <div data-role="header"> <a href="#index" data-direction="reverse">T0P</a> <h1>AIUEO</h1> </div> <div data-role="content"> <h2>現場でプロが培った Google Analyticsの使い方</h2> <p>月間4000万PVの「ASCII.jp」の運営で培った「Google Analytics」のノウハウを現場担当者が徹底解説。Analytics に秘められた設計思想から問題解決の具体的手法までが分かる決定版!</p> <p><a href="http://amazon.co.jp/o/ASIN/4048684124" ><img src="http://images.amazon.com/images/P/4048684124.09._OU09_SCMZZZZZZZ_.jpg" alt="現場でプロが培った Google Analyticsの使い方" /></a></p> </div> <div data-role="footer"> <h4>© 2012 AIUEO </h4> </div> </div> </body> </html>
liとaの中にhタグやpタグが入ることもある。
<div data-role="content"> <ul data-role="listview" data-inset="true" data-theme="c"> <li data-role="list-divider">Menu</li> <li><a href="#page"> <h3>jQuery Mobile とは?</h3> <p>jQuery Mobileについて解説します</p> </a></li> <li><a href="#page"> <h3>jQuery Mobileの基本</h3> <p>jQuery Mobileの使い方について解説します</p> </a></li> <li><a href="#page"> <h3>jQuery Mobileのサンプル</h3> <p>jQuery Mobileを利用したサンプルを紹介します</p> </a></li> </ul> </div>
テーマーを簡単にカスマイズ
http://jquerymobile.com/themeroller/
まとめ
