【めでぃあくえり】
メディアクエリ とは？
💡 画面サイズに応じてスタイルを「切り替える」CSS機能
📌 このページのポイント
- 画面の幅や種類に応じてCSSのスタイルを条件分岐できる
- @mediaルールを使って「〇〇px以下のとき」などの条件を書く
- レスポンシブデザインの中核となる技術
- 画面幅だけでなく印刷用スタイルやダークモードの指定もできる
ひよこ メディアクエリって何？
ペンギン先生 CSSで「画面幅が〇〇px以下のときはこのスタイルを使う」みたいに条件分岐を書ける仕組みだよ。これを使ってPCとスマホでレイアウトを変えるのがレスポンシブデザインの基本だね。
ひよこ どう書くの？
ペンギン先生 "@media (max-width: 768px) { ... }"みたいに書くよ。この中に書いたスタイルは画面幅が768px以下のときだけ適用される。768pxとか1024pxみたいな切り替えポイントを「ブレークポイント」と呼ぶんだ。
ひよこ 画面幅以外にも使えるの？
ペンギン先生 いろいろ使えるよ。"@media print"で印刷用のスタイルを書いたり、"@media (prefers-color-scheme: dark)"でダークモードのとき用のスタイルを書いたり、"@media (hover: hover)"でマウスホバーが使える環境だけに適用したりできるんだ。
ひよこ ブレークポイントってどの値にすればいいの？
ペンギン先生 これは実は「正解がない」問題で、よく議論になるんだ。768px（iPadの幅）や1024pxが定番だけど、デバイスの種類が増えすぎて「このデバイスに合わせる」という考え方自体が限界を迎えている。最近は「コンテンツが崩れるポイント」でブレークポイントを決めるのが良いとされていて、デバイスの幅ではなくコンテンツの見え方で判断する。さらにContainer Queriesが登場して、画面幅ではなく親要素の幅に応じてスタイルを変えられるようになった。メディアクエリは「ページ全体」の条件分岐だけど、Container Queriesは「コンポーネント単位」の条件分岐ができるから、再利用性が格段に上がるんだよ。
まとめ：ざっくりこれだけ覚えればOK！
「メディアクエリ」って出てきたら「画面サイズに応じてCSSを切り替える仕組みのことだな」と思えればだいたいOK！
📖 おまけ：英語の意味
「Media Query」 ＝ メディアへの問い合わせ
💬 Media（媒体・メディア）+ Query（問い合わせ）。「今の表示媒体は何？」とブラウザに問い合わせる仕組みだよ