レスポンシブテーブルを作成するjQueryプラグインの「Responsive Tables」について解説します。テーブル(table)をレスポンシブ対応させるには、jQueryプラグインを使わずに「CSSのみ」で実現する方法の他、「CSS」と「jQueryプラグイン」の両方を使った方法などがあります。 「CSS」でレスポンシブテーブルを実現する方法については、「レスポンシブ対応のtableを作成しよう！」のコラムで解説していますのでご参考下さい。
目次
1. 「Responsive Tables」プラグインをダウンロードする
1.1. 作者のページから圧縮ファイルをダウンロードする 1.2. 「Responsive Tables」プラグインの使える環境を整える
1.2.1. 圧縮ファイル（zurb-responsive-tables-0d34bc6.zip）を解凍する 1.2.2. Webサイト用のフォルダーにプラグイン関連ファイルをコピーする
1. 「Responsive Tables」プラグインをダウンロードする
1.1. 作者のページからjQueryプラグインをダウンロードする
まずは、「Responsive Tables」プラグインを作者のサイトからダウンロードしてみましょう。
「Responsive Tables」作者のサイト：https://zurb.com/playground/responsive-tables
●Responsive Tables
右側のボタンから「Download the Code」をクリックして「Responsive Tables」プラグインの圧縮ファイルをPC上の任意の場所にダウンロードします。ファイル名は「zurb-responsive-tables-0d34bc6.zip」になります。
●zurb-responsive-tables-0d34bc6.zip
1.2. 「Responsive Tables」プラグインの使える環境を整える
1.2.1. 圧縮ファイル（zurb-responsive-tables-0d34bc6.zip）を解凍する
次に、「Responsive Tables」プラグインを使う環境をPC上に作成します。本コラムでは、ローカルPC上にHTML文書を作成していきます。先ほどダウンロードした圧縮ファイル（zurb-responsive-tables-0d34bc6.zip）を解凍します。
●圧縮ファイル（zurb-responsive-tables-0d34bc6.zip）の解凍
ZIPファイルを右クリックし、メニューから「すべて展開」を選択します。任意のフォルダーを解凍先に指定すると「zurb-responsive-tables-0d34bc6」フォルダー内にJavaScriptファイルやサンプルの「index.html」ファイルなど、レスポンシブ対応用のファイルが展開されます。
●「zurb-responsive-tables-0d34bc6」フォルダー
1.2.2. Webサイト用のフォルダーにプラグイン関連ファイルをコピーする
ローカルPC上に、Webサイト作成用の「www」フォルダーを作成して下さい。このフォルダーの中に「Responsive Tables」プラグインのファイルをコピーします。
●Webサイト用のwwwフォルダー
本コラムでは、Webサイト用のファイルを保存する「www」フォルダーを作成し、その中に、jQueryファイルを保存する「javascripts」フォルダーと「stylesheets」フォルダーを作成します。
●「zurb-responsive-tables-0d34bc6」フォルダー直下
コピーするファイルはいくつかありるので、順に「www」フォルダーへコピーします。「zurb-responsive-tables-0d34bc6」フォルダー直下に「responsive-tables.css」と「responsive-tables.js」がありますので、cssファイルは「www\stylesheets」フォルダーへコピーし、jsファイルを「www\javascripts」フォルダーにコピーします。
●「zurb-responsive-tables-0d34bc6\javascripts」フォルダー
次に、「zurb-responsive-tables-0d34bc6\javascripts」フォルダーにある「jquery.min.js」ファイルを「www\javascripts」フォルダーにコピーして下さい。
●「zurb-responsive-tables-0d34bc6\stylesheets」フォルダー
また「zurb-responsive-tables-0d34bc6\stylesheets」フォルダーにある「app.css」ファイルと「globals.css」を「www\stylesheets」フォルダーにコピーします。
「www」フォルダー内の構成は以下の通りです。
・「www\javascripts\jquery.min.js」 ・「www\javascripts\responsive-tables.js」 ・「www\stylesheets\app.css」 ・「www\stylesheets\globals.css」 ・「www\stylesheets\responsive-tables.css」
次の章で、レスポンシブテーブルの元となるテーブルを表示するHTMLファイルを作成します。
2. レスポンシブ対応用の基本テーブルを作成する
「www」フォルダーに、レスポンシブ対応前の基本テーブルを作成します。以下のコードをコピーして、ファイル名を「responsive-table1.html」で保存して下さい。ファイルの保存形式は「utf-8」にします。
●responsive-table1.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>レスポンシブテーブル</title> </head> <body> <h1>レスポンシブテーブルデザイン</h1> <table> <thead> <tr> <th>ID</th> <th>姓</th> <th>名</th> <th>姓（カナ）</th> <th>名（カナ）</th> <th>年齢</th> <th>郵便番号</th> <th>住所1</th> <th>住所2</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>山田</td> <td>太郎</td> <td>ヤマダ</td> <td>タロウ</td> <td>25</td> <td>123-0000</td> <td>東京</td> <td>中央区</td> </tr> <tr> <td>002</td> <td>山田</td> <td>花子</td> <td>ヤマダ</td> <td>ハナコ</td> <td>20</td> <td>456-0000</td> <td>東京</td> <td>港区</td> </tr> <tr> <td>003</td> <td>佐藤</td> <td>健一</td> <td>サトウ</td> <td>ケンイチ</td> <td>35</td> <td>000-1111</td> <td>大阪府</td> <td>大阪市</td> </tr> </tbody> </table> </body> </html>
１行目が見出し行、９列のテーブルを作成しました。罫線の指定はしていませんが、次の章でCSSを指定します。 「Responsive Tables」プラグインは、「CSS」と「JavaScript」ファイルを配置し、HTMLで読み込む事でレスポンシブ対応用のテーブルを実現します。
●「responsive-table1.html」
3. 「Responsive Tables」プラグインを使ってレスポンシブ対応のテーブルを作成する
「responsive-table1.html」ファイルに、レスポンシブ対応のコードを追加していきましょう。 「Responsive Tables」プラグインを使うと、横長のテーブルがスクロールされて表示されます。
先程コピーした「CSS」ファイルと「JavaScript」ファイルをHTMLで読み込みます。
●responsive-table1.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>レスポンシブテーブル</title> <link rel="stylesheet" href="stylesheets/globals.css"> <link rel="stylesheet" href="stylesheets/app.css"> <link rel="stylesheet" href="stylesheets/responsive-tables.css"> <script src="javascripts/jquery.min.js"></script> <script src="javascripts/responsive-tables.js"></script> </head> <body> <h1>レスポンシブテーブルデザイン</h1> <table class="responsive"> <thead> ・・・省略・・・ </tbody> </table> </body> </html>
テーブルスタイル用の「CSS」ファイルの「globals.css」、「app.css」、「responsive-tables.css」を指定し、jQueryプラグインの「JavaScript」ファイル、「jquery.min.js」と「responsive-tables.js」を指定します。
また、<table>タグの「class属性」で「"responsive"」を指定します。
●レスポンシブ対応前の「responsive-table1.html」のテーブル表示
CSSファイルを指定しているので、テーブルの罫線や背景が変更されました。「responsive-table1.html」ファイルの動作を確認してみましょう。ブラウザーの横幅を小さくしてみて下さい。 １列目が固定され、２列目からスクロールバーが表示されるようになります。
●レスポンシブ対応後の「responsive-table1.html」のテーブル表示
関連記事：「HTML入門【<table>タグ】～テーブル（表）を作成してみよう～」 関連記事：「CSSでテーブル（表）をデザインする方法【基礎編】」 関連記事：CSSでテーブル（表）をデザインする方法【応用編】 関連記事：CSSでシンプルなテーブルをデザインする 関連記事：レスポンシブ対応のtableを作成しよう！ 関連記事：tableをレスポンシブ対応させるjQueryプラグイン「Basic Table」 関連記事：tableをレスポンシブ対応させるjQueryプラグイン「resTables」
