このページの本文へ

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

サンプルで学ぶjQuery Mobileまとめ(後編)

2011年08月19日 13時00分更新

西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

 前編中編に続き、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>
<画像>01.jpg
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>
<画像>02.jpg
各カラムにテーマを適用させた状態

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>
<画像>03.jpg
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>
<画像>04.jpg
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>
<画像>05.jpg
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>
<画像>06.jpg
3カラムを複数行に設定した状態
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング