CSS メディアクエリー

CSS メディアクエリーモジュールにより、ビューポートの値やブラウザーや端末の機能を検査および問い合わせして、現在のユーザー環境に応じて CSS スタイルを条件付きで適用することができます。メディアクエリーは、 CSS の @media ルールや、 HTML や JavaScript などの他のコンテキストや言語で使用されます。

メディアクエリーは、レスポンシブデザインの中心的な要素です。メディアクエリーを使用すると、端末の特性やその値に応じて条件付きで CSS スタイルを設定することができます。一般的には、ビューポートのサイズに基づいてメディアクエリーを使用し、様々な画面サイズの端末に適切なレイアウトを設定します。例えば、幅の広い画面では 3 段組み、幅の狭い画面では 1 段組みにするなどです。

それ以外にも、ページを印刷する際にフォントサイズを大きくしてナビゲーションメニューを非表示にしたり、ページを縦向きまたは横向きで表示する際に段落間のパディングを調整したり、タッチ画面で操作しやすいようにボタンのサイズを大きくしたりといった例が挙げられます。

CSS では、 @media アットルールを使用して、メディアクエリーの結果に基づいて条件付きでスタイルの一部を適用することができます。 @import を使用すると、条件付きでスタイルシート全体を適用することもできます。

再利用可能な HTML コンポーネントを設計する場合、コンテナークエリーを使用することもできます。これにより、ビューポートやその他の端末の特性ではなく、コンテナー要素のサイズに基づいてスタイルを適用することができます。