とあるweb屋の仕事術

とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

まだtableで消耗してるの?スマホサイト、レスポンシブサイトでのtableのUIどうする問題

まだtableで消耗してるの?スマホサイト、レスポンシブサイトでのtableのUIどうする問題

スマホサイトやレスポンシブの

Webサイトで厄介なのが

表組み(table)です。

 

表が2列3列程度であれば

問題ありませんが、列が多いtableや、

セルの項目のテキスト量が多いtable組みの

ような横に長いレイアウトは

幅の制約があるスマホサイトや

レスポンシブサイトでは

相性はあまりよくありません。

悩ましい問題ですよね。

 

その問題を解決する

簡単な2つの方法を紹介します。

 

その1

サクッとそのまま縮小する方法で解決。

これでよくない? レスポンシブテーブルの話 | ダーシマ・ヱンヂニヤリング

画面幅に応じて、javascriptでtransformの

拡大率を変える方法。

これはtable以外にも使えるのでかなり有能。

どうしても画面におさまらないレイアウトを

比率を保持したままスマホの幅にまで縮小して

表示できます。

 

 

その2

スクロールを予測させるUIで、横スクロールさせる。

ユーザーにスクロールを予測させるCSSの書き方について | mkasumi.com

 

JSを使用しない「その2」の方法が

簡単なのでおすすめです。

もうこの2つのどちらかでいいでしょ。

というかんじ。

 

 

そのほかにもいくつかの解決策やTipsがあります。

定番は、display:block;を使う方法かなと思いますが、

わりとめんどうな実装になるので、サクッとやるなら

前述の2つの方法がおすすめです。

 

横スクロールを案内する簡単なJSもあります。

appleple.github.io

そのほか

レスポンシブサイトでのtable実装のTips貼っておきます。

design-spice.com

www.unionnet.jp