PCで作ったレイアウトがスマホで崩れる、横スクロールが出てしまう、文字が小さすぎて読めない——レスポンシブ対応は、後から手当てすると際限なく作業が増えていきます。一方で、最初に単位とブレークポイントの方針を決めておけば、追加する画面でも同じルールで対応でき、崩れにくくなります。この記事では、レスポンシブ対応を設計する手順を、単位の選び方からブレークポイントの決め方、メディアクエリ、コンテナクエリまで順番に紹介します。
1. 使う単位を決める
まず、寸法に使う単位の方針を決めます。px は指定した通りの大きさになりますが、ユーザーがブラウザの文字サイズを大きくしても追従しません。rem はルート要素のフォントサイズを基準にするため、ユーザー設定に応じて拡大され、アクセシビリティの面で有利です。原則として、フォントサイズと余白は rem、境界線など1px単位で見せたいものは px、と使い分けると扱いやすくなります。%、vw、vh は親要素やビューポートに対する相対値で、幅いっぱいに広げたい要素に向きます。ただし vh はモバイルブラウザでアドレスバーの表示・非表示によって値が変わるため、画面いっぱいの高さには dvh を使う方が安定します。CSS Unit Converter を使うと、基準のフォントサイズやビューポート幅を設定した上で、px と rem・em・vw・vh の対応を一覧で確認でき、既存のpx指定をremへ置き換える作業がスムーズになります。
この手順で使うツール
CSS Unit Converter
px / rem / em / vw / vh / pt / cm / mm を瞬時に相互変換
2. ブレークポイントの決め方
次にブレークポイントです。ここでよくある誤解が「iPhoneは◯px、iPadは◯px」といった具体的な機種に合わせる考え方です。機種は次々に増えるため、追いかけるときりがありません。推奨されるのは「コンテンツが崩れる幅」で切る方法です。ブラウザの幅を少しずつ狭めていき、文字が窮屈になったり要素がはみ出したりした地点をブレークポイントにします。結果として一般的な値（およそ 640px・768px・1024px 前後）に近くなることが多いですが、出発点が「機種」ではなく「コンテンツ」である点が重要です。もう一つの原則が、モバイルファーストで書くことです。狭い画面のスタイルを基本として書き、min-width のメディアクエリで広い画面向けの指定を足していきます。こうすると上書きが減り、CSSが読みやすくなります。
3. メディアクエリを組み立てる
方針が決まったら、実際のメディアクエリを書きます。基本は `@media (min-width: 768px) { ... }` の形で、指定幅以上のときに適用されるスタイルを書きます。CSS Media Query Builder では、min-width / max-width の指定や、画面の向き（orientation）、ダークモードの検知（prefers-color-scheme）、動きを減らす設定（prefers-reduced-motion）などをGUIで組み立てられます。min-width と max-width を混在させると境界が1pxずれて隙間ができることがあるため、どちらかに統一するのが安全です。また、幅以外の条件も活用する価値があります。特に prefers-color-scheme と prefers-reduced-motion は、ユーザーの環境設定を尊重するために実務でよく使われます。まずは幅のブレークポイントを整え、その後にこれらを足していくとよいでしょう。
この手順で使うツール
CSS Media Query Builder
@media クエリを GUI で組み立て・リアルタイムプレビュー付き
4. コンテナクエリで部品単位に対応する
メディアクエリには弱点があります。判断基準が「画面の幅」なので、同じコンポーネントでも、サイドバーに置いたときと本文エリアに置いたときで最適な見せ方が違うのに、同じスタイルが当たってしまいます。これを解決するのがコンテナクエリで、「親要素の幅」を基準にスタイルを切り替えられます。親に `container-type: inline-size` を指定し、`@container (min-width: 400px) { ... }` のように書きます。CSS Container Query Builder では、この指定をGUIで組み立てて挙動を確認できます。コンポーネント単位で設計する現在の作り方と相性がよく、「どこに置かれても自分で最適な形になる部品」を作れるのが利点です。全体のレイアウトはメディアクエリ、部品の中はコンテナクエリ、という使い分けが現実的です。
この手順で使うツール
CSS Container Query Builder
@container クエリをGUIで組み立てて CSS を即生成
5. 崩れやすい箇所を確認する
最後に、スマホで崩れる典型パターンを確認します。最も多いのが横スクロールの発生で、原因は「画面幅を超える固定幅の要素」「はみ出す画像」「長いURLなど折り返せない文字列」「テーブルやコードブロック」です。画像には `max-width: 100%` を、折り返せない文字列には `overflow-wrap: anywhere` を、テーブルやコードブロックは横スクロールできる要素で包む——この3つで大半は解決します。次に多いのがタップ領域の狭さで、ボタンやリンクは指で押せるよう十分な大きさ（およそ44px四方以上）を確保します。確認は、ブラウザの開発者ツールで幅を狭めながら行うのが基本ですが、実機でも一度は見ておくと、フォントの見え方やタップのしやすさなど、シミュレーターでは分からない問題に気づけます。
まとめ
レスポンシブ対応は「単位の方針を決める → コンテンツが崩れる幅でブレークポイントを切る → モバイルファーストでメディアクエリを書く → 部品はコンテナクエリで対応する → 崩れやすい箇所を確認する」という流れで設計すると、後からの手当てが減ります。特に「機種ではなくコンテンツで切る」「画像に max-width: 100%」「折り返せない文字列の対策」は、そのまま実装のチェックリストとして使えます。