昨今はスマホが主流になっており、若い人に限らず、社会人ならほぼ全ての人が持つようになっている。
調べ物、音楽、決済、SNS、撮影といったように全てスマホで完結するようになっている。
したがって、これからウェブサイトを作成する側にとってはモバイルファーストで考える必要がある。
そんな時に役に立つのがメディアクエリ。
デバイスの大きさによって簡単にcssを使い分けることができるので、ぜひ覚えて使ってもらいたい。
今回の内容
メディアクエリとは？
ユーザーが使用しているデバイス(スマホ、タブレット、パソコン)によってcssを適用させること。
様々な大きさのデバイスがあって、それぞれ画面の大きさが異なるため、それに合わせたレイアウトをするために用いられる。
ブレークポイント
一つひとつのデバイスに合わせてcssを書いていくのではなく、レイアウトを切り替えるポイント(ブレークポイント)がというものがある。
ブレークポイントは、個人が自由に決めることができる。
例えば、580px以下をスマホ用、760px以上をパソコン用と決めた場合は
ブレークポイントが2つ(580px、760px)となる。
もっと細かくしたい場合はブレークポイントを3つ4つと増やすことも可能。
メディアクエリの書き方
ものすごくシンプルに書くことができる。
先程の例を実際に書いてみる。
@media (max-width: 580px) {
/* スマホ用のcssを書く */
}
@media (min-width: 760px) {
/* パソコン用のcssを書く */
}
/* これ以外で書いた部分はタブレット用のcssとなる */この場合の適用範囲はこうなる。
- スマホ 〜580px
- パソコン 760px〜
- タブレット 581px〜759px
スマホは580px以下にするため最大値を表すmax-width、
パソコン用は760px以上にするため最小値を表すmin-widthと書く。
cssプロパティであるmin-width、max-widthの使い方と意味合いは全く同じ。
ちなみに結果は先程と同じになるが、スマホ用とタブレット用に分けたい場合はこう書く。
@media (max-width: 580px) {
/* スマホ用のcss */
}
@media (min-width: 581px) and (max-width: 759px) {
/* タブレット用のcss */
}
/* これ以外で書いた部分はパソコン用のcssになる */書き方は先程と違うが、結果は同じになる。
- スマホ 〜580px
- タブレット 581px〜759px
- パソコン 760px〜
min-widthとmax-widthをandで繋げることで適用範囲を限定することができる。
これは単に好みの問題で、書き方は好きなように書けばいい。
ブレークポイントの最適値
残念ながら「ブレークポイントの最適値はこれ」というものはなく、推奨値もない。
スマホは縦で見たり、横にして見ることもある。
当然、横にした方が画面の幅は広がるわけなのでどうしてもブレークポイントを決めるのが難しい。
横で見たときにスマホのcssにするか、タブレットのcssとして適用するかは悩みどころ。
最適値がないというのはこういったことが理由だと思われる。
色々なブレークポイントがネットには溢れているので、検索して参考にしてほしい。
レスポンシブデザインは必須
全てのデバイス共通のcssを書いてるだけで済む時代ではなくなり、もはやレスポンシブのウェブサイトでなければいけない時代になっている。
どんなに有益な情報が書いてあるウェブサイトでも、見栄えが悪ければほとんどのユーザーは離れてしまう。
「時間がかかる」「面倒だ」なんて思わず、
ユーザーにとって見やすいサイトを作ることが最終的に良い結果をもたらすのは間違いない
