CSSの@mediaは、スクリーンサイズだけじゃない！ 最近の実装で使用されるメディアクエリのまとめ -mediaquery.style

Webサイトやスマホアプリの実装でよく使用される、CSSのメディアクエリのコードを紹介します。

モバイルファースト用をはじめ、ライトモード・ダークモード用、アクセシビリティ、ホバーエフェクト用、デバイスの向き用など、さまざまなメディアクエリのコードをコピペで簡単に利用できます。スニペットに登録しておくと、便利です。

mediaquery.style

まずは定番、スクリーンサイズのメディアクエリから。

Mobile First

min-widthは、モバイルファーストを念頭に置いて使用されることが多いです。スマホの小さいスクリーン用のスタイルをベースとして記述し、デスクトップの大きいスクリーン用のスタイルはメディアクエリ内に定義します。

各デバイス用のスクリーンサイズは、以前の記事をご覧ください。

CSS メディアクエリのチートシート、モバイルファースト用、スマホ・タブレットのデバイス用のメディアクエリ

The In-between

メディアクエリは組み合わせて使用すると、さらに強力です。たとえば、min-widthとmax-widthを組み合わせることで、2つの値の間のみにスタイルを適用できます。

また、Chrome 104から比較演算子（>=, <=）を使用できるようになりました。

これは朗報！ CSSのメディアクエリの範囲指定で、比較演算子を使用できるようになります

Light/Dark Mode

メディアクエリでprefers-color-schemeを使用すると、ライトモードとダークモードでスタイルを定義できます。lightに設定されている場合、OSでライトモードに設定されている場合、メディアクエリ内のスタイルが適用されます。darkの場合はその逆です。

Reduce Motion

メディアクエリでprefers-reduced-motionを使用するのは、アクセシビリティに不可欠です。アニメーションのような機能は視覚障害者にとって、動きの違和感を引き起こしたり、過度に気を散らせたりする可能性があります。このクエリはブラウザやOSの動きの抑制に関する設定に対応します。

No Touchy Hover!

かっこいいホバーエフェクトがありますが、タッチスクリーンでそのエフェクトが煩わしいと感じることがありませんか？ スクリーンサイズのメディアクエリ（min-widthなど）で対応することもできますが、すべてのケースをカバーすることはできません。そんな時はhoverをメディアクエリで使用できます。あまり知られていないかもしれませんが、ホバーがサポートされている環境でのみアクティブになります。

Device Orientation

メディアクエリでorientationを使用すると、スマホやタブレットなどのデバイスが回転したときに、異なるスタイルを適用します。選択肢は2つだけで、landscapeとportraitです。

Print Friendly

ページをプリントアウトしたときに、間違いに気がついたことはありませんか？ メディアクエリでprintを使用することができます。このメディアタイプを使用すると、印刷されたものに対してスタイルを定義できます。たとえば、印刷時には画像を非表示にしたり、スクリーン用ではなく印刷に適したレイアウトを提供することができます。