レスポンシブデザインで使うメディアクエリの設定方法とブレークポイント最適値について

レスポンシブデザインのメディア

スマホファーストでおまけ的にPC対応という案件が以前よりも増えていますが、やっぱり多いのはPC優先でスマホ表示も確保するというもの。で、このような複数デバイス間の表示を最適化する手法としては以下のものがあります。

  1. モバイル用とデスクトップ(PC)用を別々に用意してアクセスする端末で切り替える
  2. ブラウザのウィンドウサイズによって表示内容を変える

1はユーザーエージェント(何を使ってアクセスしているか)で判別する形式で、Wordpressではwp_is_mobile()という関数を用いてif文で条件分岐させれば簡単に実現可能です。

2はレスポンシブウェブデザインと言われ、メディアクエリを用いて制御する手法。これについては、Googleがモバイル フレンドリーなサイトを構築するガイドラインを出しています。

参考2のモバイルガイドでは、

Google では、デザイン パターンとしてレスポンシブ デザインを推奨しています。

と明記されており、レスポンシブウェブデザインが現在の最適解と言えます。

メディアクエリの記述方法

htmlとCSSのみで制御するので実装はとても簡単です。

Viewport(ビューポート)タグを設定する

HTMLのhead内に以下を記述します。決まり文句みたいなものなので、ほとんどの場合で同じ記述で大丈夫です。

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

width=device-width でデバイス幅 に合わせた表示となるよう設定し、initial-scale=1 ではズーム倍率を指定します。この値を 1 にするとページ幅全体を使った表示となります。

viewport

で、次にメディアクエリを設定するのですが、これには「CSS内に記述して設定する方法」と「htmlのlinkタグから設定する方法」の2つあります。

CSSへの記述方法

CSS内に設定する場合は、以下のように記述します。

/* CSS */
@media screen and (max-width: 480px) {
  .contents {
    width: 100%;
  }
}

@media (query) {}の記法で、@media の後に適用したいブラウザサイズ(クエリ)を指定します。
なので、上記コード例のように(max-width: 480px)とすると、「最大幅が480px」の時がブレークポイントとなり、ブラウザ幅が480px以下の時にスタイルが適用されます。

指定できるクエリの形式は以下の通り。

  • max-width

    ブラウザ幅が指定した幅よりも小さい時に適用される。
    max-width: 480pxとすると、ブラウザ幅が 480px 以下の時にスタイルが適用される。

  • min-width

    ブラウザ幅が指定した幅よりも大きい時に適用される。
    min-width: 481pxとすると、ブラウザサイズが481px 以上の時にスタイルが適用される。

  • min-height

    ブラウザの高さが指定した高さよりも大きい時に適用される。

  • max-height

    ブラウザの高さが指定した高さよりも小さい時に適用される。

  • orientation=portrait

    ブラウザの高さが幅と同じかそれ以上の場合に適用される。

  • orientation=landscapet

    ブラウザの幅が高さよりも大きい場合に適用されます。

使用頻度としては、max-width と min-width をよく使います。この2つが理解できていれば、他は知識として覚えておく程度で問題ないかと思います。

linkタグでの設定方法

<!-- html -->
<link rel="stylesheet" media="(max-width: 480px)" href="media-max-480px.css">
<link rel="stylesheet" media="(min-width: 481px)" href="media-min-481px.css">

media 属性にクエリを設定します。指定の方法はCSS内の記述と大差ないですね。

記述の順番

オススメは、基準となるスタイルを作ってからメディアクエリを設定する方法。これにより、ブレークポイントの数が必要最小限となり、複雑化する記述も多少軽減できます。スマホとPCの優先度によって変わりますが、デバイスサイズ順にメディアクエリを設定していくと良いです。

このサイトでもコード量を増やさないように上記を意識していて、ベーススタイルの作成後メディアクエリでスマホ用とPC用を設定し、必要に応じてタブレットやファブレットに適したスタイルを用意しました。参考までに以下のような感じです。

/* css */
/* ベースの記述 */
.contents { ... }

/* レスポンシブの設定 */
/* モバイル */
@media (max-width: 619px) { ... }
/* モバイル以上 */
@media (min-width: 620px) { ... }
@media (min-width: 768px) { ... }
@media (min-width: 1140px) { ... }

ここで問題があるとすれば、IE8はメディアクエリを認識できないこと。
対応ブラウザにIE8がある場合は、ベーススタイルをIE8用(PC用)として作成するとよろし。また、メディアクエリでは以下のようにブレークポイントを順に小さくしていきます。

/* css */
/* ベースの記述 */
.contents { ... }

/* レスポンシブの設定 */
@media screen and (max-width: 1140px) { ... }
@media screen and (max-width: 768px) { ... }
@media screen and (max-width: 480px) { ... }

2016年1月12日以降は最新バージョンのIE以外はサポート対象外となるので、IE8対応とか気にする必要もない気がしますが…。

参考: Internet Explorerは、最新バージョンへのアップデートが必要です - Yahoo! JAPAN

ブレークポイントはどう決めれば良いのか

やっと本題です。ブレークポイントの決め方です。結論から言うと「余白やフォントサイズによってデザインごとに異なるため適宜設定しましょう」なのですが、せっかくなので利用者が最も多い(と思う) CSSフレームワークのBootsrap 3 の設定値と主要なデバイスサイズを参考に見てみます。

Bootstrap 3 の設定値

Bootstrap - Media queries のページでは以下のように設定されています。

/* 767px以下: デフォルト */
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/* 768px以上 */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

/* 992px以上 */
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

/* 1200px以上 */
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

Bootstrap 3 はモバイル(スマホ)ファーストになっており、768px未満のブラウザサイズではメディアクエリが適用されずデフォルト設定となります。
モバイル以上のサイズでは下記のように定義されています。

  • 768px以上をタブレットサイズ
  • 992px以上をデスクトップサイズ
  • 1200px以上を大きめのデスクトップサイズ

主要デバイスサイズ

次に主要なデバイスサイズを見ていきます。ChromeのDeveloper Toolsのデバイスモードを使えば主要デバイスでの表示をエミュレートできますね。まったく便利になったもんだ。

device mode

デバイスモードによると、主要なスマホのサイズは以下のように設定されています。
Width(幅) × Height(高さ)

  • iPhone4: 320 × 480
  • iPhone5: 320 × 568
  • iPhone6: 375 × 627
  • iPhone6s: 414 × 736
  • Nexus6: 414 × 659

これだけ見ると、スマホ以下のデバイスサイズは 420px 程度を見ておけば良いことになります。ただ、実際のところは 480px がスマホ用として設定されているケースが多い印象があります。

タブレットよりも大きなサイズ

さらに考慮するポイントとしては、タブレットとファブレット(スマホとタブレットの中間サイズ)です。縦向きの iPad の画面幅が 768 × 1024 で、これは iPad min も同じ。
他のタブレットは 7 インチから 10 インチまであり、11月には12.9 インチのiPadPro が登場します。Wi-Fi + Cellularモデルが 723gなので、電子書籍読むとかは重くて無理。別売りのキーボード買わないと使えないと思う。

とまあ、サイズがばらばらなので、PCとの差がなくなってきました。なので、今までのiPadをベースとして768pxを基準値としても問題なさそうです。

これより大きいサイズについては、ページを全画面レイアウトにするのか、固定幅にするのかで変わります。Bootstrap 3 の固定幅設定は 992px とそれよりも大きいサイズとして 1200px が定義されています。

デバイスの向きに合わせて表示を最適化するべきか

orientation=portrait や orientation=landscape を使えばデバイスの横向きや縦向きの表示にも対応できます。

※ 上のクエリ形式にも書いていますが、これらは横向きか縦向きかを判断するものではありません。

主要デバイスサイズとこれらをうまく使えば、横向きのスマホだけにスタイル適用させることも可能です。

/* css */
/* スマホの横向き - ブラウザ幅が最大750pxで高さよりも大きい場合 */
@media (max-width: 750px) and (orientation: landscape) { ... }

/* タブレットの横向き - ブラウザ幅が1024pxで高さよりも大きい場合 */
@media (max-width: 1024px) and (orientation: landscape) { ... }

landscape

↑ 750px以下のブラウザ幅で、幅が高さよりも大きい時は背景色を#000としましたが、うまく適用されています。

異なるデバイス間でも統一したデザイン性を

ブレークポイントの設定は、デザインによって異なります。スマホファーストで小さいデバイスサイズから制作した場合は、徐々にブラウザサイズを大きくし、レイアウト的に間延びしたり、視認性が悪くなるポイントが切り替えるポイントとなります。

その際、ブラウザサイズによってデザインレイアウトを大きく変えず、文字サイズや行間、余白、リンク要素の視認性、情報の表示非表示の有無が来訪者にとって常に最適となるように意識しています。

そうするだけで、デザインの統一性を保て、CSSの記述量も無駄に増えなくなります。CSSはかなりゆるい言語で、安易に記述量を増やし続けると「カオス! パニック! 阿鼻叫喚!」となります。特にメディアクエリなどをやり始める場合はコードが競合しないように気をつけてください。

個人的にはレスポンシブデザインをするなら、

  1. いろんなサイトを見て、気になるのがあればデベロッパーツールで詳しく見る
  2. CSSフレームワークのレスポンシブ設定を見る
  3. 自分のサイトで試す

をおすすめしますが、まずは、知見を広げながら自サイトで実装することですね。

先日、Wordbench大阪の「使いやすいWordPressテーマを作るために必要なCSSのつくりかた」に行ってきまして、そこで熱く紹介されていたこの本は読むと得をします。メディアクエリをやるなら、CSS設計に関わる本も読んでおくと良いです。

関連記事