Web関連

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

こんにちは。音楽は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デザイン制作

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    本当に無料?お手軽ECサイト構築ツールの注意点

    こんにちは、すっかり暖かくなったからか、花粉症に苦しめられている山谷で…

  2. Web関連

    市から配信されるメールシステム

    いきなりですが、みなさんに質問がございます!住んでいる市の情報がメール…

  3. Web関連

    忙しいビジネスマンにオススメ!のLINEのサービス

    皆さんはプライベート時の連絡手段として、何を利用していますか?スマート…

  4. Web関連

    作りっぱなしにNO!PDCAを回して、効果的なWEBサイトにしよう 第2回:PDCAの失敗例と解決…

    PDCAがうまく回らない理由以前のコラムで、WebサイトにおいてPD…

  5. Web関連

    WEBサイトの更新が楽々に? CMS導入のすすめ

    Webの担当者の皆さんは、WEBサイトの更新を行うとき自分の社内で行っ…

  6. SNS関連

    ビジネス特化のソーシャルメディア「Linkedin」

    さて今回はソーシャルメディアについて触れていこうかと思うのですが、みな…

おすすめ記事

最近の記事

  1. デジタル化が旅行・観光業を救う!?ウィズコロナ・アフターコロ…
  2. 人が対応するのが正しいの?DX(デジタルトランスフォーメーシ…
  3. 人間拡張って聞いたことがありますか?デジタル化が背中を押して…
  4. テレワークだけでは足りない?デジタルシフトなど、アフターコロ…
  5. 【初心者向け】ここに注目!スマートフォン用バナーを作成しよう…

アーカイブ

  1. Web関連

    テレビCMとは違う?動画広告の面白さとは
  2. Web関連

    Googleアナリティクスの新機能「ユーザーエクスプローラ」とは?
  3. Web関連

    業務を効率化できるサービス
  4. Web関連

    家電好きが便利だと思うスマート家電3選!
  5. Web関連

    コンバージョンアップのための3ステップ!
PAGE TOP