画面幅が狭い時は列項目を行項目にして表示するタイプ
次に、画面幅が狭い時に、列項目を行項目にして表示するタイプのレスポンシブルテーブルをパソコンで表示した画面は以下のとおりです。画面幅が広いのですべての列項目が表示されています。
図7 パソコンで見たjQuery Mobile サンプル（3）画面
しかしスマートフォンを縦にした状態でこのサンプルを見ると、列項目を行項目にして表示されています。
図8 スマートフォンを縦にした状態で見たjQuery Mobile サンプル（3）画面
サンプルサイトのスクリプトを以下に示します。
［リスト4］レスポンシブルテーブルその2（jQuery_Mobile_sample3.html）
<!DOCTYPE html> <html> <head> <meta charset=UTF-8" /> <!--1.スマートフォン画面での表示方法指定--> <mata name="viewport" content="width=device-width,initial-scale=1"> <title>jQuery Mobileサンプル（レスポンシブルテーブル）</title> <!--2.CSSの読み込み--> <link rel="stylesheet" type="text/css" href="./mobile/jquery.mobile-1.3.1.min.css" /> <!--3.jQueryの読み込み--> <script language="javascript" type="text/javascript" src="./Scripts/jquery-1.9.1.min.js"></script> <!--4.jQuery Mobileの読み込み--> <script language="javascript" type="text/javascript" src="./mobile/jquery.mobile-1.3.1.min.js"></script> </head> <body> <!--5.ページの設定--> <div data-role="page" data-theme="b"> <!--6.ヘッダーの設定--> <div data-role="header" data-theme="b"> <h1>jQuery Mobileサンプルページ（レスポンシブルテーブル）</h1> </div> <!--7.ページ内容の設定--> <div data-role="content"> <!--8.レスポンシブルテーブルの設定--> <table data-role="table" id="table2" data-mode="reflow" class="ui-responsive table-stroke"> <thead> <tr> <th>順位</th> <th>名前</th> <th>勝ち数</th> <th>負け数</th> <th>ポイント</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>山田太郎</td> <td>5</td> <td>1</td> <td>25</td> </tr> <tr> <th>2</th> <td>田中次郎</td> <td>3</td> <td>2</td> <td>15</td> </tr> <tr> <th>3</th> <td>佐藤三郎</td> <td>2</td> <td>3</td> <td>10</td> </tr> <tr> <th>4</th> <td>高橋四郎</td> <td>1</td> <td>5</td> <td>5</td> </tr> </tbody> </table> </div> <!--9.フッターの設定--> <div data-role="footer" data-theme="b"> <h3>Codezine</h3> </div> </div> </body> </html>
8.レスポンシブルテーブルの設定のtableタグにおいて、「data-role="table"」と「data-mode="reflow"」を合わせて記述すると、レスポンシブルテーブルを設定できます。さらにclass属性に「ui-responsive」を設定することにより、画面幅が広い場合は通常の表示を行い、画面幅が狭い場合は列項目を行項目に変更して表示できます。class属性の「table-stroke」は、行ごとに仕切りの線を入れる設定です。
まとめ
今回もjQuery Mobile1.3.0で採用された機能を使って、さまざまなスマートフォン用サイトを作成してみました。jQuery Mobileは日々進化しており、バージョンアップのペースもかなり早くなっています。今後も大きなバージョンアップ、機能強化があった際は、随時紹介していきます。
