メディアクエリとは何か
メディアクエリは、画面の幅などの条件に応じて、適用するCSSを切り替える仕組みです。これにより、一つのHTMLでPCにもスマホにも適した見た目を出し分けられます。
この出し分けによって実現するのがレスポンシブデザインです。端末ごとに別ページを用意しなくても、同じページで快適な表示を保てます。
書き方の基本
メディアクエリは、特定の条件のときだけ有効になるスタイルのまとまりを作ります。たとえば「画面幅が一定以下のときはこのスタイル」というように、条件と適用したいスタイルをセットで書きます。
切り替わる境目の幅をブレークポイントと呼びます。スマホ、タブレット、PCといった代表的な幅にブレークポイントを置くのが一般的な進め方です。
実務ではどこで関係する？
メディアクエリは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。
メディアクエリについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。
- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める
viewport設定との関係
メディアクエリを正しく効かせるには、HTMLのhead内にviewportの指定が欠かせません。これがないと、スマホがページをPC幅とみなして縮小表示し、メディアクエリが意図どおり働きません。
viewportは画面の実寸に合わせて表示するための指定です。レスポンシブ対応を始めるなら、まずこの一行が入っているかを確認するのが第一歩になります。
レスポンシブ対応の手順
画面幅で見た目を切り替える基本的な流れは次のとおりです。
- HTMLのhead内にviewportの指定があるか確認する
- まず基準となる画面幅向けにスタイルを作る
- 切り替えたい境目(ブレークポイント)を決める
- メディアクエリでその幅以下(または以上)のスタイルを書く
- PC幅とスマホ幅の両方で実際に表示を確認する
モバイルから考える
近年はスマホでの閲覧が中心の場面も多く、まず狭い画面向けに作ってから広い画面に広げる「モバイルファースト」の考え方が広く使われています。狭い画面のほうが要素を絞り込みやすいためです。
どちらの順序で作るにせよ、大切なのは実機や複数の画面幅で確認することです。コード上で正しく見えても、実際の端末で崩れることはよくあります。
複数の画面幅で確認を共有
レスポンシブ対応は、PC、タブレット、スマホと複数の見え方を確かめながら調整する必要があり、関係者にも各端末で見てもらう機会が増えます。
ギガサイト便はHTMLやCSSを含むZIPをドロップすると共有URLを発行でき、URLを開けばどの端末からでも実際の表示を確認できます。同じURLのまま中身を差し替えられるので、調整版をすぐ共有して各画面幅の見え方をチェックしてもらえます。
よくある質問
ブレークポイントはどの幅に置けばよいですか
スマホ、タブレット、PCといった代表的な幅を目安に置くのが一般的です。ただし特定の機種に合わせるより、デザインが崩れ始める幅で切り替えると無理がありません。
viewportの指定は本当に必要ですか
レスポンシブ対応では必須です。これがないとスマホがページをPC幅で縮小表示してしまい、メディアクエリが意図どおり効きません。headに入っているか最初に確認してください。
モバイルファーストとは何ですか
まず狭い画面向けにスタイルを作り、画面が広くなるにつれて調整を加えていく作り方です。要素を絞り込みやすく、スマホ中心の閲覧が多い現在では一般的なアプローチになっています。
実機で確認しないとだめですか
ブラウザの画面幅変更でもある程度は確認できますが、実機やさまざまな画面幅で見ると、コード上では気づけない崩れを発見できます。可能な範囲で複数環境の確認をおすすめします。
実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？
細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。