画面幅に合わせるレイアウト

レスポンシブデザインは、画面の幅に合わせて、ページの見た目を変える作り方です。スマホでも大学のパソコンでも、同じページが読みやすく見えます。

このレッスンでは、ビューポートとメディアクエリ、モバイルファーストの考え方を学びます。学食のメニューのページを例に使います。

スマホのブラウザは、設定がないと、広いパソコン向けの画面だと思い込んで、縮めて表示します。文字が小さくなって、読めません。

次の1行を <head> に書くと、画面の実際の幅で描かれます。width=device-width は幅を画面に合わせ、initial-scale=1 は最初の拡大縮小をしない指定です。

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

ラボの app フォルダのページが、この1行を持っているか調べます。スクリプトは、結果を英語の単語で出します。

found は見つかった、MISSING はない、True は含まれている、という意味です。

docker exec jupyter python3 steps/viewport.py

メディアクエリは、画面の条件が合うときだけ働く CSS です。@media (min-width: 600px) は、幅が 600 px 以上のとき、中の規則を使う意味です。

広い画面向けの規則を、この形で足していきます。ブレークポイントは、規則が切り替わる幅です。

モバイルファーストでは、何も付けない規則がスマホ向けです。まず、狭い画面で読みやすく書きます。

その上に、広い画面向けの規則を min-width で足します。狭い画面の規則を消さなくてよいので、数が増えても整理しやすくなります。

/* スマホは1列 */
.menu { display: grid; grid-template-columns: 1fr; gap: 8px; }

/* 幅が 600 px 以上なら2列 */
@media (min-width: 600px) {
  .menu { grid-template-columns: 1fr 1fr; }
}

/* 幅が 900 px 以上なら3列 */
@media (min-width: 900px) {
  .menu { grid-template-columns: 1fr 1fr 1fr; }
}

ラボの style.css に、メディアクエリがいくつあるか数えます。出力は、-> の右側に、幅か好みを書きます。

最後の1つは、幅ではありません。画面を暗い配色にしたいという、利用者の好みを聞く条件です。

docker exec jupyter python3 steps/breakpoints.py

ラボのページの Preview のリンクを、自分のブラウザで開きます。ブラウザの幅を狭くすると、レイアウトが切り替わる幅が見つかります。

ブラウザの開発者ツールには、スマホの画面を真似る表示もあります。見え方は、機種やブラウザで少し変わります。

この講座では、Web の技術だけでスマホ向けのアプリを作ります。ブラウザで動き、ホーム画面に追加でき、電波がなくても開けます。

エミュレーターやアプリストアなど、ネイティブアプリの道具は扱いません。ラボでは、習慣を記録する小さな Web アプリを使います。