コピペで済ませていませんか?改めて学び直したい「Viewport」のすべて
スマートフォンをはじめとしたモバイル端末でホームページを表示することを想定するとき、Viewportと呼ばれるタグを挿入します。
タグを挿入する時、例えば以下のようなコードを*コピー&ペーストしている方は多いのではないでしょうか。
<meta name="viewport" content="width=device-width,initial-scale=1">
貼り付けるだけでも問題ありませんが、構造を理解すれば好きなようにカスタマイズすることも可能です。
今回は、Viewportの基本的な概念から設定に関する具体的なコツをご紹介します。
Viewportとは?
Viewportとは表示領域のことで、ブラウザにおける仮想のカンバスサイズを決めて、サイトの表示の仕方を制御する役割があります。
例えば、上記のようなホームページがあるとします。
モバイルのViewportを指定していない場合は、デスクトップサイトで表示される横幅をモバイル端末の横幅と合わせてしまうので、以下のように非常に小さくて閲覧しにくい状態で表示されてしまいます。
<meta name="viewport" content="width=360">
上記のように指定すると、横幅360pxの仮想領域としてViewportが作られます。
ブラウザはこのViewportの幅をもとにレンダリングを行うので、メディアクエリでも360pxとして反応し、DOM操作でclientWidthを取得しても360pxとなります。
モバイル端末の幅よりもViewportの幅のほうが小さいか同じであれば、スマートフォンサイトとしてストレスなく閲覧することができるでしょう。
以下のように指定すると、Viewportの幅は実際の解像度ではなく端末やブラウザに合わせた値を返します。
<meta name="viewport" content="width=device-width">
Viewportで指定できるもの
1. width (横幅)
Viewportの横幅をピクセル単位で指定します。意外と知られていませんが、初期値は960pxです。
また、指定できる範囲は200px〜10000pxで、そのほかにデバイス幅に合わせるdevice-widthがあります。
2. height (縦幅)
Viewportを指定するときにはあまり登場しませんが、横幅とのアスペスト比から計算される値が初期値となっています。
特に指定することはないとは思いますが、同じように200px〜10000pxの間で指定でき、device-heightも指定できます。
3. initial-scale (初期倍率)
初期倍率を設定します。
width=device-widthとしてinitial-scaleを指定しない場合は、自動的にinitial-scale=1となります。
一方、initial-scale=1とした時には、やはり暗黙的にwidth=device-widthであるので、実はどちらかを指定しておけば大丈夫です(※)。
※ Windows PhoneのIEではinitial-scaleに対応していないので、やはりinitial-scaleとwidthを同時指定したほうがいい、という考え方もあります。
4. minimum-scale (最小倍率)
最小縮小倍率を指定することができます。
初期値は0.25で、0より大きく10未満の値を指定します。
こちらもあまり知られていないかもしれませんが、initial-scaleとminimum-scaleは一緒に指定することができません(縮小ができなくなります)。
5. maximum-scale (最大倍率)
同様に、最大拡大倍率を指定できます。
初期値は1.6で、0より大きく10未満の値を指定します。
6. user-scalable (ユーザーのズーム操作の可否)
ユーザーがズームすることを許可するかどうかを指定することができます。
初期値はuser-scalable=yesで、yes/noまたは1/0で指定することができます。
7. target-densitydpi (ターゲットとなる画面密度)
こちらは旧版のAndroid端末に向けて指定します。
ターゲットとなる画面密度を設定しますが、target-densitydpi=device-dpiとすると端末ごとに表示される文字サイズも大きく変わってきてしまいます。
そうならないように、target-densitydpi=medium-dpiに設定するか、あるいはそもそも記述しない、というのが最近の慣行となっているようです。
最近のAndroid端末(Android4.2以降)では廃止されているので、特に気にしなくてもいいかもしれません。
Viewportとメディアクエリの関係
スマートフォン対応のWebデザインを行うときに、Viewportとともに必ずといっていいほど登場する言葉が*「メディアクエリ」*(Meria Queries)です。
しかしながら、Webデザインを勉強したての頃は、Viewportとメディアクエリを混合してしまったり、違いをよく理解していないかもしれません。
そこで、メディアクエリについても確認していきましょう。
メディアクエリとは
メディアクエリとは、デバイスの解像度やウィンドウの幅、向きなどの指定条件に合わせて、別々のCSSを適用できる機能のことをいいます。
以前はユーザーエージェント(User Agent)という端末ごとの情報によって、パソコン・スマホをJavaScriptなどをつかって判別し、デスクトップサイト用・モバイルサイト用に振り分けていました。
しかし、メディアクエリの登場により、スクリーン幅に応じてCSSを切り替えるレスポンシブデザインを行うことが可能になりました。
メディアクエリでは、link要素中のmedia属性やCSSの*@media*規則を使って、デバイスやスクリーンサイズで適用範囲を切り替えることができます。
一般的に、link要素を利用して複数ファイルを読み込むよりも、CSS中で@mediaを記載した方がHTTPリクエストの回数が少なく、ページの読み込みが早くなると言われています。
ブレイクポイント
メディアクエリを使ったCSSの切り替えでは、CSSの切り替え条件として*「ブレイクポイント」*(Break Point)を設定します。
メディアクエリの記述例
メディアタイプのみを指定する場合はこのように記述します。
@media screen {
* {font-size: 16px; }
}
onlyをつけることで、メディアクエリに対応していないブラウザにはメディアクエリを読み込ませないようにできます。
@media only screen {
* {font-size: 16px; }
}
また、メディアタイプとブレイクポイントを設定することもできます。
@media screen and (min-width:960px){
* {font-size: 16px; }
}
効率のよいメディアクエリの書き方
一般的に、メディアクエリは「モバイルファースト」の考え方に沿って、スマートフォンなどの小さなスクリーン用から記述していきます。
その際、メディアクエリを指定していないCSS部分にはデスクトップとモバイルで共通のデフォルトのスタイルシートを記述し、メディアクエリを使った部分では、メディアクエリを指定していないデフォルトのスタイルシートとの差分を記述していきます。
@charset "utf-8";
// デフォルトのスタイル
@media screen and (min-width : 480px){
// 最小幅 480px 以上の指定
}
@media screen and (min-width : 768px){
// 最小幅 768px 以上の指定
}
@media screen and (min-width : 1024px){
// 最小幅 1024px 以上の指定
}
ブラウザは上からメディアクエリを判別していきます。
例えば上記のスタイルシートの場合、ウィンドウ幅が480px未満だと、ブラウザは以下の2つ目以降の指定を読み込みません。
このようにメディアクエリを効率よく記述することで、無駄なくスタイルシートを読み込ませることができます。
Viewportとメディアクエリの関係
ところで、スマートフォンデバイスに関しては、レスポンシブデザインでレイアウトを行う際には、CSSでメディアクエリを、HTMLでViewportを両方設定しておく必要があります。
これは、メディアクエリだけを指定したとしても、Viewportがなければ何も起こらないからです。
一方、メディアクエリを正しく設定しておけば、Viewportでwidth=device-widthを指定しておくだけで、ブレイクポイントによる切り替えを行うことが可能です。
まとめ
さまざまなスクリーンデバイスの登場で、ホームページをそれぞれの端末用に複数作らなければいけないという時代もありました。
しかし、Viewportとメディアクエリの登場で、1つのCSSで端末ごとにデザインを制御することが可能になりました。
すでにご存知のことも多いかもしれませんが、ぜひおさらいも兼ねて見返してみてください。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- Android
- Android OSとはスマートフォン用に開発された基本ソフト(OS)の一種です。米国Google社が中心となり開発されました。
- Android
- Android OSとはスマートフォン用に開発された基本ソフト(OS)の一種です。米国Google社が中心となり開発されました。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- HTTP
- HTTPとは、HTMLで記述されたWebページなどの情報を、WebサーバーとPCなどのクライアント端末間でやり取りする方法を定めた通信手順のことです。Hyper Text Transfer Protocolの略です。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング