レイアウトグリッド

レイアウトグリッド

モバイル端末では画面の横幅が広くないため、通常は複数カラムのレイアウトは推奨されません。しかし、時によっては、ちょっとした要素を横並びにレイアウトしたい場合もあるでしょう。(たとえばボタンやナビゲーション用のタブなど)

jQuery Mobileでは ui-grid というCSSベースの簡単なブロックスタイル用クラスを用意しています。

現在4種類のレイアウトが用意されていて、用途によって使い分けることができます。

• 2カラム (ui-grid-aクラスを使用)
• 3カラム (ui-grid-bクラスを使用)
• 4カラム (ui-grid-cクラスを使用)
• 5カラム (ui-grid-dクラスを使用)

グリッドは横幅が100%で、完全に非表示(枠線や背景が無い状態)、そして padding や margin も設定されていません。ですから、内包する要素のスタイルを邪魔することは無いでしょう。

グリッドコンテナには、横並びになるブロック要素を内包させます。これらには、それぞれ ui-block-a/b/c/d のクラスを順に指定していきます。最初の子要素に指定される ui-block-a は、新たな行を開始するものであるため float を解除します(後述の複数行グリッド参照)。

2カラム

2カラム(サイズ50%ずつ)のレイアウトを作成するには、まずコンテナとなる要素に ui-grid-a クラスを指定します。そして、内部に2つの子コンテナを作り、それぞれ ui-block-a と ui-block-b というクラスを指定します。

<div class="ui-grid-a">
        <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
        <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div><!-- /grid-a -->

このコードにより、下のようなレイアウトになります。

上の例で見えるように、デフォルトのグリッドは見た目上何も表示されません。単にコンテンツを隣同士半分ずつに配置するだけです。

グリッドクラスは、どこにでも利用できます。次の例では fieldset 要素に ui-grid-a を指定し、内部のグリッドにボタンを配置しています。これにより画面を半々にするボタンを並べられます。

<fieldset class="ui-grid-a">
        <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
        <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>           
</fieldset>

jQuery Mobileの テーマ システムのテーマクラス(data-theme属性ではなく)は、グリッドにも適用できます。下のブロックは、2種類のテーマクラスを適用してみました。まず ui-bar により、デフォルトのバーのpaddingなどをあてています。そして ui-bar-e により、色見本“e“の背景色やグラディエーション、フォントなどを適用しています。更に見栄え上の理由から style=“height:120px;” という属性指定によりグリッドの高さを設定しています。

3カラム

こちらのグリッドレイアウトでは class=“ui-grid-b” を親要素に指定し、3つの子要素にはそれぞれ ui-block-a/b/c を指定します。これにより、横幅を3分割にしたレイアウトが作成されます。

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

下の例は、コンテナ内のブロックをテーマクラスにより整形しているため、グリッドが見えるようになっています。

次の例は、各グリッドにボタンを配置したものです。

4カラム

同様に class=“ui-grid-c” を指定することで、4カラムのグリッドを作成できます。

5カラム

同様に class=“ui-grid-d” を指定することで、4カラムのグリッドを作成できます。

複数行グリッド

グリッドは複数行になっても対応できるようデザインされています。たとえば3カラムのグリッド(ui-grid-b)を指定したコンテナに9つの子ブロックを入れた場合、3カラムのブロックが3行並ぶ形になります。これは単純にCSSのfloatによるルールで class=“ui-block-a を指定した要素から新しい行になるようになっています。ここではクラスを、順番(a,b,c,a,b,c…)に適用しています。

ツールバー上のグリッド

グリッドは、ツールバー上でのレイアウトにも有用です。次の例は、フッタ上に3カラムグリッドを配したものです。