第23章 DevTools で答え合わせする
画面の距離を見てすぐ DevTools を開くと、表示された数字を答えだと思いやすくなります。本章では先に予測し、その後で値と構造を確かめます。
DevTools は CSS の修正器だけではありません。画面から生まれた問いを、ボックスモデル、カスケード、レイアウト、状態、レンダリング、アクセシビリティツリーへ接続する観察道具です。同時に、人がどう感じ、使うかを直接測る道具ではありません。
23.1 値を見る前に予想する
「カード間は 24px、内側は 16px に見える」「タイトルの行高はフォントサイズの 1.4 倍ほど」と、対象、属性、概算、確信度を書きます。その後で DevTools を開きます。
外れても失敗ではありません。影を間隔と見誤った、透明な境界線があった、フォント指標が違った、サブグリッドで線が共有されたなど、見るレンズを更新できます。
23.2 ボックスモデルで距離の出所を探す
見えている空間は margin、padding、gap、行ボックス、トラックサイズ、配置から生じます。二要素間の距離を、一方の margin-bottom だけだと決めつけません。
境界矩形、ボックスモデル、親レイアウト、疑似要素を順に見ます。マージンの相殺、box-sizing、論理プロパティ、transform も記録します。重ね表示の色だけを覚えるのでなく、どの箱の辺と辺の間を測ったかを書きます。
23.3 Computed Style で最終結果を見る
Styles ペインには適用、継承、上書き、無効な宣言が並びます。Chrome の Computed ペインは、カスケード後のプロパティを探すブラウザ固有 UI です。どのルールとカスタムプロパティから来たかを展開して戻ります。
CSS には specified、computed、used、actual value という段階があります。さらに CSSOM の getComputedStyle() は互換性のためプロパティにより computed または used value を返す「resolved value」です。Chrome の Computed ペインという名称を CSS 仕様上の computed value と自動的に同一視しません。パーセント値や auto、フォント、transform、デバイス倍率を含む幾何情報、人の見えとも別です。
23.4 Grid／Flex の重ね表示で線と間隔を見る
Chrome DevTools では Grid の重ね表示でトラック、線番号、間隔を、Flex の重ね表示で主軸／交差軸、項目間の配分を見られます。見えない線を画面へ重ねると、揃いの由来を追いやすくなります。他ブラウザでは名称、表示、機能が異なるため、DevTools 一般の必須機能とは書きません。
重ね表示は説明用の真実の層ではなく、特定ブラウザバージョンの診断表示です。スクリーンショットへブラウザ、バージョン、設定、選択ノードを添え、色だけで線を区別しません。
23.5 CSS を一つ消し、値を一つ変える
宣言のチェックを一つ外し、画面のどこまで変わるかを見ます。gap を変えるならテキスト、データ、ビューポート、状態を固定し、変更前後の算出済みスタイルとスクリーンショットを保存します。
一つのプロパティでも複数の関係が変わります。line-height は高さ、ベースライン、折返し、隣要素の位置へ影響します。通常の一時的なローカル編集はページ再読込で失われ、テストも通っていません。ただし Overrides、Workspaces、IDE 連携など保存先を構成した場合はソースまたはローカルコピーへ残り得ます。保存構成と書込先を確認します。
23.6 状態を強制する
:hover、:focus、:focus-visible、:active を強制し、通常時とのスタイル差を確認できます。ただし、疑似クラスを強制することと、キーボードで実際にフォーカスが移動することは同じではありません。
無効、ローディング、エラー、ネットワーク失敗はアプリケーション状態や通信条件で再現します。CSS クラスを付けただけではイベント、ARIA、操作可能性、サーバー結果まで再現できません。
23.7 レンダリングとアクセシビリティツリーも見る
Rendering パネルで描画、レイアウトシフト、エミュレーション等を調べ、Network／Performance で時間変化を確認します。Chrome の Accessibility ペインでは役割、名前、状態、アクセシビリティツリー上の位置を見ます。Source Order Viewer、DOM ソース順、CSS による見た目の順序、キーボードフォーカス順、アクセシビリティツリー順、スクリーンリーダーの読み上げ／ナビゲーション順は別物です。
ツリーに正しい役割が見えることは重要ですが、スクリーンリーダーで理解・操作できた証明ではありません。キーボードと実支援技術でも確認し、人のタスクは第24章で観察します。
23.8 値からデザインを決めない
「間隔が 18px だから 16px へ丸める」「トークンにないので削除する」と、値だけで決めません。18px が画像の光学補正、フォント指標、ブランドリズム、外部ウィジェットとの整合から生じたかもしれません。
値の由来、役割、反復、例外、変更の副作用を調べます。トークンは判断を共有する道具で、画面より先に正解を出す表ではありません。
23.9 DevTools で分からないこと
DevTools では、利用者がどこで迷うか、文言をどう理解するか、ブランドをどう受け取るか、長期利用で学習するかを直接知れません。アクセシビリティツリーだけで読み上げ体験も決まりません。
実装上の事実、画面上の幾何情報、ブラウザ内部の診断、行動、発言、作者意図を別根拠として残します。道具の限界を知ることも、答え合わせの一部です。
23.10 問い――見えている差は、どの値から生まれたか
問い
フォームの二つのまとまりの間が 32px に見えます。どこをどう調べますか。
答えの例
以下は実測結果でなく、教材用の基準例の記入例です。ラベル、操作部品、まとまりのラッパー、親コンテナを安定したセレクターで選び、境界ボックス間を幾何情報で測る計画を立てます。見かけの 32px という予測が、.field 内 gap 12px、親 .form-fields の row-gap:20px、行ボックスのどれに対応するかを別記録で確認します。
親 row-gap だけを 20px から 28px へ変え、DOM、フォント、テキスト、ビューポートを固定します。基準実装後、まとまり間の境界ボックス差が期待どおり 8px 増えたかを確認します。幾何情報も読みやすさも現時点では未測定です。
別の答え方
距離ではなく、境界線と背景の共通領域がまとまりを作っている可能性もあります。間隔だけを変える前に背景を一時無効化した比較を別に作ります。
別題――状態とアクセシビリティツリー
送信ボタンへ aria-busy="true" を付け、DevTools に状態が表示されました。ローディング時のアクセシビリティは確認できたと言えますか。
答えの例
DOM 属性、算出されたアクセシブルな状態、アクセシビリティツリーのスナップショットは確認できます。しかしボタンがキーボードから操作可能か、状態がいつ読み上げられるか、二重送信を防ぐか、完了・エラーへ遷移するかは別根拠です。アプリケーションの画面条件で受付、処理、成功、失敗を再現し、キーボード操作、対象スクリーンリーダー／ブラウザの発話、イベント／ネットワークログを時系列で記録します。
よくある考え方
アクセシビリティツリーに正しく出たので対応完了です。
注意点
ブラウザからプラットフォーム API への公開候補を、支援技術による提示、操作、理解、タスク成功と同一視しています。
よくある考え方
Computed に 32px と出ているので、Margin は 32px です。
注意点
どの要素のどのプロパティか、箱の辺、親レイアウト、行ボックス、transform がありません。算出値と画面上の距離も同一ではありません。
セルフチェック
- 値を見る前に対象、概算、確信度を書いた
- Styles、Computed、幾何情報、重ね表示を区別した
- ローカル編集とソース変更を区別した
- 強制状態と実際の操作状態を区別した
- アクセシビリティツリーと支援技術の利用を同一視しなかった
- 値から目的と全体へ戻った
参考
- Chrome for Developers, “CSS features reference” — Styles、Computed、Grid／Flex tooling の公式資料です。
- Chrome for Developers, “Accessibility features reference” — アクセシビリティツリー、ARIA、ソース順と限界の公式資料です。
- Chrome for Developers, “Inspect mode” — 要素の寸法、色、フォント、アクセシビリティ情報を見る入口です。