ScrollHintの使い方とオプションやCSSの設定。
テーブルの横スクロール時にヒントを表示させる方法

  • 2024.01.29

JavaScript・jQuery

ScrollHintの使い方とオプションやCSSの設定。テーブルの横スクロール時にヒントを表示させる方法

今までに何度かテーブルの横スクロールについて解説してきました。
特に今の時代はスマホが圧倒的に主流となったこともあり、スマホでテーブルで見せるシーンなどでは非常に活用しているという人も多いと思います。

そんなテーブルの横スクロールですが、唯一（？）のデメリットと言えるのが、パッと見ただけだとそこがスクロールできるかがわかりにくいという難点があります。

パソコンだとスクロールバーが大きく出てくれるのでわかりやすいのですが、スマホの画面だとただでさえ小さいスマホ画面に、スクロールバーがとても小さく隠れていたりもするので、ユーザーはスクロールできずに見逃してしまうという懸念点があるのです。

今回はそんな時に活用したい、テーブルが横スクロールできることを示す「ScrollHint」についてその使い方やオプションなど含めて見ていきたいと思います。

実際のScrollHintのデモと特徴

まずは実際に横スクロールのヒントと言っても、ピンと来ない方もいるかもしれませんので、ScrollHintがどんなものかというのを見ておいた方が良いかもしれません。

実際に表示した場合は下記のような感じとなります。
ただの横スクロールだけの設定だと、このヒントは出てきませんが、設定をするとこれだけで横スクロールができるというのがすぐわかりとても便利になります。

THの見出しテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
THの見出しテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
THの見出しテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

主な特徴

主な特徴としては、何よりも使い方がシンプルで簡単という点です。
導入に複雑な設定などが必要だとなかなか広まりませんが、これは導入がとても簡単ということでかなり多くのサイトで今では使われているように感じます。

また、それ以外の主な特徴としては

  • jQuery不使用
  • 非常に軽量
  • カスタマイズなども簡単
  • CDN利用でさくっと使える

といったところなどが挙げられます。
特にjQueryを使わずに単体で使えるという事もあり、jQueryを使ってないサイトで、これだけのためにjQuery使うのは…と悩まずに使えてとても軽いというのは大きなメリットと言えます。

実際に導入すると上記のデモのように見た瞬間にスクロールできるなというのがわかりますので、ユーザーにとってもメリットが大きいので、実際の導入の仕方について見ていきましょう。

ScrollHintの導入方法

それでは導入する方法を見ていきましょう。
非常に簡単で、とてもシンプルなのでサクッといけます。

導入方法としては、3つのパターンが挙げられますが実際に多く使われるのは下記の中の1つ目のCDNを使っての利用かなと思いますので、そちらをメインで解説していきます。

  • CDNを使う
  • 公式サイトからファイルをダウンロードして利用
  • npm, yarnでインストール

CDNを使う

CDNを使って導入する場合は、下記の2つのタグをHTMLの<head>タグに貼り付けましょう。

<link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script>

これを貼り付けるだけです。
CSSもJSも両方とも、途中のバージョン記載の箇所が@latestという記載になっていますが、こう記載しておくと最新版を読み込んでくれるようになります。

あまり無いとは思いますが特定のバージョンを利用したいという場合は下記のように@latestのところにバージョン名を記載すればOKです。

<link rel="stylesheet" href="https://unpkg.com/scroll-hint@1.2.1/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@1.2.1/js/scroll-hint.min.js"></script>

公式サイトからファイルをダウンロードして利用

公式サイトから、ファイルをダウンロードして自分のサーバーにアップしてそれを読み込むという形式でも使う事は可能です。CDNなどがない場合はこのパターンが多いので慣れている方も多いとは思います。

ScrollHintの公式サイトへアクセスし、右上かメインビジュアル内にある「Download」をクリックすると即座にzip形式にてファイル一式がダウンロードされます。それらを解凍すると大量のフォルダとファイルがありますが、実際に使うのは下記の通りです。

  • css – scroll-hint.css
  • js – scroll-hint.min.js

この2つのファイルをサーバーにアップして、それを読み込めばOKです。（下記は一例です）

