レスポンシブ
れすぽんしぶ
Responsive
一言でいうと
PC・タブレット・スマホなど画面サイズに応じてレイアウトが自動で最適化されるWebデザイン手法のこと。
詳しい意味
レスポンシブ（レスポンシブデザイン / レスポンシブWebデザイン）は、PC・タブレット・スマホといった画面サイズに応じて、Webページのレイアウト・文字サイズ・画像サイズが自動で最適化されるデザイン手法です。1つのHTMLとCSSで複数デバイスに対応するため、デバイス毎に別サイトを作る必要がなく保守が楽。CSS の「メディアクエリ」（`@media (max-width: 768px) { ... }`）で画面幅に応じたスタイルを切り替えるのが基本。「モバイルファースト（小さい画面を起点に設計）」が現代の標準です。Tailwind CSS や Bootstrap といったフレームワークはレスポンシブ対応のクラスを標準で提供します。
何に使うか
PC利用とスマホ利用が両方あるWebサイト全般。1つのコードベースで多デバイス対応したいとき。SEO観点でモバイル対応が必須のとき。
どんな時に出るか
「レスポンシブ対応してます？」「スマホでレイアウトが崩れる」「モバイルファーストで作ろう」といった場面で登場します。
具体例
- Tailwind CSS のブレイクポイントを使って、モバイルファーストでレスポンシブ実装した。
- デザインカンプはPCだけだったが、レスポンシブ前提のためモバイル版も自分でレイアウトした。
別名・略称
responsive(れすぽんしぶ)responsive design(れすぽんしぶでざいん)レスポンシブデザイン(れすぽんしぶでざいん)モバイルファースト(もばいるふぁーすと)
初心者向けメモ
「伸び縮みする服」のイメージです。子供が大人になっても、太っても痩せても、同じ服が体に合うように形を変える。Webサイトも、画面の大きさが変わっても見やすく整列するように作るのがレスポンシブです。