CSS メディアクエリとは？

CSS メディアクエリは、スクリーンサイズ、解像度、向き、カラースキームなどのデバイス特性に基づいて異なるスタイルを適用できる技術です。メディアクエリはレスポンシブウェブデザインの基礎であり、ウェブサイトがスマートフォンからデスクトップモニターまで、異なるデバイス間でレイアウトと外観を適応させることを可能にします。CSS の @media ルールを使用して、特定の条件が満たされた場合にのみ条件付きでスタイルを適用します。

ツール説明

このツールは、複雑な構文を暗記することなく CSS メディアクエリを生成するのに役立ちます。ターゲットメディアタイプを選択し、寸法を指定し、デバイス機能を選択するだけで、スタイルシートで使用できる完全な @media ルールが生成されます。ビューポート寸法、スクリーン向き、アスペクト比、解像度検出、カラースキーム設定など、すべての最新メディアクエリ機能をサポートしています。

機能

  • メディアタイプ選択: all、screen、print、speech メディアタイプから選択
  • 寸法コントロール: 任意の CSS ユニット (px、em、rem、vw など) で最小・最大幅/高さを設定
  • デバイス機能: 向き、アスペクト比、解像度、カラースキーム設定を構成