viewport:ビューポートの設定方法

viewport:ビューポートの設定方法

前回は、メディアクエリの使い方につきまして、サンプルソースコードを交えながら記載いたしました。

スマートフォンの新機種の登場で、年々変化するメディアクエリ、サイト制作者としてはそろそろメディアクエリ以外の指定方法が出てきてもおかしくないのでは？と日々思っております。しかしながら2020年現在では、レスポンシブウェブデザインでコーディングを行うのであれば、必要不可欠なものとなっていると思います。しっかりと学習し、どんなブラウザにも対応できると良いと思います。

また、以前であればPC用、スマホ用とページを分ける際、一番初めに記載する必要があるviewport:ビューポートの設定、それから、ユーザーのデバイスごとにユーザーエージェントを使用して、自動的にページをジャンプさせるJavaScript、2000年代からコーディングを行っている方であれば、もちろん周知の事と思いますが、ここ最近、コーディングを行うようになった方は、device=widthのみの指定以外行ったことのない方もいるかと思います。
今後を踏まえ、以前の技術も今後必要になる機会があるかもしれません。

という事で、それでは今回はッ、

上記について記載していこうと思います…。

viewport:ビューポートの設定方法

ビューポート：viewportとは

ビューポート：viewportとは、ブラウザのウィンドウサイズを表す概念的なサイズです。PCのウィンドウサイズと似ているといえます。このviewportを設定することで、各デバイスにおいて閲覧するサイトをどのくらいの大きさで表示するかを指定できます。

viewportのデフォルト値は、例えばiphoneのMobile Safariでは横幅980pxであるため、初期設定のままスマートフォンなどでPCサイトを表示すると非常に小さく表示されてしまいます。また、レスポンシブウェブデザインではメディアクエリを使用して画面サイズ別にスタイルを適用しますが、viewportが初期設定のままだとブラウザ幅980pxとして認識されるため、意図したレイアウトに切り替わらず、横幅980pxの場合のレイアウトが表示されます。

レスポンシブウェブデザインで、メディアクエリを使用してサイズを指定しても、viewportを設定していないと、スマートフォンでもPCサイトがそのまま表示されてしまいます。その結果、文字が非常に小さく表示されるため、拡大・縮小やスクロールを行わないとサイトを閲覧できない状態となってしまいます。

一方、viewportをdevice=widthで正しく設定した場合、メディアクエリが正しく機能し、スマートフォン向けのレイアウトに切り替わります。
このように、指定したメディアクエリを正しく機能させるためには、viewportの指定は必須となります。

viewportの指定方法

viewportは以下の構文で指定します。

viewportは、以下の一覧を指定できます。

viewportの設定値

レスポンシブウェブデザインでは通常、「width=device-width」を指定します。この値を設定することで、viewportに各デバイスの画面サイズを設定することが可能になります。指定例：2で紹介しました記載方法は6～7年前、PCとスマートフォンのページを分ける際に記載していた方法になります。

スマートフォンとPCの振り分け

レスポンシブウェブデザインには必要ありませんが、今後、色々なスマートフォンのブラウザサイズが登場することと思います。その際、メディアクエリで対応が難しい場合などが起こる可能性があることが予想できます。その際、一時的に以前のPCとスマートフォンでページを分ける技術で対応する可能性も十分考えられるため、JavaScriptでユーザーエージェントを使いスマートフォン用ページとPC用ページまたその他のページの振り分けを行う方法をご紹介します。

ユーザーエージェントとは

ユーザーエージェント（User Agent）とはWebブラウザーや検索エンジンのクローラーといったWebサイトへアクセスするプログラムのことですが、Web制作では一般的に、WebブラウザーがHTTP通信時にサーバーへ送信する固有の文字列情報を指します。たとえば、iPhone XのSafariのユーザーエージェントは次のような文字列になっています。

ユーザーエージェント文字列にはOSやブラウザーの名称、バージョンといった情報が含まれているので、ユーザーエージェントを見ればユーザーがどんな環境からアクセスしているか分かります。

