スマホ画面で横長の表や画像を見やすく表示したい。【ScrollHint】

ロッチくん

テーブルで組んだ表や、文字が細かい画像などスマホの画像幅いっぱいで表示するときテーブルの場合表示が崩れたり、画像の場合文字が見えないといったことがあって困るニャ。。

そんな疑問に簡単に答えてくれる便利なJavaScriptライブラリがScrollHintです。

こちらのライブラリを使用すればテーブルの表や大きな画像などを大きさを保ったまま横スクロールにして、スクロールできることをユーザーに知らせるポインターアイコンを表示してくれます。

実際にデモページを見てみましょう。

画面をスマホにした時に、以下のようなアイコンが表示され横スクロールできることをユーザーにお知らせできているかと思います。

最初に
コード
1. HTML
2. CSS
最後に

最初に

まずはCDNでScrollHintを読み込みます。

<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>

ScrollHintのページには<head>タグ内にと書いてありますが、cssは<head>内にjsは</body>の手前でいいと思います。もちろん両方とも自作のcssやjsの上に読み込みましょう。

それでは具体的なコードを見て行きます。

コード

HTML

<div class="wrapper">
    <div class="container">
        <section>
            <div class="section-inner">
                コンテンツ1
            </div>
        </section>
        <section>
            <div class="section-inner">
                コンテンツ2
            </div>
        </section>
        <section id="scroll">
            <div class="section-inner">
                横スクロール可能のコンテンツ
                <div class="js-scrollable">
                    <table>
                        <thead>
                            <tr>
                                <th>見出し1</th>
                                <th>見出し2</th>
                                <th>見出し3</th>
                                <th>見出し4</th>
                                <th>見出し5</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>中身1-1</td>
                                <td>中身1-2</td>
                                <td>中身1-3</td>
                                <td>中身1-4</td>
                                <td>中身1-5</td>
                            </tr>
                            <tr>
                                <td>中身2-1</td>
                                <td>中身2-2</td>
                                <td>中身2-3</td>
                                <td>中身2-4</td>
                                <td>中身2-5</td>
                            </tr>
                            <tr>
                                <td>中身3-1</td>
                                <td>中身3-2</td>
                                <td>中身3-3</td>
                                <td>中身3-4</td>
                                <td>中身3-5</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
    </div>
</div>

CSS

.container {
  max-width: 1000px;
  width: 100%;
  margin: 150px auto;
  padding: 0 10px;
}
section {
  width: 100%;
  height: 350px;
  border-radius: 15px;
  background-color: #89eaea;
  margin-bottom: 70px;
  padding: 0 10px;
}
.section-inner {
  max-width: 750px;
  height: 100%;
  margin: 0 auto;
  text-align: center;
}
section:not(#scroll) .section-inner {
  display: flex;
  justify-content: center;
  align-items: center;
}
section#scroll .section-inner {
  padding-top: 45px;
}
section .js-scrollable {
  padding: 25px 0;
}
section .js-scrollable table {
  width: 750px;
  border-collapse:collapse;
  background: #fff;
}
section .js-scrollable table th,
section .js-scrollable table td {
  border: 1px solid #333;
  padding: 15px 0;
  text-align: center;
}
section .js-scrollable table th {
  background: #eee;
}

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

最後に

意外と案件でコーポレートサイトなどを作っていると、特に会社情報やIR情報のテーブルレイアウト部分でこのScrollHintを使うようなケースも多いかともいます。jQuery不要のライブラリですので是非覚えておいて下さい。