Web技術

レスポンシブデザイン

レスポンシブデザインは、パソコンからスマートフォンまで、画面の大きさに合わせてWebページの見た目と操作を最適化する考え方です。1つのページを複数の端末で使えるようにします。

概要

レスポンシブウェブデザイン（RWD）は、サイトの見た目と挙動を、デスクトップからモバイルまで、すべてのパーソナルコンピューティング機器に合わせて最適化することに焦点を当てたウェブ開発の概念である。

レスポンシブデザインは、画面の幅に応じてレイアウトや文字の大きさを変える考え方である。MDNの用語集は、デスクトップからモバイルまでの機器を対象に最適化することだと説明している。

CSSのメディアクエリを使うと、画面幅ごとに異なる指定を書ける。例えば、幅が狭いときは要素を縦に並べ、広いときは横に並べる、といった切り替えが代表的である。

ブラウザーの開発者ツールで画面幅を変えて、表示が崩れないかを確かめるとよい。実機での確認も、最終的な判断には役立つ。