
CSS max-width レスポンシブ対応のピクセル指定は崩れる原因となる。
です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。
Contents - 目次
CSSのmax-widthでのピクセルはレスポンシブ対応ではない。
レスポンシブ対応の際に、max-widthでピクセル指定をしている場面がある。よくあるのがパソコン表示用の「max-width: 1000px;」や「max-width: 1100px;」などの指定だ。
実はスマホ以前の書き方。
実はこれは10年以上前の指定方法で、スマホが普及する以前の、主にデスクトップやノートパソコン用の方法である。当時のブログや参考書などにもよく記載されていた。
古い情報がアップデートされていないのかもしれないが、決して「レスポンシブ対応」ではないので、使用時には気をつけなければいけない。
どうしてmax-widthのピクセル指定がいけないのか?
15inch前後のノートパソコンで、ユーザーがブラウザを「常に最大サイズ」にしているのであれば特に問題ないだろう。ただし、ブラウザを縮小したり、タブレットで見たりすると途端にレイアウトが崩れる。
27inchのモニターでも、ブラウザは基本的に全画面では見ないだろう。他のツールなどと画面を分割している方が普通だ。例えば半分にして使っていれば、ブラウザの横幅は13.5inchとなる。その場合でももちろん、レイアウト崩れが起きやすい。
デバイスは増え続けている。
前述の通り、横幅1000px前後というのは10年以上も前のノートパソコン全盛期に流行ったサイズ指定なので、いまの多種多様なモニターサイズを想定しているものではない。
様々なサイズのスマホが全盛となり、様々なサイズのタブレットやノートパソコンも存在し、それぞれの解像度やアスペクト比も多様にある時代に、安易にmax-widthでピクセル指定をするのはリスキーでしかない。
デバイスごとに対応しようと頑張っても、結局は無駄にブレイクポイントが増えてしまう。
今年主流のモニターサイズを調べても、来年発売のデバイスには対応できない。
レスポンシブデザインは、どうすれば良いのか?
レスポンシブデザインというのはその名の通り、デバイスサイズに「反応したデザイン」であり、決して「固定されたデザイン」ではない。
なので、固定される「ピクセル」ではなく、可変となる「パーセント」を使えば対応できる。
パーセント指定で設計する。
パソコンでの表示の際に、コンテンツを真ん中に置き、ある程度左右に余白を付けたい場合は、コンテンツのwidthの指定をパーセントにしたり、左右のmarginやpaddingをパーセントで設定すると良い。
Webのレイアウトを組む際は、固定のピクセル(px)ではなく、可変のパーセント(%)の方が多様なデバイスへの対応力がある。
vwでも良いかもしれないが、%の方が一般的にわかりやすい単位だろう。emやremだと文字サイズのイメージが強く、逆にわかりにくくなる。
レスポンシブデザインの対策例。
- max-width: 1000px;などは基本的に使用しない。(デバイスやブラウザの幅に応じて可変しないので、表示崩れが起きる。)
- widthや、左右のmargin、paddingをパーセントで指定する。(デバイスやブラウザの幅に応じて可変するので、表示崩れが起きない。)
例)
例)
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。