jQuery Mobile逆引きリファレンス
jQuery Mobileページで複数列からなるグリッドレイアウトを作成するには？
標準機能を使ってグリッドレイアウトを作成する方法を解説。複数行にまたがるレイアウトや、レスポンシブレイアウトへの対応も説明する。
jQuery Mobileとは？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
jQuery Mobileでは、標準でグリッドレイアウトの機能を備えており、いわゆる段組みのレイアウトをclass属性の指定だけで作成できます。まずは、グリッドレイアウトでボタンを横並びにする例から見ていきます。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js">
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>jQuery Mobile TIPS</h1>
</div>
<div role="main" class="ui-content">
<!--単一の列-->
<div class="ui-grid-solo">
<div class="ui-block-a">
<button class="ui-btn ui-corner-all">Aブロック</button>
</div>
</div>
<!--2列のグリッド-->
<div class="ui-grid-a">
<div class="ui-block-a">
<button class="ui-btn ui-corner-all">Aブロック</button>
</div>
<div class="ui-block-b">
<button class="ui-btn ui-corner-all">Bブロック</button>
</div>
</div>
<!--5列のグリッド-->
<div class="ui-grid-d">
<div class="ui-block-a">
<button class="ui-btn ui-corner-all">Aブロック</button>
</div>
<div class="ui-block-b">
<button class="ui-btn ui-corner-all">Bブロック</button>
</div>
<div class="ui-block-c">
<button class="ui-btn ui-corner-all">Cブロック</button>
</div>
<div class="ui-block-d">
<button class="ui-btn ui-corner-all">Dブロック</button>
</div>
<div class="ui-block-e">
<button class="ui-btn ui-corner-all">Eブロック</button>
</div>
</div>
</div>
<div data-role="footer">
<h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
</div>
</div>
</body>
</html>
|
グリッドレイアウトを利用するには、個々の列、および、全体をくくるコンテナー要素に対して、以下のようなclass属性を割り当てます。
| 列数 | コンテナー要素 | 個々の列 |
|---|---|---|
| 1 | ui-grid-solo | ui-block-a |
| 2 | ui-grid-a | ui-block-a、ui-block-b |
| 3 | ui-grid-b | ui-block-a、ui-block-b、ui-block-c |
| 4 | ui-grid-c | ui-block-a、ui-block-b、ui-block-c、ui-block-d |
| 5 | ui-grid-d | ui-block-a、ui-block-b、ui-block-c、ui-block-d、ui-block-e |
※2015/08/29更新： ［個々の列］に「ui-grid-x」のように記載されていましたが、「ui-block-x」の誤りでした。お詫びして訂正させていただきます。
最大で5列まで対応していますが、スマホの表示領域を鑑みれば、極端な段組みはかえって見栄えを損ないます。ボタンの配置などが主用途になるでしょう。
複数行にまたがるレイアウト
グリッドレイアウトでは、複数行にまたがるレイアウトを作成することもできます。
|
<!--最大5段のグリッドレイアウト-->
<div class="ui-grid-d">
<!--1行目の開始-->
<div class="ui-block-a">
<button class="ui-btn ui-corner-all">1A</button>
</div>
<div class="ui-block-b">
<button class="ui-btn ui-corner-all">1B</button>
</div>
<div class="ui-block-c">
<button class="ui-btn ui-corner-all">1C</button>
</div>
<div class="ui-block-d">
<button class="ui-btn ui-corner-all">1D</button>
</div>
<!--（1）2行目（ui-block-aで新たな行を開始）-->
<div class="ui-block-a">
<button class="ui-btn ui-corner-all">2A</button>
</div>
<div class="ui-block-b">
<button class="ui-btn ui-corner-all">2B</button>
</div>
<!--（2）一番高いセルによって行の高さが決まる-->
<div class="ui-block-c">
<button class="ui-btn ui-corner-all">2C1</button>
<button class="ui-btn ui-corner-all">2C2</button>
</div>
<div class="ui-block-d">
<button class="ui-btn ui-corner-all">2D</button>
</div>
<div class="ui-block-e">
<button class="ui-btn ui-corner-all">2E</button>
</div>
<!--3行目の開始-->
<div class="ui-block-a">
<button class="ui-btn ui-corner-all">3A</button>
</div>
<div class="ui-block-b">
<button class="ui-btn ui-corner-all">3B</button>
</div>
<div class="ui-block-c">
<button class="ui-btn ui-corner-all">3C</button>
</div>
<!--空白セルも可-->
<div class="ui-block-d">
</div>
<div class="ui-block-d">
<button class="ui-btn ui-corner-all">3E</button>
</div>
</div>
|
グリッドレイアウトで複数行にまたがるレイアウトを作成する場合には、以下のポイントを押さえておいてください。
- 「class="ui-block-a"」属性を持ったセルが登場したら、新しい行に移動
- 行の中で縦幅が異なる場合、最大のものに合わせる
以上の規則を念頭に、「1行目は5列目がない」、「2行目の高さは3列目の縦幅によって決まっている」、「3行目の4列目のように空白セルを挟むことも可」などの点を確認してください。
レスポンシブレイアウトにも対応
jQuery Mobile 1.3以降では、グリッドレイアウトがレスポンシブレイアウトにも対応しています。レスポンシブレイアウトとは、画面サイズに応じて表示幅を調整してくれるレイアウトのこと。具体的には、画面サイズが広い場合には本来のグリッドを表示し、狭くなったら全てのセルを縦並びに表示します。
このようなレスポンシブレイアウトを有効にするには、コンテナー要素に対して「class="ui-responsive"」属性を付与するだけです。
|
<div class="ui-grid-d ui-responsive">
……中略……
</div>
|
レイアウト切り替えのポイント（ブレイクポイント）は、以下のようなスタイルを用意することで自由に切り替えることもできます。例えば以下は45emをブレイクポイントにする例です（デフォルトは35em）。
|
<style>
@media all and (max-width: 45em) {
.my-responsive .ui-block-a,
.my-responsive .ui-block-b,
.my-responsive .ui-block-c,
.my-responsive .ui-block-d,
.my-responsive .ui-block-e {
width: 100%;
float:none;
}
}
</style>
……中略……
<div class="ui-grid-d my-responsive">
|
※以下では、本稿の前後を合わせて5回分（第16回～第20回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
16. Collapsibleウィジェットで開閉可能なパネルを作成するには？
タイトル領域をクリックすることでコンテンツ本体の表示／非表示を切り替えられる「開閉可能パネル」を、Collapsibleウィジェットで簡単に作成する方法を解説する。
17. Collapsiblesetウィジェットで開閉可能なパネルを作成するには？
コンテンツ本体の表示／非表示を切り替える「開閉可能パネル」を束ねた「アコーディオンパネル」を、Collapsiblesetウィジェットで作成する方法を解説する。
18. 【現在、表示中】≫ jQuery Mobileページで複数列からなるグリッドレイアウトを作成するには？
標準機能を使ってグリッドレイアウトを作成する方法を解説。複数行にまたがるレイアウトや、レスポンシブレイアウトへの対応も説明する。
19. Checkboxradioでラジオボタン／チェックボックスを作成するには？
標準のラジオボタン／チェックボックスをリッチな選択ボタンに整形できるCheckboxradioウィジェットの基本的な使い方を解説する。
20. Flipswitchウィジェットでオン／オフ選択のためのフリップスイッチを作成するには？
オン／オフに特化した選択ボタンを設置するには、CheckboxradioウィジェットよりもFlipswitchウィジェットが便利。その基本的な使い方を解説する。
