カラム数の多い横長のテーブルを横スクロール表示して、スクロールヒントを表示する

2023.05.08(Mon)

Web制作

1 はじめに
2 デモ
3 必要なファイルをダウンロードして読み込む
4 HTMLでテーブルを作成
5 スクリプト
6 css
7 まとめ

はじめに

コンテンツ量の多いテーブルを組む時にどのように表示したらユーザーにとって見やすいのか、特にスマホで見る時は画面の横幅がPCと比べ絶対的に狭いのでテーブルの部分だけ横にスクロールさせるという方法があります。

そんな時に「横スクロールして見てね」というアナウンスを表示させる便利なJavaScriptのライブラリがありますので、これを使用するとよりユーザーフレンドリーなテーブル表示ができます。

デモ

まずはデモをご覧ください。

カラム1	カラム2	カラム3	カラム4	カラム5	カラム6	カラム7
行1	テキストテキストテキスト	テキストテキストテキスト	テキストテキストテキスト	テキストテキストテキスト	テキストテキストテキスト	テキストテキストテキスト
行2	テキストテキストテキスト	テキストテキストテキスト	テキストテキストテキスト	テキストテキストテキスト	テキストテキストテキスト	テキストテキストテキスト
行3	テキストテキストテキスト	テキストテキストテキスト	テキストテキストテキスト	テキストテキストテキスト	テキストテキストテキスト	テキストテキストテキスト

それでは作成する手順を説明していきます。

必要なファイルをダウンロードして読み込む

まずはライブラリの公式サイトから必要なファイルをダンロードします。

ScrollHint公式サイト

ダウンロード後、zipファイルを解凍し、「css」フォルダのなかから、「scroll-hint.css」を、jsフォルダの中から「scroll-hint.js」もしくは軽量版の「scroll-hint.min.js」を取り出します。

取り出したファイルを自サイト<head>タグ内読み込みます。

<link rel = "stylesheet"
  href = "css/scroll-hint.css" >
<script src = "js/scroll-hint.js" ></script>

HTMLでテーブルを作成

// HTML
<div class="js-scrollable-wrap">
  <table class="js-scrollable">
    <tbody>
      <tr>
        <th>カラム1</th>
        <th>カラム2</th>
        <th>カラム3</th>
        <th>カラム4</th>
        <th>カラム5</th>
        <th>カラム6</th>
        <th>カラム7</th>
      </tr>
      <tr>
        <th>行1</th>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
      </tr>
      <tr>
        <th>行2</th>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
      </tr>
      <tr>
        <th>行3</th>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
        <td>テキストテキストテキスト</td>
      </tr>
    </tbody>
  </table>
</div>

<table class="js-scrollable">タグを<div class="js-scrollable-wrap">で囲ってあげます。

スクリプト

// JS

<script>
    window.addEventListener('DOMContentLoaded', function() {
        new ScrollHint('.js-scrollable', {
            i18n: {
                scrollable: 'スクロールできます'
            }
        });
    });
</script>

使えるオプションは以下の通りです。

オプション名	デフォルト値	オプション説明
suggestClass	is-active	要素がスクロールインされたときに追加されるクラス名
scrollableClass	is-scrollable	要素がスクロール可能な場合に追加されるクラス名
scrollableRightClass	is-right-scrollable	要素が右スクロール可能の場合に追加されるクラス名
scrollableLeftClass	is-left-scrollable	要素が左スクロール可能の場合に追加されるクラス名
scrollHintClass	scroll-hint	要素に追加するクラス名
scrollHintIconClass	scroll-hint-icon	アイコンに追加するクラス名
scrollHintIconAppendClass	scroll-hint-icon-white	アイコンに追加するクラス名
scrollHintIconWrapClass	scroll-hint-icon-wrap	アイコンのラッパーに追加するクラス名
scrollHintText	scroll-hint-text	テキストに追加するクラス名
remainingTime	-1	スクロールヒントアイコンを非表示にするタイミング (ミリ秒)
scrollHintBorderWidth	10	要素のシャドーボックスの境界幅
enableOverflowScrolling	true	iOS を使用し、値が true の場合、 -webkit-overflow-scrolling プロパティが要素に追加されます
suggestiveShadow	false	要素がスクロール可能な場合、暗示的な影を表示する
applyToParents	false	JavaScript を親要素に適用する
offset	0	スクロール可能の基準を変更できます
i18n.scrollable	scrollable	ここからスクロール可能なテキストを変更できます

css

CSSは最低限下記の内容を書いておけばOKです。

// CSS

    .js-scrollable-wrap {
        white-space: nowrap;
    }

    .js-scrollable {
        word-break: break-all;
        table-layout: fixed;
        display: block;
        overflow: scroll;
    }