スマホ&パソコン両対応のWEBサイトを作ろう②

こんばんは! Benです。今日は前回の続きで具体的な作業になります。

20160216a.PNG
スマホでホームページを見るとちょくちょくこのように妙に余白が多くて文字が小さいページがあると思います。


    
    にわか管理者のIT勉強ノート


    

にわか管理者のIT勉強ノート

こんにちは! Benです。 今日はレスポンシブ対応のWEBデザインについてBenが歩んできた道をノートしたいと思います。
PCでは普通に見られるページでも、スマホで見るとすごく小さく見えることがよくあります。それはなぜか? 答えはViewPortが関係しています。これを1文くわえるだけでスマホでも見やすくなりますよ!
このときのHTMLソースはご覧の感じです。特に何も画面サイズに関する記述は見えません。様々な要素の幅を表すスタイルのwidthの指定もなく、通常widthはデフォルトでautoなので何も指定がなければ自動で幅が指定されるはずですが、そうはなりません。


そこでこの魔法の1文です。これをhead部に入れればスマホでも適正なサイズで表示されます。

20160216b.PNG
どうでしょう? これまで細かくて見えなかった文字がしっかりと見えるようになりました。これはviewportというもので、画面の見た目の表示幅をどう設定しますか?というものです。今は高解像度のスマホが多く、縦長の画面の短い幅のほうでも1000ドット以上あるので、現行のYahooのトップページそのまま入ります。でも、それをあのスマホのコンパクトな画面サイズで表示されたら、機械は表示できますが、人間の目がついていけません なのでこのviewportにはその機種の実用的な幅ですよ!と機種ごとに設定している値があり、320~384ドットくらいが一般的です。しかし、viewportのデフォルトは980ドットなので、実用的サイズの3分の1とかなり小さく表示されてしまいます。そこでviewportをその機種の実用的な幅を示すdevice-widthに設定してやるのです。

そのあとにあるinitial-scale=1は最初の倍率は1倍(等倍)ですよ。というものです。そのほか設定できるオプションとしては、minimum-scaleは最小倍率で0.5に設定すると半分まで縮小できるという意味です。逆にmaximum-scaleは拡大できる最大サイズで2.0だと通常のの2倍まで拡大でできるということです。最後にuser-scalableはユーザーが指でグニーンと拡大縮小可能かでデフォルトがyesです。これらを自在に設定して、スマホなどでも見やすいWEBページを作りましょう。レスポンシブは奥が深いので、自分でも忘れないように次も詳しくノートしたいと思います。娘の宿題監視をしながら書いたブログですが、宿題が終わらないので寝れないよー(T_T)

この記事へのコメント


この記事へのトラックバック