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

Web/14 Sep 2015

スマホファーストでおまけ的に 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 つが理解できていれば、他は知識として覚えておく程度で問題ないかと思います。

<!-- 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 設計に関わる本も読んでおくと良いです。