スマホで閲覧されることが当たり前になっている今、ウェブサイトがあらゆる画面サイズで見やすく、使いやすくあることが重要です。CSSのmedia queryを適切に書くことで、スマホ特有の画面幅や向きに応じてレイアウトを変更でき、ユーザー体験を大きく向上させることができます。この記事では「CSS media query 書き方 スマホ」というテーマに即した構成で、基本から最新のテクニックまで詳しく解説しますので、初心者から中級者まで理解できます。
CSS media query 書き方 スマホ入門：概要と基本文法
まずはスマホ向けにCSS media queryを書くための基礎を理解することが重要です。スマホ特有の表示環境、画面幅、解像度、向き（縦向き／横向き）などに注目し、それらを条件としてスタイルを切り替えるための文法を押さえます。基本的な構文を正確に書けるようになることで、後の応用がスムーズになります。
media query の基本構文と@mediaルール
CSSで条件付きスタイルを定義するには、@mediaルールを使います。例えば以下のように書くことで「画面幅が600px以下のスマホ」に対するスタイルを適用できます。
コード例：
@media (max-width:600px) { /* スマホ用スタイル */ }
また「スマホ幅以上」の条件にはmin-widthを使い、複数の条件を「and」で組み合わせて書くことも可能です。複雑な条件が増えたときにも構文が正しくなければ意図しない表示になりやすいため、まずはシンプルな基本形を身につけることが大切です。
ビューポートメタタグの設定
スマホで正しくメディアクエリを適用するため、HTMLの内にviewportメタタグを入れておく必要があります。たとえば、<meta name="viewport" content="width=device-width, initial-scale=1">とすることで、デバイスの幅をCSS幅に反映し、ズーム初期値を1に設定できます。これがないとスマホブラウザがデスクトップ用幅980pxなどを仮定して拡大縮小することがあり、意図しない見え方になります。
スマホ向けに考慮すべき画面幅の目安（ブレイクポイント）
スマホ対応では、どこでレイアウトを切り替えるか、つまりブレイクポイントの設定が鍵になります。具体的なデバイスごとではなく「コンテンツの見栄えが崩れる幅」で決めるのが最善です。一般的には320px～480pxあたり（小型スマホ）、480px～768pxあたり（大型スマホや小型タブレット）をひとつの目安にし、それ以上はタブレット･デスクトップ用スタイルを当てていく方法が主流です。
スマホで使える応用的書き方と注意点
基本を理解したら、実践でロバストに動作させるための応用技術と注意点を掘り下げます。複数条件を組み合わせたり、向き・解像度などより細かい環境を扱ったりする点を押さえることで、より柔軟で洗練されたスマホ対応が可能になります。
向き（縦横）の切り替え：orientation media feature
スマホでは、縦向き（portrait）と横向き（landscape）の両方で見られることが多いため、(orientation:portrait)や(orientation:landscape)という条件でスタイルを切り替えることが有効です。例えばナビゲーションメニューを縦向きでは隠したり、横向きでは横並びにしたりする対応が可能です。portraitは高さが幅以上、landscapeは幅が高さより大きいときに適用されます。
相対単位（em／rem／vw／vh）の活用
px固定ではなく、em rem vw vhなどの相対単位を使うことで、ユーザーのフォントサイズやディスプレイ設定に応じて柔軟に対応できます。特にブレイクポイントの値をem/remで指定すると、ユーザーがブラウザでフォント倍率を変えてもレイアウト崩れが起こりにくくなります。vw/vhはビューポート幅・高さに対する割合であり、通知バーやツールバーの厚みなど可変要素の影響を受けにくくするのに有効です。
重複やオーバーラップを避けるルール管理
複数のmedia queryが重なって条件が曖昧になると、CSSが予期せぬ振る舞いをすることがあります。特にmax-widthのクエリを多用すると、似た幅で複数のクエリが同時に真になるケースが増えます。ソースコード上でルールを後に書いたものが優先されますが、それまでのスタイルが上書きされず意図しないデザインになることがありますので、min-width中心のモバイルファースト設計やクエリの順序を整えることが重要です。
実例：スマホ対応のメディアクエリ書き方パターン
ここで具体的なパターンを通して、スマホ向けCSS media query の書き方を見ていきます。実際のコード例を用いることで、どのようなスタイル切り替えができるかイメージしやすくなります。
基本的なスマホファーストの構造
モバイルファーストとは、まずスマホの狭い幅を想定したスタイルをベースとし、それより大きな画面のときに追加・変更するアプローチです。
例えば：
/* ベース：スマホ用 */
body { font-size:14px; padding:10px; }
@media (min-width:480px) { body { font-size:16px; padding:20px; } }
@media (min-width:768px) { body { font-size:18px; padding:30px; } }
このように幅が広くなるにつれてスタイルを変えていく書き方がモバイルファーストの王道です。
向きと画面幅を組み合わせた高度な例
例えば、縦向きではシンプルなレイアウト、横向きでは横並びを採用したい場合などには、画面幅とorientationを組み合わせて使います。
例：
@media (min-width:480px) and (orientation:landscape) { /* 横向きスマホ向けスタイル */ }
このように条件を複数持たせることで、スマホが横持ちになったときの見た目を最適化できます。
画面幅の目安を活かした複数ブレイクポイントの設定
画面幅の目安を参考に、複数のブレイクポイントを設定するパターンです。例えば次のような幅で切り替えを入れることで、あらゆるスマホ・タブレット・PCでの見栄えを整えることができます。
例：
@media (max-width:480px) { /* 小型スマホ */ }
@media (min-width:481px) and (max-width:767px) { /* 中型スマホ */ }
@media (min-width:768px) { /* タブレット以上 */ }
複数および範囲指定でスタイルを整理することで、切り替わり時の表示の乱れを減らせます。
2026年のトレンドと最新技術
CSSおよびメディアクエリを取り巻く技術は進化を続けており、スマホ対応でも新しい仕様やベストプラクティスが注目されています。最新情報を押さえておくことで、より先進的で耐久性のあるレスポンシブ設計が可能になります。
メディアクエリ Spec Level 5 の特徴
メディアクエリの最新仕様では、幅や高さだけでなく、方向性だけでなくユーザーの動きや好みなどもメディアフィーチャーとして扱えるようになっています。例えば「hover能力」「color-gamut」「dynamic-range」など、環境やデバイスの性能に応じて調整すべきスタイルが細分化されています。これにより、スマホであっても高性能なディスプレイやアクセシビリティ設定に配慮したスタイルが書けるようになってきています。
@custom-media を使ったブレイクポイントの管理
@custom-media を使うと、ブレイクポイントを変数のように定義し、複数箇所で使い回すことができます。例として、--mobile-smallのような名前を一度定義し、それを参照することで、後からこの値を変更してもスタイル全体が整合するようにできます。これが大きなサイトや複数ページで共通スタイルを管理する際に非常に有効な手法です。
アクセシビリティと環境条件に配慮するスタイル切り替え
最新のトレンドとして、メディアクエリで「prefers-color-scheme」や「prefers-contrast」「prefers-reduced-motion」といった環境やユーザー設定を検知してスタイルを変えることが重視されています。これによりスマホ利用者がダークモードを使っていたり、視覚的にコントラストが必要だったりする場合でも、快適な表示ができるようになります。
よくある失敗例とその回避方法
メディアクエリを書いたのに思った通りに表示されない、見切れてしまう、重なってしまうなどの失敗は少なくありません。ここでは典型的なミスとその防止策を紹介します。
viewport メタの未設定・誤設定
viewportタグがない、または width=device-width や initial-scale=1 が設定されていない場合、スマホブラウザが自動的に仮想幅で表示して拡大縮小されてしまいます。これにより @media (max-width:480px) などのクエリが意図通り働かないことがあります。必ずHTMLの内に正しいviewportタグを入れておくことが大前提です。
固定幅とpx依存のCSS
ひとつの要素で幅をpxで固定してしまうと、画面幅が狭いスマホでははみ出したりスクロールが発生したりします。またフォントサイズ・余白・画像なども固定だと可変性が低くなり、レスポンシブとは言えない表示になりがちです。できる限り相対単位や%を使い、必要ならメディアクエリ内で調整するようにしましょう。
クエリ間の競合と記述の順序の逆転
例えば max-width:600px と min-width:480px の両方を用いたクエリがあった場合、480～600pxの範囲でどちらも成立するためスタイルが予期せぬものになることがあります。記述順や重複を整理し、モバイルファーストなら ascendingなmin-width中心に、desktop-firstなら descendingなmax-width中心に書くようにしましょう。
まとめ
スマホ向けにCSS media queryを書く際には、まず基礎構文を正しく理解すること、viewportメタタグを正しく設定すること、コンテンツが「見た目で壊れるポイント＝ブレイクポイント」でスタイルを切り替えることが肝心です。
さらに応用として、画面の向きや環境条件を取り入れたり、相対単位を使って柔軟性を担保したりすることで、より高品質なレスポンシブデザインが可能になります。
失敗例に注意しながら、モダンな仕様を活用して、スマホ閲覧時にユーザーが快適にサイトを操作できるようCSSを書いていきましょう。
コメント