複数のHTMLでサイト構築

作ってみた

複数ページにdata-role="page"属性を記述する

  • 複数のページに「data-role="page"」を記述することで、複数ページを遷移させる
  • 単一ページを「data-role="page"」で記述する
  • ヘッダー（data-role="header"）
  • コンテンツ（data-role="content"）
  • フッター（data-role="footer"）
  • ヘッダー・フッターは省略できる

《index.html》

http://iphone4simulator.com/island-web.jp/air/lesson/smartphone/06/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>複数のHTMLでサイト構築する</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
</head>
<body>

<div data-role="page" id="top">
<div data-role="header">
<h1>TOPページ</h1>
</div>
<div data-role="content">
<ul>
<li><a href="page2.html">ページ2へ</a></li>
<li><a href="page3.html">ページ3へ</a></li>
</ul>
</div>
<div data-role="footer">
<h4>フッター</h4>
</div>
</div>

</body>
</html>

《page2.html》

http://iphone4simulator.com/island-web.jp/air/lesson/smartphone/06/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>複数のHTMLでサイト構築する(2)</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
</head>
<body>

<div data-role="page" id="page2">
<div data-role="header">
<h1>ページ2</h1>
</div>
<div data-role="content">
<p>ページ2の内容</p>
</div>
<div data-role="footer">
<h4>フッター</h4>
</div>
</div>

</body>
</html>

《page3.html》

http://iphone4simulator.com/island-web.jp/air/lesson/smartphone/06/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>複数のHTMLでサイト構築する(3)</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
</head>
<body>

<div data-role="page" id="page3">
<div data-role="header">
<h1>ページ3</h1>
</div>
<div data-role="content">
<p>ページ3の内容</p>
</div>
<div data-role="footer">
<h4>フッター</h4>
</div>
</div>

</body>
</html>

jQueryMobileサイト例