2/4 幅が狭い画面では表を展開！ stacktable.jsの使い方 [ホームページ作成] All About

幅が狭い画面では表を展開！ stacktable.jsの使い方(2ページ目)

横長のtableを、狭い画面でも見やすく自動展開してくれる「stacktable.js」の使い方を解説。ページを様々な画面サイズに対応させたい際に困るのが「横長の表」の扱いです。狭い画面だと、列幅が極端に狭くなって読みにくくなります。そこで便利なのが「stacktable.js」スクリプト。指定サイズより狭い画面では、表を行単位で展開(分解)してくれます。

「stacktable.js」を入手して設置する方法

「download the zip」をクリックして、ファイル一式をダウンロード。

まずは、「stacktable.js」を利用するために必要なファイル一式を入手しましょう。以下の配布サイト内にある「download the zip」と書かれたリンクからダウンロードできます。
http://johnpolacek.github.io/stacktable.js/

本稿執筆時点では、「johnpolacek-stacktable.js-1.0.0-2-g4d047ea.zip」というファイル名でダウンロードでき、ファイルサイズは42.5KBでした。

「stacktable.js」を使うために必要な3ファイルを抜き出す

ZIPに含まれるファイルの内、必要なのは3ファイルのみ。

ZIPファイルを展開すると、たくさんのファイルとフォルダが出てきます。そのうち、必要なファイルは、以下の3点のみです。

1. 「stacktable.js」：スクリプト本体です。
2. 「stacktable.css」：スクリプトに必要なスタイルシートです。
3. 「js/libs/jquery-1.8.1.min.js」：jQueryの本体です。

※上記3の「jQueryの本体」に関しては、既にウェブ上で利用しているなら、そちらを使っても問題ありません。また、jQuery公式サイトやGoogleなどが提供しているCDNサイトから読み込んでも構いません。それらの場合は、ZIPファイルに含まれる「jquery-1.8.1.min.js」のアップロードは不要です。本記事では、ZIPファイルにあるjQuery本体を使うことを前提にして解説しています。

必要な3ファイルを自サイトへアップロード

上記で抜き出した3つのファイルは、自サイト内の適当な場所にアップロードして下さい。他のファイルは一切アップロードする必要はありません。

元のフォルダ構造は維持しなくて大丈夫

フォルダ構造を維持する必要はないので、3ファイルとも同じディレクトリ(フォルダ)にアップロードして問題ありません。もちろん、異なるディレクトリに入れても問題ありません。都合の良い場所にアップロードして下さい。

なお、本記事で紹介しているサンプルでは、「stacktable.js」を呼び出すHTMLファイル(stacktablesample.html)も、右図のようにスクリプトと同じディレクトリに入れています。

アップロードができたら、実際にHTML内に記述したtableに対して、「stacktable.js」を適用させてみましょう。次のページで、具体的な記述方法をご紹介致します。