ScrollHintではみ出た表テーブルに、ヒント表示する方法

WEBデザイン

「要素からはみ出した表テーブルに、スクロールできるよ!ってヒントを表示する方法ってないんですか?」って疑問を、解決していきます。

DIV 要素からはみ出た表テーブルは、CSS の「overflow プロパティ」で横スクロールさせることができます(参考記事:スマホでHTMLの表テーブルを横スクロールする方法【簡単】)。ですが、読者がパッとサイトを見たときに表示が途中で切れてしまい...「デザインが崩れているのかな?」と勘違いしてしまう可能性があります。

ご安心してください。解決策があります。それが、Javascript ライブラリの「ScrollHint」なんです。要素からはみ出た表テーブルなど、ポインタアイコンでスクロール可能なことをヒントとして案内してくれるんですよ。この記事では、初心者でも導入できるように「どこで?何を?どうやって?」導入すればいいのか3つのステップで説明していきます。

というわけで今回は、ScrollHint ではみ出た表テーブルに、ヒント表示する方法について解説します。

ScrollHint ではみ出た表テーブルに、ヒント表示する導入方法【3ステップ】

今回のゴール地点・サンプル
ヘッダヘッダヘッダヘッダヘッダヘッダヘッダ
1テキストテキストテキストテキストテキストテキスト
2テキストテキストテキストテキストテキストテキスト
3テキストテキストテキストテキストテキストテキスト

ScrollHint ではみ出た表テーブルに、ヒント表示する方法について解説します。

ScrollHint は、無料で使える Javascript ライブラリです。2021年5月21日時点で、ライセンスは「MITライセンス」となっており「商用利用・ 変形・分布・私的使用」が大丈夫となっておりました。詳しくは、「scroll-hint/LICENSE at master · appleple/scroll-hint · GitHub」をご確認ください。それでは初心者でもわかるように、3つのステップで説明していきます。サクッと、いってみよ〜!


【ステップ1】要素からはみ出る表テーブルを作成する

HTML&CSS
<div class="js-scrollable">
<table>
 <thead>
  <tr><th>ヘッダ</th><th>ヘッダ</th><th>ヘッダ</th><th>ヘッダ</th><th>ヘッダ</th><th>ヘッダ</th><th>ヘッダ</th></tr>
 </thead>
 <tbody>
  <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>

