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

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

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

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

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

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

また、サイトを作る側としてもコンテンツの管理の面で、PC用、スマホ用で、内容が同じで2つのコンテンツを管理するよりは、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を用意します。

例えば

  • PC:横幅801px以上
  • タブレットPC:横幅641~800px ※Kindle Fire HDに合わせてみました
  • スマートフォン:横幅640px以下

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

其々のサイズに合った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ファイルを出来るだけまとめたいという方もいると思います。

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

  • Pocket
  • このエントリーをはてなブックマークに追加

コメントを残す




関連記事

レスポンシブサイト構築に便利なCSSフレームワーク、グリッドデザイン搭載の「HTML KickStart」
レスポンシブ・フレームワーク「Bootstrap」を使う際に便利なツール、アイコン、テンプレート
2014年春、人気のCSSフレームワーク フラットデザイン対応もあります
Bootstrapを採用しているhtmlテンプレート&テーマ
アイコン付きのフラットデザイン風ボタンを簡単に作れるツール「2.5dBUTTON」
表示しながらCSSの編集が出来るFirebugの使い方
デザイン全般で使えるweb色見本
違うブラウザで同じ表示をさせるためには リセットCSSとノーマライズCSSの特徴
Bracketsでお薦めの拡張機能(エクステンション)と拡張機能のインストール・アンインストール方法
ワードプレステーマを変更せずにCSSを追加・管理する方法
Dreamweaverを超えた?無料で使える高性能htmlエディタBrackets
レスポンシブウェブサイトで必須!メディアクエリとブレイクポイントの仕組み
webデザインのグリッドレイアウト作成に使える無料ツール
2014年春 お勧めのウェブアイコンフォント(web icon fonts)2種類!
ワードプレステーマのCSSに影響なくスタイルシートを変更出来るプラグイン

Menu

HOME

 TOP