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

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

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

CSSの実装でよく使用する、メディアクエリのまとめ -mediaquery.style

mediaquery.style

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

モバイルファーストのメディアクエリ

Mobile First

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

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

CSS メディアクエリのチートシート

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

2つの値の間のメディアクエリ

The In-between

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

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

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

これは朗報! 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つだけで、landscapeportraitです。

プリントのメディアクエリ

Print Friendly

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

sponsors

top of page

©2022 coliss