連載：jQuery Mobile入門 第4回　エフェクト／グリッド／テーマでスマホ・アプリのレイアウトを究めよう 山田 祥寛 2012/04/20
Page1 Page2 Page3

■均等段組みのためのグリッド・レイアウト

　jQuery Mobileでは、ウィジェットなどを画面の表示幅いっぱいに広げて表示するのが、まず基本である。タッチパネル環境では、小さなボタンやリンクはタップしにくい傾向があり、個々の要素を大きめに配置するのは理にかなった選択である。

　もっとも、レイアウト上の都合で、要素やテキストを横並びにしたいケースもあるだろう。そのようなケースのために、jQuery Mobileではグリッド・レイアウトという仕組みを標準で提供している。

　グリッド・レイアウトを利用することで、2段組み、3段組み……といったレイアウト指定をスタイル・クラスの指定のみで行えるようになる。

●グリッド・レイアウトの基本的な例

　例えば、以下はボタンを3段組みに配置するコード例とその実行画面である。

<div id="basic" data-role="page" data-title="jQuery Mobile入門">   <div data-role="header" data-theme="b">     <h1>jQuery Mobile入門</h1>   </div>   <div data-role="content">     <div class="ui-grid-b">       <div class="ui-block-a">         <button>1</button>       </div>       <div class="ui-block-b">         <button>2</button>       </div>       <div class="ui-block-c">         <button>3</button>       </div>     </div>   </div> </div>

ボタンを3段組みで横に並べるコード（grid.html）

ボタンが横並びに配置された

　グリッド・レイアウトを指定するには、個々の列を表すブロック要素と、レイアウト全体をくくるコンテナ要素に対して、以下のようなスタイル・クラスを割り当てるだけだ（標準では最大5段組みまで）。

列数	コンテナ要素	ブロック要素（左からの指定）
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
グリッド・レイアウトのスタイル指定

　グリッド・レイアウトを利用すれば、例えばテキストの段組みなども可能だ。以下はそのコード例と実行画面。

<div id="basic" data-role="page" data-title="jQuery Mobile入門">   <div data-role="header" data-theme="b">     <h1>jQuery Mobile入門</h1>   </div>   <div data-role="content">     <div class="ui-grid-a">       <div class="ui-block-a">         <p>jQuery Mobileではグリッド・レイアウト...</p>       </div>       <div class="ui-block-b">         <p>2段組み、3段組み…といったレイアウト指定を...</p>       </div>     </div>   </div> </div>

テキストに対してグリッド・レイアウトを適用した例（grid_text.html）

テキストが2段組みでレイアウトされた

　もっとも、スマホ環境でテキストの段組みは避けた方が無難だろう。横幅が著しく限定された表示領域では、段組みはかえってテキストを読みにくくする原因にもなるためだ。原則として、グリッド・レイアウトはボタンなどのレイアウトに限定して利用すべきである（それも、利用局面をある程度限定すべきだ）。

●グリッド・レイアウトの複雑な段組み

　グリッド・レイアウトを利用することで、以下のように、複数行にまたがるレイアウトを作成することも可能だ。ここまで変則的なレイアウト付けをするかどうかはともあれ、グリッド・レイアウトの仕組みを理解する例としてご覧いただきたい。

<div id="basic" data-role="page" data-title="jQuery Mobile入門">   <div data-role="header" data-theme="b">     <h1>jQuery Mobile入門</h1>   </div>   <div data-role="content">     <div class="ui-grid-c">       <div class="ui-block-a">         <button>1</button>       </div>       <div class="ui-block-b">         <button>2</button>       </div>       <div class="ui-block-c">         <button>3</button><button>3</button>   ……（2）       </div>       <div class="ui-block-c">         <button>4</button>       </div>       <div class="ui-block-a">                   ……（1）         <button>1</button>       </div>       <div class="ui-block-b">                   ……（3）       </div>       <div class="ui-block-c">         <button>3</button>       </div>       <div class="ui-block-d">         <button>4</button>       </div>     </div>   </div> </div>

複数行にまたがるグリッド・レイアウトの例

複数行にまたがってボタンを配置した例（grid_multi.html）

　複数行にまたがるグリッド・レイアウトのルールは、以下のとおりである。

• 「class="ui-block-a"」属性を持つ列（ブロック要素）で新しい行を開始
• カラムごとに縦幅が異なる場合、最も高いものに合わせてそろう

　上のサンプルであれば、（1）の箇所で改行され、4列のグリッドを生成する。1行目では3列目（（2））が最も縦幅を取っているので、1行目の高さは（2）に合わせてそろうというわけだ。（3）のように空白カラムを設けることももちろん可能だ。

　次のページでは、jQuery Mobileのテーマ・システムを説明する。

INDEX
	［連載］jQuery Mobile入門
	第4回　エフェクト／グリッド／テーマでスマホ・アプリのレイアウトを究めよう
	1．ページ遷移時のエフェクトを切り替える
	2．均等段組みのためのグリッド・レイアウト
	3．jQuery Mobileのテーマ・システム

「連載：jQuery Mobile入門」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）