西畑一馬のjQuery Mobileデザイン入門 ― 第7回

サンプルで学ぶjQuery Mobileまとめ（後編） (1/5)

　前編、中編に続き、jQuery Mobileの機能について解説します。

グリッドレイアウト

　スマートフォンはPCに比べて画面幅が狭いので、1ページを複数カラムに分割するレイアウトはスマートフォンサイトに向きません。しかし、タブナビゲーションを実装する場合など、複数カラムに分割したい場合もあります。jQuery Mobileでは要素を均等に分割して並べる「グリッドレイアウト」の機能が用意されています。

2カラム

　2カラムにしたい場合は、class属性「ui-grid-a」を付けた要素の内側に、class属性「ui-block-a」とclass属性「ui-block-b」を付けた要素をそれぞれ配置します。

■サンプル01[HTML]

<div class="ui-grid-a">
  <div class="ui-block-a"><strong>I'm Block A</strong></div>
  <div class="ui-block-b"><strong>I'm Block B</strong></div>
</div>

class属性「ui-block-a」が左にclass属性「ui-block-b」が右に配置される

　このままだと少し分かりにくいので、それぞれのカラムの内側の要素にclass属性「ui-bar」と「ui-bar-e」を付与し、背景や余白が設定された「ui-bar」というスタイルで表示してみましょう（サンプル2）。

■サンプル02[HTML]

<div class="ui-grid-a">
  <div class="ui-block-a"><div class="ui-bar ui-bar-e"><strong>I'm Block A</strong></div></div>
  <div class="ui-block-b"><div class="ui-bar ui-bar-e"><strong>I'm Block B</strong></div></div>
</div>

各カラムにテーマを適用させた状態

3カラム

　3カラムにするには、class属性「ui-grid-b」を親要素に適用します。

■サンプル03[HTML]

<div class="ui-grid-b">
  <div class="ui-block-a"><div class=" ui-bar ui-bar-e">Block A</div></div>
  <div class="ui-block-b"><div class=" ui-bar ui-bar-e">Block B</div></div>
  <div class="ui-block-c"><div class=" ui-bar ui-bar-e">Block C</div></div>
</div>

3カラムにした状態

4カラム

　4カラムにするには、class属性「ui-grid-c」を親要素に適用します。

■サンプル04[HTML]

<div class="ui-grid-c">
  <div class="ui-block-a"><div class=" ui-bar ui-bar-e">A</div></div>
  <div class="ui-block-b"><div class=" ui-bar ui-bar-e">B</div></div>
  <div class="ui-block-c"><div class=" ui-bar ui-bar-e">C</div></div>
  <div class="ui-block-d"><div class=" ui-bar ui-bar-e">D</div></div>
</div>

4カラムにした状態

5カラム

　5カラムにするには、class属性「ui-grid-d」を親要素に適用します。

■サンプル05[HTML]

<div class="ui-grid-d">
  <div class="ui-block-a"><div class=" ui-bar ui-bar-e">A</div></div>
  <div class="ui-block-b"><div class=" ui-bar ui-bar-e">B</div></div>
  <div class="ui-block-c"><div class=" ui-bar ui-bar-e">C</div></div>
  <div class="ui-block-d"><div class=" ui-bar ui-bar-e">D</div></div>
  <div class="ui-block-e"><div class=" ui-bar ui-bar-e">E</div></div>
</div>

5カラムにした状態

複数行の分割

　グリッドを複数行配置する場合は、class属性「ui-block-a」～「ui-block-e」を繰り返します。たとえば、2行3列に配置したい場合は、class属性「ui-block-a」「ui-block-b」「ui-block-c」の後に、再びclass属性「ui-block-a」「ui-block-b」「ui-block-c」を設定した要素を記述します。

■サンプル06[HTML]

<div class="ui-grid-b">
  <div class="ui-block-a"><div class=" ui-bar ui-bar-e">Block A</div></div>
  <div class="ui-block-b"><div class=" ui-bar ui-bar-e">Block B</div></div>
  <div class="ui-block-c"><div class=" ui-bar ui-bar-e">Block C</div></div>
  <div class="ui-block-a"><div class=" ui-bar ui-bar-e">Block A</div></div>
  <div class="ui-block-b"><div class=" ui-bar ui-bar-e">Block B</div></div>
  <div class="ui-block-c"><div class=" ui-bar ui-bar-e">Block C</div></div>
</div>

3カラムを複数行に設定した状態