Web blog WEBブログ

スマートフォン表示で、画面に表示しきれないtableを横スクロールさせる方法

2020.06.05

こんにちは。コーダーの兼山です。

コーディング時にtableで表を組み込む際、レスポンシブコーディングなどでのスマートフォン表示時に、表のレイアウトによっては表の全てを表示しきれず、コンテンツが横にハミ出てしまうことがあります。

スマートフォンで表を見る際も、ユーザー側の見え方を考慮する必要があります。
そこで、tableで表を組みこんだ際、横へスクロールさせることで表を見やすくする方法を紹介します。

CSSだけで横スクロールを再現できます

tableタグを、横スクロール用のdivタグで囲み、スクロールさせる方法です。

横スクロール用に指定したdiv(class=”table-scroll”)タグへ、スクロールの装飾を加えます。

①  tableをスクロールさせるために、.table-scrollへ「overflow: auto;」を追加します。

② 「white-space: nowrap;」で、table内のセルのテキスト折り返しを禁止します。

③  .table-scrollへ疑似要素を利用し、スクロールバーの装飾をします。
::-webkit-scrollbar
スクロールバー全体の指定
::-webkit-scrollbar-track
スクロールバーの両端にある矢印以外を指定
::-webkit-scrollbar-thumb
スクロールボックス(スクロールバーの動く部分)を指定

javascriptで、よりユーザーに伝わりやすくする

JavaScriptの『ScrollHint』というライブラリがあります。
ユーザーに横にもコンテンツがあることや、スマートフォンの操作に不慣れな方へ操作を伝えるのに有効です。
スクロール後はアイコンが消えるので邪魔になりません。

URL:https://appleple.github.io/scroll-hint/

※ 動きを再現するには、上記デモの [ Rerun ] をクリックしてください。

①「Download」から、scroll-hint-master.zipを入手します。

② scroll-hint-master.zip内の、scroll-hint.cssとscroll-hint.jsを任意の場所に設置します。

③ Scriptの記述は、上記デモを参考にしてください。

オプション
名前 デフォルト値 説明
remainingTime -1 スクロールヒントアイコンを非表示にするタイミング (ms)
scrollHintBorderWidth 10 シャドウボックスのボーダー幅
enableOverflowScrolling true iOSの場合にスムーズなスクロールになるようにCSSのプロパティを追加する
suggestiveShadow false 要素がスクロール可能なときにアイコンの他に影を表示する
applyToParents false 親要素にJavaScriptを適用する
i18n.scrollable scrollable スクロールのメッセージテキストを変更できます

他、オプションは、ScrollHint サイトの「Options」をご覧ください。

まとめ

スマートフォンでのユーザビリティを考慮したtable表示を紹介しました。
table内の情報量が多く、レイアウトが不自然になってしまう場合など、ぜひ活用してください。

ご相談・カスタマイズご依頼

弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア

無料相談窓口