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>
スマホ/タブレットに最適化されたアプリの提供が可能です。
