タイトル

タイトル周りに表示させる概要

スマホとPCで表示を変えよう サンプル

 

 

Last update 2013/03/22 18:22

 

このページは、新たに完全にスマホ用に表示させるように0からデザインしなおしたページのサンプルです。
パソコンでアクセスすると、今までのサイトのデザインと殆ど変わらずに表示されると思いますが、スマホからアクセスすると、スマホに最適化された(横幅320px)デザインで表示されます。

大きな画像

表紙を作成するパソコンでこのページを表示させると、ここの文章は画像の右横に回りこむように表示されます。
が、スマートフォンで表示させると、画像がページいっぱいに表示され、ここの文章は画像の下から開始されます。

200pxの画像こちらの画像には、パソコンでもスマートフォンでも文章が回りこんで表示されていると思います。

テーブル

下のような横に長いテーブルは、デザインを崩す最もありえるパターンと原因です。
そこでDIVタグで囲い、DIVに「overflow:scroll」と指定してやり、画面からはみ出した部分は横にスクロールするようにしました。

au 音声プラン プロバイダー料 パケット定額
Softbank iPhone5 ホワイトプラン
980円
Y!なんとか
315円
パケットし放題
for 4G LTE
5,465円
au シンプルZ
980円
LTE NET
315円
パケットなんとか
5,980円
aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaa