レスポンシブwebサイトを構築するためのポイント「viewport」とは

レスポンシブwebサイトを構築する際によく使われるのが今回、解説するviewportです。
viewportとは何かというと、表示領域という風に理解すれば判り易いと思います。

レスポンシブwebサイトとは

そもそもレスポンシブwebサイトというのは、同じコード（html）を使ってディスクトップPCやスマートフォン、タブレットPC等のデバイスの表示画面に合わせてレイアウトを変化させているサイトの事を指します。

レスポンシブwebサイトが出てくる前は、ディスクトップPC用のコードとスマートフォン用のコードは別々に用意されており、UserAgentの振り分けを使って、同じコンテンツの物を違うURLにて表示させるような形をとっていました。

ただ、それではコンテンツの重複にも繋がるし、同じ内容で２つのページが存在すること自体、おかしいという事と、Googleがレスポンシブサイトを推奨し始めたことで、重要度が増してきたことが、レスポンシブサイトが増えてきたことの要因といえます。

また、サイトを作る側としてもコンテンツの管理の面で、PC用、スマホ用で、内容が同じで２つのコンテンツを管理するよりは、CSSやJavaScriptを使うことによってそれぞれの媒体に合わせた表示やレイアウトが出来るようになる方が管理はしやすくなってきます。

ただ、複雑なデザインのサイトではHTML/CSS/JavaScriptのコードが大きくなりすぎて、表示に時間が掛かったり、パフォーマンスの悪化という事も考えられるので、規模によってはデバイスごとにHTMLを分けて、UserAgentによる振り分けを行った方がいい場合もあります。

そのためには媒体やコンテンツ、サイト規模を考慮したサイト構築が求められてきます。

Google Developers Page Speed Insights のViewportに対する解説

下記URLにてGoogleのviewportに関する解説が掲載されています。
サイト構築の際の参考になると思いますので目を通しておいて下さい。

Viewportを使ったHTMLの例

Viewportを使う際にはHTMLのMeta部分に下記コードを追加します。

<meta name="viewport" content="width=devicewidth,initialscale=1.0"/>
<link rel="stylesheet" media="all" type="text/css" href="pc.css" /><!-- PC用CSS -->
<link rel="stylesheet" media="all" type="text/css" href="tablet.css" /><!-- タブレット用CSS -->
<link rel="stylesheet" media="all" type="text/css" href="smart.css" /><!-- スマホ用CSS -->

よく、viewportの設定の中に次のコードを入れている場合がありますが、ユーザビリティを考えるとあまり、得策ではないようです。
maximumscale=1.0
user-scalable=no
その辺りの解説をしているサイトをリンクしておきます。

次にサイズに合わせたCSSを用意します。

例えば

という風にサイズを決めます。
この際の横幅はあくまでも参考サイズですので作成するサイトの内容に合わせてスマホで見るとき、タブレットで見るとき等を考えて分けて下さい。

其々のサイズに合ったCSSファイルを用意します。

pc.css（PC用）のCSSファイルの中身

@media screen and (min-width:801px){
画面の横幅が801px以上の場合のスタイルを記入
}

tablet.css（タブレット用）のCSSのファイルの中身

@media screen and (max-width:800px){
画面の横幅が641～800px以下の場合のスタイルを記入
}

smart.css（スマホ用）のCSSの中身

@media screen and (max-width:640px){
画面の横幅が640px以下の場合のスタイルを記入
}

注：あくまでもレスポンシブwebサイト構築の1つの例です。
参考程度に見てもらえればと思います。

こちらも参考に

レスポンシブWebデザイン 制作の実践的ワークフローとテクニック

最後に

少し簡単ですが、Viewportについて説明してみました。

今回は、CSSファイルをそれぞれの端末用に準備するという形でのレスポンシブwebサイトの構築方法を説明しました。

ただ、CSSファイルを出来るだけまとめたいという方もいると思います。

その方法については別の機会で説明したいと思いますこちらを参考にしてください。