1. まとめトップ

【必見】レスポンシブデザインの表組みはこんな方法で実現できる!

そこで、世界の優秀なコーダーやデザイナーはCSS、jsを使って表組みをどう綺麗に美しくまとめてるかまとめました。これから実装を考えている人たちの参考なればいいなと思います!

更新日: 2012年12月21日

13 お気に入り 32008 view
お気に入り追加

この記事は私がまとめました

1111a2cさん

PC、スマートフォン、タブレットPCさまざまなデバイスに対して、ワンソースで対応できるレスポンシブデザインですが、これまでのPCでのwebデザインと違い、レスポンシブデザインでは表組みの扱いが非常に迷います。

デザイン的な制限があることはもちろん、どのように実装するか、さらには、UIの使い心地のよいものをどうしたらいいかと悩みます。

そこで、世界の優秀なコーダーやデザイナーはCSS、jsを使って表組みをどう綺麗に美しくまとめてるかまとめました。これから実装を考えている人たちの参考なればいいなと思います!

こちらにまとめた以外にもこんな方法があるなどあれば、是非教えてください!

テーブル組みをグラフチャートに置き換える

これはかなり見た目の変化に驚きます。
スマホの幅にしたとき、円グラフに変化しますので、数値の要素を扱う場合に限っては
この方法がベストかなと思います。

タップでtable全体を表示

テーブルの上が「tap to view」というエリアに切り替わる。
クリックすることでテーブルのみを開くという方法。
テーブルのみのページは「backボタン」で元の画面に戻れます。

trの要素を1ブロックにまとめる

一つのtrの要素を1つのブロック内にまとめて縦に並べ変える方法
PCとスマホでの見た目の変化が大きいけど、デザインの見せ方を工夫することで
シンプルながら分かりやすく見せられるかもしれません。

Q&Aページのようにトグルで要素をまとめる

トグルでtd内の要素を表示を切り替えられる形式。
よくQ&AのページなどでQだけが表示されていてプラスボタンをクリックすると
Aが出てくるような形に変化します。
シンプルながらとても分かりやすく、かなり汎用性が高い方法です。

1