レスポンシブWebデザインのコーディング(Viewport編)│Web制作会社のレスポンシブWebデザイン関連コラム

Columnコラム

レスポンシブWebデザイン(RWD)

レスポンシブデザインのHTMLコーディングにある落とし穴(Viewport編)

レスポンシブデザインのHTMLコーディングにある落とし穴(Viewport編)

2015/02/23
このエントリーをはてなブックマークに追加

こんにちは。音楽はCD派、コンサルティングの糸井です。
最近は、何もかもデータ化してしまう傾向にありますね。特に書籍やCDは、ニュースにもなるほどです。
私は今でも、音楽はCDで買う・借りる人です。(時代遅れかもしれない...笑)
インターネットのダウンロード形式で買うことにまだ抵抗があるのが理由ですが、やっぱり現物があると嬉しいですよね!
本も同じように、今でも書籍をお店に行って買っています。これも同じ理由で、現物があった方が嬉しいからです。

とはいえ、インターネットで買っておいたことによる恩恵を受けた事がないわけではありません。例えばスマートフォンのアプリは、一度買っておくと機種変更をしても再度支払いをせずにダウンロード出来たりするので、物をよく失くしてしまう私からするととても嬉しいことでした。
今後は色んなものがダウンロード形式になっていくのかな?もし、そうなっていくなら、普段持っている物全てがダウンロード出来たらいいのに(笑)

そんな妄想をしながら、今失くしたイヤホンを必死で探しています。。。

img_viewport01.jpg

さてさて、記事の本題はここからです。
前回ご紹介した記事「レスポンシブデザインのHTMLコーディングにある落とし穴(Media Query編)」に続きまして、今回はViewportの落とし穴についてご紹介したいと思います。

Viewport(ビューポート)には落とし穴がある!?

レスポンシブデザインのWeb制作、経験を積んでも意外と時間が掛かってしまいます(汗)
そんなレスポンシブデザイン制作に必要不可欠なもの、それはViewport(ビューポート)です。レスポンシブデザインは、スマートフォンでサイトを閲覧しに訪れてきたユーザーをサポートしなければならないため、HTMLの<head>タグ内に必ず含めなければなりません。今となっては常識ですね。

名作マンガ「スラムダンク」の主人公・桜木花道に超天才のイケメンバスケットボーラー流川楓という最大最強のライバルが必要なように、スマートフォンサイトにもViewport(ビューポート)は必要なのです。

そういえば、スラムダンクの最終回のその後の話、皆さんご存知だったりしますか?
スラムダンクの最終回から10日後の話として、2004年に作者である井上雄彦が、廃校になった旧神奈川県立三崎高校の黒板に最終回のその後の話を書いたとか。これは単行本1億部突破を記念したイベントで書いたようです。スラムダンク好きの人は既に知っている人が多いと思いますが...。
ちなみに、この話はYouTubeに動画としてアップされているらしく、自分も見たことがあります。
どんな話か気になった方は、是非検索してみてください。

おおっと!話が大分逸れましたね、本題に戻ります。Viewport(ビューポート)の落とし穴でしたよね。すみません。
Viewport(ビューポート)の落とし穴ですが、それが何かと言うと、設定を少し間違えるだけで、ピンチズーム・ピンチアウトの操作がスマートフォンで出来なくなってしまうのです。

ピンチズーム・ピンチアウトが出来なくなる!?

はい。そうです。出来なくなります。
サイトの仕様によっては出来ても・出来なくてもどちらでも問題がない場合がありますが、これは設定一つで決める事が出来ます。
おさらいも兼ねて、Viewport(ビューポート)プロパティーの一覧を見てみましょう。

■Viewportプロパティーの一覧
・width ・・・ コンテンツの幅
・height ・・・ コンテンツの高さ
・initial-scale ・・・ 初期倍率
・minimum-scale ・・・ 最小倍率
・maximum-scale ・・・ 最大倍率
・user-scalable ・・・ ユーザーに拡大・縮小の操作を可能にするかどうか

よく使うプロパティーを赤文字で強調してみました。

ここで、今回の記事タイトルにもある落とし穴の説明をしますが、皆様はどの設定を操作すれば良いのか、わかりますか?


・・・ごめんなさい。「見ればわかるじゃん」という回答が大半だとわかりながら、変な質問をしてしまいました。

そう。プロパティーの一覧を見ればわかりますよね。
「user-scalable」というプロパティーの設定を変更すれば良いのです。


と思った方は、既に落とし穴に引っ掛かっています!

実は「minimum-scale」「maximum-scale」「user-scalable」この3つのプロパティに全てに設定しなければ、問題は解決しません

そうです。見出しに大きく書いてしまいましたが、「minimum-scale」「maximum-scale」「user-scalable」この3つのプロパティー全てに対して設定をしなければ、問題は解決しないのです。「minimum-scale」には「1.0」、「maximum-scale」には「1.5」、「user-scalable」には「yes」といったように、それぞれに値を指定しなければなりません。サンプルは以下の通りです。


<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.5,user-scalable=yes,initial-scale=1.0" />


こんなところにも落とし穴があったのか!!!

と思ったのは、私も同じです。
コンサルティングスタッフとして、毎日企画立案やプロジェクトマネージメントをしながら、とある案件の制作を手伝っていたときに、今回のテーマに取り上げた問題に直面し、試行錯誤の末、この落とし穴に気付きました・・・。

HTMLには見向きもせず、JavaScriptのコードばかり見ていて、視野が狭くなっていました。。。


私と同じような問題に直面している人がいるかも?と思って、今回のコラムを書いてみました!


参考になりましたでしょうか?


え?何でコンサルティングなのに制作をしているかって?

元々はデザイナー志望でWeb業界に入ったので、ちょっとした制作であれば自分でも出来るんです。

また役立つ情報があったら、ドンドン紹介していきますね!

関連するサービス

ホームページ制作

Webデザイン制作

レスポンシブWebデザイン制作

関連キーワード
text_totop