IT用語
パソコンやスマートフォンなど、画面の大きさに合わせてレイアウトを自動で調整するWebデザインの手法。
- 別名・略称
- レスポンシブデザイン
レスポンシブ（レスポンシブデザイン、レスポンシブ Web デザイン）は、パソコン、タブレット、スマートフォンなど、閲覧する機器の画面の大きさに合わせて、1 つの HTML のままレイアウトを自動で調整する Web デザインの手法です。
主な技術
- メディアクエリ：@media (min-width: 768px) { ... } のように、画面の幅などの条件でスタイルを切り替える
- Flexbox・CSS Grid：画面の幅に合わせて並び方を変えやすいレイアウトの仕組み
- 相対的な単位：%、vw、rem などで、大きさを画面に合わせる
- viewport の meta タグ：スマートフォンで、画面の幅に合わせて表示させる
- 画像の出し分け：srcset や picture 要素で、画面に合った大きさの画像を読み込む
作り方のポイント
- スマートフォンの表示から作り、画面が広くなるにつれてスタイルを足していく方法（モバイルファースト）がよく使われる
- 画面の幅だけでなく、タッチ操作かマウス操作かにも配慮する
- 実機や、ブラウザの開発者ツールの端末表示で確認する
SEO との関係
Google は、スマートフォン向けの表示をもとにサイトを評価しています（モバイルファーストインデックス）。レスポンシブにして、スマートフォンでも見やすくすることが大切です。
