htmlというより、はてなブログについて質問です。
スマートウォッチ 比較このブログなのですが、スマホで見ると表が大きすぎて画面に収まりきれません。どのように小さくすれば良いでしょうか?
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答4件
0
具体的にどの様に見せたいのか、どの様に活用して欲しいのかが明確ではないので、一般論的な対応法のヒントしか提示できませんが…
比較表である以上、一覧性が非常に重要ですね。
しかし、一つの表に盛り込む情報の量と一覧性はトレードオプの関係にあるので、表示可能な面積が物理的に制限されている以上、PCの向けと同じままで小さくすることは出来ません。
ですので、表のサイズを小さくするというよりも、表示する情報を整理するという観点で取り組むのが良いと思います。幾つか例を上げると…
- 冗長な表記は削る。たとえばCPUなら「デュアル/1GHz」もしくは「2コア/1GHz」、対応端末なら「Galaxyのスマホ」→「Galaxy」など
- 防水・防塵は見出し欄を「防水/防塵」として、各欄は「IPX7/×」のような表記にする。(生活防水)とい表記は削除し、注釈を加えたければ欄外(表の下)などへ
- 色については、細かな注釈は(一旦)排除して「代表色」を「〜など」と表記しておき、詳細ページへのリンクにする
- 画像は(一覧表からは)削り、載せたければ色の詳細ページに(可能なら)全色分載せる
- 価格は見出し欄に単位を(千円)と表記し、それぞれの欄には「45」「25〜35」「46〜1500」のように表記し、やはり注釈はリンク先に記載する
などです。
他にもちょっとした工夫で、より少ない文字数で同程度の情報を伝えることができますし、例えば各モデルのアピールポイントを強調したいなら、各項目を独自の評価で「◎○△×」などの記号(詳細説明はリンク先)にしてしまうという手法もあります。
ということで、まずは伝えたい情報を整理しなおしてみてはいかがでしょうか。
投稿2015/10/13 22:29
総合スコア5936
0
画像を取り払ったとしても、画面の小さいスマホだと、4列構成の時点で、1行の文字数がスマホの1行をオーバーしているように思われるため、4列構成自体がかなり厳しいと思われます。
HTMLで何とかするのであれば、1列構成で、縦に3つ並べる方法か、
どうしても、4列構成ということであれば、エクセル等で表を作ったものをプリントスクリーンで取り込み、表自体を画像として貼りつける方法がよいかと思います。(画像の横幅、高さ指定はしないか、autoにしておく)
投稿2015/10/13 06:39
総合スコア440
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
画像を非表示にしたら収まるかもしれませんね。
以下のURLを参考に設定してみてください。
http://androidlover.net/googleapps/chrome-browser/chrome-dev-channel.html
投稿2015/10/13 05:34
総合スコア1720
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。