BLOG

ブログ
  • Web制作

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

はじめに

コンテンツ量の多いテーブルを組む時にどのように表示したらユーザーにとって見やすいのか、特にスマホで見る時は画面の横幅が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

table の場合

// 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">で囲ってあげます。

img の場合

// HTML
<div class="js-scrollable-wrap">
    <div class="js-scrollable">
        <img src="images/sample.png" alt="" />
    </div>
</div>

スクリプト

// 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です。

table の場合

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

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

img の場合

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

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

.js-scrollable img {
    width: 600px;
    max-width: none;
}

まとめ

これでスマホでも見やすいテーブルが完成しました。

デモ

テーブルの横スクロールは場合によっては逆に見づらくなってしまうケースもありますので、ケースバイケースで使用しましょう。