【2024年最新トレンド】メディアクエリ ブレイクポイント range syntax併記

メディアクエリ不要がトレンド？

とはいうものの、メディアクエリが不要になるケース、メディアクエリを採用していないサイトが増えている

モバイルファースト～1カラム

スマートフォンの縦と横の画面、タブレットの縦画面は、おそらく1カラムで表示されることが多い
あるいは、それが定番

そこで、スマートフォン画面での表示を第一に考えると、デバイス間のビジュアル的断絶を意図的に回避するのであれば、デスクトップまでを「1カラム」にするべきだろう

実際、Facebookを除いてGAFAでは、デスクトップでも1カラムになっている

• Google 検索の仕組みを確認する
• Apple
• Amazon

さらに、Microsoftも1カラム

• Microsoft

画像～ブラウザーがレスポンシブ表示

画像は、サイズ（容量ではなく横幅）がどれだけ大きくても、ビューポート あるいは 画像格納のボックス幅に合わせて、ブラウザーが伸縮して表示してくれる

とにかく、CSSの最初のほうに、次のように記述しておけば、勝手にレスポンシブとなる

img { max-width: 100%; height: auto; }

また、ブラウザーがアスペクト比を保って画像を伸縮させるために、イメージタグ（img）に width / height を記述しておくと、完璧である

レスポンシブコード～clamp vw calc minmaxなどなど

CSS3かCSS4か、最近のCSSは、関数のプログラミングコードが圧倒的に増えている

とくに、デバイスの画面やブラウザーの幅などのビューポートに合わせて、サイズを伸縮させる仕掛けがありがたい

これらは、ブラウザーが自動計算してくれるので、メディアクエリなしで、最初に設定しておけば、勝ってにレスポンシブとなる

flexboxマジック gridパラダイス

flexboxやgridは、コンテンツのパーツを自動でレスポンシブにするだけでなく、Webサイト・ページのレイアウトさえ自動レスポンシブにしてくれる

• Google のすべてのプロダクトとサービスを見る

上記ページの下のほう、「Google のプロダクト」の親divでは

grid-template-columns: repeat(12,minmax(5px,1fr));

このようなCSSが記述されている

縦に列を展開する、12回繰り返す、1つのgridアイテムは最低5px・最高自動計算幅、というコードである
もちろん、川上で「display: grid;」が設定されている

上記Googleのページでは、デスクトップで4列、タブレットで2列、スマートフォンで1列に表示されている

Material Symbols wght 100～700 サンプル

では、Material Symbols and Iconsの検証とはテーマが違ってくるが、grid minmax を試してみよう

grid-template-columns: repeat(auto-fit,minmax(11.5rem,1fr));

grid minmax は↑のとおり
auto-fitが折り返しの万能コード

あえて枠線を設定してみると、お見事！
非常にくっきりはっきり、美しく整列している
gap や minmax の min最低数値がキモ

ブラウザーのデベロッパーツールでデバイス別の表示を確認すると、この grid minmax の最大の特徴は、レスポンシブで表示列が変化していくものの、それぞれ画像の大きさがほぼ同じになっている
これはこれで画期的な gridパラダイスかもしれない

grid minmax でもメディアクエリ採用

スマートフォンの縦画面や横画面で、列数を調整したいときは、メディアクエリで minmax の最低数値を変更すると、好みのカラム数にすることもできる

メディアクエリ無しブレイクポイント？

レスポンシブ関数CSSや、flexbox・gridとならんで、画像用の新しいレスポンシブコードも登場している

レスポンシブイメージ

下記ページなど、しどろもどろながら解説しているが

linkレスポンシブ問題 CSSピクセルとデバイスピクセル DPR(Device Pixel Ratio)とモバイルファースト

linkレスポンシブイメージはHTML(srcset)で CSSメディアクエリ担当外 画像読み込みのサイズはビューポートかボックスサイズか

上述の、単一画像伸縮によるレスポンシブではなく、ビューポートに合わせて別々の画像を表示させる仕組みが、レスポンシブイメージである

レスポンシブイメージは、CSSではなく、HTML（picture / srcset）の記述、設定した記述子(w)にしたがって指定の画像を表示させる
よって、メディアクエリ無しのブレイクポイントと言えないこともない

おもに、画像原版の複数サイズを作成しておいて、ビューポートごとに最適なサイズの画像を選択して表示させる仕組み