<!DOCTYPE html>
<html lang="ja">
<head>
  <link rel="stylesheet" href="/assets/css/scroll-hint.css">
</head>
<body>
  ～～～
  <script src="/assets/js/scroll-hint.js"></script>
</body>
</html>

npm, yarnでインストール

npm、yarnでインストールする場合は下記のコマンドでインストールできます。

//npm
npm install scroll-hint --save

//yarn
yarn add scroll-hint

ScrollHintの使い方・設定

導入が終われば、あとは使い方を覚えるだけです。
非常にシンプルで簡単に導入できるので、さくっとやっていきましょう。

ScrollHintを使う上で必要になるのは、HTMLの設定とJavaScriptの設定になりますので、それぞれ見ておきましょう。

HTMLで必要になるコード

まずはHTMLを見ていきましょう。
スクロールしたいテーブルを囲うdivなどの枠が必要となります。

<div class="js-scrollable">
<!-- 横スクロールさせるコンテンツ -->
</div>

上記例では、公式サイトのデモのクラス名と同じ.js-scrollableとしていますが、ここは自由に変えても大丈夫です。ただしJavaScript側の設定と合わせる必要があるのでその点だけ注意しましょう。

実際の例としては、下記のようになります。

<div class="js-scrollable">
  <table>
    <tr>
      <th>THの見出し</th>
      <td>テキストテキストテキストテキスト</td>
      <td>テキストテキストテキストテキスト</td>
      <td>テキストテキストテキストテキスト</td>
      <td>テキストテキストテキストテキスト</td>
    </tr>
    <tr>
      <th>THの見出し</th>
      <td>テキストテキストテキストテキスト</td>
      <td>テキストテキストテキストテキスト</td>
      <td>テキストテキストテキストテキスト</td>
      <td>テキストテキストテキストテキスト</td>
    </tr>
    <tr>
      <th>THの見出し</th>
      <td>テキストテキストテキストテキスト</td>
      <td>テキストテキストテキストテキスト</td>
      <td>テキストテキストテキストテキスト</td>
      <td>テキストテキストテキストテキスト</td>
    </tr>
  </table>
</div>

JavaScriptで必要になるコード

HTMLの準備ができたら、次はJavaScriptになります。
JavaScriptは驚きのたった1行書くだけで動いてくれます。

new ScrollHint('.js-scrollable');

注意点はHTMLのところでも書いた通り、.js-scrollableと記載しているところは、HTML側のクラス名と合わせるように注意するという点です。

これらで作ったのが、実際に最初でも見せたデモになりますが、下記のデモページでも確認いただけます。

デモページ

デフォルト状態だけでも十分に使える内容になっていますが、ScrollHintにはオプションも用意されているので、それらを使って微調整していく事も可能です。

ScrollHintのオプションやカスタマイズ

上記のデモでもわかるように、ScrollHintはだいたい見たらなんとなくイメージでどういうものかわかるように作られているため、デフォルト状態でそのまま使っても特に問題ないかもしれません。

とはいえオプションなどが用意されていて、より細かくサイトの仕様に合わせてカスタマイズできるようになっているため、オプションについて見ておきましょう。

主によく使われるオプション

公式サイトに使えるオプションの一覧が載っていますが、大きく分けると2種類あり、自動的に与えられるクラス名を制御するオプションと、動きや文言などの設定を変更するオプションで作られています。

自動的に与えられるクラス名を変更するのはよほどの使い方でない限りはそうそうないと思うので、実際には設定などの変更をするオプションを使うことになるので使うのは一部になります。

主によく使われる（使える）オプションとしては下記の通りです。
とはいえ、実際に一番使うのは最後のテキスト変更くらいで、他はデフォルトのままでも十分かなとは思います。

オプション名デフォルト値説明 / 解説
remainingTime-1アイコンを非表示にするまでの時間の設定（ミリ秒 ※-1は自動非表示の設定をしない）
scrollHintIconAppendClassscroll-hint-icon-whiteヒントのアイコンに追加される別のクラス名（このオプション設定で背景カラーを白に変更）
scrollHintBorderWidth10シャドーが有効な場合、何pxスクロールしてシャドーを表示するかの指定
suggestiveShadowfalseスクロール可能な場合、アイコンの他にもシャドーを表示
i18n.scrollablescrollableアイコン下のメッセージの変更

