- Web制作
カラム数の多い横長のテーブルを横スクロール表示して、スクロールヒントを表示する
目次
はじめに
コンテンツ量の多いテーブルを組む時にどのように表示したらユーザーにとって見やすいのか、特にスマホで見る時は画面の横幅がPCと比べ絶対的に狭いのでテーブルの部分だけ横にスクロールさせるという方法があります。
そんな時に「横スクロールして見てね」というアナウンスを表示させる便利なJavaScriptのライブラリがありますので、これを使用するとよりユーザーフレンドリーなテーブル表示ができます。
デモ
まずはデモをご覧ください。
| カラム1 | カラム2 | カラム3 | カラム4 | カラム5 | カラム6 | カラム7 |
|---|---|---|---|---|---|---|
| 行1 | テキストテキストテキスト | テキストテキストテキスト | テキストテキストテキスト | テキストテキストテキスト | テキストテキストテキスト | テキストテキストテキスト |
| 行2 | テキストテキストテキスト | テキストテキストテキスト | テキストテキストテキスト | テキストテキストテキスト | テキストテキストテキスト | テキストテキストテキスト |
| 行3 | テキストテキストテキスト | テキストテキストテキスト | テキストテキストテキスト | テキストテキストテキスト | テキストテキストテキスト | テキストテキストテキスト |
それでは作成する手順を説明していきます。
必要なファイルをダウンロードして読み込む
まずはライブラリの公式サイトから必要なファイルをダンロードします。
ダウンロード後、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;
}
まとめ
これでスマホでも見やすいテーブルが完成しました。
テーブルの横スクロールは場合によっては逆に見づらくなってしまうケースもありますので、ケースバイケースで使用しましょう。
名古屋の Web 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 120 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。Web制作に関わる情報やワーケーション日記などを執筆しています。
