全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
スマートフォン表示で、画面に表示しきれないtableを横スクロールさせる方法
2020.06.05
※この記事は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内の情報量が多く、レイアウトが不自然になってしまう場合など、ぜひ活用してください。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