このユーザーエージェント文字列を利用して、iPhoneやAndroidからのアクセスを判断します。たとえば、iPhoneには必ず「iPhone」というキーワードが含まれていますし、Androidはメーカーや端末が異なっていても「Android」というキーワードが含まれています。
ユーザーエージェント文字列の取得の方法はプログラム言語によって異なりますが、JavaScriptの場合は次の方法で取得できます。

JavaScriptの詳しい記載方法は、別記事で記載しようと思います。こちらでは記載サンプルのソースコードのみ記載いたします。また、記載場所につきましてはMTHL、headタグ内に記載するのが良いでしょう。

アラートを表示してからOKでページジャンプ

ページにアクセスした直後にページジャンプ

スマートフォンはナシ！PCはアリ！

前回ご紹介いたしました、シンプルなレスポンシブウェブデザインで構成されたサンプルHTML、実際の制作現場では、これほどシンプルなサイトはなかなか見る機会がないかと思います。また、実際にはヘッダー周辺などは特にグローバルメニューやそれ以外の連絡先など、複雑にデザインがスマートフォンとPCで大幅に異なる場合などが多々ございます。

その際、実際に制作最中に悩むことも多々ございますが、初めに覚えておくと便利なCSSの指定方法を初心者の方にとっては、分かっていれば便利だろうとの思いから記載してみます。

実際のあった例をご紹介いたします。

上にのサンプル画像をご覧いただければ分かりますとおり、PCにはヘッダー上部に検索ボックスが1つだけ存在します。しかしながら、スマートフォンのデザインは、ヘッダー上部とハンバーガーメニュー内の2つに検索ボックスがあるというデザインになります。

この場合、HTMLのマークアップでは検索ボックスをどうしても2つ記載しなくては不可能です。こんな時はPC用のスタイルシートにdisplay: none;の指定をおこなうしか方法が無くなってしまいます。また、逆の場合も同じで、PC用デザインには要素として存在するが、スマートフォン用デザインには要素自体存在しない。そういった場合も実際の制作現場では多々ございます。

上記のような場合をあらかじめ想定して、CSSにはあらかじめリセットCSSと同様にdisplay: none;、display: block;の指定をメディアクエリごとに記載しておくとページの作成中比較的簡単で、便利に使用することができます。

あらかじめ指定しておくdisplayプロパティ

それではサンプルCSSを下記にご紹介いたします。

※上記は、共通およびスマートフォン、メディアクエリ768px以上はタブレット・PCで分けて記載してあります。

実はこのレスポンシブウェブデザインで、display: none;を使う場合は他にも沢山便利なことがございます。
例えば、すごく複雑なヘッダーのいち部分、スマートフォン用のHTMLを記載してから、PC用のHTMLを記載し上記CSSでデバイスごとにdisplay: none;とdisplay: block;で表記させても、構文的には誤りではありません。

メリットとしてはレスポンシブで複雑な場合、分けてスタイルに合わせてHTMLを記載することができる。また、初めにスタイル（CSS）を読み込むんでからHTMLを読み込みdisplay: none;の部分のHTMLを読み飛ばすので、ページの表示速度も落ちないという利点があります。
デメリットとしては、HTMLが重複するので、コーディングの量が増えるといった所でしょうか。

いずれにせよ、レスポンシブウェブデザインでコーディングを行うのであれば、初めに覚えておいた方がいい内容になります。

という事で今回は、viewport:ビューポートの設定方法・ユーザーエージェントでのページの振り分け・display:noneの使い方について記載いたしました。

サイト作成に必ずといってイイほど使用する技術になりますが、今回記載しました内容は、初心者の方が忘れがちな内容になります。JavaScript以外は、比較的簡単な内容ですが、忘れてしまうと「なんで？」となってしまうことでしょう。レスポンシブウェブデザインを始めてコーディングを行う頃は、私も頻繁に忘れてしまうことがございました。
ウェブサイト作成では、一度しか記載しないコードで比較的忘れやすい事から、初心者の方であればテンプレート化して保存しておくことをおすすめします。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。