レスポンシブウェブデザインのサイトを作る際、パソコン用のスタイルから書くか、スマホ用のスタイルから書くかで書き方が違います。
「Media Queries」というものを使ってブラウザの幅に応じて表示を変えることができるんですけど、僕はすぐにその書き方を忘れます。
というわけで、一般的に良く使われる書き方を備忘録がてら紹介します。
目次
レスポンシブウェブデザインとメディアクエリ
レスポンシブウェブデザインはブラウザの幅に応じて適切な表示をさせるウェブデザインの手法です。
そのときに使うのがCSSの「Media Queries(メディアクエリ)」です。
例えば「画面の幅が広いときはサイドバー、画面の幅が狭いときは一番下に来る」といったことを、CSSにメディアクエリを使って記述するだけで実現できます。
レスポンシブウェブデザインでブラウザの幅によって分岐させる書き方
では実際の書き方です。
パソコン用の表示から記述していく書き方と、スマホ用の表示から記述していく書き方の2パターンをご紹介します。
ブレイクポイントの幅は一例です。ブラウザの幅をぐりぐり動かしてここだってところがあれば代えちゃってかまいませんし、ブレイクポイント自体を増やしてもいいと思います。(増やすほど管理がめんどうになりますけど…。)
パソコン用から記述する場合
@media screen and (max-width: 979px) {
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 479px) {
}
スマホ用から記述する場合
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 980px) {
}
書き方の例
具体例を一つ書いておきますね。
スマホ用から記述するとして、スマホだと1カラム、パソコンではサイドバーが表示される2カラムになる例です。
.main {
width: 100%;
}
.side {
width: 100%;
}
@media screen and (min-width: 980px) {
.main {
float: left;
width: 640px;
}
.side {
float: right;
width: 320px;
}
}
ざっくりした例ですけども、スマホのときはメインカラムもサイドバーも幅100%にすることで縦に順番に並ぶようにした上で、画面の幅が980pxを超えるデバイスで見ると幅を固定させたそれぞれの箱が横に並ぶという形です。
実際はこれにもうちょい複雑な要素が絡みますけどね。メディアクエリの例ということでシンプルなものにしました。
どちらの書き方を使うのがいいか
紹介した2パターンのどちらを使うかはケースバイケースですが、僕は普段パソコン用の表示から記述するようにしてます。
理由は簡単でIE8対策です。IE8ではメディアクエリを読み込んでくれないため、スマホ用のスタイルから書く方法を使うとIE8でスマホ用の見え方になってしまうのです。
jQueryなどを使えばそれを回避する方法もあるのですが、CSSだけで解決させたいためにパソコン用から書くようになりました。
とはいえ、このブログはスマホ用から記述してますけどね。(元となった無料テーマのSTINGER5がそうなってたからですけども)
参考記事
この記事を書くにあたって参考にした記事がこちらです。あわせてご覧ください。
- レスポンシブWebデザインのサイトを作るときのMedia Queriesの順番を考えてみた | A40
- いまさら Media Queries の書き方を覚える · Issue #39 · shikakun/tips · GitHub
- このスマフォ・タブレット用メディアクエリは危険！｜Web制作 W3G
最後に
この記事は下書きとして長いこと眠ってたんですが、何度も下書きのこの記事を参照してまして、やっぱり僕はこの記述の仕方を覚えられないんだなと実感しました。
一部だけで使うのにも便利なので、例えばiPhone 6 Plus対策とか、そういうピンポイントで使うのもいいと思いますよ。
スマホのWEBデザインについてこんな記事も書いてます。