マトリクス型テーブルの行列セルハイライト

note

複数の行列を持つマトリクス型テーブルで、各セルにマウスホバーすると、その行列のセルがハイライトされるUIデザインです。（モバイルデバイスではタップで動作します）

行列を含む各セルのハイライトは、ホバースタイルを適用することで表現しています。マークアップの構造によって実装の複雑さは異なりますが、列のセルをハイライトさせる場合には、擬似クラスやセレクターの使い方に工夫が必要になります。列数があらかじめ決まっているという条件であればCSSのみで実装することが可能です。

マトリクス型テーブルはデータ量が多く、複雑に見えがちですが、行列をハイライトさせることで関連するセルの情報を参照しやすくなると同時に、正確にデータを読み取ることができるため、ユーザビリティの向上に役立ちます。