【めでぃあくえり】
メディアクエリ とは？
最終更新:
💡 表示環境や利用者の設定を条件に、CSSを適用する
表示媒体やブラウザの表示領域、利用者の設定などの条件を調べる仕組み。CSSの@mediaでは、条件を満たす場合に中のルールが適用対象になる。画面の幅に応じたレイアウト、印刷用の表示、配色の設定への対応などに使える。
📌 このページのポイント
- 幅の条件は通常、端末の物理画面ではなく表示領域を見る
- @mediaの中のルールは、条件を満たすと適用対象になる
- 印刷、配色の設定、ホバー操作なども条件にできる
- 境界の数値やレイアウトは、自分で設計する
ひよこ メディアクエリって何？
ペンギン先生 ひよこ 幅の条件はどう書くの？
ペンギン先生 ひよこ 画面幅以外には？
ペンギン先生 @media printは印刷用、@media (prefers-color-scheme: dark)は利用者が暗い配色を希望する設定に対応するよ。@media (hover: hover)は主な入力方法でホバーできるかを見る。必ずマウスが接続されている、という判定ではないんだ。
ひよこ 境界はどう決めるの？
ペンギン先生 文字や内容が読みづらくなる幅を確認し、必要なところに境界を置こう。特定端末の幅だけで決めると、別の表示領域で崩れることがある。境界の前後と、ちょうどその幅でも表示を確認するといいね。
ひよこ コンテナクエリとの違いは？
まとめ：ざっくりこれだけ覚えればOK！
「メディアクエリ」って出てきたら「表示環境や利用者の設定を条件に、CSSを適用する」と思えばだいたいOK！
📖 おまけ：英語の意味
「Media Query」 ＝ 表示媒体などについての問い合わせ
💬 Mediaは媒体、Queryは問い合わせ。端末名を当てるものではなく、指定した表示環境の条件に合うかを調べるんだ。