スポンサーリンク
スポンサーリンク

ページ(page)とは

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

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

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

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

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

コメント

タイトルとURLをコピーしました