さらに、大画面では横長、小画面では縦長など、違う画像を指定することも可能

CSSの「object-fit」で、横長や縦長などに画像をトリミングできるが、レスポンシブイメージでは極端には実画像をトリミングした別画像を表示させることができる

DPR デバイスピクセル

レスポンシブイメージの記述子(w)は、CSSピクセルの幅ではなく、デバイスピクセルの幅を意味している

このレスポンシブイメージによって、極端には、DPR1のデスクトップよりもDPR3のスマートフォンのほうが、より大きい（横幅が広い）画像を表示することも有りとなる

よって、単一画像伸縮のレスポンシブを「レガシーレスポンシブ」と称するなら、デバイスピクセルのビューポートに合わせて画像を選択するレスポンシブイメージは「DPRレスポンシブ」とも言うべきで、今どきのRetinaなどの高解像度ディスプレイ対応なので「モダンレスポンシブ」とも表現してもいいだろう

DPR3などに対応して、スマートフォンでサイズ・容量大の画像を表示させるとは、スピードダウンにもつながりそうで、レスポンシブイメージに前のめりになることは、逆行しているおそれもありそう

まあ、Googleは「WebP」や「brotli」などを開発して、スピードとハイスペックを両立させているのだろう

されどメディアクエリ

デバイスのビューポートに合わせてコンテンツを伸縮させたり、レイアウトを変更するようなメディアクエリは、不要なのだろうか？

メディアクエリ無しがトレンド

画像のレガシーレスポンシブも含め、関数CSSや、flexbox・gridなど、世はメディアクエリ無しの方向に向かっている

GAFA（Facebook＝meta抜き）も、1カラムで、ソースを見るとメディアクエリは無さそうだ

メディアクエリは便利で重宝する

さて、長々と（だらだらと）書き連ねてきたが、Web作成の現場としては、やはり、されどメディアクエリは必要であり、画面幅に応じてコンテンツを伸縮させたりレイアウトを変更するには、メディアクエリは便利で重宝する

デスクトップ サイドバーが地雷

デスクトップファーストでもデスクトップラストでも、サイドバーは無視できないほどの市民権を持っている
さらに、モバイルユーザーは100%ではなく、デスクトップユーザーもまた多く、サイトによってはほとんどがデスクトップユーザーというケースもある

メディアクエリでは、サイドバーはフッター箇所の上あたりに収められることが多い
かつ、折りたたまれているサイト（テンプレート/テーマ）がほとんど

とくにタブレットで、縦画面では折りたたみ、横画面では展開させる場合、処理のハードルがやや面倒臭い
もちろん、タップ・クリックで展開/格納もCSSで可能

余談ではあるが、格納されたサイドバー内のAdSenseは、展開されても広告が表示されないことが多く、これもひと工夫もふた工夫も要求される

モバイルファーストのメディアクエリ range syntax などの注意点

一応は、モバイルファーストのCSS記述が主流となっていると思えるが、汎用コードとスマートフォン（縦画面）専用とを区別した記述も必要

事故が少ないメディアクエリのCSS

モバイルファーストであれ、デスクトップファーストであれ、汎用コードは汎用で全デバイスで共通であり、最初のCSSを読み込んだあとで、それを書き換えるコードが割り込むことはあまり好ましくない

つまり、汎用は汎用、専用は専用と区別するべきだろう

ブレイクポイントが「600 960」の事例では

汎用は、全デバイス共通の記述で、後述のメディアクエリで書き換えしない工夫が望ましい
弊社作法では、ブレイクポイントは「600 960」にしているが、「500 850」でも何でも同じ
デバイス・ビューポート・ブレイクポイントで、CSSを仕分けするということが肝要

メディアクエリ一覧 range syntax併記

メディアクエリは、従来の冗長な max-width / min-width に対して、簡略化の比較演算子を用いた記法、Media Queries Level 4の range syntax がすべてのモダンブラウザー最新版で対応している

• Media Queries: Range Syntax
• Media Queries Level 4

下記では、上段に max-width / min-width 、次の段に range syntax を併記している

汎用

メディアクエリ無し

全デバイス共通のCSS記述

smartphonestay_current_landscapetablet_mactablet_androiddesktop_windows

スマートフォン縦小画面 専用

@media screen and (max-width: 320px)

@media (width <= 320px)

