*

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

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

ウィジェットが画面に表示されるとき、HTMLタグには様々なclass属性が追加されます。これらはCSSの設定を反映してレイアウトやテーマを表示するのに利用されます。今回は、前回までの記事で紹介したdata-属性とは異なる設定で追加できるclass属性の値について書いていきます。

下記の表は、設定の種類と、それに対応するclassの属性値、それらに関連するウィジェットを表します。classの属性値で「-*」は「-a~-z」のうち有効なものが設定されているものとします。

設定 class属性の属性値 ウィジェット
背景 ui-body,ui-body-* ページ
バー ui-bar,ui-bar-* ヘッダ、フッタ
グリッド ui-grid-*,ui-block-* ナビゲーションバー

背景(ui-body,ui-body-*)

class=”ui-body”はページの背景のようなレイアウトを行うための設定で、これが設定された領域は、ページのテーマとは異なるデザインに変更されます。実際には、”a”というテーマを設定したいときは”class=”ui-body ui-body-a”と設定します。デフォルトで設定できるのは、”ui-body-a”~”ui-body-b”のいずれかです。サンプルコードの実行結果はこちら

バー(ui-bar,ui-bar-*)

class=”ui-bar”はヘッダやフッタのようなレイアウトを行うための設定で、別途メニューバーなどが必要な時に利用できます。class=”ui-bar ui-bar-a”と設定するとテーマ”a”と同様のレイアウトに変更できます。デフォルトでは”ui-bar-a”~”ui-bar-b”まで設定できます。サンプルコードの実行結果はこちら

グリッド(ui-grid-*,ui-block-*)

jQueryMobileでのグリッド(grid)は、画面の1行分を2~5等分した領域を意味しています。分割したそれぞれの領域をブロック(block)といい、この中にはさらに別のウィジェットを表示できます。等分できるのは横幅だけで、高さは分割された領域のうち最大のものに統一されます。グリッド自身は、ページ内のヘッダ、フッタ、コンテンツのどの中にも配置することができます。サンプルコードの実行結果はこちら

値の末尾はテーマじゃない

下記の表はグリッドとブロックに設定するclass属性の値を表したもので、1行を3等分するには”ui-grid-b”、4等分するには”ui-grid-c”、5等分するには”ui-grid-d”です。グリッドの場合は、末尾のアルファベットが1行を等分する数を表します。

ブロックではclass属性に”ui-block-a”~”ui-block-e”を設定できますが、これはブロックの左からの位置を表します。ui-block-aが左端のブロックで、以下ui-block-bが左から2番目と続き、ui-block-eは5つ目となります。

位置 class属性の値 設定
グリッド ui-grid-a 2等分
ui-grid-b 3等分
ui-grid-c 4等分
ui-grid-d 5等分
ui-grid-solo 分割なし
ブロック ui-block-a 左から1つ目
ui-block-b 左から2つ目
ui-block-c 左から3つ目
ui-block-d 左から4つ目
ui-block-e 左から5つ目

スポンサードリンク

関連記事

no image

バルーンを表示、項目を分割、折り畳みやポップ内にlistviewを作成する。

バルーンとは、円形の囲みのことで、jQueryMobileでは、その内部に文字列を表示するために、実

記事を読む

no image

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

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

記事を読む

no image

同じHTML文書に複数ページを作成してみる

jQueryMobileでは、同じHTML文書内に複数ページを作成することができます。手順は以下の通

記事を読む

no image

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

トグルスイッチ(toggle switch)とは、〇型のつまみを左右にドラッグして2つの値のうちどち

記事を読む

no image

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

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

記事を読む

no image

項目リストを設定する

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

記事を読む

no image

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

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

記事を読む

no image

<select>により項目選択

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

記事を読む

no image

ページ(page)とは

jQueryMobileでは、スマートフォンの画面に表示するページ(page)というウィジェットで構

記事を読む

no image

jQueryMobileカテゴリーで出てくる用語集

jQueryMobileの記事で登場する用語を下記の表にまとめました。学習するときの助けになるかも。

記事を読む

スポンサードリンク

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 ↑