*

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

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

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

記事を読む

no image

class属性によりレイアウトとテーマを設定する

ウィジェットが画面に表示されるとき、HTMLタグには様々なclass属性が追加されます。これらはCS

記事を読む

no image

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

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

記事を読む

no image

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

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグループ化が有効です。グループ化され

記事を読む

no image

折りたたみを設定する

おりたたみ(collapse)は、予め概要を示す文字列が表示されている領域をクリックかタップすると、

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

ポップアップを表示する

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

記事を読む

no image

コンテンツを表示する

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

記事を読む

no image

<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するかで、ラジオボタンかチェックボッ

記事を読む

スポンサードリンク

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 ↑