レスポンシブデザイン (Responsive Web Design)

レスポンシブデザインとは

ユーザーが使っている機器（パソコンの横長の大画面、スマホの縦長の狭い画面）の「画面幅（ピクセル数）」を自動で検知し、ブロックの並び順や画像サイズを「ゴムのように伸び縮みさせて」綺麗に整える（レスポンスする）デザイン手法のことです。

💡 例え話でいうと…

**「水のように器（ウツワ）の形に合わせて変化するデザイン」**です。 昔は「パソコン用のHTMLファイル」と「ガラケー（スマホ）用の別のHTMLファイル」の2つを作るという非効率なことをしていましたが、レスポンシブデザインでは「1つのHTMLファイル」に対して「魔法のかかったCSS（メディアクエリ）」を使い、PCなら横に3列、スマホなら縦に1列…と自動で並び替えるように指示を出します。

📌 今では必須の技術

現在世の中のWebアクセスの7割〜8割はスマートフォンからです。スマホで見た時に文字が豆粒のように小さくなる（レスポンシブ非対応の）サイトは、Googleが「クソサイト」と認定し、検索結果の圏外へと飛ばしてしまいます（モバイルペナルティ）。