オプションの使い方

ScrollHintでのオプションを指定する方法は下記のように記載していきます。
各オプションは,カンマで区切りつつ、テキスト変更のオプションのみ{}を使っての設定となります。

new ScrollHint(".js-scrollable", {
  オプション名: '値',
  オプション名: '値',
  i18n: {
    scrollable: '表示するテキスト'
  },
});

実際どういうオプションかというのは、それぞれデモページを用意してみたので、確認してみてください。

アイコンを3秒後に消える設定

new ScrollHint('.js-scrollable', {
  remainingTime: '3000'
});

あまり使う必要があるオプションかはわかりませんが、仮に使う際にはミリ秒の設定のため、○秒としたい場合は、1,000単位で書く必要があります。デフォルトの-1のままだと、自動で消える事はありません。

デモページ

アイコン下のテキストを変更

new ScrollHint('.js-scrollable', {
  i18n: {
    scrollable: 'スクロールできます'
  }
});

デモページ

1点注意点としては、デフォルトのCSSのままだと9文字までしか入らないようになっていますので注意しましょう。変更したい場合CSSの.scroll-hint-iconのwidthとleftの値などを再設定して文字数が入るようにする設定があります。

例えば、下記はアイコンの背景を300pxに再設定して、文言も長くした場合になります。

.js-scrollable .scroll-hint-icon {
  left: calc( 50% - 150px );
  width: 300px;
}
new ScrollHint('.js-scrollable', {
  i18n: {
    scrollable: '横スクロールすることができます'
  }
});

デモページ

スクロールしたテーブルの左右にシャドウを付ける

new ScrollHint('.js-scrollable', {
  suggestiveShadow: true
});

横スクロールするとテーブルの端にシャドウが付く設定になります。
ただこれもデモを見てもらえるとわかりますが、テーブルのセルに背景色が設定されていると背景色の方がレイヤーとして上にきてしまうので、表示されません。背景色が付いてない時に設定できます。

デモページ

また、このシャドウが有効の時に合わせて使えるオプションにscrollHintBorderWidthがありますが、これはシャドウをどこから有効にするかというオプションになります。

デフォルトは10なので、端から10px以上離れたらシャドーを付けるという設定になっていますが、これを100と指定すると、端から100px離れた時にシャドーが付きます。逆にスクロールできるテーブルにシャドーを付けたい場合は-1を設定すると、常にシャドーが付きます。（ただし背景があると打ち消されます）

new ScrollHint('.js-scrollable', {
  suggestiveShadow: true,
  scrollHintBorderWidth: -1,
});

デモページ

アイコンを白背景にする

new ScrollHint('.js-scrollable', {
  scrollHintIconAppendClass: 'scroll-hint-icon-white'
});

これを指定することで表示するヒントのアイコン白背景・黒アイコンに変更できます。横スクロールの要素が黒やグレーの背景など、ダークカラー系の場合は、これらのオプションを指定すると見やすくなります。

デモページ

CSSの追記で、色味などは自由に変更できる

先ほども少し上で記載していますが、このアイコンはCSSで色々設定されているため、上書き設定をすれば、自由に書き換えることができます。

主に設定されているのが.scroll-hint-iconというクラスになり、下記のように設定されています。開発者モードで見ればわかりますが、下記の中のopacity: 0;は打ち消されています。

.scroll-hint-icon {
  position: absolute;
  box-sizing: border-box;
  top: calc(50% - 25px);
  left: calc(50% - 60px);
  width: 120px;
  height: 80px;
  padding: 20px 10px 10px 10px;
  text-align: center;
  border-radius: 5px;
  background: rgba(0, 0, 0, .7);
  opacity: 0;
  transition: opacity .3s;
}

色味などはここに上書き設定をすると色々変える事ができ、例えば見た目をいじって下記のように変更してみるとガラッと変えられますし、設定次第では自分のサイトのカラーなどにも合わせやすくなります。

