「レスポンシブ対応」って具体的に何をするの？

「レスポンシブ対応」という言葉はよく目にしますが、具体的に何をしているのかは意外と知られていないことがあります。基本的な考え方をまとめてみます。

■ 1つのHTMLで複数の画面サイズに対応すること

スマホ用とPC用で別のページを作るわけではなく、同じHTMLを使いながらCSSで見た目を変化させるのが基本です。これにより、情報の二重管理を避けられます。

■ ブレークポイントごとにレイアウトを切り替える

「画面幅が何px以下になったらこう変化させる」という基準点（ブレークポイント）を設定し、CSSのmediaクエリで列数や文字サイズ、余白などを切り替えます。一般的にはスマホ・タブレット・ PCの3段階くらいで切り替えることが多いです。

■ 画像・ボタンのサイズ調整

スマホで見たときに画像が画面幅をはみ出したり、ボタンが小さすぎて指で押しづらくなったりしないように、画面サイズに応じて適切な幅・タップしやすいサイズに調整します。

■ ナビゲーションの作り方を変える

 PCでは横並びのメニューが、スマホでは「ハンバーガーメニュー（三本線）」に切り替わるといったように、画面サイズに合わせて操作方法も変える必要があります。

■ 実機での確認が欠かせない

ブラウザの検証ツールで確認しても、実際のスマホで見るとタップしづらいボタンやレイアウト崩れに気づくことがあります。可能であれば複数の実機・ブラウザでの確認をしておくと安心です。

「レスポンシブ対応」と一口に言っても、実際にはこうした細かい調整の積み重ねでできています。サイトを依頼する際は、どの画面サイズでどう見えてほしいかを具体的に伝えると、仕上がりのイメージがすれ違いにくくなります。