jQuery Mobileを利用する方法を解説します。
jQuery Mobileの読み込み
今回はjQuery Mobileに関するものはCDNを使用して読み込みます。
（インターネット環境に接続しないで実行する場合は本家サイトからダウンロードして下さい。）
HEADタグ内
まずはスタイルシート。
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
次にjQuery Mobileの本体。
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
data-role属性でページ構成を作成
data-role属性を使って単純なデータ構成を作成します。
BODYタグ内
ページのヘッダー。
<div data-role="header">
<h1>ヘッダー</h1>
</div>
HTML5で書く場合はdivタグをheadeにしても良いですね。
<header data-role="header">
<h1>ヘッダー</h1>
</header>
ページの内容。
<div data-role="content">
<p>内容</p>
</div>
ページのフッター。
<div data-role="footer">
<h1>フッター</h1>
</div>
これで基本的なページが作れます。
全体としては以下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>サイトタイトル</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<header data-role="header">
<h1>ヘッダー</h1>
</header>
<div data-role="content">
<p>内容</p>
</div>
<footer data-role="footer">
<h1>フッター</h1>
</footer>
</div>
</body>
</html>
