レスポンシブデザイン は、パソコン・タブレット・スマホなど、見る画面の幅に合わせてレイアウトが自動で整う 作り方です。端末ごとに別々のページを用意せず、1つのページでどの環境でも見やすく表示します。
実現の中心は、CSS の メディアクエリ です。「画面幅がこの値より狭ければ、こう表示する」という条件を書き分けます。
/* 幅が狭い（スマホ）ときは縦1列に */
@media (max-width: 600px) {
.cards { flex-direction: column; }
}典型的な工夫は次のとおりです。
- 横並びを縦並びに … 狭い画面ではメニューやカードを縦に積む。
- 文字や余白を調整 … 小さい画面でも読みやすく。
- 画像を可変に … 幅いっぱいに収まるよう伸縮させる。
スマホからの閲覧が主流のいま、レスポンシブ対応は事実上の必須です。検索エンジンもモバイル表示を重視するため、SEO の観点でも欠かせません。