PC用につくられたページをモバイル対応にする場合、その画面サイズの違いによりレイアウトの微調整を行わなければならないことがあると思います。
自身もレスポンシブデザインにするため、PC用につくられたソースをゴリゴリっとレスポンシブにしました。
で、何が一番苦労したかというと、HTMLのテーブル構造で、大きなテーブルを扱っている場合です。
| data1 | data2 | data3 | data4 | data5 | data6 | data7 | data8 |
|---|---|---|---|---|---|---|---|
| aa | bb | cc | dd | ee | ff | gg | hh |
このようなテーブルは当然スマートフォンだと右側が画面外に飛び出してしまいます。
それではどう対応するか？
ここにいくつかの解法が紹介されています。
この中で、選択された項目のみ表示する方法を試してみました。
"hiding non-essential columns on smaller screens" を画面内で検索してください。
※ちなみにこのサイトではソースのダウンロードという便利なリンクがない！ので、
HTMLソースを見て、CSS,JSは自分でリンクをクリックしてコピペして、、、要はデモ環境を自分でつくってください。
構造自体はそんなに難しくないのですが、私の場合、PHPで動的に生成しているテーブルにこのコードを埋め込む必要があったため、大変苦労しました。
スマートフォンでのモバイルの扱いに苦労されている方はぜひ参考にしてみてください。