Web関連

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

0

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

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

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

 

さてさて、記事の本題はここからです。
前回ご紹介した記事「レスポンシブデザインの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デザイン制作

0

web上でのコミュニケーション!前のページ

W3C日本会員会議に参加してみた!次のページ

ピックアップ記事

  1. 新しい販売形態であるDtoCについて考えてみる
  2. 新型コロナウイルスで日本の働き方改革が起こる
  3. AIに求められているものは、実は意外な物だった
  4. 大手企業も注目するMaaS(Mobility as a Service)とは何か…

関連記事

  1. Web関連

    ホームページ制作の大きな失敗原因と解決方法はこれだ!

    ホームページ制作の失敗の原因と解決方法はこれだ!失敗する原因は3つ、解…

  2. Web関連

    ウェアラブルで健康管理

    健康管理といえば、メディアの情報からセルフチェックをしたり病院で検査を…

  3. Web関連

    日本の暦ってステキ ~3月3日について考えてみる編~

    こんにちは。ティファナコラム編集部 担当の遠藤です。みなさん、今日は何…

  4. Web関連

    WEB制作時のFTPトラフィックについて

    こんにちはサーバーエンジニアの橋本です。先日自宅で使っているノ…

  5. Web関連

    Web担当者なら知っておきたい「マイクロモーメント」とは?

    皆さんは、何か知りたい(買いたい)情報があった時にデバイスは何を使いま…

  6. Web関連

    【ホームページ制作】GUIの歴史を辿ってみた

    みなさんはGUIという言葉はご存じでしょうか?ぐいぐい~。GU…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    新しい販売形態であるDtoCについて考えてみる
  2. Web関連

    物流の時代が変わった!最短20分での配達!
  3. AI関連

    AIチャットボットが向いている分野
  4. AI関連

    【人工知能(AI)×金融】AIがフィンテックによる金融業界のサービスの中心になる…
  5. Web関連

    【人工知能・AI×インバウンド】災害時必ず必要になる情報収集手段
PAGE TOP