実践編１：モバイル対応に必要な設定

本日のテーマ

１）viewport（ビューポート）
２）Media Queries（メディアクエリ）
３）Breakpoint（ブレイクポイント）
４）モバイル最適化した事例

１）viewport（ビューポート）

◆viewportとは

viewportとはブラウザの表示領域を制御し、モバイルでWebページを見る際に最適な見栄えに整えてくれるmeta要素です。
PCのみの対応では意識することのない概念ですが、マルチデバイス対応では最も重要な設定です。
viewportで設定できるプロパティは、以下の通りです。

【Viewportのプロパティ】

◆viewportを指定していない場合

viewportの設定を行わずにiOSやAndroid4.x系のモバイル端末で表示すると、widthの値を「980px」と指定したとみなして処理されます。（Android2.x系では800px）
viewportの設定がないと980pxに合わせてページ全体が縮小表示されるので、各要素が見づらくなってしまいます。
テキストが読みづらいのはもちろん、リンク等もタップしづらくなるので、ユーザビリティ上の問題が発生します。

【viewportを設定せずにモバイル端末で表示した場合】

←ブラウザの幅が980pxで表示されるので全体的に縮小されてしまう。

特に複雑な漢字はこの上なく読みづらいですね。
かつ拡大・縮小ができない設定がされていればアウトです。

viewportなしのデモページ
※リンク先はスマホで見てね

◆viewportを指定した場合

今度は以下の通りviewportを設定してみましょう。
設定方法は、headの中に「meta name="viewport"」と記述した後に半角スペースを空け、「content="●●"」と記述し、●●にプロパティを入れます。

【viewportの記述例】

<meta name="viewport" content="width=device-width, initial-scale=1">

「content=""」の中に入っている「width=device-width」とは、「ブラウザの幅をデバイスのスクリーン幅に合わせる」という設定です。
この設定により、以下の通りに見えるようになります。

また、「initial-scale=1」とは、「ページが最初に読み込まれるときの拡大率を1にする」という設定です。

【viewportを設定してモバイル端末で表示した場合】

←ブラウザの幅が端末の幅に合わせて表示されるので全体的に見やすくなった。

viewportありのデモページ
※こっちのリンク先もスマホで見てね

このように、viewportで「ブラウザの幅＝デバイスのスクリーン幅」に指定してもまだ不十分です。
なぜならこの設定により、コンテンツの幅（980px）はデバイスのスクリーン幅（320px）を超えてしまっているからです。
上の例では、幅300pxの画像を配置しているのでスクリーン幅に収まっているように見えますが、スクリーン幅のその先に見えていないコンテンツがあるのです。

これを、どの端末で見ても端末の画面幅に収まるように設定するのが、これから説明する「メディアクエリ」と「ブレイクポイント」の役割であり、モバイル最適化を施すということになります。

２）Media Queries（メディアクエリ）

◆メディアクエリとは

Media Queries（メディアクエリ）とは、表示された画面環境に応じて適用するスタイルを切り替える機能で、css3から追加された仕様の一つです。

例えば、ざっくり「PC」「スマホ」「タブレット」でcssを切り替えたい、という場合は、３パターンのcssを用意します。
viewportがモバイルにおけるブラウザの表示領域を制御するとしたら、メディアクエリは「PC」「スマホ」「タブレット」それぞれの表示幅に合わせたスタイルを適用させる役割を担います。

◆メディアクエリの設定方法

メディアクエリの設定方法は以下の３種類あります。
現在は、１か２が主流のようです。

【1. HTMLのlinkタグのmedia属性に記述する方法】

headの中で読み込むcssを指定しているlinkタグの中に、media属性を追記します。
適用させる特性を「and」で句切って並べ、その条件に沿って適用させるcssを読み込んでいく方法です。

以下の例では、上から「スマホ用」「タブレット用」「PC用」の順でCSSを読み込んでいます。

<link rel="stylesheet" media="only screen and (max-width: 480px)" href="for_sp.css">
<link rel="stylesheet" media="only screen and (min-width: 481px) and (max-width: 768px)" href="for_tablet.css">
<link rel="stylesheet" media="only screen and (min-width: 769px)" href="for_pc.css">

【2. css内に@media記述する方法】

「@media」で始まり、1のパターンと同じように適用させる特性を「and」で句切って並べていきます。
適用させる特性を並べたら、「{}」の中に設定するcssを配置していく方法です。

以下の例では、上から「PC用」「タブレット用」「スマホ用」の順でCSSを読み込んでいます。
最小幅（min-width）と最大幅（max-width）は表示領域となる画面サイズを表し、それぞれに適用するcssを設定しています。

@media screen and (min-width: 769px) {
        h1 {
          color: blue; /* PC用 */
        }
    }
@media screen and (min-width: 481px) and (max-width: 769px) {
        h1 {
          color: green; /* タブレット用 */
        }
    }  
  @media screen and (max-width: 480px) {
        h1 {
          color: red; /* スマホ用 */
        }
    }

