CSSメディアクエリの書き方 — レスポンシブデザインの基礎とTailwindのブレークポイント
CSSメディアクエリは画面サイズ・解像度・カラースキームなどに応じてスタイルを切り替える仕組みで、レスポンシブWebデザインの核心技術です。Tailwind CSSやBootstrapのブレークポイントも内部でメディアクエリを使っています。
メディアクエリの基本構文
@media (max-width: 768px) { ... } のように@mediaに続いて条件を書き、中括弧内にそのとき適用するCSSを書きます。min-width（この幅以上）・max-width（この幅以下）が最もよく使われます。複数条件はandで結合します（@media (min-width: 768px) and (max-width: 1024px)）。
Tailwind CSSのブレークポイント
TailwindのデフォルトブレークポイントはSM: 640px・MD: 768px・LG: 1024px・XL: 1280px・2XL: 1536pxです。これらはmin-widthベースのモバイルファーストです。CSS Media Query BuilderにはTailwindのプリセットが用意されており、ワンクリックでこれらのブレークポイントをメディアクエリとして生成できます。
prefers-color-schemeとダークモード
@media (prefers-color-scheme: dark) でユーザーのOSのダークモード設定を検知できます。Tailwind CSSのdarkモードをmedia設定にすると、このメディアクエリに基づいて自動でダークテーマが適用されます。prefers-reduced-motionはアニメーションの軽減を要求するユーザーを検知し、アクセシビリティ向上に使えます。
メディアクエリのデバッグ
CSS Media Query BuilderのmatchMedia確認機能では、作成したクエリが現在のウィンドウサイズにマッチするかリアルタイムで表示します。ブラウザの開発者ツール（DevTools）のデバイスモードやリサイズと組み合わせて、各ブレークポイントでのレイアウトを確認できます。Media QueriesをCSS変数と組み合わせることでコンポーネントの状態をCSSだけで管理することも可能です。