レスポンシブ対応の基本

レスポンシブデザインは一つのHTMLでスマートフォンやタブレットやパソコンなどさまざまな画面幅に対応する考え方です。スマートフォンからのアクセスが多い現在では最初からレスポンシブを前提にデザインやコーディングを行うことが重要になっています。

viewport設定を忘れない

head内にmeta要素でviewportを設定するとスマートフォンでの表示倍率を適切に制御できます。これを忘れると意図しない縮尺で表示され文字が小さく読みにくいページになってしまいます。新しいHTMLファイルを作る時はテンプレートとして必ず入れておくと安心です。

See the Pen レスポンシブ対応の基本 by Syo Yanai (@h1-tech-japan) on CodePen.

メディアクエリでレイアウトを切り替える

CSSのメディアクエリを使うと画面幅に応じてスタイルを出し分けることができます。例えばカードをスマートフォンでは一列タブレットでは二列パソコンでは三列にするなど柔軟なレイアウトが可能です。最初はスマホを基準にデザインし大きな画面向けにスタイルを追加していくモバイルファーストの考え方がおすすめです。