狭い画面でも表の比較軸とページ位置を保つ

解決する問題

狭い画面で列や現在ページが欠け、値の比較対象と結果内の位置を見失う。

発生条件

• 複数列を比較する表形式データ。
• 複数ページに分割された結果一覧。

原因候補

• 列を無条件に非表示へしている

  比較に必要な値へ到達できない。

• ページ境界でも同じ移動操作を有効にしている

  移動できない理由と現在位置が分からない。

推奨判断

表の意味構造を維持した内部横スクロールと、現在位置・総数・境界状態を示すページ操作を組み合わせる。

修正手順

1. 比較軸を固定する

   captionとheaderを保ち、列削除ではなく内部スクロールを選ぶ

   期待する結果: すべての値に到達できる。

2. スクロール領域を示す

   キーボードfocusと補足文で横方向に閲覧できることを伝える

   期待する結果: マウス以外でも列を確認できる。

3. ページ境界を制御する

   現在位置を文章で示し、先頭と末尾の不要操作を無効にする

   期待する結果: 誤操作せず結果内を移動できる。

失敗例

• 狭幅で重要列を削除する

  起こること: 比較結果が端末幅で変わる

  代わりに: 表内部で全列を閲覧可能にする。

• 現在ページを色だけで示す

  起こること: 位置を読み取れない

  代わりに: 数値と現在状態を文章でも示す。

検証方法

• 320pxで表を操作する

  ページ全体ではなく表領域だけが横に動く。

• キーボードで表へ移動する

  focusが見え、横方向の値へ到達できる。

• 先頭と末尾ページを表示する

  不可能な方向だけが無効になる。

関連レシピ