(HTML,CSS,JavaScript)表の特定の列だけを抜粋して表示できるようにする方法ウェブ上に掲載している表組み(テーブル)でも、閲覧者が列の「表示・非表示」を切り替えられるようにしてみましょう。不要な列を非表示にできると、列数の多い表でも列幅が狭くなりすぎるのを防げ、見やすさを維持できます。項目数の多い表を見る際は、自分の目がどこを見ているのかを把握し続けるのが大変です。油断すると、異なる行を見てしまっていたりします。そのような大きな表では、自分が必要としている(見たい)情報は一部分だけのこともあります。その表が表計算ソフト上に表示されているなら、不要な列を非表示にして、見やすく調整するでしょう。そのような「列の非表示」機能を、ウェブ上に掲載した表(テーブル)でも簡単に実現するスクリプトがあります。列数の多い表を、横幅の狭いウインドウで閲覧すると、列の横幅が狭くなって読みにくくなる。「列数の多い表」が掲載されているウェブページを、「横幅の狭いウインドウ」で閲覧すると、右図のように各列の幅が狭くなってしまい、読みにくくなります。そこで便利なのが、「表示する列数」を制限するスクリプトです。このようなスクリプトを使うと、描画領域の幅に合わせて列数を(重要でない項目から順に)自動的に削減してくれます。下図の右端にあるように「列名を列挙したチェックボックス」を提供し、「どの列を表示するか」を閲覧者が選択できるようにもなります。一部の列を非表示にすることで、表が読みにくくなるのを防ぐ。上図は、列の非表示機能を提供するスクリプト「MediaTable」を使って表を表示した例です。このスクリプトを使うことで、描画領域の幅や閲覧者の希望に応じて「表示する列数」が減らせ、必要な情報だけを抜粋した小さな表にできます。JavaScriptで動作するため、ページの遷移なく、その場で表示が切り替わるので、待ち時間のストレスは一切ありません。情報が探しやすくなる上に、狭い画面での閲覧時にも有用このスクリプトを使って、「表示する列」を閲覧者自身が選択できるようにしておくことは、大きな表を掲載する際にとても便利です。それほど大きくない表であっても、画面幅の狭い環境で閲覧される際には便利です。単一のHTMLで様々な画面サイズに対応させる「レスポンシブ・ウェブデザイン」を採用したページに表を掲載する際にも、便利に活用できます。表を展開することで読みやすさを確保する方法もある。stacktable.jsの使い方」は、「表が見にくくならないように展開する」方法でした。それに対して今回ご紹介するスクリプトの場合は、「表が見にくくならないように列数を減らす」方法です。これら両方のアプローチを知っておくと、表の目的に応じて表示方法を選択できて便利でしょう。両方の表示方法を、必要に応じて活用してみて下さい。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。