メディアクエリ

📖 もうちょい詳しく

何が新しいの？

ひとつのページを、スマホでもパソコンでも見やすく表示したい——そんな要望に応えるための仕組みが、メディアクエリです。昔は端末ごとに別々のページを用意することもありましたが、画面の大きさはとても多様になりました。メディアクエリを使うと、同じページのまま、見ている画面の条件に合わせて見た目だけを切り替えられます。

どうやって動いてるの？

CSS（見た目を決める言語）の中に「この条件のときだけ、このスタイルを当てる」という箱を作ります。たとえば「画面の幅が600px以下のとき」という条件を書き、その中に当てたいスタイルを入れておきます。ブラウザは表示するたびに今の画面幅や向きを調べ、条件に合えばその中のスタイルを使う、という流れです。

何ができるの？

横並びだった3列を、せまい画面では縦1列に積み直す、といった調整ができます。文字の大きさや余白を画面ごとに変えたり、PCだけで出すメニューを用意したりも可能です。条件には幅のほかに、画面の向き（縦か横か）などもよく使われます。

🌱 身近なたとえ

引き出し付きの机で例えると、分かりやすいかもしれません。「狭いとき用」「広いとき用」と引き出しを分けて道具をしまっておき、作業スペースの広さに合わせて開ける引き出しを変えますよね。メディアクエリも同じで、画面の広さという条件ごとにスタイルをしまっておき、合うものだけを取り出して使います。

✅ まず覚えるポイント

• 画面の幅や向きなどの条件に応じて、CSSを切り替える書き方です
• スマホ・PCで見た目を変えるレスポンシブ対応の中心になります
• ページは1つのまま、当てるスタイルだけを入れ替えます
• ブラウザが今の画面の条件を調べ、合えばその中身を使います
• 幅のほかに、画面の向きなども条件に使えます

🧭 よくある勘違い

ページを2つ作っているの？

いいえ、ページ自体は1つのままです。中身（HTML）は共通で、メディアクエリは「どのスタイルを当てるか」を切り替えているだけです。別ページに飛ばしているわけではないので、URLも変わりません。

画面の大きさを変えると作り直しているの？

作り直してはいません。ブラウザは今の画面の条件を見て、当てはまるスタイルを選び直しているだけです。だから画面の幅を変えると、その場で見た目がふわっと切り替わるように見えます。

🧩 関連して覚えると楽な言葉

• CSS: Webページの見た目を決める言語。メディアクエリはこの中に書きます
• レスポンシブデザイン: 画面に合わせて見た目を変える設計。その中心がメディアクエリです
• UX（ユーザー体験）: 使い心地のこと。どの画面でも見やすくして体験を整えます
• アクセシビリティ: 誰もが使いやすい状態。文字を大きく読みやすくする調整にも役立ちます

🏁 ひとことでまとめ

見ている画面の条件を読み取り、それに合うスタイルだけを選んで当てる——その入り口になるのがメディアクエリです。