レスポンシブデザイン

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

レスポンシブデザインは、1つの [[HTML]] を画面の幅に応じてレイアウトを変えて表示する設計手法です。スマホ・タブレット・PCそれぞれに別ページを用意するのではなく、同じページが閲覧環境に「応答(respond)」して姿を変えます。

現在のWebアクセスの多くはスマホからです。URLが1つで済むため管理が楽で、検索エンジンからの評価の面でも標準的な手法になっています。

3つの基本要素

1. ビューポート設定

<meta name="viewport" content="width=device-width, initial-scale=1">

この1行がないと、スマホはページを「PC幅で描いて縮小表示」してしまいます。レスポンシブ対応の出発点です。

2. メディアクエリ

/* 基本はスマホ向けのスタイル */
.container { display: block; }

/* 幅768px以上なら横並びに */
@media (min-width: 768px) {
  .container { display: flex; }
}

[[CSS]] のメディアクエリで「画面幅が◯px以上のとき」という条件付きスタイルを書きます。切り替えの境界値はブレークポイントと呼ばれます。

3. 流動的なレイアウト

幅を 500px のような固定値ではなく、% や max-width で指定します。[[FlexboxとGrid]] を使うと、要素の折り返しや再配置を柔軟に表現できます。画像には max-width: 100% を指定して、はみ出しを防ぐのが定番です。

モバイルファースト

スマホ向けのスタイルを基本とし、広い画面向けの調整を min-width のメディアクエリで追加していく書き方をモバイルファーストと呼びます。小さい画面は表示できる要素が限られるため、「まず小さい画面で成立させてから足していく」方が設計が破綻しにくいとされています。

初学者向けポイント

• 開発者ツールのデバイスモードで、各種スマホの画面幅を切り替えながら確認できます
• ブレークポイントは「デバイス名」ではなく「レイアウトが崩れる幅」で決めるのがコツです
• 文字サイズやタップ領域の確保は [[Webアクセシビリティ]] とも直結します

関連技術とのつながり

• [[CSS]] — メディアクエリはCSSの機能
• [[FlexboxとGrid]] — 流動的なレイアウトを実現する主役
• [[HTML]] — ビューポート設定はHTML側に書く
• [[Webアクセシビリティ]] — 多様な閲覧環境への対応という点で目的を共有する

Q: レスポンシブデザインの基本的な考え方はどれ?
- [x] 1つのHTMLを画面幅に応じてレイアウトを変えて表示する
- [ ] スマホ用とPC用に別々のページを用意する
- [ ] すべてのデバイスで同じ固定幅のレイアウトを表示する
解説: レスポンシブデザインは1つのページが閲覧環境に応じて姿を変える手法で、URLが1つで済むのが利点です。

Q: 画面幅に応じてスタイルを切り替えるCSSの仕組みはどれ?
- [ ] トランジション
- [x] メディアクエリ
- [ ] セレクタ
解説: @media (min-width: 768px) { ... } のようなメディアクエリで条件付きスタイルを書きます。

Q: モバイルファーストの説明として正しいのはどれ?
- [ ] PC向けのスタイルを先に書き、スマホ向けを後から上書きする
- [x] スマホ向けのスタイルを基本とし、広い画面向けの調整を追加していく
- [ ] スマホアプリを先に開発してからWebサイトを作る
解説: 小さい画面で先に成立させ、min-widthのメディアクエリで広い画面向けを足していく書き方です。