メディアクエリ

更新日: 2024年2月20日

メディアクエリとは

メディアクエリ（Media Queries）は、ウェブページのスタイルを異なる画面環境に応じて変更するためのCSSの機能です。
これにより、デバイスや画面サイズに合わせてウェブページの表示を調整できます。

メディアクエリの進化

メディアクエリはCSS3の導入により登場しました。
CSS2では媒体の種類（例えば「プリント」や「スクリーン」）しか判断できませんでしたが、CSS3では媒体の特性（解像度やビューポートのサイズなど）に基づいてスタイルを適用できるように進化しました。

メディアクエリの使用方法

メディアクエリを使用すると、次のような利点があります。

• デバイス対応
  モバイル、タブレット、パソコンなど、さまざまなデバイスに最適化された表示を提供できます。
• ユーザーエクスペリエンス向上
  さまざまなデバイスでウェブサイトの見栄えを良くし、ユーザーエクスペリエンスを高めます。

メディアクエリの利用例

メディアクエリは、次のような場面で特に役立ちます。

• 端末種別の対応
  プリンターや画面など、異なる端末種別での表示を最適化します。
• 特定特性の調整
  画面の解像度やブラウザのビューポート幅に基づいて、サイトやアプリの表示を調整します。

メディアクエリは、ウェブデザインにおいて柔軟なスタイリングとユーザビリティの向上を実現するための便利なツールです。
これを使うことで、ウェブサイトは多様なデバイスやブラウジング環境に適応し、より広いユーザー層にアクセスしやすくなります。

柏崎剛

この記事の執筆者・監修者。当サイトの運営者で、目からウロコのSEO対策「真」常識の著者。主にSEO、SXOの考え方について、現場での経験から、どのようにGoogle検索エンジン対策を行えばよいかを具体的に解説できるよう努めています。再検索キーワード調査、トピッククラスター構築ツール、共起語調査ツール、競合キーワード調査ツール、キーワード候補調査ツール、検索ボリューム調査ツール、見出し抽出ツール、サジェストキーワード調査ツール、MEO順位チェックツールの考案者であり開発者。更に詳しくはプロフィールをご覧ください。SEO対策のお仕事に関するご依頼・お申し込みは、こちらのフォームから承っております。