<style type="text/css">
.js-scrollable {overflow: auto;}
table {table-layout: fixed;}
th {width: 150px; height: 70px;}
.p-entry__body td, .p-entry__body th, table {background: #fff0 !important;}
.scroll-hint-icon {height: 100px !important;}
</style>

ステップ1は、要素からはみ出る表テーブルを作成しましょう。

実際に HTML と CSS で、DIV 要素からはみ出る表テーブルをあなたの記事内やサイトに表示させてください。今回は検証として、上記「HTML&CSS」コードをコピー&ペーストしてみましょう。CSS だから特別な作業も必要ありません。HTML でそのまま書くモードに、丸ごとコピペしてください。DIV 要素からはみ出る表テーブルを、あなたの記事やサイトで表示できたらオッケーですね。ここまでで、ステップ1「要素からはみ出る表テーブルを作成する」作業は完了です。

【ステップ2】スタイルシートとスクリプトを読み込む

スタイルシート&スクリプト
<link rel="stylesheet" href="https://unpkg.com/scroll-hint@1.1.2/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@1.1.2/js/scroll-hint.js"></script>

ステップ2は、スタイルシートとスクリプトを読み込みましょう。

<head></head> 内に上記のスタイルシート&スクリプトをコピー&ペーストすることで、ScrollHint を使用できるようになりますよ。ちなみに JavaScript は head 内でも Body 内どこでも大丈夫です。WordPress のテキストモードのように HTML タグを入力できる場合には、記事をいているそのページに、そのまま貼り付ければオッケーです。実際に筆者は、MarsEdit4 というブログエディタで、この記事文章の途中にコードを書き込んでいます。コピペが済んだら、準備は万端です。ここまでで、ステップ1「スタイルシートとスクリプトを読み込む」作業は完了です。

【ステップ3】ScrollHint のスクリプトを実行する

スクリプト
<script>
new ScrollHint('.js-scrollable', {
  i18n: {
    scrollable: 'スクロールOK'
  }
});
</script>

ステップ3は、ScrollHint のスクリプトを実行しましょう。

このスクリプトは、DIV 要素からはみ出た表テーブルの上に表示されるヒントを、どのように表示させるのか?という指示のことですね。難しいことは抜きにして、上記のスクリプトコードをコピー&ペーストしてください。貼り付ける場所は、<head></head> 内でも大丈夫ですし、記事内にそのまま記述しても大丈夫ですよ。ポイントとしては、scrollable 内のテキストを変えることで、ユーザーの目に入る案内がかわりますので適宜変更してみてください。ここまでで、ステップ3「ScrollHint のスクリプトを実行する」の作業およびScrollHintではみ出た表テーブルに、ヒント表示する方法の解説は終了です。

ScrollHint の CSS カスタマイズ方法

ScrollHint の CSS カスタマイズ方法について、解説します。

ScrollHint は Javascript なので、導入時点では HTML に表示が現れないためカスタマイズしようと思うととっつきにくいですよね?実は、ScrollHint の開発ページや GitHub でどのように CSS が適用されているのか閲覧することができます。これは、ステップ1で読み込んでいるスタイルシートのことですね。なので、スタイルシートを読み込まずに CSS だけ適用することも可能ですよね!

【参考】fix shadow invisible bug when using ios · appleple/scroll-hint@c38313e · GitHub

「日本語でなんとかならないかなぁ〜?」と悩んでいるあなたに、朗報です。ScrollHint の日本語 CSS ジェネレーターがあります。必要事項に入力するだけで、カスタマイズされた CSS を作成してくれるサービスがあるんです。無料で活用できるので、困っていた人はぜひチェックしてみてください↓

【参考】スクロールヒントのアイコンなどをカスタマイズ~スタイルシートCSSジェネレーター~ウェブツールチップ(スマホ横スライドできます)Scrollhint

ScrollHint の場所・位置を変更するには?

位置を変える CSS
.scroll-hint-icon {top: calc(20% - 25px) !important;}

ScrollHint の場所・位置を変更する方法について、解説します。

ScrollHint は初期値ですと、DIV 要素の中央ど真ん中に案内のアニメーションが表示されるようになっています。例えば、20行ほどある表テーブルだと、ヒントが出てくるのが結構下までスクロールしないといけません。そこで操作する CSS クラス名が「.scroll-hint-icon」です。デフォルトだと「top: calc(50% - 25px)」となっており、計算して常に真ん中に出力されるようになっています。そこを important で力技で上に移動しちゃうのが初心者には簡単かもしれませんね。ただテーブルが縦に40個ほど並べて、スクロール案内の位置を変更するとうまく動作できていないので、現在解決策を検証している最中です。詳しいことが判明次第追記していきますので、お楽しみに!

ScrollHint を実装してみた結果...

ScrollHint カスタマイズ例
ヘッダヘッダヘッダヘッダヘッダヘッダヘッダ
1テキストテキストテキストテキストテキストテキスト
2テキストテキストテキストテキストテキストテキスト
3テキストテキストテキストテキストテキストテキスト
変更したスクリプト内容

<script>
new ScrollHint('#hint', {
  suggestiveShadow: true,
  enableOverflowScrolling: true,
  remainingTime: 5000,
  i18n: {
    scrollable: 'スクロール可能'
  }
});
</script>

※ DIV 要素に ID 名に変更。ドット(.)がシャープ(#)に。

ScrollHint を実装してみたところ、素晴らしいの1言でした。

これほど軽くてユーザビリティをあげてくれる jQuery ライブラリなら、もっと早く導入すべきでしたね。カスタマイズすることで、影を表示させたり、スクロールのポップ出現場所を移動させることも可能です。詳しいことは、ScrollHint の開発ページに、カスタマイズオプションの説明がありますので参考にしてみてください↓

【参考】ScrollHint - サイト appleple.github

さらに当メディアでは、具体的に ScrollHint を用いて実用例をご紹介しています。その1つが、音声配信コンテンツの過去回をまとめたページです。パソコンだけではなく、スマートフォンでもスクロールすることを案内するのに「ScrollHint」が大活躍してくれます。ScrollHint の実用例が気になった人は、こちらの記事をチェックしてみてください。スマートフォンの場合に表示されるようにチューニングしていますよ↓

【関連】サウンドテック・ラボRADIO過去配信回【まとめ】

まとめ

ScrollHintではみ出た表テーブルに、ヒント表示する方法3ステップまとめ

※ 全体の流れがわかったら、ステップ1から挑戦してみましょう。リンクをクリックで、記事の上部に移動できます。ぜひご利用ください。

ScrollHintではみ出た表テーブルに、ヒント表示する方法について、解説させていただきました。

ScrollHint を導入したことで、大きすぎるテーブルを必要以上に考えることなく使えるようになりますよ。どうしてもデータなど表テーブルを使って表現する必要がある場面ってありますからね。ユーザビリティを下げることなく、情報を伝える1つの手段としてぜひあなたのブログやサイトにも実装してみてはいかがでしょうか?

それじゃあ、今回はこの辺で!? ほかにも、WordPress やブログの WEB デザインについての記事を書いていますので、あわせてこちらの記事もどうぞ↓

【関連】ブログ記事まとめ | サウンドテック・ラボ

サウンドオルビス

5,900,342 views

サウンドテック・ラボ編集長兼ライター。「音楽×テクノロジー」で、あなたの「やってみたい」をお手伝いします。人生にドラマを!!

プロフィール

ピックアップ記事

カテゴリ内の記事