メディアクエリとは？画面幅でデザインを切り替えるCSSの基礎

メディアクエリとは

メディアクエリとは、画面の幅などの条件に応じて、適用するデザインを切り替えるCSSのしくみです。「画面がこの幅より狭いときは、このスタイルにする」といった条件分けができます。

これを使うと、一つのHTMLのまま、スマホでは見やすい縦並び、PCでは情報量の多い横並び、というように表示を出し分けられます。端末ごとに別々のページを用意しなくてよいのが利点です。

画面の大きさに合わせて柔軟に表示を変えるこの考え方は、レスポンシブデザインと呼ばれる作り方の中心になっています。

@mediaで条件を書く

メディアクエリは @media というキーワードで始め、その後ろに「どんな条件のときか」を書きます。よく使われるのは画面の幅に関する条件で、ある幅を境にスタイルを切り替えます。

条件に合うときだけ、その中に書いたデザインの指定が有効になります。条件に合わないときは無視されるので、基本のデザインと、特定の画面幅向けのデザインを併存させられます。

つまり「ふだんのデザイン」を用意したうえで、「この画面幅のときはこう変える」という上書きを足していくイメージです。

実務ではどこで関係する？

メディアクエリは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

メディアクエリについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

• 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
• 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
• 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
• 運用の話: 期限、差し替え、削除、共有メッセージまで決める

画面幅で表示を切り替える手順

スマホとPCで表示を出し分けるレイアウトは、次の順で考えると整理しやすくなります。

1. まず土台となる基本のデザインを作る
2. 切り替えの境目になる画面幅（ブレークポイント）を決める
3. @mediaでその画面幅の条件を書く
4. 条件の中に、その幅で変えたい部分のスタイルだけを書く
5. ブラウザの幅を実際に変えて、切り替わりを確認する

ブレークポイントの決め方

デザインを切り替える境目の幅を、ブレークポイントと呼びます。スマホ・タブレット・PCといった大まかな区分に合わせて、いくつかの境目を設けるのが一般的です。

ただし、特定の機種の幅にぴったり合わせようとすると、機種が増えるたびに調整が必要になります。実際のデザインが崩れ始める幅を見ながら境目を決めると、機種に振り回されにくく、長く使える設定になります。

切り替えの確認と共有

メディアクエリの調整は、ブラウザの幅を変えながら切り替わりを確かめる作業の繰り返しです。手元では問題なくても、実際のスマホで見ると印象が違うこともあるため、いろいろな端末での確認が役立ちます。

ギガサイト便では、CSSを含むファイルやZIPをドロップすると共有URLが発行され、QRコードでの配布にも対応しています。発行されたURLのQRをスマホで読み取れば、実機での表示をその場で確認でき、関係者にも同じURLで見てもらえます。