WEBシステム開発・デザイン制作などすべての作業を一貫してご提供しております。(大阪・東京近辺)

ユーザビリティUP!:マウス操作でテーブルセルにハイライト効果

データの内容が複雑である場合や、データ量が多い場合にはtableタグを使った表組みによって表現すること多くなります。主に、thタグとtdタグの色分けや、罫線などを利用して、ユーザーに分かり易い表現目指しますが、さらにユーザービリティを意識した、マウス操作によるセルのハイライト効果を追加してみよう!

まず、”Welcome to Tablecloth”にアクセスして、右上ボタン「Download Tablecloth」からファイルをダウンロードしよう!ファイルダウンロード・解凍したら、tableclothファイルの中にある「tablecloth.css」と「tablecloth.js」を外部ファイルとして読み込めは動作します。

“Welcome to Tablecloth”
cssglobe.com/lab/tablecloth/


このTableclothの特長としては、class指定やid指定を必要とせず、全てのtable要素に効果が適応される為、HTMLには非常にシンプルな記述で良く、「tablecloth.css」の中を変更すれば、表のデザイン、マウス操作時のアクションなどをカスタマイズすることができる点にあります。
さらに、特定の表のみに適応させたい時は、tableにclass指定を行い、CSSのセレクタにClass名を追加すれば、OK!