レスポンシブデザイン

スマートフォンからPCまで、異なる画面幅で読みやすいレイアウトを作ります。まず小さい画面向けに書くモバイルファーストが基本です。

このLessonのゴール

• メディアクエリを使って画面幅に応じたスタイルを指定できる
• 同じHTMLをスマートフォンでは1列、広い画面では2列に変更できる
• ブラウザの幅を変え、レイアウトが切り替わる位置を確認できる

今回新しく作るファイル

with-cafe/practice/css/
├── 04-responsive.html
└── 04-responsive.css

04-responsive.htmlから04-responsive.cssを読み込みます。この練習で画面幅による変化を理解したあと、Level 4でWith Café本体へ適用します。

<link rel="stylesheet" href="../../css/reset.css" />
<link rel="stylesheet" href="04-responsive.css" />

ブラウザで確認するファイル

04-responsive.htmlをブラウザで開きます。保存・再読み込み後、ブラウザの横幅を狭くしたり広くしたりしてレイアウトの変化を確認します。

カード一覧のHTMLは、画面幅が変わっても同じ構造を使用します。

<section class="card-list" aria-label="おすすめメニュー">
  <article class="card">
    <h2>クロワッサン</h2>
    <p>国産発酵バターを使っています。</p>
  </article>
  <article =>
    いちごタルト
    季節のいちごを使っています。
  
  
    ハンドドリップ
    一杯ずつ丁寧にお淹れします。