レスポンシブ
切り替える幅は、機種ではなく、内容が壊れるところで決めます。機種は増え続けますが、内容の壊れ方は変わりません。
図の中身を文字で読む
- 幅が変われば、列数が変わる 機種ではなく「内容が破綻する幅」でブレークポイントを決める
- 375px 768px 1280px
- repeat(auto-fit, minmax(16rem, 1fr)) なら
- メディアクエリなしで列数が変わる
- @media (min-width: 48em) px ではなく em。利用者の文字サイズ設定に追従する
- メディアクエリとコンテナクエリ
- メディアクエリ＝画面全体の幅を見る。ページの骨格に使う。
- コンテナクエリ＝親要素の幅を見る。同じカードが本文でもサイドバーでも正しく振る舞う。部品に使う。
ひと目で#
- レスポンシブ
- 1つの実装であらゆる画面幅に対応する。可変グリッド、可変画像、メディアクエリの3点
- ブレークポイント
- 配置を切り替える幅。機種ではなく、内容が破綻する幅で決める
- モバイルファースト
- 狭い画面から設計する。優先順位を決めざるを得なくなる
- メディアクエリ
- 画面全体の幅を見る。ページの骨格に使う
- コンテナクエリ
- 親要素の幅を見る。部品に使う
- dvh
- モバイルでアドレスバーの出入りに追従する、高さの単位
使い分け#
| こういうとき | 使うもの |
|---|---|
| 列の数そのものが変わる | ブレークポイント（メディアクエリ） |
| 幅、余白、見出しの大きさが連続的に変わればよい | clamp() |
| 列の数を自動で変えたい | repeat(auto-fit, minmax(16rem, 1fr)) |
| 同じ部品が本文にもサイドバーにも置かれる | コンテナクエリ |
| 全画面のヒーロー | 100dvh。100vh ではない |
| 利用者の設定（明暗、動き）に対応する | メディア特性（prefers-*） |
間違えやすいところ#
- ブレークポイントを px で指定する利用者の文字サイズ設定に追従しない。em を使う
- 特定の機種の幅に合わせる機種は増え続ける
max-widthのメディアクエリで書くそれはデスクトップファースト。min-widthで広げていく100vhを全画面に使うモバイルで高さが跳ねる100vwを全幅に使うスクロールバーの幅が含まれ、横スクロールが出る- 375px での確認を省くもっとも壊れやすい幅
- ブレークポイントを増やしすぎる3つ前後が実用的
機種の幅で切ると、確認していない幅が点と点のあいだに残ります。ブラウザの幅をゆっくり縮めて、最初に読みにくくなった所を分岐点にします。
図の中身を文字で読む
- ✕ 機種の幅で切る ○ 内容が壊れる幅で切る
- iPhone・iPad・ノートの実寸に合わせた3点 3列が窮屈になった所・行長が伸びきった所
- 375 768 1024 カードが2列に 脇が入る
- 見えている範囲 810px どの幅でも中身が読める状態が続く
- で崩れる 列数と余白は clamp と auto-fit で連続的に変わる
- 確認していない幅が、点と点のあいだに残る。 375・768・1280 は確認する幅であって、分岐点ではない。
- 機種が増えるたびに、切る場所を足すことになる。 分岐は3つ前後で足りる。em で書けば文字サイズ設定にも追従する。
- 切る場所の見つけ方: ブラウザの幅をゆっくり縮め、最初に「読みにくい」と感じた所で止めて数値を読む。
- その幅の少し手前が分岐点になる。機種名は最後まで出てこない。
直す例#
架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。
例に使うのは、道具店のトップページを、1280px と 375px で並べて撮ったものです。縮尺は同じ 80% にしてあります。
広い画面では、ヒーローが見出しと写真の2列、新着の道具が3列です。狭い画面では、ヒーローが縦に積まれ、商品は1列になります。変わったのは列数と組みだけで、文字の大きさは変えていません。 見出しは両方とも同じ級数です。
狭い画面向けに文字を小さくすると、読みやすさが落ちるうえに、利用者の文字サイズ設定とも噛み合わなくなります。狭いときにやることは、縮めることではなく 流し直すこと です。
切り替える幅は、機種の実寸からは決めません。ブラウザの幅をゆっくり縮め、3列が窮屈になった所・脇の列が入らなくなった所で止めて、その数値を読みます。この店では、商品が2列に落ちる幅と、ヒーローが積まれる幅の2点だけでした。
375px と 320px は、分岐点ではなく 確認する幅 です。分岐を増やすほど、確認していない幅が点と点のあいだに残ります。
確認する#
- 375px と 1280px で見出しの級数が同じ（狭い画面のために文字を小さくしていない）
- 320px で横スクロールが出ず、
100vwを使った要素がない - ブレークポイントが
emで書かれ、3つ前後に収まっている
使えるパターン#
このページで扱う語#
このページで扱う語を並べる本文では太字7 語
語の名前から引くなら用語索引へ。
- レスポンシブWebデザイン
- 1つの HTML と CSS で、あらゆる画面幅に対応する設計手法。可変グリッド・可変画像・メディアクエリの3要素で構成される。
- 可変レイアウト
- 幅を相対値で指定し、画面幅の変化に連続的に追従するレイアウト。
- ビューポート
- ブラウザがページを表示している矩形の領域。CSS の `vw` や `vh` はこの領域を基準にする。
- アダプティブデザイン
- あらかじめ用意した複数の固定レイアウトを、画面幅に応じて切り替える設計手法。
- アスペクト比
- 幅と高さの比。16:9、4:3、1:1 のように表す。
- セーフエリア
- 画面のうち、ノッチやホームインジケーターに隠されず、確実に表示・操作できる領域。
- clamp
- 最小値・推奨値・最大値の3つを1行で指定し、値を範囲内に収める CSS 関数。
この話が要る場面#
このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。
固定幅の要素か、はみ出す表か画像。幅375pxで開いて、右端を越えている要素を特定する。
このコードで動いている見本です
端末名で決めない。中身が崩れる幅で決める。375・768・1280は確認する幅であって分岐点ではない。
このコードで動いている見本です
同じHTMLで並びを変えるほうが保守が楽。別々に作ると必ずずれる。
このコードで動いている見本です
この場面のほかの困り事と、そのまま貼れる部品は余白と幅を決めるにまとめてある。逆引きには全188件。
fluidを試す#
この値は作業台で決められます。和文の予約ページに載せて、幅と明暗を替えて確かめてから CSS を持ち帰る: 字と余白と幅
余白か文字サイズを clamp で連続的に変えます。ブレークポイントを増やさず、幅に応じて伸び縮みします。
この道具は JavaScript で動きます。