スマホとPC表示に対応するメディアクエリ(レスポンシブデザイン)
CSSでパソコンとスマホ、タブレットの表示に対応する為にはメディアクエリの知識が必要不可欠だ。例えば画面サイズが横幅480px以下ならスマホ用のスタイル、1000px以下ならタブレット、1000px以上ならPCのスタイルを適用など細かい数字で調整できる。
メディアクエリのサイズはどうするのがベストか！？
現代のスマホやタブレットは多種多様で何pxの横幅がスマホで何pxがタブレットの表示に対応するという区別を設定するのは大変だ。例えば高解像度のスマホがあるし、低解像度のタブレットだってある。だから明確な設定方法はないと言える。
僕が思うにスマホの人気な端末など主要のデバイスをピックアップして、全てに厳格に対応したい方がいるかもしれないがそれはお勧めしない。メディアクエリは設定が多いほどコストがかかり、後々大変になる可能性がある為だ。
ではどうしたら良いか？
お勧めはBootstrapのグリッドシステムのサイズを参考にする事
CSSのライブラリの一つにTwitterの会社が公開しているBootstrapというのがある。今はXとなり運用体制が変わっているようだが、大切な事は恐らくTwitterはあらゆる画面のサイズの統計を取ってグリッドシステムのサイズを完成させたのだろうから、これを参考にする手はない。
下記はグリッドシステムだ。
| サイズ | 名前 | 説明 |
|---|---|---|
| 576px未満 | Extra small (xs) | スマホ対応 |
| 576px以上 | Small (sm) | タブレット対応 |
| 768px以上 | Medium (md) | タブレット対応 |
| 992px以上 | Large (lg) | 小さいPC表示対応 |
| 1200px以上 | Extra large (xl) | PC表示対応 |
| 1400px以上 | Extra extra large (xxl) | 大きいモニターのPC表示対応 |
当サイトもBootstrapのサイズを少し参考にさせて頂いたぞ。
当サイトで使われているサイズ
| サイズ | 説明 |
|---|---|
| 420px以下 | 小さいスマホ対応 |
| 576px以下 | スマホ対応 |
| 768px以下 | タブレット対応 |
| 960px以下 | 横画面スマホとタブレットに対応 |
| 1280px以下 | PC表示対応 |
| 1480px以下 | 中くらいの画面のPC表示対応 |
| それ以外 | 大きいモニターのPC表示対応 |
メディアクエリの構文
メディアクエリは数字を使って1px単位調整できる。
@media screen and (条件) {
/* 適用するCSS */
}
条件について
| 指定方法 | 説明 |
|---|---|
| min-width | それ以上の時に使う |
| max-width | それ以下の時に使う |
mainタグの横幅を指定する場合、スマホ、タブレット、PCにざっくり対応するなら下記のように書く。3種類の書き方を意図的にしたが実際は以上だけや以下だけを使って対応する事もできる。
@media screen and (max-width: 420px) {
main { width: 380px; }
}
@media screen and (min-width: 421x) and (max-width: 768px) {
main { width: 80%; }
}
@media screen and (min-width: 769px) {
main { width: 720px; }
}
ブラウザの横幅が
420px以下ならスマホでwidthが380pxに
421px以上768px以下ならタブレットでwidthが80%に
769px以上ならPCでwidthが720pxに
メディアクエリの注意点
CSSは条件に合えばそれは全てに適用される。例えば下記のコードを見てほしい。
@media screen and (min-width: 420px) {
color: red;
font-size: 16px;
}
@media screen and (min-width: 768px) {
font-size: 18px;
}
このコードはブラウザの横幅が420px以上ならフォントカラーを赤にしてフォントサイズを16pxに768px以上ならフォントサイズを18pxにしている。例えば1200pxの横幅のブラウザの場合、フォントサイズは18pxになる事は想像できるがフォントカラーはどうなるだろう？
1200pxの横幅は420px以上でもあるのでフォントカラーが赤色になる。フォントサイズは16pxだったが、CSSは後から出てくるコードが有効になる為にフォントサイズは18pxに上書きされてしまったのだ。
プログラミングのswitch文のように条件が合った瞬間それだけが有効になる事はないのだ。
min-widthやmax-width以外の条件
メディアクエリはアスペクト比を取得して対応する事もできるがそのコードを使って書く事はやめたほうがよい。ひと昔前は１６：９が主流だったが最近の画面は多種多様だから、アスペクト比でメディアクエリを書く場合は局所的すぎて逆にコストがかかる。特別な理由がない限り使うべきではないと考えるのでサンプルのコードは控えた。
他にもブラウザのダークモードやライトモードで適用を切り替えたり、デバイスの向きを取得してスマホが横向きの場合に適用するなど上級者向けの条件設定は色々とあるようだが「以下」と「以上」だけ知っていたらそれでよいと考える。もちろんWebデザインのスペシャリストになりたいなら網羅的に学ぶ必要はあるかもしれないが、現状はそこまで重要ではないし下手に実装するとコストがかかるのでよく吟味してほしい。。