レスポンシブテーブル

Posted on

ウェブブラウザのユーザーは一般的にウェブサイトを縦方向にスクロールすることには慣れていますが、横方向へのスクロールには慣れていません。モバイル端末において、ページ全体を表示するために横方向へのスクロールを行わせる必要があるページではユーザーエクスペリエンスが低下してしまいます。テーブルの表示でマルチデバイスを考慮していない場合、テーブルの表示幅は列数に大きく依存して列数の多くなると、モバイルデバイスの小さなビューポートに収まらなくなってしまいます。この記事では特にテーブルについて、ユーザエクスペリエンスがベストとなるようにレスポンシブレイアウトアプローチのいくつかの方法を紹介します。

ここで紹介する方法はレスポンシブでないページの既存の表のテーブルのタグの構造を変えずにスタイルシートクラスを追加するだけでレスポンシブの特徴を備えることができます。

テーブルの横スクロールサポート

ページ全体のスクロールさせないようにテーブルにおいて横スクロールを行う方法です。この方法はレコードの比較に適しています。

次の例は、この方法の最もシンプルなもので簡単なスタイルシートで対応できます。ブラウザのウインドの幅を600px以下にすることで、横スクロールをサポートしたテーブルレイアウトを確認できます。

<table class="responsive-table">
<thead>
<tr>
<th>head-1</th>
<th>head-2</th>
...
head-1 head-2 head-3 head-4 head-5 head-6
column-1 column-2 01234567 column-3 01234567 column-4 01234567 column-5 01234567 column-6 01234567
column-1 column-2 column-3 column-4 column-5 column-6
column-1 column-2 column-3 column-4 column-5 column-6

比較が行いやすいように最初の項目を残してスクロールさせるような動作が良いかもしれません。次の例ではヘッダー項目が一列目に配置され、2列目以降がスクロールします。スモールサイズのテーブルはフルサイズのテーブルを -90度回転させたレイアウトになります。

<table class="responsive-table2">
<thead>
<tr>
<th>head-1</th>
<th>head-2</th>
...
head-1 head-2 head-3 head-4 head-5 head-6
column-1 column-2 01234567 column-3 01234567 column-4 01234567 column-5 01234567 column-6 01234567
column-1 column-2 01234567 column-3 01234567 column-4 01234567 column-5 01234567 column-6 01234567
column-1 column-2 01234567 column-3 01234567 column-4 01234567 column-5 01234567 column-6 01234567

これらのテーブルに対して横スクロールを指定するアプローチはユーザーがテーブルの横スクロールに気がつかない場合やスクロールしなければ確認できない項目が重要であっても気がつかないことがありえるという欠点があります。すべての項目をユーザの目に入るようにしたい場合にはこの手法はお勧めできません。こういった要件がある場合には次のスタッカブルレイアウトテーブルの手法を検討すべきです。

スタッカブルレイアウトテーブル

スタッカブルレイアウトテーブルはテーブルの列を横方向に配置するのではなく、縦方向に配置する方法です。この方法では項目名と、項目値の2列表示になります。レコード毎に比較するのには向いていませんが、縦スクロールのみで、すべての項目を表示することが出来ます。

次の例はブラウザのウインドの幅を600px以下にすることで、スタックレイアウトを確認できます。

<table class="stackable-table">
<thead>
<tr>
<th>head-1</th>
<th>head-2</th>
...
head-1 head-2 head-3 head-4 head-5 head-6
column-1 column-2 01234567 column-3 01234567 column-4 01234567 column-5 01234567 column-6 01234567
column-1 column-2 01234567 column-3 01234567 column-4 01234567 column-5 01234567 column-6 01234567
column-1 column-2 01234567 column-3 01234567 column-4 01234567 column-5 01234567 column-6 01234567

関連文書