第22章　ブラウザを動かして見る

Web は一枚の画像ではありません。画面幅、画面高、文字、言語、データ、通信、状態、利用者設定が変わるたび、同じ HTML でも見える関係が変わります。

本章では、完成スクリーンショットを眺める代わりにブラウザを動かします。ブレイクポイントの数字を先に選ばず、どの条件で、どの関係が、どう破綻するかを観察し、その後で CSS へ戻ります。

22.1 Web は一枚の画像ではない

幅 1280px の標準画面だけでは、短い高さ、キーボード表示、ズーム、長い名前、エラー、ローディングは見えません。デザインファイルのフレームは一条件の記録です。

観察には少なくともビューポート、画面密度、ズーム、文字サイズ、言語、フォント、データ、UI 状態、スクロール、フォーカス、入力方式を残します。すべてを同時に組み合わせるのでなく、リスクと利用状況から代表条件と境界条件を選びます。

22.2 幅と高さを連続的に変える

幅をデスクトップ、タブレット、モバイルの三点だけで確認すると、その間で起きる折返しや重なりを見落とします。幅を広い方から狭い方へ 1px ずつ動かし、最初に関係が変わる幅を記録します。自動で確認するなら 1px 刻み、手動なら変化付近を二分探索できます。

高さも動かします。ただし、レイアウト用のビューポートの高さを縮める試験と、実機のソフトウェアキーボード表示は同じではありません。キーボードが見える領域を縮めるか、レイアウト全体を変えるか、内容の上へ重なるかは環境で異なります。実機でフォーカス前後のレイアウト領域、見える領域、キーボードの入り込み、スクロールを別々に記録します。Cookie バナーやブラウザのツールバーも独立条件にします。

22.3 Breakpoint より先に、破綻条件を見る

「768px だから二列を一列にする」のではなく、カードのタイトルが三行になり、操作ボタンが隣のカードと揃わなくなる条件を記録します。その破綻を避ける手段の一つとしてブレイクポイントを選びます。

破綻には重なり、切り抜かれ、意図しない横スクロール、読順の逆転、操作対象の縮小、階層の消失があります。データ表、地図、タイムラインなど二次元関係を保つための局所スクロールは、目的と代替を確認して評価します。

22.4 ズームと文字サイズを変える

ブラウザズーム、文字だけを大きくする設定、OS の表示倍率は同じでありません。ズームはページ全体の見かけと CSS pixel との関係を変え、文字だけの変更はフォントに強く作用します。それぞれ別条件で確認します。

WCAG 確認は達成基準ごとに分けます。SC 1.4.4 は文字を 200%まで拡大する条件、SC 1.4.10 は 320 CSS px 相当の幅で二方向スクロールを要求しない条件（例外あり）、SC 1.4.12 は指定された行高、段落後、字間、単語間を上書きする条件です。ブラウザ、手順、例外、判定を記録します。そのうえで適合値を超える負荷条件として、文字だけを大きくする設定や OS の表示倍率も別に試します。

文字間隔の上書きでは、固定高のボタン、切り詰めたラベル、絶対配置したバッジが破綻しやすい場所です。WCAG の数値は適合確認の条件であり、その値だけで十分なデザインを保証しません。

22.5 長い名前、長い URL、翻訳された文章

「田中」の代わりに長い複合姓、短い商品名の代わりに説明的な名称、英語の代わりにドイツ語や日本語を入れます。空白のない URL、長い数字、絵文字も対象言語に応じて用意します。右から左へ読む言語では、文字を差し込むだけでなく、文書またはコンポーネントへ正しい dir を設定し、数字・URL の混在、論理プロパティ、アイコン、DOM 順／見た目の順／フォーカス順を確認します。

Lorem ipsum は長さを見る一助ですが、語の区切り、意味、数字、固有名詞のリスクを再現しません。本番に近い匿名データと極端なデータを分けます。安易に省略記号で隠す前に、全文へ到達できるかを確認します。ホバーだけのツールチップやアクセシブルネームだけを万能解にしません。キーボード、タッチ、スクリーンリーダー、拡大時に知覚・操作でき、フォーカスを失わず閉じられる表示、詳細ページ、常時折返しなどを文脈に応じて選びます。

22.6 空、ローディング、エラー、満杯の状態

0 件、1 件、通常件数、上限件数を並べます。ローディングは短時間、長時間、部分成功、リトライを分けます。エラーも入力検証、権限、タイムアウト、競合で回復方法が違います。

