*

ページ(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

ボタンを配置する

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

記事を読む

no image

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

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

記事を読む

no image

テーマを設定する

テーマとは、統一化された各ウィジェットの外観などのデザインの事で、それぞれに名前がついています。同じ

記事を読む

no image

移動しないヘッダ、フッタにIDを設定する

MozillaやWebkitベースのブラウザでは、リンクにdata-transition="slid

記事を読む

no image

ページのURLを設定する

ユーザーにページのURLを知らせる時に使用するのがdata-url属性です。 data-url属性

記事を読む

no image

項目リストを設定する

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

記事を読む

no image

ボタン内にアイコンを表示したり、デザインを変更する

ボタン内にアイコンを表示するには、リンクと同じように、data-icon属性、data-iconpo

記事を読む

no image

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

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

記事を読む

no image

コンテンツを表示する

コンテンツはそのページのメインとなる情報を表示する部分です。コンテンツはヘッダとフッタの間に配置しま

記事を読む

no image

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

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

記事を読む

スポンサードリンク

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 ↑