Webサイト制作において、デバイスごとに最適化された表示を実現するレスポンシブデザインは、もはや必須スキルと言えるでしょう。その要となるのが「Media Queries」ですが、単に画面幅で条件分岐させるだけでは、期待通りのデザインにならないことも少なくありません。今回は、実務で役立つMedia Queriesの「裏技」とも言える実践的なテクニックを、具体的な例を交えながらご紹介します。
ブレークポイント設定の落とし穴と回避策
多くのWebデザイナーが陥りがちなのが、デバイスの画面幅を基準にブレークポイントを設定してしまうことです。しかし、現代のWebデザインでは、デバイスの種類よりも「コンテンツの見え方」を基準にブレークポイントを設定すべきです。
例えば、PCで表示した際に、ある要素が横並びから縦並びに変わる方が自然な場合、その「コンテンツが見切れる」「レイアウトが崩れる」といったタイミングをブレークポイントとすべきなのです。デバイスの画面幅はあくまで目安であり、デザインの意図を最優先にしましょう。
具体例:
あるカード型レイアウトで、PCでは3列表示、タブレットでは2列表示、スマホでは1列表示にしたいとします。デバイス幅だけでブレークポイントを設定すると、例えば「768px」で2列、「1024px」で3列、といった設定になりがちです。しかし、実際には、768pxよりもっと狭い画面幅でも3列表示が崩れない場合や、1024pxよりも広い画面幅でも3列表示が問題なく表示される場合があります。
そこで、まずはPCでデザインを確認し、3列表示が綺麗に収まる最小の幅を特定します。次に、2列表示に切り替えた方が良い幅、そして1列表示に切り替えた方が良い幅を、実際にブラウザでリサイズしながら見つけ出します。この「コンテンツ主導」でのブレークポイント設定が、より洗練されたレスポンシブデザインに繋がります。
/ コンテンツ主導のブレークポイント設定 /
.card-container {
display: grid;
grid-template-columns: repeat(3, 1fr); / デフォルトは3列 /
gap: 20px;
}
/ コンテンツが見切れる手前の幅で2列に /
@media (max-width: 900px) {
.card-container {
grid-template-columns: repeat(2, 1fr);
}
}
/ コンテンツが見切れる手前の幅で1列に /
@media (max-width: 600px) {
.card-container {
grid-template-columns: 1fr;
}
}
「orientation」プロパティで縦横表示を最適化
スマートフォンやタブレットは、ユーザーが縦持ちと横持ちを切り替えることがよくあります。この「orientation」プロパティを使うことで、デバイスの向きに応じてスタイルを適用できます。
具体例:
横持ちにした際に、ナビゲーションメニューの項目を横並びで表示し、縦持ちにした際に縦並びで表示したい、といった場合に有効です。
nav ul {
display: flex;
flex-direction: column; / 縦持ち時のデフォルトは縦並び /
}
@media (orientation: landscape) {
nav ul {
flex-direction: row; / 横持ち時は横並び /
justify-content: space-around;
}
nav li {
margin: 0 10px; / 横並び時のマージン調整 /
}
}
これにより、ユーザーがデバイスをどのように操作しても、常に最適なレイアウトでコンテンツを閲覧できるようになります。
「resolution」プロパティで高DPIディスプレイに対応
Retinaディスプレイのような高解像度（高DPI）のデバイスでは、画像がぼやけて見えることがあります。この問題は、「resolution」プロパティを使って解決できます。
具体例:
高DPIディスプレイ向けに、より高解像度の画像を用意し、CSSで条件分岐させて適用します。
.logo {
background-image: url(‘logo-standard.png’);
background-size: 150px 50px; / 標準解像度でのサイズ /
}
/ 2倍の解像度を持つデバイス向け /
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.logo {
background-image: url(‘logo-high-res.png’); / 高解像度画像 /
background-size: 150px 50px; / サイズは同じに /
}
}
これにより、どのデバイスからアクセスしても、クリアで鮮明な画像を表示させることができます。
まとめ
Media Queriesは、単なる画面幅の条件分岐ツールではありません。コンテンツの見え方、デバイスの向き、ディスプレイの解像度など、様々な要素を考慮して活用することで、ユーザー体験を飛躍的に向上させることができます。今回ご紹介したテクニックを参考に、あなたのWebサイト制作に活かしてみてください。
コメント