レスポンシブウェブデザインのメディアクエリのオススメの書き方

デバイスの幅に応じてCSSを変化させるレスポンシブウェブデザインは、CSSのメディアクエリのという仕様によって実現しています。

#css {PC向け}
@media (max-width: 1020px) and (min-width: 768px) { #css {狭いブラウザとタブレット向け} }
@media (max-width: 767px) { #css{スマホ向け} }

といった感じです。

広告

{PC向け}のところに主だったルールを記載し、@media以下で、それぞれ対象向けにルールを微調整する、という書き方が主流かと思います。たとえば以下のようになります。

デバイスCSS内容解説
PC向け#css {width:1000px;margin:0 auto;}widthとmarginを指定
狭いブラウザとタブレット向け@media (max-width: 1020px) and (min-width: 768px) { #css {width:98%;margin:0 1%;} }PC向けのwidthとmarginを上書き
スマホ向け@media (max-width: 767px) { #css{width:auto;} }PC向けのwidthを上書きして微調整

2015/5/12追記)PC向けを基準とするのは、古いバージョンのIEでメディアクエリに対応していないブラウザに合わせやすいというのが大きな理由です。

PC向けの横幅(最大サイズ)を決める

レスポンシブウェブデザインの登場により、これまで、ディスプレイ解像度のシェアなどから決めていたサイトの横幅の重要度が下がりました。
PC向けの横幅はデザインの都合で決めていいかと思います。
例えば、フルHDの1,920pxと1,000pxで見栄えを変えたい場合は、最大サイズが1,920pxとなります。
特にデザイン上のこだわりがなければ、背景色が良く見えて、目で追いやすい1,000pxあたりが1つの基準になるかと思います。
まめわざのほとんどの雛形の横幅は1,000px前後です。

モバイル向けメディアクエリのwidthの決め方

メディアクエリのサイズを決める場合に基準となるのは、

  • タブレット(iPad)
    768px
  • スマホ横
    480px・568pxなど
  • スマホ縦
    320px・360pxなど

などがあります。
これを基準にした書き方は2通りあり、

  • 「スマホになったら」
    @media only screen and (max-width: 480px)
  • 「タブレットじゃなくなったら」(=「スマホになったら」)
    @media only screen and (max-width: 767px)

と書いたりしますが、主流は後者かと思います。
下記のように横幅はディスプレイの実寸に合わせて変化しており、将来も様々な横幅のデバイスが登場することが予想されます。「タブレットじゃなっくなったら」という否定型の方がこれらに対応しやすいためオススメです。実際にまめわざでは後者の書き方を採用しています。

デバイスブラウザの横幅(px)ブラウザの縦幅(px)
iPhone5320568
iPhone6375667
iPhone6s414736

タブレットはPCなのか?

レスポンシブウェブデザインにおいて、タブレットはPCに含むべきかスマホに含むべきかは、コンテンツによって異なるのでケースバイケースです。
しかし、タブレットはスマホに比べるとかなり一覧性が高いので、一般的にはPCレイアウトが適していると思われます。例えばPCの2列レイアウトでも問題なく見れることが多く、むしろスマホ向けの1列表示で横に長いボタンなどは冗長的に感じます。
まめわざでは、タブレットにはPC向けのレイアウトを提供しています。

狭いブラウザ・タブレット向けメディアクエリのwidthの決め方

PC向け~スマホの間は、タブレットやミニノート、ブラウザウィンドウが小さい場合、逆にブラウザの中身を拡大している場合、に向けたCSSを記入します。
最大が1,000pxであれば
@media only screen and (max-width: 1000px) and (min-width: 768px)
のような書き方になります。
尚、細かいことですが、ウィンドウを狭めていった際になめらかにメディアクエリを適用するには、PCのスクロールバーを加味する必要があります。
スクロールバーを20pxとして
@media only screen and (max-width: 1020px) and (min-width: 768px)
で作成すると、カクカクせずにメディアクエリが適用できます。
ただし、ウィンドウの右下を掴んでサイズを1px単位で変更することは稀ですので、この点は自己満足の範疇と言っていいかと思います。

広告

まとめ

  • PC向けのサイズはデザインの都合を優先する。なんでもかまわない場合は1,000pxぐらいにする。
  • スマホ向けは「タブレットじゃなくなったら」の否定法で
    @media only screen and (max-width: 767px)
    が主流。
  • 狭いブラウザ・タブレット向けはスクロールバーも加味するならば
    @media only screen and (max-width: 1020px) and (min-width: 768px)
    とする(ただし1020pxの部分は、PC向け+スクロールバー分20px)。
2015/5/1