こんにちは。
ユーザー視点からのUIを気にかけられる
web制作の宇垣です。
今回は、今後の私のレスポンシブ対応の技術向上のために
『スマートフォンサイトのためのHTML5＋CSS3』という書籍を読みました。
HTMLやCSSは普段から触っているのでなんとなくわかった気でいますが、今回興味深かったのは
metaタグのビューポートです。
metaタグは直接外観には関係しないため、
こうなっているからこうなんだろう、という触らぬ神に祟りなし状態でした。
メディアクエリでレスポンシブ対応をしているのでビューポートが関係しているというのは知っていますが、どういう記述がどういう意味なのかはよく知らない。width=device-widthにしておくのがとりあえず正しいんだよね状態でした。
よく知らなかった用語
・width 横幅の指定
・height 高さの指定
・initial-scale 初期の拡大率
・minimum-scale 縮小できる大きさ
・maximum-scale 拡大できる大きさ
・user-scalable ユーザーのピンチイン（拡大縮小）を有効にするか
・target-densitydpi ターゲットのdensitydpi
すごく昔に受験英語しかやっていない
なおかつそれも赤点しかとっていない
私にとってはタグを見ただけでは意味が伝わりません。（こうして書籍を読まなければ…）
ピンチインの有効/無効
結構どこのサイトで公開されているレスポンシブ対応のビューポートの設定はピンチイン・ピンチアウトが無効にされている場合が多いです。
そのほうがスクロールしやすく、アプリ感のあるサイトになるため完成度が上がって見えるのだと思います。
しかし文字が小さい、画像が小さくなりがちなレスポンシブ対応にとっては拡大縮小ができないと不便だったりもします…。
ということで今回はピンチインを取り入れることにしました。
・user-scalable no → yes
・maximum-scale → 1.0以上
この２点を変更しないとピンチインは動かないみたいです。
よく、no→yesだけで満足してしまいますが、最大値を決めていないと動きませんでした…。
ビューポートに数値を設定すると…。
width=device-width というのをコピペで動かしているのですが、では実際に数値を入れてみるとどうなるのかというのもこの書籍で紹介されています。
iPhoneとAndroidやChromeでどちらの比較画像も乗っているのでわかりやすくて素敵です。
実際に数値をいれると、
320pxと入れた場合、320pxの画面にはフィットするけどそれ以外の時にははみ出したりという障がいが出るみたいです。
その画面幅も解像度によってピクセル設定は違うと思いますので、奥が深い。
まだ理解しきれていません。
環境が違うからデザインが変わる。
あとはレスポンシブでなかなかネックなのはデバイス・OSによる環境の違い。
特にiPhoneではボタンやフォントなど、独自の初期設定がありますよね。例えばiPhoneでの送信ボタンがグラデーションがかかってしまう問題など、ちょっとCSSで指定しただけでは治らないものも多くあります。
スマホとPCでは対応している（内蔵されている）フォントが違うため、チェックを怠るとゴシック体と明朝体のせいで雰囲気ががらっと違うサイトになってしまっていたりします。
それを防ぐためのWebフォントサービスも紹介されています！
他に気になったもの。
まだ試してはいないのですが、気になったものが1点。
スマホ時はついつい長くなりがちなコンテンツを折りたたんで非表示にするのはよくあると思います。
現在これはjsで制御していますが、この本では普段はdisplay:noneにして
擬似クラス:target のときだけ display:block にするというもの。
なるほど…！その手が！と思いつつ、それだと他の箇所をクリックしたときに消えてしまうのではないか？とか、パッと現れてパッと消えるってどうなんだろう（ぬるっと上から開くほうが安心して見れる）と思います。
しかしCSSだけどの動作が可能になるならjsの衝突を気にしなくて良くなったりライブラリをたくさん入れる必要がないので便利ですよね。
これは要チェックだと思いました。
さて、『スマートフォンサイトのためのHTML5＋CSS3』ですが
技術的な無いようが多く盛りだくさんでした。
レスポンシブはわかるけど、どうなってるの？どうやるの？
なんて人に向いているのではないでしょうか？
興味がある方はぜひ。
スマートフォンサイトのためのHTML5+CSS3 [固定レイアウト版]
（私が読んだのはもっとカラフルな表紙ですが…）
