ページ(page)とは

2015年11月22日

jQueryMobileでは、スマートフォンの画面に表示するページ(page)というウィジェットで構成します。ウィジェットとは画面に配置する部品の事をいい、１つのページは画面全体に表示されます。pageウィジェット内に、複数のウィジェットを配置でき、pageウィジェット自身もウィジェットの１つです。pageウィジェットは以下の３つから構成されています。

●ヘッダ(header)　->　画面の上端の部分(タイトルやメニューを表示)
●コンテンツ(content)　->　画面中央の中身の部分(記事とか)
●フッタ(footer)　->　画面の下端の部分(コピーライトやページ送り)

ページのHTMLタグ

HTMLでページを作成するときに、page全体を囲むHTMLタグにdata-role="page"を追加します。HTML4なら<div>、HTML5なら<section>を用います。

jQueryMobileだと、<body>内にdata-role="page"がせってされているタグが見当たらない時は、<body>～</body>の内側に<div data-role="page">を追加します。

ヘッダとフッタ

ヘッダとフッタは1ページに１つずつ作成できます。ページ内にヘッダ、フッタが必要なければ配置しなくても大丈夫です。ヘッダを囲むタグはdata-role="header"、フッタはdata-role="footer"を追加します。HTML4なら<div>,HTML5なら<header>や<footer>タグで囲みます。

タグはページを囲むタグの内側に配置する。ヘッダ、フッタの内部に表記する文字は<h1>～<h6>のいずれかで囲んで作成します。これらのタグで囲んでも
文字の大きさは同じです。ヘッダにはタイトルやメニューを表示して、フッタにはページ送りを表示します。サンプルコードはHTML5で書いていきます。

サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jqueryMobileのテスト</title>

	<link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css">
	<script src="../js/jquery-1.11.3.js"></script>
	<script src="../js/jquery.mobile-1.4.5.js"></script>

</head>
<body>
<section data-role="page">
	<header data-role="header">
		<h1>ヘッダ</h1>
	</header>
	<!-- ここにページの中身 -->
	<footer data-role="footer">
		<h1>フッタ</h1>
	</footer>
</section>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jqueryMobileのテスト</title>

</head>

<body>

</header>

</footer>

</section>

</body>

</html>

サンプルコードを実行して、ブラウザのデベロッパーツールからモバイルサイトを見て頂くと、ヘッダとフッタが表示されているのが確認できます。