上記では「ページの表示範囲」をメディアクエリで設定しましたが、「スクリーンの表示範囲」や「画面の向き」「解像度」に応じて設定できる特性がいくつかあります。
詳細はメディアクエリで判別できる特性をご参照ください。

【3．IE8以下にメディアクエリを適用する方法】

IE8にはメディアクエリが効きません。
適用させるためには、htmlのhead部分に専用のjavascriptファイルを読み込ませます。
html5shiv-printshiv.js、Respond.js、css3-mediaqueries-jsを使って読み込ませるのが一般的なようです。

<!--[if lt IE 9]><script src="/js/html5shiv-printshiv.js"></script><![endif]-->

※この例では、「html5shiv-printshiv.js」というjavascriptファイルを「js」というディレクトリ下に配置し、読み込んでいます。

３）Breakpoint（ブレイクポイント）

◆ブレイクポイントとは

ブレイクポイントとは、画面サイズを元に適用させるスタイルを分ける境界のことです。
メディアクエリでcssを切り替える最小値・最大値の数値を設定していましたよね。
あの数値がブレイクポイントです。

ブレイクポイントは、「こうあるべき！」という明確な指標があるわけではありません。
というのも、現在は様々な端末が出回っているので、Webサイトやページによって最適な解が変わってくるためです。

以下にブレイクポイントの指標を一覧にしましたので、参考にしてみてください。

【ブレイクポイントの目安一覧】

◆ブレイクポイントの選択方法

では、ブレイクポイントはどう設定したら良いのでしょうか？

よくあるのは、「とりあえずiOS搭載のスマホ（＝iPhone）に最適化させよう」という考え方です。
近年の日本国内のスマートフォンではiPhoneが半数のシェアを占めているという背景があるため、このような考えに落ち着くパターンが多いようです。

一方、Androidはブラウザや機種によって仕様が様々で、各端末に最適化させるのは至難の業です。
そのため、「Androidにも最適化させたい！」という場合は、自社サイトへのアクセス状況を鑑みて「どのAndroid端末からのアクセスが多いか？」という視点で検討していく手もあります。

【ポイント1】自社サイトへアクセスしてくるモバイル端末の比率はどれくらいか？

PC、タブレット、スマホそれぞれのアクセス比率を出します。
場合によっては、タブレットの数が少なければPCとスマホだけを対応するという選択肢も起こりえます。

【ポイント2】自社サイトへアクセスしてくるモバイル端末のOSの比率はどれくらいか？

主にはOS,Androidがほとんどです。
iOSはマストとして、Androidをどの端末の解像度を基準にするかが肝になります。
数はまだまだ少ないですが、Windows OSやFirefox OSなどもあります。
サイトや今後のシェアによっては対応する必要がでてくるかもしれないので、定期的にチェックすると良いでしょう。

４）モバイル最適化した事例

◆小肥羊コーポレートサイト

最後に、上記を踏まえて弊社でモバイル最適化対応をした事例をご紹介します。

【viewportの設定】

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

先に紹介したビューポートとの違いに気づきましたか？
「user-scalable=no, minimum-scale=1.0, maximum-scale=1.0」というプロパティが追加されています。
これはユーザーによるピンチやズームを禁止する設定で、制作側の意図したレイアウトで表示できるメリットがあります。

※場合によってはユーザビリティを損なうことにもなるので、慎重に検討したいプロパティではあります。

【メディアクエリ、ブレイクポイントの設定】

@media screen and (max-width:979px) { /* iPad portrait用 */ }
@media screen and (max-width:767px) { /* スマホ landscape用 */ }
@media screen and (max-width:479px) { /* スマホ portrait用 */ }

上の設定を見ると、メディアクエリを指定しているのはスマホとタブレットのみです。
PCにはどのようなスタイルを当てているのでしょうか？

PCはメディアクエリを指定せずに、デフォルトで設定したスタイルを指定しています。
このように、適用したいところだけにメディアクエリを指定する方法が一般的です。

このページにアクセスし、ブラウザの幅を縮めてみてください。
株式会社小肥羊ジャパン｜中国火鍋専門店【小肥羊（しゃおふぇいやん）】

ブラウザの幅を縮めていくにつれて、以下のような変化が確認できると思います。

• 「iPad portrait用」…サイドバーがメインコンテンツの下に移動し、1カラムになる。
• 「スマホ landscape用」…グローバルナビと、サイドバーにあった「お問合せ」と「バナー欄」の配置が換わる。
• 「スマホ portrait用」…「会社概要」やバナーなど、2カラムだった箇所も全てが1カラムでレイアウトされるようになる。

ぜひ、スマホやタブレットでも試してみてください。

ブレイクポイントで指定する数字などは、解像度の問題なども絡んでくるのですが…今回は一旦ここで終了です。
次回は、その「解像度」がテーマです。
解像度について学ぶことでモバイル対応をさらに深く理解できるので、次回もどうぞお付き合いください。