スマホ版の表リストをどうかにしたい！～ユーザービリティを向上～

4月に半ばになり、桜がもう若葉からそろそろ夏の風物詩に進化していってますね。

外の気温もだんだんと上昇してきましたね…

外に出かけるとほぼマスクをしてる人が多いんですね…

でも、外で外出するときはほぼマスクしていない人が何人か見かけるようになりました。

みんなが、マスクを脱却する日は数年後になるんじゃないかね？

さてと、話題に入りましょう！

スマホ版の表リストをどうかにしたい！～ユーザービリティを向上～

さてと、昨日の問題について、ちゃんと答えられたかな？

今回は、ユーザービリティを向上させる方法を教えますね。

ユーザービリティを向上させるためには、javascriptを入れておくことだけです。

ネットに出回ってる「scroll-hint.js」を使って表リストをスマホやタブレットで表示した時に「横スクロール出来る」ことを表示する方法を伝授しますね。

公式サイト
ScrollHint

まずは公式サイトから「Download」のボタンをクリックしてくださいね。

Downloadが完了しましたら、設定方法を教えますね。

先に、<head>タグの中に、ライブラリを読み込ませます。

<link rel="stylesheet" href="パスを入力してください/css/scroll-hint.css">
<script src="パスを入力してください/js/scroll-hint.min.js"></script>

次に、<table>タグの始めの上に、<div class=”js-scrollable”>を入れます。

最後に、</table>タグの終わりの下に、</div>を入れます。

<div class="js-scrollable">
	<table>
		<thead>
			<tr>
				<th>項目1</th>
				<th>項目2</th>
				<th>項目3</th>
				<th>項目4</th>
			</tr>
		</thead>

		<tbody>
			<tr>
				<td>タイトル1</td>
				<td>テキスト</td>
				<td>テキストテキスト</td>
				<td>テキストテキストテキスト</td>
			</tr>

			<tr>
				<td>タイトル2</td>
				<td>テキストテキスト</td>
				<td>テキストテキストテキスト</td>
				<td>テキストテキストテキストテキスト</td>
			</tr>

			<tr>
				<td>タイトル3</td>
				<td>テキスト</td>
				<td>テキストテキストテキストテキスト</td>
				<td>テキストテキストテキスト</td>
			</tr>
		</tbody>

		<tfoot>
			<tr>
				<td colspan="4">※注脚テキスト注脚テキスト注脚テキスト注脚テキスト</td>
			</tr>
		</tfoot>
	</table>
</div>

ここからは、ライブラリーを起動させるスクリプトを入力しますね。

new ScrollHint('.js-scrollable');

これで設定完了です。

さらに、オプションを記載したいときは、

new ScrollHint('.js-scrollable', {
	scrollHintIconAppendClass: 'scroll-hint-icon-white', // white-icon will appear
	applyToParents: true,
	i18n: {
		scrollable: 'スクロールできます'
	}
});

これでスマホ版の表リストが見やすくなりましたね！

詳しいオプションについては、こちらに記載しております。

ご参考までに。

Options

では、また！