*

スマートフォンで横長のテーブルを扱う方法

公開日: : Android, CSS, HTML, iPhone, Java script


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で動的に生成しているテーブルにこのコードを埋め込む必要があったため、大変苦労しました。

スマートフォンでのモバイルの扱いに苦労されている方はぜひ参考にしてみてください。

Ads by Google

Ads by Google

関連記事

no image

LinkedInの新アプリ。メールに発信者のプロフィールを紐付け

LinkedInを使っている方に朗報+警笛です。> LinkedInとはなんぞや? Li

記事を読む

no image

iPhone, Androidでスクリーンショットを撮る方法

もしかしたら知らなかったのは僕だけじゃないか? という一抹の不安を抱きつつ紹介します。 スマート

記事を読む

超簡単! ゆっくりスムーズに動く”トップに戻る”ボタンを設置する方法

縦長のサイトがはやっている現在、下までスクロールした後にいっきに上まで戻る、いわゆる”ト

記事を読む

iPhoneアプリ、Androidアプリの基本と開発環境の構築方法

モバイルアプリの作り方には大きく二つの種類があります。 1. ネイティブアプリ 2. ハイブリ

記事を読む

no image

海外で人気のiPhoneアプリ5選

いまやスマートフォンアプリは現代人の最大の暇つぶしツールといっていいのではないでしょうか? パ

記事を読む

CSS user-selectを使うときは要注意 !

.test{-webkit-user-select: none;} CSSの要素でuser

記事を読む

Webサイトでペナルティにならない引用文の設置の仕方を GoogleのMatt Cutts氏が解説

ご存知のとおり、他のサイトの文章をコピペするとGoogleやBing,Yahooなどの検索エンジ

記事を読む

no image

簡単にWebサイトモックアップをつくる方法

仕事としてWebサイトやE-commerceサイトの提案をされている方なら恐らくいつも直面する問

記事を読む

no image

2014年に流行るウェブデザイン5+1個

洋服がそうであるようにウェブデザインにも流行りがあります。今年はフラットデザインが猛威を振るいました

記事を読む

Ads by Google

Ads by Google

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Ads by Google

Ads by Google
新着記事をRSSで受けとる
PAGE TOP ↑