jQuery Mobileはモバイル・タブレット・デスクトップのすべてのプラットフォームで動作するタッチフレンドリーなUIフレームワークです。
HTMLのHEADに以下のCSSとスクリプトを追加することで利用が可能です。
<head>
<meta name="viewport" content="width=device-width">
<meta charset="UTF-8">
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
BODYに以下のような構成でコンテンツを作成します。
<body>
<div id="page1" data-role="page">
<div data-role="header" data-position="fixed">
<h1>ヘッダー</h1>
</div>
<div role="main" class="ui-content">
<p>コンテンツ</p>
</div>
<div data-role="footer" data-position="fixed">
<h3>フッター</h3>
</div>
</div>
</body>
スマホ／タブレットに最適化されたアプリの提供が可能です。
