*

ページ(page)とは

公開日: : 最終更新日:2016/04/17 jQueryMobile , ,

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で書いていきます。

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

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

スポンサードリンク

関連記事

no image

アイコンとサムネイルを表示する

各項目のレイアウトを設定する <li>の中には、色々なレイアウトを設定できます。いずれ

記事を読む

no image

data-属性により、ヘッダとフッタを常時表示する

前回の記事の続きです。 ヘッダとフッタを常時表示 ページのヘッダとフッタにdata-posi

記事を読む

no image

項目リストを設定する

項目リスト(listview)は、ふくすうの項目を列挙するためのウィジェットで、項目には文字列や、画

記事を読む

no image

値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだけを選択するウィジェット ラジ

記事を読む

no image

ナビゲーションバーを表示

ナビゲーションバーは、ヘッダ、フッタ内の複数のリンクをボタンのようにして表示するウィジェットです、よ

記事を読む

no image

リンク先を設定したり、アイコンを利用する。

リンク(link)とは、次の画面に表示するコンテンツを表すもので、HTMLではaタグで表します。jQ

記事を読む

no image

ヘッダ内、フッタ内にボタンを表示する

ヘッダ内にボタンを表示してみる ヘッダ内にリンクであるaタグを作成すると、それがボタンとして表示さ

記事を読む

no image

ボタンを配置する

リンクを表すaタグに「data-role="button"」を追加すると、画面にはボタンが表示されま

記事を読む

no image

jQueryMobileとフォームを組み合わせてみる

フォーム(user-submittable form)は、HTMLタグでは<form>タ

記事を読む

no image

ポップアップを表示する

ポップアップ(popup)とは、pageの上に付加情報や画像などのコンテンツを重ねて表示するウィジェ

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