状態を URL パラメータや状態切替で再現できるようにし、スクリーンショットだけでなく DOM、アクセシビリティツリー、ネットワーク、フォーカスを記録します。ランダムなデータに頼ると同じ破綻を再確認できません。

22.7 Flexbox、Grid、Intrinsic Web Design

画面を見てから実装へ戻ります。Item が折り返すなら、固定幅を増やす前に min-content、max-content、min-width:auto、Flex shrink、Grid track を確認します。

Intrinsic な設計は、内容と利用可能空間に応じてブラウザが配分できる余地を残す考え方です。しかし自動レイアウトへ任せれば意図が不要になるわけではありません。読順、最小幅、優先順位、例外を決めます。

22.8 min()、max()、clamp() と Container Queries

clamp(minimum, preferred, maximum) は計算値を範囲内に保ちます。境界値の根拠は、文字、Container、読みやすさ、表現意図から決めます。関数名が自動的に正解を選ぶわけではありません。

Container query は、同じカードがメイン列とサイドバーへ置かれるような場合に、ビューポートでなくコンテナの inline size へ応答できます。クエリコンテナの選択、containment、入れ子のクエリ、フォールバックを確認します。Media query と併用して構いません。

22.9 一つのレスポンシブ手法を正解にしない

Media query、Container query、Flex wrap、Grid auto-fit、Fluid value、横スクロールにはそれぞれ役割があります。一つの技法を新しい／古いの序列へしません。

変化するものは何か、誰がどの環境で使うか、コンポーネントの配置文脈、ブラウザ対応、保守性、アクセシビリティから選びます。技法の名前でなく、破綻条件と副作用を比較します。

22.10 問い――最初に壊れるのは、どこで、なぜか

問い

商品カードのグリッドを 1280px から 320px まで縮めます。どこで何が最初に壊れますか。

答えの例

長い日本語の商品名を入れ、Chrome のバージョン、ズーム 100%、フォント読み込み完了を記録して観察します。この教材用の例では、コンテナの inline size が 286px 未満になると価格と在庫バッジの境界が交差するようにしています。286px は一般的な閾値でも利用者測定値でもありません。ビューポート幅はコンポーネントの配置で変わるため、原因条件をコンテナ幅で記録します。

価格を省略せず、バッジ文言、フォント、データを固定し、見出し行を折返し可能にします。286px 付近を 1px ずつ動かし、重なりが消え、DOM 順とフォーカス順が変わらないことを確認します。別仮説は長いバッジ文言と min-width:auto です。

別の答え方

カードを一列へ変えるより、サイドバー配置ではコンパクト版を使う方が目的に合うかもしれません。Container query 案と内容短縮案を別々に比較します。

別題――幅以外の破綻

幅 390px では正常なチェックアウト画面で、ソフトウェアキーボードを表示すると送信ボタンへ到達できないという報告があります。何を記録しますか。

答えの例

実機とブラウザバージョン、入力欄、フォーカス前後のレイアウト領域と見える領域、キーボードが重なるのか縮めるのか、スクロール位置、固定フッターの矩形、セーフエリアを記録します。単にビューポートの高さをキーボード分だけ減らしたデスクトップ上の再現は別の証拠です。フッター固定を外す案、dvh を使う案、フォーカス時だけスクロール余地を作る案を一つずつ比較し、ボタン到達、内容の遮蔽、フォーカス移動、キーボード再表示を確認します。

よくある考え方

高さを 100vh から 100dvh へ変えれば直ります。

注意点

キーボードの挙動、固定要素、スクロールコンテナ、ブラウザ差を確認しておらず、一つの単位を万能解にしています。

よくある考え方

768px にブレイクポイントを追加します。

注意点

破綻したコンポーネントの実寸、内容、状態との関係がなく、別配置では同じブレイクポイントが効かない可能性があります。

セルフチェック

• 幅と高さを連続的に変えた
• ズーム、文字サイズ、文字間隔を別条件で見た
• 空状態から満杯、ローディング、エラーを再現した
• ビューポート幅でなく破綻した関係を記録した
• CSS 技法を唯一の正解にしていない

参考

• W3C, CSS Containment Module Level 3, §4 — Container query の正式仕様です。
• W3C, CSS Values and Units Module Level 4, §10.2 — min()、max()、clamp() の定義です。
• W3C, WCAG 2.2, SC 1.4.4、1.4.10、1.4.12 — Resize text、Reflow、Text spacing の適合条件です。