.scroll-hint-icon {
  top: calc( 50% - 50px);
  left: calc( 50% - 150px);
  width: 300px;
  height: 100px;
  padding: 30px 10px 0px 10px;
  background: #009900;
}

デモページ

ScrollHintが表示されない時の確認事項

基本は上記のようにしていると問題なく動くのですが、たまにコードを組んだりしていくとあれ？出ないぞ？といった事が起こることもあります。

そんな時は、下記をちょっと確認してみましょう。

呼び出す順番の間違い

ScrollHintには、大元のJavaScriptのファイルと、設定のJavaScriptの2種ありますが、これをたまに逆の順番で呼び出してしまっているというケースがあります。

特にWordPressやSSIなどのインクルードなどを使って、共通テンプレートなどから色々とJavaScriptなどを呼び出したりしている場合、書く順番を間違えてしまい、先に設定ファイル、その後に大元のファイルと呼び出している場合もあったりするので、呼び出し順に注意しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css">
</head>
<body>
  ～～～
  <script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script>
  <script src="/assets/js/script.js"></script>
</body>
</html>

といった形になります。
もしくは、下記のようにdeferを付けておきましょう。

<script src="/assets/js/script" defer></script>

WordPressのテーマなどの設定によるミス

これも以外と多いのかもしれませんが、色々なところで配布されているテーマなどであれば、そのテーマにデフォルトで色々組み込まれたりしている事もありますので、その設定ミスというのも多いです。

ヒントが出ないという状況の時で、特に出るページと出ないページなどがあるといった時などで、WordPressで他の方が作ったテーマなどを使っている場合は、かなりの確率でそれらの設定の影響の可能性が高いですから、見直してみましょう。

applyToParents: trueのオプションを使っている

オプションの解説のところには書かなかったのですが、ScrollHintのオプションの1つにapplyToParentsというものが存在しています。このオプションはデフォルトはfalseになっていますが、trueを指定することもできます。

設定をすると、親要素が横スクロールするという事になってしまいます。

<div class="wrapper">
  <div class="js-scrollable">
    <table>
      ~~~
    </table>
  </div>
</div>

こういったHTMLがあった時に

new ScrollHint('.js-scrollable', {
  applyToParents: true
});

このようにオプションを指定してしまっていると、指定した親要素をスクロールさせるというオプションになるため、.js-scrollableの親要素の、.wrapperにスクロールするためのclassが付与される。という事になり、意図した動きをしなくなってしまいます。

公式サイトのオプションの解説のところが、なぜかこのオプションが指定されつつ、テキスト変更のオプションの解説になっているため、公式サイトのコードをコピペするとHTMLの組み方によってはうまく動作しないという罠に陥ってしまうのです。

まとめ

テーブルの横スクロールは便利な反面、使い方を誤るとユーザーがそこをスクロールできると気付かないという逆効果になってしまう事があります。

そうならないためにも、どこにどう使うかをしっかり考える事も必要ですが、しっかりとスクロールできますよという事を認知してもらうために、こういったビジュアル的に見てすぐ分かる要素を取り入れるというのは非常に大きいかと思います。

導入もとても簡単でCDNを使えばすぐ使えます。
基本的にデフォルト状態のままで使っても十分使えますし、日本語テキストに変えるくらいのオプションで実際の現場でも使えるようになってくるかと思います。

自分もテーブルを使って何かを見せる時で横スクロールを使った見せ方の時は実際の制作現場でも使っていますし、横スクロールをする場合はScrollHintの導入が必須と言っても良いと思っているくらいなので、ぜひ使えるようになっておきましょう。

記事のシェアにご協力お願いします

  • 2024.01.29

JavaScript・jQuery

この記事と類似テーマの記事

【CSS】table-layout: fixed;の使い方を解説。tableのセル幅のサイズ設定を均等割で同じにする
table-layout: fixed;でテーブルのセル幅のサイズ設定を同じにする
tableを横スクロールさせる際に一部のヘッダーを固定させて表示する方法
CSSでtableの横スクロール時に左側を固定してスクロールさせる方法
tableを横スクロールで表示する方法。CSSの実際のコード解説と使用時の注意点なども
【CSS】スマホで見る時にtableを横スクロールで表示させる方法とコード