tableをレスポンシブ対応させるjQueryプラグイン「Responsive Tables」

    • このページをはてなブックマークに追加

    公開日:2018年01月25日 最終更新日:2019年09月26日

     

    レスポンシブテーブルを作成するjQueryプラグインの「Responsive Tables」について解説します。テーブル(table)をレスポンシブ対応させるには、jQueryプラグインを使わずに「CSSのみ」で実現する方法の他、「CSS」と「jQueryプラグイン」の両方を使った方法などがあります。 「CSS」でレスポンシブテーブルを実現する方法については、「レスポンシブ対応のtableを作成しよう!」のコラムで解説していますのでご参考下さい。

    目次

    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>

    1行目が見出し行、9列のテーブルを作成しました。罫線の指定はしていませんが、次の章で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」ファイルの動作を確認してみましょう。ブラウザーの横幅を小さくしてみて下さい。 1列目が固定され、2列目からスクロールバーが表示されるようになります。

    ●レスポンシブ対応後の「responsive-table1.html」のテーブル表示

    ▲ページトップへ戻る

    関連記事:「HTML入門【<table>タグ】~テーブル(表)を作成してみよう~」 関連記事:「CSSでテーブル(表)をデザインする方法【基礎編】」 関連記事:CSSでテーブル(表)をデザインする方法【応用編】 関連記事:CSSでシンプルなテーブルをデザインする 関連記事:レスポンシブ対応のtableを作成しよう! 関連記事:tableをレスポンシブ対応させるjQueryプラグイン「Basic Table」 関連記事:tableをレスポンシブ対応させるjQueryプラグイン「resTables」

    jQueryのスキルが活かせる最新求人情報をチェック!

    月額単価60万円〜
    勤務地 東京都 渋谷区
    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    正社員

    【Java】プログラマー|WEBアプリケーションの開発

    年収 :300万円〜600万円

    弊社で支援しているWEBアプリケーションの開発をご担当いただきます。言語的にはJava、ASP.NET(C#)、PHP...

    株式会社SYNC

    正社員

    【AngularJS】フロントエンドエンジニア|Webアプリケーションの開発

    年収 :300万円〜700万円

    エンジニアとして働きやすい環境でITエンジニアを募集! 仕事例 ・WEB開発 ・アプリケーションの開...

    株式会社クオリアシステムズ

    フリーランス

    【PHP/JavaScript/Ajax/jQuery】Webエンジニア★Webシステム開発

    月額単価 :60万円〜

    Web受託会社内にて、PHPによるシステム開発案件が複数走っており、そのいずれかに参画頂きます。 言語...

    フリーランス

    【Java(Spring Boot)/HTML/CSS/JavaScript他】サーバーサイドエンジニア★大手金融業の社内向けアプリ開発

    月額単価 :70万円〜80万円

    同社はWebシステムやスマフォアプリ開発を得意とする受託開発企業です。 今回は既存であるJavaを用いた...