WEBサイトのレスポンシブ化をする上で、スマホなどの画面幅が狭いデバイスには収まりきらないコンテンツがあることが多いです。
特に情報量の多い表（テーブル）などは、スマホの画面幅に収めるのはなかなか難しいですよね・・・。
そういった場合、CSSのoverflowプロパティで横スクロールを可能にすることができますが、ユーザーからするとスクロール可能か判断できず、見落としてしまいがちです。
そこで今回の記事では、横スクロール可能な要素にヒントを表示するJavaScriptライブラリ「ScrollHint」を紹介します！
このライブラリを導入することで、スクロール可能な要素には以下のようなヒントが表示されるようになります。
横スクロール可能な要素をアイコンとテキストで知らせてくれるので、ユーザビリティの向上にもつながりますね。
- jQueryは必要なし
- ファイルサイズが軽量
- 簡単にカスタマイズ可能
こういった特徴のライブラリですので、横スクロールが必要な要素がある場合は、是非導入してみてください。
ScrollHintの導入方法
ScrollHintはJavaScriptライブラリなので、使用するにはまずインストールする必要があります。
ここでは以下の3つの方法を説明していきます。
- CDNを使用する
- npm, yarnでインストールする
- ファイル一式をダウンロードする
それぞれの案件に最適な方法で導入してみてください。
導入方法1. CDNを使用する
CDNを使用する場合は、HTMLの<head>タグ内に、以下の2行を入れてください。
<link rel="stylesheet" href="https://unpkg.com/scroll-hint@1.1.10/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@1.1.10/js/scroll-hint.js"></script>これで導入は完了です。CDNを使用すると手軽に導入できるのがいいですね。
導入方法2. npm, yarnでインストールする
npmもしくはyarnを使用する場合は、以下の記述でインストールできます。
npm install scroll-hint --saveyarn add scroll-hint導入方法3. ファイル一式をダウンロードする
ScrollHintの公式ページの「Download」ボタンをクリックすると、ファイル一式をダウンロードできます。
zipファイルを解凍して、CSSとJavaScriptファイルをそれぞれ取得してください。
css→scroll-hint.css
js→scroll-hint.js(scroll-hint.min.jsでもOK)
あとはHTML上でそれぞれを読み込むことで完了です。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- CSS読み込み -->
<link rel="stylesheet" href="scroll-hint.css">
</head>
<body>
<!-- JS読み込み -->
<script src="scroll-hint.js"></script>
</body>
</html>以上で3通りの導入方法の解説は終わりです！
次は実際にScrollHintを使用するための方法をみていきましょう。
ScrollHintの使い方
ScrollHintの導入が終わったら、次は使い方を解説していきます。
- HTML
- JavaScript
の順番で説明していきますね。
使い方1. HTML
まずはdivタグを作成し、js-scrollableというクラスを付与します。
この時のクラス名は何でもいいのですが、JavaScriptのコードと合わせる必要があります。
<div class="js-scrollable">
<!-- ここに横スクロールが発生する要素を入れる -->
</div>このdivの中に、横スクロールさせる要素を入れてください。
<div class="js-scrollable">
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum dolor sit.</td>
<td>Lorem ipsum dolor sit.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.</td>
</tr>
</tbody>
</table>
</div>ここではtableタグを入れてみました。
これでHTMLの記述は終わりです！
まとめると、以下の手順になりますね。
divタグにjs-scrollableクラスをつける- ①の
divの中に横スクロールさせる要素を入れる
使い方2. JavaScript
JavaScriptでは、以下の記述をします。
new ScrollHint('.js-scrollable');js-scrollableの部分は、HTMLで指定したクラス名と同じにしてください。
npmやyarnでインストールした場合は、使用するbundleツールに合わせて以下の記述を追加します。
const ScrollHint = require('scroll-hint');
new ScrollHint('.js-scrollable');import ScrollHint from 'scroll-hint';
new ScrollHint('.js-scrollable');これで、横スクロールが発生する要素にヒントが表示されるようになりました！
【実装コード付き】ScrollHintを実際に使用したDEMO
ここでは、ScrollHintで何ができるかを確認してもらうためのDEMOをいくつか用意しました。
他にもカスタマイズできる項目はありますが、よく使えそうな4つを紹介します。
DEMO1. オプションなし
| 列1 | 列2 | 列3 |
|---|---|---|
| サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキストサンプルテキスト |
| サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキストサンプルテキスト |
| サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキストサンプルテキスト |
| サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキストサンプルテキスト |
new ScrollHint('.js-scrollable');まずはオプション指定なしのDEMOです。
シンプルですがそのままでも充分使えそうですね。
DEMO2. テキストを変更
| 列1 | 列2 | 列3 |
|---|---|---|
| サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキストサンプルテキスト |
| サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキストサンプルテキスト |
| サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキストサンプルテキスト |
| サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキストサンプルテキスト |
new ScrollHint('.js-scrollable', {
i18n: {
scrollable: 'スクロールできます'
}
});続いては、ヒント内の文字を変更したDEMOです。
デフォルトのテキストは英語でScrollableとなっていますが、日本語のサイトだと日本語を使用したいですよね。
そういう場合は、このオプションをつけることでテキストを変更できます。
DEMO3. 影をつける
| 列1 | 列2 | 列3 |
|---|---|---|
| サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキストサンプルテキスト |
| サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキストサンプルテキスト |
| サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキストサンプルテキスト |
| サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキストサンプルテキスト |
new ScrollHint('.js-scrollable', {
suggestiveShadow: true
});suggestiveShadowをtrueにすることで、横スクロール部分に影をつけることができます。
テーブルの端に黒い影がついているのが確認できますね。
DEMO4. ヒントを白にする
| 列1 | 列2 | 列3 |
|---|---|---|
| サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキストサンプルテキスト |
| サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキストサンプルテキスト |
| サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキストサンプルテキスト |
| サンプルテキストサンプルテキスト | サンプルテキストサンプルテキスト | サンプルテキストサンプルテキストサンプルテキスト |
new ScrollHint('.js-scrollable', {
scrollHintIconAppendClass: 'scroll-hint-icon-white'
});このオプションを指定することで、ヒントを白色にすることができます。
横スクロールが発生する要素の色が暗めの場合は、このオプションを設定するとヒントが見やすくなるのでいいですね。
ScrollHintに設定できるオプション一覧
ScrollHintに用意されているオプションの一覧です。
| 名前 | デフォルト値 | 説明 |
|---|---|---|
| remainingTime | -1 | 一定時間が経ったらアイコンを非表示にする。 |
| scrollHintBorderWidth | 10 | シャドーが有効場合のシャドーの幅を指定。 |
| enableOverflowScrolling | true | iOSの場合にスムーズなスクロールになるようにCSSのプロパティを追加。 |
| suggestiveShadow | false | 要素がスクロール可能の場合、アイコンの他にシャドーも表示する。 |
| applyToParents | false | 指定されたセレクターの親要素に対してJavaScriptを実行する。 |
| i18n.scrollable | scrollable | スクロールのメッセージを変更。 |
| scrollHintIconAppendClass | ‘scroll-hint-icon-white’ | ヒントを白色にする。 |
英語版の公式ページでこれら以外のオプションも紹介されているので、気になる方はそちらもチェックしてみてください。
ただ基本的には、この記事のDEMOの部分で紹介したオプションで充分かと思います。
【まとめ】横スクロールが発生するページにはScrollHintを導入しよう
横スクロールできる要素にヒントを表示するJSライブラリ「ScrollHint」の紹介でした。
すごく簡単に使えるかつ軽量なので、ページ内に横スクロールが発生する要素がある場合は是非導入してみてください！
コメント