まれに先代iPhoneSEや5の訪問者もあり

smartphone

スマートフォン縦画面spY 専用

@media screen and (max-width: 600px)

@media (width <= 600px)

汎用ではなくspY専用はここに

SDO(Smartphone Display Optimization)実現には重要なメディアクエリ

smartphone

スマートフォン横画面spX 専用

@media screen and (min-width: 600px) and (max-width: 960px) and (orientation: landscape)

@media (600px < width <= 960px) and (orientation: landscape)

iPhoneのノッチ対策など、スマートフォン横画面専用のメディアクエリ

stay_current_landscape

スマートフォン横画面spX～デスクトップ画面dt まで 部分汎用

@media screen and (min-width: 600px)

@media (600px < width)

spY以外で共通にするべきCSSはここに

stay_current_landscapetablet_mactablet_androiddesktop_windows

スマートフォン横画面spX / タブレット縦画面tbY 専用

@media screen and (min-width: 600px) and (max-width: 960px)

@media (600px < width <= 960px)

spY・tbXdt以外、つまりspX・tbYを限定するならここに

SDO(Smartphone Display Optimization)実現には重要なメディアクエリ

stay_current_landscapetablet_mac

デスクトップdt / タブレット横画面tbX 専用

@media screen and (min-width: 961px)

@media (960px < width)

tbX・dtで記述のボリュームもありそう

tablet_androiddesktop_windows

spX / tbY専用の理由～PageSpeed Insights対策

CSSを１枚物にするなら、「spX / tbY」は専用ではなく、以降の dt までの汎用にするほうが都合がいい
「tbX / dt」専用を上書きできるが、「spX / tbY」の流用できる記述は「tbX / dt」では不要になる

CSSのメディアクエリはスマートフォンで不要なCSSを読み込ませないために

PageSpeed Insightsのパフォーマンス数値が低い原因、三悪はCSS・JavaScript・画像、CSSは「レンダリングを妨げるリソースの除外」「使用していない CSS の削減」などなど

WordPressテンプレート(テーマ)で採用のCSSで、とくにPageSpeed Insightsパフォーマンス向上のために、全デバイスのファーストビュー用「クリティカルCSS」を設定
メディアクエリを最適化するために、デバイス別にCSSを分離分割読み込み、スマートフォン専用とデスクトップ専用はそれぞれ、タブレットは「spY 専用」以外を読み込むようにしている
スマートフォンではメディアクエリ600以上のCSSを読み込まないのがモバイル スピードアップのポイント

SDOとメディアクエリ

今どきのWeb、モダンWebでは、スマートフォン対応で、スマートフォン優先ならモバイルファーストと称されている

また、モバイルファーストで有っても無くても、パソコンというかデスクトップ対応は必須であり、モダンWebの次のミッションはレスポンシブということになる

スマートフォンとデスクトップに対応で、レスポンシブであれば、その手段でしかないメディアクエリやらブレイクポイントやら、ある意味でどうでもいいと言える

メディアクエリ・ブレイクポイントとSDO

複数のデバイスが氾濫する現状で想定するべきなのは、まずモバイルファーストではスマートフォンの縦画面と横画面のデザイン/レイアウトの切り替えに対応しなければならない
縦画面では「縦長」、横画面では「横長」という、じつはデバイス別・ディスプレイ別のレスポンシブではもっとも劇的な変化となっている

これに対して、デスクトップとタブレット横画面とスマートフォン横画面は「横長」、タブレット縦画面は縦長でも画面幅はスマートフォン横画面と同等、つまり、これら（スマートフォン縦画面以外）は「横長」として一括りで扱うことができる

ということは、スマートフォンの「縦長」「横長」をクリアできれば、他は「横長」一括として、オールクリアできることになる

SDOはスマートフォンの縦横対応でクリア

結論としては、レスポンシブはスマホの縦横をクリアすれば、モバイルのレスポンシブをクリア
さらに、これがクリアできれば、オールクリアとなる

SDOでレスポンシブSEO完全版

基本的にレスポンシブとは、同一HTMLソースで、複数のデバイス・ディスプレイに表示されることになるから、スマートフォン小画面・縦画面に表示されるソースにSEOコーディングしておけば、SEOもレスポンシブになる

つまり、スマートフォン小画面のデザイン/レイアウトで、SEOコーディングもできれば、最高最強最適のモダンWebが完成する