スマートフォン表示を整えよう

PC版のHTMLを変えずに、画面幅に合わせてレイアウトを調整します。単に小さくするのではなく、狭い画面でも読みやすく操作しやすい状態を目指します。

このLessonのゴール

• 画像の縦横比を崩さずに表示できる
• メディアクエリでレイアウトを切り替えられる
• 複数の画面幅で崩れを確認できる

画像の表示を整える

画像を決めた領域いっぱいに表示するときは、object-fit: coverを使います。

.menu-photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.menu-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

画像自体の縦横比は維持され、領域からはみ出す部分だけが切り取られます。被写体が切れる場合はobject-positionで表示位置を調整します。

800px以下のレイアウト

@media (max-width: 800px) {
  .menu-grid {
    grid-template-columns: 1fr;
  }

  .shop-layout {
    grid-template-columns: 1fr;
  }
}

特徴、メニュー、店舗情報など、横並びでは窮屈になる場所を縦並びへ変更します。ナビゲーションはJavaScript Lessonで開閉できるメニューにするため、ボタンを表示してメニューを一時的に隠します。

確認する画面幅

• 375px前後のスマートフォン
• 768px前後のタブレット
• 1024px前後の小型PC
• 1440px以上の広い画面

DevToolsの端末一覧だけでなく、幅を少しずつ動かして途中で崩れないか確認してください。

完了条件

• すべての画像が伸びずに表示される
• 800px以下でカードと店舗情報が縦並びになる
• 文字やボタンが画面外へはみ出さない
• 意図しない横スクロールが発生しない
• 4種類以上の画面幅で確認した

まとめ

レスポンシブ対応は特定端末への対応ではなく、利用できる幅に合わせて内容を読みやすくする設計です。次のLessonでは、JavaScriptでスマートフォンメニューとスクロール表示を実装します。